Feature/pbi 59 account settings

.github/workflows/ci-cd.yml

@@ -0,0 +1,70 @@
+name: CI/CD Pipeline
+
+on:
+  push:
+    branches: [ main, develop ]
+  pull_request:
+    branches: [ main, develop ]
+
+env:
+  NODE_VERSION: '20'
+  PYTHON_VERSION: '3.11'
+
+jobs:
+  # Run all tests
+  test:
+    name: Run Tests
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      # Frontend tests
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: 'npm'
+          cache-dependency-path: 'apps/web/package-lock.json'
+
+      - name: Install frontend dependencies
+        working-directory: ./apps/web
+        run: npm ci
+
+      - name: Run frontend tests
+        working-directory: ./apps/web
+        run: npm test -- --run
+
+      # Backend tests
+      - name: Setup Python
+        uses: actions/setup-python@v4
+        with:
+          python-version: ${{ env.PYTHON_VERSION }}
+
+      - name: Install backend dependencies
+        working-directory: ./backend
+        run: |
+          python -m pip install --upgrade pip
+          pip install -r requirements.txt
+          pip install -r requirements-dev.txt
+
+      - name: Run backend tests
+        working-directory: ./backend
+        run: pytest
+
+  # Deployment Protection - Block deployment if tests fail
+  # Note: CodeQL analysis runs separately and will block merging if security issues are found
+  deployment-protection:
+    name: Deployment Protection
+    runs-on: ubuntu-latest
+    needs: test
+    if: failure()
+
+    steps:
+      - name: Block deployment on test failure
+        run: |
+          echo "❌ Tests failed - deployment should be blocked"
+          echo "Please fix failing tests before deploying"
+          echo "CodeQL analysis runs separately and will also block merging if security issues are found"
+          exit 1

.gitignore

@@ -48,4 +48,12 @@ docs/
 
 .cursorignore
 sprint-1-assignee-breakdown.txt
-get-issues.ps1
+get-issues.ps1
+
+# Documentation
+docs/
+# Task Completion Reports
+TASK-*.md
+PBI-59-ACCOUNT-SETTINGS-BREAKDOWN.md
+# Supabase Setup Guides
+SUPABASE_*.md

apps/web/TESTING.md

@@ -1,135 +1,139 @@
-# Testing Setup
+# Frontend Testing Guide
 
-This project uses a comprehensive testing framework with both unit tests and end-to-end tests.
+This document explains how to run and write tests for the Vybe frontend application.
 
-## Testing Stack
+## Test Structure
 
-- **Vitest**: Fast unit testing framework with React Testing Library
-- **Playwright**: End-to-end testing for browser automation
-- **React Testing Library**: Component testing utilities
-- **Jest DOM**: Custom matchers for DOM testing
+The frontend uses two testing frameworks:
+- **Vitest** - Unit and component tests
+- **Playwright** - End-to-end (E2E) tests
 
 ## Running Tests
 
-### Unit Tests
-
+### Install Dependencies
 ```bash
-# Run all unit tests
-npm test
-
-# Run tests in watch mode
-npm run test
-
-# Run tests once (CI mode)
-npm run test:run
+npm install
+```
 
-# Open Vitest UI
-npm run test:ui
+### All Tests
+```bash
+npm run test:all
 ```
 
-### End-to-End Tests
+### Unit Tests Only
+```bash
+npm test -- --run
+```
 
+### E2E Tests Only
 ```bash
-# Run Playwright tests
 npm run test:e2e
-
-# Run Playwright tests in headed mode
-npm run test:e2e:headed
-
-# Run Playwright tests in debug mode
-npm run test:e2e:debug
 ```
 
-### All Tests
-
+### Interactive Test UI
 ```bash
-# Run both unit and E2E tests
-npm run test:all
+npm run test:ui
 ```
 
-## Test Structure
+### E2E Tests with Browser
+```bash
+npm run test:e2e:headed
+```
 
-```text
-apps/web/
-├── components/
-│   └── __tests__/           # Component unit tests
-│       ├── Navbar.test.jsx
-│       └── LibraryView.test.jsx
-├── test/
-│   ├── setup.ts             # Test setup configuration
-│   ├── helpers.js            # Test helper utilities
-│   └── utils.test.js        # Utility function tests
-├── tests/
-│   └── e2e/                 # End-to-end tests
-│       └── app.spec.ts
-├── vitest.config.ts         # Vitest configuration
-└── playwright.config.ts     # Playwright configuration
+### Debug E2E Tests
+```bash
+npm run test:e2e:debug
 ```
 
-## Writing Tests
+## Test Files
 
-### Unit Test Guidelines
+### Unit Tests
+- `components/__tests__/` - Component tests
+- `test/` - Utility and helper tests
 
-- Use `describe` and `it` blocks for test organization
-- Import testing utilities from `@testing-library/react`
-- Mock external dependencies using `vi.mock()`
-- Test component rendering, user interactions, and state changes
+### E2E Tests
+- `tests/e2e/` - End-to-end test scenarios
 
-### End-to-End Test Guidelines
+## Writing Tests
 
-- Use Playwright's `test` and `expect` functions
-- Test complete user workflows
-- Verify page navigation and interactions
-- Test responsive design across different viewports
+### Component Tests
+```javascript
+import { render, screen } from '@testing-library/react'
+import { expect, test } from 'vitest'
+import MyComponent from '../MyComponent'
 
-## Configuration
+test('renders component', () => {
+  render(<MyComponent />)
+  expect(screen.getByText('Hello')).toBeInTheDocument()
+})
+```
 
-### Vitest Configuration
+### E2E Tests
+```javascript
+import { test, expect } from '@playwright/test'
 
-- Configured with React plugin and jsdom environment
-- Includes path aliases for `@/` imports
-- Setup file includes Jest DOM matchers and act warning suppression
-- Enhanced ESM compatibility with esbuild configuration
-- CSS processing enabled for component testing
+test('user can sign in', async ({ page }) => {
+  await page.goto('/sign-in')
+  await page.fill('[data-testid="email"]', 'test@example.com')
+  await page.click('[data-testid="sign-in-button"]')
+  await expect(page).toHaveURL('/dashboard')
+})
+```
 
-### Playwright Configuration
+## Test Configuration
 
-- Configured for Chrome, Firefox, and Safari
-- Automatically starts dev server before tests with 2-minute timeout
-- Includes trace collection for debugging
-- Robust error handling with stdout/stderr piping
+### Vitest
+- Configuration: `vitest.config.ts`
+- Test utilities: `test/test-utils.jsx`
+- Setup file: `test/setup.ts`
 
-## Demo Tests Included
+### Playwright
+- Configuration: `playwright.config.ts`
+- Test helpers: `test/helpers.js`
 
-1. **Navbar Component**: Tests brand rendering, navigation links, and active states
-2. **LibraryView Component**: Tests Spotify integration, tab switching, and data loading
-3. **Utility Functions**: Tests time formatting helper functions
-4. **E2E App Flow**: Tests homepage, navigation, and responsive design
+## Best Practices
 
-## Test Results & Performance
+### Component Testing
+- Use `data-testid` attributes for reliable element selection
+- Test user interactions, not implementation details
+- Mock external dependencies
+- Test accessibility with `jest-axe`
 
-- **Unit Tests**: 20 tests passing (comprehensive component and utility coverage)
-- **E2E Tests**: 4 comprehensive tests covering navigation and responsive design
-- **Performance**: Tests run efficiently with proper mocking and act warning suppression
-- **Maintainability**: Centralized test helpers and parameterized test cases
+### E2E Testing
+- Test critical user journeys
+- Use page object pattern for complex flows
+- Keep tests independent and isolated
+- Use meaningful test descriptions
 
-## Best Practices
+## Debugging Tests
 
-- Write tests that focus on user behavior rather than implementation details
-- Use meaningful test descriptions
-- Mock external API calls and dependencies
-- Test both happy paths and error scenarios
-- Keep tests isolated and independent
-- Use data-testid attributes for reliable element selection when needed
-- Leverage test helpers for consistent mock data and selectors
-- Use parameterized tests for comprehensive coverage of utility functions
-
-## Recent Improvements
-
-- ✅ Fixed all markdown linting issues (15 → 0)
-- ✅ Enhanced test configuration with better ESM compatibility
-- ✅ Added act warning suppression for cleaner test output
-- ✅ Improved E2E tests with proper wait states and network idle checks
-- ✅ Created centralized test helpers for better maintainability
-- ✅ Added comprehensive test scripts for different scenarios
-- ✅ Enhanced utility tests with parameterized test cases
+### Unit Tests
+- Use `console.log()` for debugging
+- Run specific tests with `test.only()`
+- Use `test.skip()` to temporarily skip tests
+
+### E2E Tests
+- Use `npm run test:e2e:debug` for step-by-step debugging
+- Take screenshots with `await page.screenshot()`
+- Use `await page.pause()` to pause execution
+
+## CI/CD Integration
+
+Tests run automatically in GitHub Actions:
+- Unit tests run on every push and PR
+- E2E tests run on every push and PR
+- All tests must pass before deployment
+
+## Troubleshooting
+
+### Common Issues
+- **Tests failing**: Check console output for error messages
+- **E2E timeouts**: Increase timeout in `playwright.config.ts`
+- **Component not found**: Verify `data-testid` attributes
+- **Async issues**: Use `await` for async operations
+
+### Getting Help
+- Check test output in terminal
+- Review test configuration files
+- Look at existing test examples
+- Check GitHub Actions logs for CI failures