bdd tests

tests/e2e/bdd/sponsor/README.md

@@ -0,0 +1,99 @@
+# Sponsor BDD E2E Tests
+
+This directory contains BDD (Behavior-Driven Development) E2E tests for the sponsor functionality.
+
+## Test Coverage
+
+The sponsor functionality includes the following user journeys:
+
+### 1. Sponsor Onboarding
+- **sponsor-signup.spec.ts**: Tests sponsor account creation and login
+  - Landing page navigation
+  - Account registration with company details
+  - Login functionality
+  - Form validation
+
+### 2. Sponsor Dashboard
+- **sponsor-dashboard.spec.ts**: Tests the sponsor dashboard view
+  - Dashboard overview and statistics
+  - Navigation to different sponsor sections
+  - Quick actions and metrics display
+
+### 3. Sponsorship Campaigns
+- **sponsor-campaigns.spec.ts**: Tests sponsorship campaign management
+  - Viewing active/pending/approved/rejected sponsorships
+  - Filtering sponsorships by type
+  - Searching sponsorships
+  - Campaign statistics display
+
+### 4. Billing & Payments
+- **sponsor-billing.spec.ts**: Tests billing and payment management
+  - Viewing billing statistics
+  - Managing payment methods
+  - Downloading invoices
+  - Viewing transaction history
+
+### 5. Sponsor Settings
+- **sponsor-settings.spec.ts**: Tests sponsor account settings
+  - Profile management (company info, contact details)
+  - Notification preferences
+  - Privacy settings
+  - Account deletion
+
+### 6. League Sponsorship Discovery
+- **sponsor-leagues.spec.ts**: Tests browsing and discovering leagues
+  - Viewing available leagues for sponsorship
+  - League statistics and metrics
+  - Filtering and searching leagues
+  - Viewing sponsorship opportunities
+
+### 7. League Detail & Sponsorship
+- **sponsor-league-detail.spec.ts**: Tests detailed league view and sponsorship
+  - Viewing league details
+  - Understanding sponsorship slots
+  - Sponsorship pricing information
+  - League statistics
+
+## Testing Philosophy
+
+These tests follow the BDD concept defined in `plans/bdd_testing_concept.md`:
+
+- **Focus on outcomes**: Tests validate final user outcomes, not visual implementation
+- **Gherkin syntax**: Use Given/When/Then comments to describe scenarios
+- **User-centric**: Tests describe what users can see and do
+- **Placeholder structure**: Each test file contains TODO comments indicating what needs to be implemented
+
+## Test Structure
+
+Each test file follows this pattern:
+
+```typescript
+import { test, expect } from '@playwright/test';
+
+test.describe('Feature Name', () => {
+  test.beforeEach(async ({ page }) => {
+    // TODO: Implement authentication and navigation setup
+  });
+
+  test('User can perform action X', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: User performs action X
+    // Given I am a registered sponsor
+    // And I am on the "Page Name" page
+    // When I perform action X
+    // Then I should see outcome Y
+  });
+});
+```
+
+## Running Tests
+
+Run sponsor BDD tests:
+```bash
+npx playwright test tests/e2e/bdd/sponsor/
+```
+
+Run specific test file:
+```bash
+npx playwright test tests/e2e/bdd/sponsor/sponsor-signup.spec.ts
+```

tests/e2e/bdd/sponsor/sponsor-billing.spec.ts

@@ -0,0 +1,226 @@
+/**
+ * BDD E2E Test: Sponsor Billing & Payments
+ * 
+ * Tests the sponsor billing functionality that allows:
+ * - Sponsors to view billing statistics
+ * - Sponsors to manage payment methods
+ * - Sponsors to download invoices
+ * - Sponsors to view transaction history
+ * - Sponsors to see payment status
+ * 
+ * Focus: Final user outcomes - what the sponsor sees and can verify
+ */
+
+import { test, expect } from '@playwright/test';
+
+test.describe('Sponsor Billing & Payments', () => {
+  test.beforeEach(async ({ page }) => {
+    // TODO: Implement authentication setup
+    // - Navigate to sponsor login page
+    // - Enter credentials for a registered sponsor
+    // - Verify successful login
+    // - Navigate to billing page
+  });
+
+  test('Sponsor sees billing overview after navigation', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor views billing overview
+    // Given I am a registered sponsor
+    // When I navigate to the billing page
+    // Then I should see billing statistics
+    // And I should see payment methods
+    // And I should see invoice history
+  });
+
+  test('Sponsor sees billing statistics cards', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor views billing statistics
+    // Given I am on the billing page
+    // When I view the statistics section
+    // Then I should see total spent amount
+    // And I should see pending payments amount
+    // And I should see next payment date
+    // And I should see monthly average spend
+  });
+
+  test('Sponsor sees payment methods list', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor views payment methods
+    // Given I am on the billing page
+    // When I view the payment methods section
+    // Then I should see saved payment methods
+    // And I should see default payment method indicator
+    // And I should see payment method details
+  });
+
+  test('Sponsor can set default payment method', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor sets default payment method
+    // Given I am on the billing page
+    // And I have multiple payment methods
+    // When I click "Set as default" on a payment method
+    // Then the payment method should become default
+    // And I should see confirmation message
+  });
+
+  test('Sponsor sees invoice list', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor views invoice list
+    // Given I am on the billing page
+    // When I view the invoices section
+    // Then I should see invoice cards
+    // And I should see invoice number
+    // And I should see invoice date
+    // And I should see invoice description
+    // And I should see invoice amount
+    // And I should see invoice status
+  });
+
+  test('Sponsor can download invoice', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor downloads invoice
+    // Given I am on the billing page
+    // When I click "Download" on an invoice
+    // Then the invoice should be downloaded
+    // And I should see download confirmation
+  });
+
+  test('Sponsor sees pending invoices highlighted', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor sees pending invoices
+    // Given I am on the billing page
+    // When I view pending invoices
+    // Then I should see pending status badge
+    // And I should see overdue indicator if applicable
+  });
+
+  test('Sponsor sees paid invoices with confirmation', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor sees paid invoices
+    // Given I am on the billing page
+    // When I view paid invoices
+    // Then I should see paid status badge
+    // And I should see payment date
+  });
+
+  test('Sponsor sees overdue invoices with warning', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor sees overdue invoices
+    // Given I am on the billing page
+    // When I view overdue invoices
+    // Then I should see overdue status badge
+    // And I should see warning indicator
+    // And I should see amount due
+  });
+
+  test('Sponsor can filter invoices by status', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor filters invoices
+    // Given I am on the billing page
+    // When I select "All" filter
+    // Then I should see all invoices
+    // When I select "Pending" filter
+    // Then I should see only pending invoices
+    // When I select "Paid" filter
+    // Then I should see only paid invoices
+    // When I select "Overdue" filter
+    // Then I should see only overdue invoices
+  });
+
+  test('Sponsor can search invoices', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor searches invoices
+    // Given I am on the billing page
+    // When I enter a search query
+    // Then I should see matching invoices
+    // And I should see search results count
+  });
+
+  test('Sponsor sees empty state when no invoices exist', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor sees empty state
+    // Given I am on the billing page
+    // And I have no invoices
+    // When I view the billing page
+    // Then I should see an empty state message
+    // And I should see a call-to-action
+  });
+
+  test('Sponsor sees billing loading state', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor sees loading state
+    // Given I am on the billing page
+    // When the billing data is loading
+    // Then I should see a loading indicator
+    // And I should see "Loading billing data..." message
+  });
+
+  test('Sponsor sees billing error state', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor sees error state
+    // Given I am on the billing page
+    // When the billing data fails to load
+    // Then I should see an error message
+    // And I should see a retry button
+  });
+
+  test('Sponsor can retry failed billing load', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor retries billing load
+    // Given I am on the billing page
+    // And the billing data failed to load
+    // When I click "Retry"
+    // Then the billing data should attempt to load again
+    // And I should see the result
+  });
+
+  test('Sponsor can refresh billing data', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor refreshes billing
+    // Given I am on the billing page
+    // When I click the refresh button
+    // Then the billing data should update
+    // And I should see the latest information
+  });
+
+  test('Sponsor sees invoice details', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor views invoice details
+    // Given I am on the billing page
+    // When I click on an invoice
+    // Then I should see detailed invoice information
+    // And I should see line items
+    // And I should see payment details
+  });
+
+  test('Sponsor sees billing navigation menu', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor views navigation menu
+    // Given I am on the billing page
+    // When I view the navigation menu
+    // Then I should see "Billing" option
+    // And I should see "Dashboard" option
+    // And I should see "Campaigns" option
+    // And I should see "Leagues" option
+    // And I should see "Settings" option
+  });
+
+  test('Sponsor can navigate using breadcrumbs', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor uses breadcrumbs
+    // Given I am on the billing page
+    // When I view the breadcrumbs
+    // Then I should see "Home" or "Sponsor"
+    // And I should see "Billing"
+  });
+
+  test('Sponsor sees billing accessibility features', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor sees accessibility features
+    // Given I am on the billing page
+    // When I view the billing page
+    // Then all interactive elements should have proper labels
+    // And navigation should be keyboard accessible
+    // And content should be screen reader friendly
+  });
+});

tests/e2e/bdd/sponsor/sponsor-campaigns.spec.ts

@@ -0,0 +1,243 @@
+/**
+ * BDD E2E Test: Sponsor Campaigns Management
+ * 
+ * Tests the sponsor campaigns functionality that allows:
+ * - Sponsors to view their active/pending/approved/rejected sponsorships
+ * - Sponsors to filter sponsorships by type
+ * - Sponsors to search sponsorships
+ * - Sponsors to view campaign statistics
+ * - Sponsors to manage sponsorship details
+ * 
+ * Focus: Final user outcomes - what the sponsor sees and can verify
+ */
+
+import { test, expect } from '@playwright/test';
+
+test.describe('Sponsor Campaigns Management', () => {
+  test.beforeEach(async ({ page }) => {
+    // TODO: Implement authentication setup
+    // - Navigate to sponsor login page
+    // - Enter credentials for a registered sponsor
+    // - Verify successful login
+    // - Navigate to campaigns page
+  });
+
+  test('Sponsor sees campaigns list after navigation', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor views campaigns list
+    // Given I am a registered sponsor
+    // When I navigate to the campaigns page
+    // Then I should see my sponsorships list
+    // And I should see sponsorship cards
+  });
+
+  test('Sponsor sees campaign statistics', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor views campaign statistics
+    // Given I am on the campaigns page
+    // When I view the statistics section
+    // Then I should see total sponsorships count
+    // And I should see active sponsorships count
+    // And I should see pending sponsorships count
+    // And I should see approved sponsorships count
+    // And I should see rejected sponsorships count
+    // And I should see total investment amount
+    // And I should see total impressions count
+  });
+
+  test('Sponsor can filter sponsorships by type', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor filters sponsorships
+    // Given I am on the campaigns page
+    // When I select "All" filter
+    // Then I should see all sponsorships
+    // When I select "Active" filter
+    // Then I should see only active sponsorships
+    // When I select "Pending" filter
+    // Then I should see only pending sponsorships
+    // When I select "Approved" filter
+    // Then I should see only approved sponsorships
+    // When I select "Rejected" filter
+    // Then I should see only rejected sponsorships
+  });
+
+  test('Sponsor can search sponsorships', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor searches sponsorships
+    // Given I am on the campaigns page
+    // When I enter a search query
+    // Then I should see matching sponsorships
+    // And I should see search results count
+  });
+
+  test('Sponsor sees empty state when no sponsorships exist', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor sees empty state
+    // Given I am on the campaigns page
+    // And I have no sponsorships
+    // When I view the campaigns page
+    // Then I should see an empty state message
+    // And I should see a call-to-action to discover leagues
+  });
+
+  test('Sponsor sees sponsorship card details', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor views sponsorship details
+    // Given I am on the campaigns page
+    // When I view a sponsorship card
+    // Then I should see league name
+    // And I should see sponsorship type
+    // And I should see status badge
+    // And I should see investment amount
+    // And I should see impressions count
+    // And I should see start date
+    // And I should see end date
+  });
+
+  test('Sponsor can view sponsorship details', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor views sponsorship details
+    // Given I am on the campaigns page
+    // When I click on a sponsorship card
+    // Then I should see detailed sponsorship information
+    // And I should see league details
+    // And I should see sponsorship terms
+  });
+
+  test('Sponsor sees active sponsorships highlighted', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor sees active sponsorships
+    // Given I am on the campaigns page
+    // When I view active sponsorships
+    // Then I should see active status badge
+    // And I should see active sponsorships highlighted
+  });
+
+  test('Sponsor sees pending sponsorships with approval status', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor sees pending sponsorships
+    // Given I am on the campaigns page
+    // When I view pending sponsorships
+    // Then I should see pending status badge
+    // And I should see approval status
+  });
+
+  test('Sponsor sees approved sponsorships with confirmation', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor sees approved sponsorships
+    // Given I am on the campaigns page
+    // When I view approved sponsorships
+    // Then I should see approved status badge
+    // And I should see confirmation details
+  });
+
+  test('Sponsor sees rejected sponsorships with reason', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor sees rejected sponsorships
+    // Given I am on the campaigns page
+    // When I view rejected sponsorships
+    // Then I should see rejected status badge
+    // And I should see rejection reason
+  });
+
+  test('Sponsor can clear search filter', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor clears search
+    // Given I am on the campaigns page
+    // And I have entered a search query
+    // When I click the clear search button
+    // Then the search should be cleared
+    // And I should see all sponsorships
+  });
+
+  test('Sponsor sees campaign loading state', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor sees loading state
+    // Given I am on the campaigns page
+    // When the campaigns are loading
+    // Then I should see a loading indicator
+    // And I should see "Loading sponsorships..." message
+  });
+
+  test('Sponsor sees campaign error state', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor sees error state
+    // Given I am on the campaigns page
+    // When the campaigns fail to load
+    // Then I should see an error message
+    // And I should see a retry button
+  });
+
+  test('Sponsor can retry failed campaigns load', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor retries campaigns load
+    // Given I am on the campaigns page
+    // And the campaigns failed to load
+    // When I click "Retry"
+    // Then the campaigns should attempt to load again
+    // And I should see the result
+  });
+
+  test('Sponsor can navigate to league detail from campaign', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor navigates to league detail
+    // Given I am on the campaigns page
+    // When I click on a league name in a sponsorship card
+    // Then I should be redirected to the league detail page
+    // And I should see league information
+  });
+
+  test('Sponsor sees campaign statistics cards', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor views statistics cards
+    // Given I am on the campaigns page
+    // When I view the statistics section
+    // Then I should see total sponsorships card
+    // And I should see active sponsorships card
+    // And I should see pending sponsorships card
+    // And I should see approved sponsorships card
+    // And I should see rejected sponsorships card
+    // And I should see total investment card
+    // And I should see total impressions card
+  });
+
+  test('Sponsor can refresh campaigns data', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor refreshes campaigns
+    // Given I am on the campaigns page
+    // When I click the refresh button
+    // Then the campaigns data should update
+    // And I should see the latest information
+  });
+
+  test('Sponsor sees campaigns navigation menu', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor views navigation menu
+    // Given I am on the campaigns page
+    // When I view the navigation menu
+    // Then I should see "Campaigns" option
+    // And I should see "Dashboard" option
+    // And I should see "Leagues" option
+    // And I should see "Billing" option
+    // And I should see "Settings" option
+  });
+
+  test('Sponsor can navigate using breadcrumbs', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor uses breadcrumbs
+    // Given I am on the campaigns page
+    // When I view the breadcrumbs
+    // Then I should see "Home" or "Sponsor"
+    // And I should see "Campaigns"
+  });
+
+  test('Sponsor sees campaigns accessibility features', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor sees accessibility features
+    // Given I am on the campaigns page
+    // When I view the campaigns page
+    // Then all interactive elements should have proper labels
+    // And navigation should be keyboard accessible
+    // And content should be screen reader friendly
+  });
+});

tests/e2e/bdd/sponsor/sponsor-dashboard.spec.ts

@@ -0,0 +1,207 @@
+/**
+ * BDD E2E Test: Sponsor Dashboard
+ * 
+ * Tests the sponsor dashboard functionality that allows:
+ * - Sponsors to view their dashboard overview
+ * - Sponsors to see key metrics and statistics
+ * - Sponsors to navigate to different sponsor sections
+ * - Sponsors to perform quick actions
+ * 
+ * Focus: Final user outcomes - what the sponsor sees and can verify
+ */
+
+import { test, expect } from '@playwright/test';
+
+test.describe('Sponsor Dashboard', () => {
+  test.beforeEach(async ({ page }) => {
+    // TODO: Implement authentication setup
+    // - Navigate to sponsor login page
+    // - Enter credentials for a registered sponsor
+    // - Verify successful login
+    // - Navigate to dashboard page
+  });
+
+  test('Sponsor sees dashboard overview after login', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor views dashboard
+    // Given I am a registered sponsor
+    // When I log in
+    // Then I should be redirected to the dashboard
+    // And I should see the dashboard overview
+  });
+
+  test('Sponsor sees key metrics on dashboard', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor views dashboard metrics
+    // Given I am on the sponsor dashboard
+    // When I view the dashboard
+    // Then I should see total sponsorships count
+    // And I should see active sponsorships count
+    // And I should see total investment amount
+    // And I should see total impressions count
+  });
+
+  test('Sponsor can navigate to campaigns from dashboard', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor navigates to campaigns
+    // Given I am on the sponsor dashboard
+    // When I click on "Campaigns" or "Sponsorships"
+    // Then I should be redirected to the campaigns page
+    // And I should see my sponsorships list
+  });
+
+  test('Sponsor can navigate to billing from dashboard', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor navigates to billing
+    // Given I am on the sponsor dashboard
+    // When I click on "Billing" or "Payments"
+    // Then I should be redirected to the billing page
+    // And I should see billing statistics
+  });
+
+  test('Sponsor can navigate to settings from dashboard', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor navigates to settings
+    // Given I am on the sponsor dashboard
+    // When I click on "Settings"
+    // Then I should be redirected to the settings page
+    // And I should see profile information
+  });
+
+  test('Sponsor can navigate to leagues from dashboard', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor navigates to leagues
+    // Given I am on the sponsor dashboard
+    // When I click on "Leagues" or "Discover"
+    // Then I should be redirected to the leagues page
+    // And I should see available leagues for sponsorship
+  });
+
+  test('Sponsor sees quick actions on dashboard', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor views quick actions
+    // Given I am on the sponsor dashboard
+    // When I view the dashboard
+    // Then I should see quick action buttons
+    // And I should see "View Campaigns" option
+    // And I should see "Discover Leagues" option
+    // And I should see "Manage Billing" option
+  });
+
+  test('Sponsor sees recent activity on dashboard', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor views recent activity
+    // Given I am on the sponsor dashboard
+    // When I view the recent activity section
+    // Then I should see recent sponsorship updates
+    // And I should see recent billing activity
+    // And I should see recent campaign changes
+  });
+
+  test('Sponsor sees pending actions on dashboard', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor views pending actions
+    // Given I am on the sponsor dashboard
+    // When I view the pending actions section
+    // Then I should see sponsorships awaiting approval
+    // And I should see pending payments
+    // And I should see action items
+  });
+
+  test('Sponsor sees dashboard statistics cards', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor views statistics cards
+    // Given I am on the sponsor dashboard
+    // When I view the statistics section
+    // Then I should see total sponsorships card
+    // And I should see active sponsorships card
+    // And I should see total investment card
+    // And I should see total impressions card
+  });
+
+  test('Sponsor can refresh dashboard data', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor refreshes dashboard
+    // Given I am on the sponsor dashboard
+    // When I click the refresh button
+    // Then the dashboard data should update
+    // And I should see the latest information
+  });
+
+  test('Sponsor sees dashboard loading state', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor sees loading state
+    // Given I am on the sponsor dashboard
+    // When the dashboard is loading
+    // Then I should see a loading indicator
+    // And I should see "Loading dashboard..." message
+  });
+
+  test('Sponsor sees dashboard error state', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor sees error state
+    // Given I am on the sponsor dashboard
+    // When the dashboard fails to load
+    // Then I should see an error message
+    // And I should see a retry button
+  });
+
+  test('Sponsor can retry failed dashboard load', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor retries dashboard load
+    // Given I am on the sponsor dashboard
+    // And the dashboard failed to load
+    // When I click "Retry"
+    // Then the dashboard should attempt to load again
+    // And I should see the result
+  });
+
+  test('Sponsor sees dashboard navigation menu', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor views navigation menu
+    // Given I am on the sponsor dashboard
+    // When I view the navigation menu
+    // Then I should see "Dashboard" option
+    // And I should see "Campaigns" option
+    // And I should see "Leagues" option
+    // And I should see "Billing" option
+    // And I should see "Settings" option
+  });
+
+  test('Sponsor can navigate using breadcrumbs', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor uses breadcrumbs
+    // Given I am on the sponsor dashboard
+    // When I view the breadcrumbs
+    // Then I should see "Home" or "Sponsor"
+    // And I should see "Dashboard"
+  });
+
+  test('Sponsor sees dashboard header with company name', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor sees company name
+    // Given I am on the sponsor dashboard
+    // When I view the dashboard header
+    // Then I should see my company name
+    // And I should see a welcome message
+  });
+
+  test('Sponsor can access help from dashboard', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor accesses help
+    // Given I am on the sponsor dashboard
+    // When I click on "Help" or "Support"
+    // Then I should see help resources
+    // And I should see contact options
+  });
+
+  test('Sponsor sees dashboard accessibility features', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor sees accessibility features
+    // Given I am on the sponsor dashboard
+    // When I view the dashboard
+    // Then all interactive elements should have proper labels
+    // And navigation should be keyboard accessible
+    // And content should be screen reader friendly
+  });
+});

tests/e2e/bdd/sponsor/sponsor-league-detail.spec.ts

@@ -0,0 +1,280 @@
+/**
+ * BDD E2E Test: Sponsor League Detail
+ * 
+ * Tests the sponsor league detail functionality that allows:
+ * - Sponsors to view detailed league information
+ * - Sponsors to understand sponsorship slots and pricing
+ * - Sponsors to see league statistics and metrics
+ * - Sponsors to view league schedule and events
+ * - Sponsors to understand sponsorship benefits
+ * 
+ * Focus: Final user outcomes - what the sponsor sees and can verify
+ */
+
+import { test, expect } from '@playwright/test';
+
+test.describe('Sponsor League Detail', () => {
+  test.beforeEach(async ({ page }) => {
+    // TODO: Implement authentication setup
+    // - Navigate to sponsor login page
+    // - Enter credentials for a registered sponsor
+    // - Verify successful login
+    // - Navigate to leagues page
+    // - Select a specific league to view details
+  });
+
+  test('Sponsor sees league detail page after navigation', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor views league detail
+    // Given I am a registered sponsor
+    // When I navigate to a league detail page
+    // Then I should see detailed league information
+    // And I should see league header
+  });
+
+  test('Sponsor sees league header information', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor views league header
+    // Given I am on a league detail page
+    // When I view the league header
+    // Then I should see league name
+    // And I should see league logo or image
+    // And I should see league description
+    // And I should see league category
+  });
+
+  test('Sponsor sees league statistics', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor views league statistics
+    // Given I am on a league detail page
+    // When I view the statistics section
+    // Then I should see total drivers
+    // And I should see active drivers
+    // And I should see total races
+    // And I should see average race duration
+    // And I should see league popularity score
+  });
+
+  test('Sponsor sees sponsorship slots information', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor views sponsorship slots
+    // Given I am on a league detail page
+    // When I view the sponsorship section
+    // Then I should see main sponsor slot details
+    // And I should see secondary sponsor slots details
+    // And I should see available slots count
+  });
+
+  test('Sponsor sees main sponsor slot details', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor views main slot details
+    // Given I am on a league detail page
+    // When I view the main sponsor slot
+    // Then I should see slot status (available/taken)
+    // And I should see pricing information
+    // And I should see benefits included
+    // And I should see duration options
+  });
+
+  test('Sponsor sees secondary sponsor slot details', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor views secondary slot details
+    // Given I am on a league detail page
+    // When I view the secondary sponsor slots
+    // Then I should see available slots count
+    // And I should see pricing per slot
+    // And I should see benefits included
+    // And I should see slot allocation details
+  });
+
+  test('Sponsor sees sponsorship pricing breakdown', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor views pricing breakdown
+    // Given I am on a league detail page
+    // When I view the pricing section
+    // Then I should see cost per thousand impressions
+    // And I should see estimated total cost
+    // And I should see payment terms
+    // And I should see contract duration
+  });
+
+  test('Sponsor sees sponsorship benefits', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor views sponsorship benefits
+    // Given I am on a league detail page
+    // When I view the benefits section
+    // Then I should see logo placement details
+    // And I should see branding opportunities
+    // And I should see visibility metrics
+    // And I should see engagement opportunities
+  });
+
+  test('Sponsor sees league schedule', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor views league schedule
+    // Given I am on a league detail page
+    // When I view the schedule section
+    // Then I should see upcoming races
+    // And I should see race dates
+    // And I should see race locations
+    // And I should see race types
+  });
+
+  test('Sponsor sees league rules and requirements', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor views league rules
+    // Given I am on a league detail page
+    // When I view the rules section
+    // Then I should see sponsorship requirements
+    // And I should see compliance guidelines
+    // And I should see brand guidelines
+  });
+
+  test('Sponsor can request sponsorship information', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor requests information
+    // Given I am on a league detail page
+    // When I click "Request Information"
+    // Then I should see a contact form
+    // And I should see contact options
+  });
+
+  test('Sponsor can contact league admin', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor contacts admin
+    // Given I am on a league detail page
+    // When I click "Contact Admin"
+    // Then I should see contact information
+    // And I should see email option
+    // And I should see message option
+  });
+
+  test('Sponsor sees league detail loading state', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor sees loading state
+    // Given I am on a league detail page
+    // When the league details are loading
+    // Then I should see a loading indicator
+    // And I should see "Loading league details..." message
+  });
+
+  test('Sponsor sees league detail error state', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor sees error state
+    // Given I am on a league detail page
+    // When the league details fail to load
+    // Then I should see an error message
+    // And I should see a retry button
+  });
+
+  test('Sponsor can retry failed league detail load', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor retries league detail load
+    // Given I am on a league detail page
+    // And the league details failed to load
+    // When I click "Retry"
+    // Then the league details should attempt to load again
+    // And I should see the result
+  });
+
+  test('Sponsor can refresh league detail data', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor refreshes league detail
+    // Given I am on a league detail page
+    // When I click the refresh button
+    // Then the league details should update
+    // And I should see the latest information
+  });
+
+  test('Sponsor can navigate back to leagues list', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor navigates back
+    // Given I am on a league detail page
+    // When I click "Back to Leagues"
+    // Then I should be redirected to the leagues page
+    // And I should see the leagues list
+  });
+
+  test('Sponsor sees league detail navigation menu', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor views navigation menu
+    // Given I am on a league detail page
+    // When I view the navigation menu
+    // Then I should see "Leagues" option
+    // And I should see "Dashboard" option
+    // And I should see "Campaigns" option
+    // And I should see "Billing" option
+    // And I should see "Settings" option
+  });
+
+  test('Sponsor can navigate using breadcrumbs', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor uses breadcrumbs
+    // Given I am on a league detail page
+    // When I view the breadcrumbs
+    // Then I should see "Home" or "Sponsor"
+    // And I should see "Leagues"
+    // And I should see league name
+  });
+
+  test('Sponsor sees league detail accessibility features', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor sees accessibility features
+    // Given I am on a league detail page
+    // When I view the league detail page
+    // Then all interactive elements should have proper labels
+    // And navigation should be keyboard accessible
+    // And content should be screen reader friendly
+  });
+
+  test('Sponsor sees league images and media', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor sees league media
+    // Given I am on a league detail page
+    // When I view the league detail
+    // Then I should see league images
+    // And I should see league videos if available
+    // And media should load correctly
+    // And media should have alt text
+  });
+
+  test('Sponsor sees league sponsors showcase', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor sees current sponsors
+    // Given I am on a league detail page
+    // When I view the sponsors section
+    // Then I should see current league sponsors
+    // And I should see sponsor logos
+    // And I should see sponsor categories
+  });
+
+  test('Sponsor sees league testimonials', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor sees testimonials
+    // Given I am on a league detail page
+    // When I view the testimonials section
+    // Then I should see sponsor testimonials
+    // And I should see success stories
+    // And I should see ROI examples
+  });
+
+  test('Sponsor sees league FAQ', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor views FAQ
+    // Given I am on a league detail page
+    // When I view the FAQ section
+    // Then I should see common questions
+    // And I should see sponsorship process answers
+    // And I should see pricing answers
+  });
+
+  test('Sponsor sees league contact information', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor views contact info
+    // Given I am on a league detail page
+    // When I view the contact section
+    // Then I should see league admin contact
+    // And I should see support contact
+    // And I should see contact methods
+  });
+});

tests/e2e/bdd/sponsor/sponsor-leagues.spec.ts

@@ -0,0 +1,245 @@
+/**
+ * BDD E2E Test: Sponsor Leagues Discovery
+ * 
+ * Tests the sponsor leagues functionality that allows:
+ * - Sponsors to browse available leagues for sponsorship
+ * - Sponsors to view league statistics and metrics
+ * - Sponsors to filter and search leagues
+ * - Sponsors to view sponsorship opportunities
+ * - Sponsors to understand league details
+ * 
+ * Focus: Final user outcomes - what the sponsor sees and can verify
+ */
+
+import { test, expect } from '@playwright/test';
+
+test.describe('Sponsor Leagues Discovery', () => {
+  test.beforeEach(async ({ page }) => {
+    // TODO: Implement authentication setup
+    // - Navigate to sponsor login page
+    // - Enter credentials for a registered sponsor
+    // - Verify successful login
+    // - Navigate to leagues page
+  });
+
+  test('Sponsor sees leagues list after navigation', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor views leagues list
+    // Given I am a registered sponsor
+    // When I navigate to the leagues page
+    // Then I should see available leagues for sponsorship
+    // And I should see league cards
+  });
+
+  test('Sponsor sees leagues statistics', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor views leagues statistics
+    // Given I am on the leagues page
+    // When I view the statistics section
+    // Then I should see total leagues count
+    // And I should see main sponsor slots available
+    // And I should see secondary sponsor slots available
+    // And I should see total drivers count
+    // And I should see average CPM
+  });
+
+  test('Sponsor can filter leagues by availability', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor filters leagues
+    // Given I am on the leagues page
+    // When I select "All" filter
+    // Then I should see all leagues
+    // When I select "Main Slot Available" filter
+    // Then I should see only leagues with main slot available
+    // When I select "Secondary Slot Available" filter
+    // Then I should see only leagues with secondary slots available
+  });
+
+  test('Sponsor can search leagues', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor searches leagues
+    // Given I am on the leagues page
+    // When I enter a search query
+    // Then I should see matching leagues
+    // And I should see search results count
+  });
+
+  test('Sponsor sees empty state when no leagues available', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor sees empty state
+    // Given I am on the leagues page
+    // And no leagues are available
+    // When I view the leagues page
+    // Then I should see an empty state message
+    // And I should see a call-to-action
+  });
+
+  test('Sponsor sees league card details', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor views league details
+    // Given I am on the leagues page
+    // When I view a league card
+    // Then I should see league name
+    // And I should see league description
+    // And I should see main sponsor slot status
+    // And I should see secondary sponsor slots count
+    // And I should see driver count
+    // And I should see CPM (cost per thousand impressions)
+    // And I should see league logo or image
+  });
+
+  test('Sponsor sees main sponsor slot availability', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor sees main slot availability
+    // Given I am on the leagues page
+    // When I view a league card
+    // Then I should see main sponsor slot status
+    // And I should see "Available" or "Taken" indicator
+  });
+
+  test('Sponsor sees secondary sponsor slots availability', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor sees secondary slots availability
+    // Given I am on the leagues page
+    // When I view a league card
+    // Then I should see secondary sponsor slots count
+    // And I should see how many are available
+  });
+
+  test('Sponsor can view league details', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor views league details
+    // Given I am on the leagues page
+    // When I click on a league card
+    // Then I should be redirected to the league detail page
+    // And I should see detailed league information
+  });
+
+  test('Sponsor sees league statistics on card', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor views league statistics
+    // Given I am on the leagues page
+    // When I view a league card
+    // Then I should see driver count
+    // And I should see CPM
+    // And I should see season information
+  });
+
+  test('Sponsor sees league sponsorship pricing', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor views pricing
+    // Given I am on the leagues page
+    // When I view a league card
+    // Then I should see pricing information
+    // And I should see cost per thousand impressions
+    // And I should see estimated total cost
+  });
+
+  test('Sponsor can clear search filter', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor clears search
+    // Given I am on the leagues page
+    // And I have entered a search query
+    // When I click the clear search button
+    // Then the search should be cleared
+    // And I should see all leagues
+  });
+
+  test('Sponsor sees leagues loading state', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor sees loading state
+    // Given I am on the leagues page
+    // When the leagues are loading
+    // Then I should see a loading indicator
+    // And I should see "Loading leagues..." message
+  });
+
+  test('Sponsor sees leagues error state', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor sees error state
+    // Given I am on the leagues page
+    // When the leagues fail to load
+    // Then I should see an error message
+    // And I should see a retry button
+  });
+
+  test('Sponsor can retry failed leagues load', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor retries leagues load
+    // Given I am on the leagues page
+    // And the leagues failed to load
+    // When I click "Retry"
+    // Then the leagues should attempt to load again
+    // And I should see the result
+  });
+
+  test('Sponsor can refresh leagues data', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor refreshes leagues
+    // Given I am on the leagues page
+    // When I click the refresh button
+    // Then the leagues data should update
+    // And I should see the latest information
+  });
+
+  test('Sponsor sees leagues navigation menu', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor views navigation menu
+    // Given I am on the leagues page
+    // When I view the navigation menu
+    // Then I should see "Leagues" option
+    // And I should see "Dashboard" option
+    // And I should see "Campaigns" option
+    // And I should see "Billing" option
+    // And I should see "Settings" option
+  });
+
+  test('Sponsor can navigate using breadcrumbs', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor uses breadcrumbs
+    // Given I am on the leagues page
+    // When I view the breadcrumbs
+    // Then I should see "Home" or "Sponsor"
+    // And I should see "Leagues"
+  });
+
+  test('Sponsor sees league discovery accessibility features', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor sees accessibility features
+    // Given I am on the leagues page
+    // When I view the leagues page
+    // Then all interactive elements should have proper labels
+    // And navigation should be keyboard accessible
+    // And content should be screen reader friendly
+  });
+
+  test('Sponsor sees league cards with images', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor sees league images
+    // Given I am on the leagues page
+    // When I view league cards
+    // Then I should see league logos or images
+    // And images should load correctly
+    // And images should have alt text
+  });
+
+  test('Sponsor sees league categories or tags', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor sees league categories
+    // Given I am on the leagues page
+    // When I view league cards
+    // Then I should see category tags
+    // And I should see skill level indicators
+    // And I should see region information
+  });
+
+  test('Sponsor sees league popularity indicators', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor sees popularity indicators
+    // Given I am on the leagues page
+    // When I view league cards
+    // Then I should see popularity indicators
+    // And I should see engagement metrics
+    // And I should see viewer counts
+  });
+});

tests/e2e/bdd/sponsor/sponsor-settings.spec.ts

@@ -0,0 +1,280 @@
+/**
+ * BDD E2E Test: Sponsor Settings
+ * 
+ * Tests the sponsor settings functionality that allows:
+ * - Sponsors to manage profile information
+ * - Sponsors to update notification preferences
+ * - Sponsors to configure privacy settings
+ * - Sponsors to delete their account
+ * 
+ * Focus: Final user outcomes - what the sponsor sees and can verify
+ */
+
+import { test, expect } from '@playwright/test';
+
+test.describe('Sponsor Settings', () => {
+  test.beforeEach(async ({ page }) => {
+    // TODO: Implement authentication setup
+    // - Navigate to sponsor login page
+    // - Enter credentials for a registered sponsor
+    // - Verify successful login
+    // - Navigate to settings page
+  });
+
+  test('Sponsor sees settings overview after navigation', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor views settings overview
+    // Given I am a registered sponsor
+    // When I navigate to the settings page
+    // Then I should see profile section
+    // And I should see notification preferences
+    // And I should see privacy settings
+  });
+
+  test('Sponsor sees profile information', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor views profile
+    // Given I am on the settings page
+    // When I view the profile section
+    // Then I should see company name
+    // And I should see contact name
+    // And I should see contact email
+    // And I should see contact phone
+    // And I should see website URL
+    // And I should see company description
+    // And I should see industry
+    // And I should see address
+    // And I should see tax ID
+  });
+
+  test('Sponsor can edit profile information', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor edits profile
+    // Given I am on the settings page
+    // When I click "Edit Profile"
+    // And I update company name
+    // And I update contact name
+    // And I update contact email
+    // And I update contact phone
+    // And I update website URL
+    // And I update company description
+    // And I click "Save"
+    // Then the profile should be updated
+    // And I should see a confirmation message
+  });
+
+  test('Sponsor sees profile validation errors', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor sees profile validation errors
+    // Given I am on the settings page
+    // When I try to save with invalid email
+    // Then I should see "Invalid email format" error
+    // When I try to save with invalid phone
+    // Then I should see "Invalid phone format" error
+    // When I try to save with invalid URL
+    // Then I should see "Invalid URL format" error
+  });
+
+  test('Sponsor sees notification preferences', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor views notification preferences
+    // Given I am on the settings page
+    // When I view the notifications section
+    // Then I should see email notification options
+    // And I should see new sponsorships notifications
+    // And I should see weekly report notifications
+    // And I should see race alerts notifications
+    // And I should see payment alerts notifications
+    // And I should see new opportunities notifications
+    // And I should see contract expiry notifications
+  });
+
+  test('Sponsor can toggle notification preferences', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor toggles notifications
+    // Given I am on the settings page
+    // When I toggle "Email new sponsorships"
+    // Then the preference should be updated
+    // And I should see a confirmation message
+    // When I toggle "Email weekly report"
+    // Then the preference should be updated
+    // And I should see a confirmation message
+  });
+
+  test('Sponsor sees privacy settings', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor views privacy settings
+    // Given I am on the settings page
+    // When I view the privacy section
+    // Then I should see public profile option
+    // And I should see show stats option
+    // And I should see show active sponsorships option
+    // And I should see allow direct contact option
+  });
+
+  test('Sponsor can toggle privacy settings', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor toggles privacy settings
+    // Given I am on the settings page
+    // When I toggle "Public profile"
+    // Then the setting should be updated
+    // And I should see a confirmation message
+    // When I toggle "Show stats"
+    // Then the setting should be updated
+    // And I should see a confirmation message
+  });
+
+  test('Sponsor can save all settings', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor saves all settings
+    // Given I am on the settings page
+    // When I update profile information
+    // And I update notification preferences
+    // And I update privacy settings
+    // And I click "Save All"
+    // Then all settings should be saved
+    // And I should see a confirmation message
+  });
+
+  test('Sponsor sees save confirmation', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor sees save confirmation
+    // Given I am on the settings page
+    // When I save settings
+    // Then I should see a success message
+    // And I should see the message disappear after a few seconds
+  });
+
+  test('Sponsor sees save error', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor sees save error
+    // Given I am on the settings page
+    // When I try to save settings
+    // And the save fails
+    // Then I should see an error message
+    // And I should see a retry option
+  });
+
+  test('Sponsor can delete account', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor deletes account
+    // Given I am on the settings page
+    // When I click "Delete Account"
+    // Then I should see a confirmation dialog
+    // And I should see account deletion warning
+    // When I confirm deletion
+    // Then my account should be deleted
+    // And I should be redirected to login page
+  });
+
+  test('Sponsor can cancel account deletion', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor cancels account deletion
+    // Given I am on the settings page
+    // When I click "Delete Account"
+    // And I see the confirmation dialog
+    // When I click "Cancel"
+    // Then the dialog should close
+    // And my account should remain active
+  });
+
+  test('Sponsor sees account deletion warning', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor sees deletion warning
+    // Given I am on the settings page
+    // When I click "Delete Account"
+    // Then I should see warning about data loss
+    // And I should see that action cannot be undone
+    // And I should see what will be deleted
+  });
+
+  test('Sponsor sees settings loading state', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor sees loading state
+    // Given I am on the settings page
+    // When the settings are loading
+    // Then I should see a loading indicator
+    // And I should see "Loading settings..." message
+  });
+
+  test('Sponsor sees settings error state', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor sees error state
+    // Given I am on the settings page
+    // When the settings fail to load
+    // Then I should see an error message
+    // And I should see a retry button
+  });
+
+  test('Sponsor can retry failed settings load', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor retries settings load
+    // Given I am on the settings page
+    // And the settings failed to load
+    // When I click "Retry"
+    // Then the settings should attempt to load again
+    // And I should see the result
+  });
+
+  test('Sponsor can refresh settings data', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor refreshes settings
+    // Given I am on the settings page
+    // When I click the refresh button
+    // Then the settings data should update
+    // And I should see the latest information
+  });
+
+  test('Sponsor sees social links in profile', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor views social links
+    // Given I am on the settings page
+    // When I view the profile section
+    // Then I should see Twitter link
+    // And I should see LinkedIn link
+    // And I should see Instagram link
+  });
+
+  test('Sponsor can update social links', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor updates social links
+    // Given I am on the settings page
+    // When I update Twitter handle
+    // And I update LinkedIn profile
+    // And I update Instagram handle
+    // And I click "Save"
+    // Then the social links should be updated
+    // And I should see a confirmation message
+  });
+
+  test('Sponsor sees settings navigation menu', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor views navigation menu
+    // Given I am on the settings page
+    // When I view the navigation menu
+    // Then I should see "Settings" option
+    // And I should see "Dashboard" option
+    // And I should see "Campaigns" option
+    // And I should see "Leagues" option
+    // And I should see "Billing" option
+  });
+
+  test('Sponsor can navigate using breadcrumbs', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor uses breadcrumbs
+    // Given I am on the settings page
+    // When I view the breadcrumbs
+    // Then I should see "Home" or "Sponsor"
+    // And I should see "Settings"
+  });
+
+  test('Sponsor sees settings accessibility features', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor sees accessibility features
+    // Given I am on the settings page
+    // When I view the settings page
+    // Then all interactive elements should have proper labels
+    // And navigation should be keyboard accessible
+    // And content should be screen reader friendly
+  });
+});

tests/e2e/bdd/sponsor/sponsor-signup.spec.ts

@@ -0,0 +1,220 @@
+/**
+ * BDD E2E Test: Sponsor Signup & Onboarding
+ * 
+ * Tests the sponsor onboarding functionality that allows:
+ * - Prospective sponsors to view sponsorship opportunities
+ * - New sponsors to create accounts
+ * - Existing sponsors to log in
+ * - Form validation and error handling
+ * 
+ * Focus: Final user outcomes - what the sponsor sees and can verify
+ */
+
+import { test, expect } from '@playwright/test';
+
+test.describe('Sponsor Signup & Onboarding', () => {
+  test.beforeEach(async ({ page }) => {
+    // TODO: Implement navigation setup
+    // - Navigate to sponsor signup page
+    // - Verify page loads successfully
+  });
+
+  test('Prospective sponsor views landing page with sponsorship opportunities', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor views landing page
+    // Given I am a prospective sponsor
+    // And I navigate to the sponsor signup page
+    // Then I should see sponsorship opportunity types
+    // And I should see platform statistics
+    // And I should see benefits and features
+    // And I should see call-to-action buttons
+  });
+
+  test('Prospective sponsor can view sponsorship type details', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor explores sponsorship types
+    // Given I am on the sponsor landing page
+    // When I view the sponsorship types section
+    // Then I should see league sponsorship details
+    // And I should see team sponsorship details
+    // And I should see driver sponsorship details
+    // And I should see race sponsorship details
+    // And I should see platform advertising details
+  });
+
+  test('Prospective sponsor can navigate to signup form', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor navigates to signup
+    // Given I am on the sponsor landing page
+    // When I click "Create Sponsor Account"
+    // Then I should see the signup form
+    // And I should see company information fields
+    // And I should see sponsorship interest selection
+  });
+
+  test('Prospective sponsor can navigate to login form', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor navigates to login
+    // Given I am on the sponsor landing page
+    // When I click "Sign In"
+    // Then I should see the login form
+    // And I should see email and password fields
+    // And I should see "Forgot password" option
+  });
+
+  test('New sponsor can create account with valid information', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor creates account
+    // Given I am on the signup form
+    // When I enter valid company name
+    // And I enter valid contact email
+    // And I enter valid website URL
+    // And I select sponsorship interests
+    // And I upload a company logo
+    // And I enter a valid password
+    // And I confirm the password
+    // And I accept terms and conditions
+    // And I acknowledge VAT policy
+    // And I click "Create Sponsor Account"
+    // Then I should be logged in
+    // And I should be redirected to the dashboard
+  });
+
+  test('New sponsor sees validation errors for invalid signup data', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor sees signup validation errors
+    // Given I am on the signup form
+    // When I submit with missing company name
+    // Then I should see "Company name required" error
+    // When I submit with invalid email
+    // Then I should see "Invalid email format" error
+    // When I submit with password too short
+    // Then I should see "Password must be at least 8 characters" error
+    // When I submit with mismatched passwords
+    // Then I should see "Passwords do not match" error
+    // When I submit without accepting terms
+    // Then I should see "You must accept the terms and conditions" error
+  });
+
+  test('New sponsor sees sponsorship interest selection', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor selects sponsorship interests
+    // Given I am on the signup form
+    // When I view sponsorship interests section
+    // Then I should see all sponsorship type options
+    // And I should be able to select multiple interests
+    // And I should see selected interests highlighted
+  });
+
+  test('New sponsor can upload company logo', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor uploads logo
+    // Given I am on the signup form
+    // When I click to upload a logo
+    // And I select a valid image file
+    // Then I should see the logo preview
+    // And I should see file format requirements
+  });
+
+  test('New sponsor sees logo upload requirements', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor sees logo requirements
+    // Given I am on the signup form
+    // When I view the logo upload section
+    // Then I should see supported file formats
+    // And I should see recommended dimensions
+    // And I should see file size limits
+  });
+
+  test('Existing sponsor can log in with valid credentials', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor logs in
+    // Given I am on the login form
+    // When I enter valid email
+    // And I enter valid password
+    // And I click "Sign In"
+    // Then I should be logged in
+    // And I should be redirected to the dashboard
+  });
+
+  test('Existing sponsor sees login error for invalid credentials', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor sees login error
+    // Given I am on the login form
+    // When I enter invalid email
+    // And I enter invalid password
+    // And I click "Sign In"
+    // Then I should see an error message
+    // And I should remain on the login page
+  });
+
+  test('Sponsor can navigate between landing, signup, and login modes', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor navigates between modes
+    // Given I am on the sponsor signup page
+    // When I click "Back to overview"
+    // Then I should see the landing page
+    // When I click "Create Sponsor Account"
+    // Then I should see the signup form
+    // When I click "Sign In"
+    // Then I should see the login form
+  });
+
+  test('Sponsor can switch from login to signup', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor switches to signup
+    // Given I am on the login form
+    // When I click "Create one"
+    // Then I should see the signup form
+  });
+
+  test('Sponsor can switch from signup to login', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor switches to login
+    // Given I am on the signup form
+    // When I click "Sign in"
+    // Then I should see the login form
+  });
+
+  test('Sponsor sees platform statistics on landing page', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor views platform stats
+    // Given I am on the sponsor landing page
+    // When I view the statistics section
+    // Then I should see monthly race views
+    // And I should see active drivers count
+    // And I should see racing leagues count
+    // And I should see average engagement rate
+  });
+
+  test('Sponsor sees benefits section on landing page', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor views benefits
+    // Given I am on the sponsor landing page
+    // When I view the benefits section
+    // Then I should see real visibility benefit
+    // And I should see detailed analytics benefit
+    // And I should see targeted reach benefit
+    // And I should see trusted platform benefit
+    // And I should see engaged community benefit
+    // And I should see growth potential benefit
+  });
+
+  test('Sponsor sees workflow explanation on landing page', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor views workflow
+    // Given I am on the sponsor landing page
+    // When I view the workflow section
+    // Then I should see how sponsorship works
+    // And I should see the process steps
+  });
+
+  test('Sponsor can contact sales from landing page', async ({ page }) => {
+    // TODO: Implement test
+    // Scenario: Sponsor contacts sales
+    // Given I am on the sponsor landing page
+    // When I click "Contact Sales"
+    // Then I should see the email client opened
+    // And I should see the sponsor email address
+  });
+});