Added comprehensive test infrastructure to verify session join flow and track sync implementation: Test Configuration: - playwright.chrome.config.ts: Chrome-specific test configuration - playwright.verification.config.ts: Verification test settings Test Documentation: - IMPLEMENTATION_APPROACH.md: TDD approach for trackSync - JAM_UI_TESTING_PLAN.md: Overall testing strategy Test Utilities: - api-interceptor.ts: Intercepts and logs API calls - websocket-monitor.ts: Monitors WebSocket messages - sequence-comparator.ts: Compares API call sequences - test-helpers.ts: Shared test helper functions Test Suites: - e2e/complete-session-flow.spec.ts: Full session flow E2E test - api-verification/*.spec.ts: API call verification tests - websocket-verification/ws-connection.spec.ts: WebSocket tests - capture-session-flow*.spec.ts: Session flow analysis tests Test Fixtures & Results: - fixtures/legacy-sequences/: Recorded API call sequences - test-results/: Test output, comparisons, and analysis These tests were instrumental in debugging the VU meter issue and verifying the trackSync implementation. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com> |
||
|---|---|---|
| .. | ||
| cicd | ||
| cypress | ||
| docs | ||
| public | ||
| src | ||
| test | ||
| tests/helpers | ||
| .browserslistrc | ||
| .env.development | ||
| .env.development.example | ||
| .env.production | ||
| .env.staging | ||
| .eslintrc.json | ||
| .gitignore | ||
| .gitlab-ci.yml | ||
| .nvmrc | ||
| .prettierrc | ||
| .python-version | ||
| CRITICAL_BUG_FIX_JAMCLIENT.md | ||
| README.md | ||
| TDD_IMPLEMENTATION_COMPLETE_SUMMARY.md | ||
| TDD_TRACK_SYNC_PROGRESS.md | ||
| TDD_WIRING_COMPLETE.md | ||
| TRACK_CONFIG_IMPLEMENTATION_PLAN.md | ||
| TRACK_CONFIG_QUESTIONS_ANSWERED.md | ||
| VU_METER_FIX_SUMMARY.md | ||
| VU_METER_INVESTIGATION.md | ||
| cypress.config.js | ||
| cypress.env.json | ||
| gulpfile.js | ||
| package-lock.json | ||
| package.json | ||
| playwright.chrome.config.ts | ||
| playwright.config.ts | ||
| playwright.verification.config.ts | ||
| run-phase-tests.sh | ||
| server.js | ||
README.md
JamKazam new react frontend UI/UX
jam-ui is a react app created using create-react-app utility. to run the app on your development environment you need to cd jam-ui and run npm run start
The changes to the source files are auto-loaded but sometimes you might need to force close it by crtl+c and then start manually.
The application files goes under src and the react components are placed under src/components directory. We have a convention of naming the files using JK prefix in the filename. For example JKMusicSessions.
The routes are defined in jam-ui/src/components/dashboard/JKDashboardMain.js
Running react app
In production this React app is supposed to run on beta.jamkazam.com subdomain which is same origin domain to the production Rails app (www.jamkazam.com). This way we utilize same session based user authentication of Rails web app for authenticating users. (It looks for remember_token session cookie in headers and if it is not availale redirect the user to Rails web app sign in page)
The DOMAIN and PORT running this app is defined in env.production file. This file also has env variables for connecting with Rails app. (When setting up in development you can copy the content of env.development.example in to env.development.local and change them according to your host setup)
HOST=beta.jamkazam.local PORT=4000 REACT_APP_CLIENT_BASE_URL=http://www.jamkazam.local:3000 REACT_APP_API_BASE_URL=http://www.jamkazam.local:3000/api
Subdomains setup (development)
You need 2 host records created for React and and Rails app. For example
127.0.0.1 www.jamkazam.local #for Rails app 127.0.0.1 beta.jamkazam.local #for React app
Installing npm dependencies
cd jam-ui npm install
Running the app
cd jam-ui npm run start
This will open it in a borwser window at http://beta.jamkazam.local:3000. Of course for it to work you also need Rails (web) app and websocket app (websocket-gateway) running.