Skip to content

Commit ca93726

Browse files
chiptuschiptus
authored
feat(tests): add e2e tests (#2)
* feat: create base tests * remove setup data * fix running tests * fix issues with tests * fix(artists): fix tests * fix tests * review comments * try to fix tests * fix(db): fix seed * fix(ci); try to merge tests * fix(ci): merge reports * fix(ci): merge reports - change name of report * fix(artists): show user votes * add claude * fix: e2e tests * feat(ci): show test results in a comment * fix ci * fix ci * fix ci * fix ci * fix ci * fix ci * fix ci * fix ci - add debug log * fix ci - merge multiple * fix ci - correct path * fix ci - merge path with blob * fix ci - save merged report to json
1 parent 186fa6e commit ca93726

File tree

65 files changed

+1676
-521
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

65 files changed

+1676
-521
lines changed

‎.github/workflows/e2e-tests.yml‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
name: E2E Tests
2+
3+
on:
4+
push:
5+
branches: [ main, develop ]
6+
pull_request:
7+
branches: [ main, develop ]
8+
9+
jobs:
10+
test:
11+
timeout-minutes: 60
12+
runs-on: ubuntu-latest
13+
strategy:
14+
fail-fast: false
15+
matrix:
16+
shardIndex: [1, 2, 3, 4]
17+
shardTotal: [4]
18+
# Add shardIndex: [1, 2, 3, 4, 5, 6, 7, 8] and shardTotal: [8] for more shards
19+
20+
steps:
21+
- uses: actions/checkout@v4
22+
23+
- uses: actions/setup-node@v4
24+
with:
25+
node-version: 18
26+
cache: 'npm'
27+
28+
- name: Install dependencies
29+
run: npm ci
30+
31+
- name: Install Playwright Browsers
32+
run: npx playwright install --with-deps
33+
34+
- name: Setup Supabase
35+
run: |
36+
npx supabase start
37+
sleep 10
38+
npx supabase db reset
39+
40+
41+
- name: Build project
42+
run: npm run build
43+
44+
- name: Run Playwright tests
45+
# PLAYWRIGHT_JSON_OUTPUT_NAME=json-report-${{ matrix.shardIndex }}.json
46+
run: npx playwright test --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }} --reporter=blob,json
47+
env:
48+
TEST_SUPABASE_URL: http://localhost:54321
49+
TEST_SUPABASE_ANON_KEY: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCN9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24iLCJleHAiOjE5ODM4MTI5OTZ9.CRXP1A7WOeoJeXxjNni43kdQwgnWNReilDMblYTn_I0
50+
51+
- uses: actions/upload-artifact@v4
52+
if: ${{ !cancelled() }}
53+
with:
54+
name: blob-report-${{ matrix.shardIndex }}
55+
path: blob-report
56+
retention-days: 1
57+
58+
# - uses: actions/upload-artifact@v4
59+
# if: ${{ !cancelled() }}
60+
# with:
61+
# name: json-report-${{ matrix.shardIndex }}.json
62+
# path: json-report-${{ matrix.shardIndex }}.json
63+
# retention-days: 1
64+
65+
report:
66+
needs: test
67+
runs-on: ubuntu-latest
68+
if: always()
69+
steps:
70+
- uses: actions/checkout@v4
71+
72+
- uses: actions/setup-node@v4
73+
with:
74+
node-version: 18
75+
cache: 'npm'
76+
77+
- name: Install dependencies
78+
run: npm ci
79+
80+
- name: Download blob reports from GitHub Actions Artifacts
81+
uses: actions/download-artifact@v4
82+
with:
83+
path: all-blob-reports
84+
pattern: blob-report-*
85+
merge-multiple: true
86+
87+
# - name: Merge into HTML Report
88+
# run: npx playwright merge-reports --reporter html ./all-blob-reports
89+
90+
# - name: Download JSON reports
91+
# uses: actions/download-artifact@v4
92+
# with:
93+
# path: all-json-reports
94+
# pattern: json-report-*
95+
# merge-multiple: true
96+
97+
# - name: Debug JSON reports directory
98+
# run: |
99+
# echo "=== Contents of all-json-reports ==="
100+
# ls -la all-json-reports/
101+
# echo "=== Recursive listing ==="
102+
# find all-json-reports -type f -name "*.json"
103+
# echo "=== Current working directory ==="
104+
# pwd
105+
# echo "=== Directory structure ==="
106+
# tree all-json-reports || find all-json-reports -type f
107+
108+
- name: Merge JSON reports
109+
run: npx playwright merge-reports --reporter json ./all-blob-reports > ./all-json-reports.json
110+
111+
- name: Generate summary comment
112+
uses: daun/playwright-report-summary@v3
113+
if: always()
114+
with:
115+
report-file: all-json-reports.json
116+
117+
- uses: actions/upload-artifact@v4
118+
with:
119+
name: playwright-report
120+
path: playwright-report/
121+
retention-days: 30

‎.gitignore‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,3 +24,13 @@ dist-ssr
2424
*.sw?
2525

2626
supabase/.temp
27+
28+
# Test artifacts
29+
playwright-report/
30+
test-results/
31+
tests/screenshots/
32+
33+
.env
34+
35+
supabase/.temp
36+
supabase/.branches

‎CLAUDE.md‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
# CLAUDE.md
2+
3+
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
4+
5+
## Essential Commands
6+
7+
### Development
8+
- `npm run dev` - Start development server on port 8080
9+
- `npm run build` - Production build
10+
- `npm run build:dev` - Development build
11+
- `npm run lint` - Run ESLint
12+
- `npm run preview` - Preview production build
13+
14+
### Testing
15+
- `npm run test:e2e` - Run Playwright end-to-end tests
16+
- `npm run test:e2e:ui` - Run tests with Playwright UI
17+
- `npm run test:e2e:headed` - Run tests in headed mode
18+
- `npm run test:e2e:debug` - Debug tests
19+
- `npm run test:e2e:report` - Show test report
20+
- `npm run test:setup` - Setup test environment
21+
- `npm run test:setup:full` - Setup full local Supabase
22+
23+
## Architecture Overview
24+
25+
### Tech Stack
26+
- **Frontend**: React 18 + TypeScript + Vite
27+
- **UI**: shadcn/ui components with Radix UI primitives
28+
- **Styling**: Tailwind CSS with custom design system
29+
- **Database**: Supabase PostgreSQL with Row Level Security
30+
- **State Management**: TanStack Query for server state
31+
- **Authentication**: Supabase Auth (magic links + OTP)
32+
- **Testing**: Playwright for E2E tests
33+
34+
### Project Structure
35+
```
36+
src/
37+
├── components/ # Reusable UI components
38+
│ ├── ui/ # shadcn/ui base components
39+
│ ├── Admin/ # Admin dashboard components
40+
│ ├── ArtistDetail/ # Artist detail page components
41+
│ ├── Index/ # Main page components
42+
│ └── legal/ # Legal pages (privacy, terms)
43+
├── hooks/ # Custom React hooks
44+
│ ├── queries/ # TanStack Query hooks
45+
│ └── useAuth.ts # Authentication logic
46+
├── integrations/
47+
│ └── supabase/ # Supabase client and types
48+
├── lib/ # Utility functions
49+
├── pages/ # Route components
50+
├── services/ # Business logic services
51+
└── types/ # TypeScript type definitions
52+
```
53+
54+
### Core Application Concepts
55+
56+
**VibeTribe** is a collaborative festival voting platform with these key features:
57+
58+
1. **Artist Management**: Core team can add/edit artists with genres, stages, and metadata
59+
2. **Voting System**: Three vote types - "Must Go" (2), "Interested" (1), "Won't Go" (-1)
60+
3. **Group System**: Users can create groups for collaborative decision-making
61+
4. **Real-time Updates**: Live vote counts and artist changes via Supabase subscriptions
62+
5. **Authentication**: Passwordless login with magic links and OTP backup
63+
64+
### Database Schema
65+
- `artists` - Artist information with genres, stages, performance times
66+
- `votes` - User votes linked to artists and groups
67+
- `artist_notes` - Collaborative notes visible to group members
68+
- `groups` - Voting groups with invite system
69+
- `group_members` - Group membership with roles
70+
- `profiles` - Extended user information
71+
72+
### Key Architectural Patterns
73+
74+
1. **Component Architecture**: Functional components with TypeScript, using custom hooks for business logic
75+
2. **State Management**: Server state via TanStack Query, URL state for filters, local state for UI
76+
3. **Real-time Features**: Supabase subscriptions for live updates
77+
4. **Security**: Row Level Security policies, role-based permissions (Anonymous, Authenticated, Group Creator, Core Team)
78+
5. **Offline Support**: PWA configuration with service worker caching
79+
80+
### Development Guidelines
81+
82+
1. **TypeScript**: Full type coverage with generated Supabase types
83+
2. **Styling**: Use Tailwind utilities and existing component patterns
84+
3. **Components**: Follow shadcn/ui patterns for new UI components
85+
4. **Data Fetching**: Use TanStack Query hooks in `hooks/queries/`
86+
5. **Authentication**: Use `useAuth` hook for auth state and actions
87+
6. **Routing**: Add new routes to `App.tsx` above the catch-all "*" route
88+
89+
### Testing Setup
90+
- E2E tests use Playwright with local Supabase instance
91+
- Tests run against port 8080 (development server)
92+
- Test data setup via `scripts/setup-test-env.sh`
93+
- CI/CD runs tests in parallel across multiple browsers
94+
- Detailed testing documentation in `tests/README.md`
95+
96+
### Code Conventions
97+
- ESLint configuration disables unused variable warnings
98+
- React hooks follow standard patterns
99+
- Component files use PascalCase
100+
- Custom hooks use camelCase with "use" prefix
101+
- Services and utilities use camelCase
102+
103+
### Important Notes
104+
- Server runs on port 8080 (not standard 3000)
105+
- Authentication uses magic links primarily, OTP as backup
106+
- All database operations go through Supabase RLS policies
107+
- Group-based permissions affect data visibility
108+
- PWA manifest configured for "UpLine" branding

‎docs/TESTING.md‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
# Testing Setup for Boom Voter
2+
3+
> For step-by-step E2E test instructions, test data, commands, coverage, debugging, troubleshooting, and next steps, see [tests/README.md](../tests/README.md).
4+
5+
## 🎯 What We've Added
6+
7+
### 1. **Playwright E2E Testing**
8+
- **Framework**: Playwright for end-to-end testing
9+
- **Browsers**: Chrome, Firefox, Safari, Mobile Chrome, Mobile Safari
10+
- **Features**: Screenshots, videos, traces, parallel execution
11+
- **Configuration**: `playwright.config.ts`
12+
- **How to run E2E tests, setup test data, and available commands:** See [tests/README.md](../tests/README.md)
13+
14+
### 2. **Local Supabase Testing Environment**
15+
- **Local Database**: Supabase running on Docker
16+
- **Test Data**: Automated setup with sample artists, genres, groups
17+
- **Isolation**: Separate from production environment
18+
- **Scripts**: Easy setup and teardown
19+
20+
### 3. **Test Infrastructure**
21+
- **Test Helpers**: Common utilities for authentication, navigation, etc.
22+
- **Test Data**: Consistent test scenarios
23+
- **Environment Config**: Flexible configuration for different environments
24+
- **CI/CD Integration**: GitHub Actions workflow
25+
26+
27+
## 🚀 Getting Started
28+
29+
For E2E test setup, test data, and available commands, see [tests/README.md](../tests/README.md).
30+
31+
## 🧪 Available Commands
32+
33+
See [tests/README.md](../tests/README.md) for all E2E test commands and usage.
34+
35+
## 🔧 Configuration
36+
37+
For E2E environment variables and test data details, see [tests/README.md](../tests/README.md).
38+
39+
## 🔄 CI/CD Integration
40+
41+
### GitHub Actions Workflow
42+
- **Triggers**: Push to main/develop, PRs
43+
- **Parallel Execution**: 4 shards for faster runs
44+
- **Artifacts**: Test reports, screenshots, videos
45+
- **Environment**: Local Supabase in CI
46+
47+
### Workflow Steps
48+
1. Setup Node.js and dependencies
49+
2. Install Playwright browsers
50+
3. Start local Supabase
51+
4. Populate test data
52+
5. Build application
53+
6. Run tests in parallel
54+
7. Generate and upload reports
55+
56+
## 🗄️ Local Supabase
57+
58+
For local Supabase usage in E2E, see [tests/README.md](../tests/README.md).
59+
60+
## 📚 Resources
61+
62+
- [Supabase Local Development](https://supabase.com/docs/guides/cli/local-development)
63+
- [GitHub Actions Documentation](https://docs.github.com/en/actions)

0 commit comments

Comments
 (0)