template-saas-frontend-v2/tests/e2e/mlm/mlm.spec.ts

import { test, expect } from '@playwright/test';
import { test as authTest } from '../fixtures/auth.fixture';
import { waitForPageLoad } from '../utils/helpers';

test.describe('MLM Dashboard', () => {
  authTest('should display MLM dashboard', async ({ authenticatedPage: page }) => {
    await page.goto('/dashboard/mlm');
    await waitForPageLoad(page);

    // Should show MLM dashboard
    await expect(page.locator('[data-testid="mlm-dashboard"], .mlm-dashboard, h1:has-text("MLM")')).toBeVisible();
  });

  authTest('should show MLM overview metrics', async ({ authenticatedPage: page }) => {
    await page.goto('/dashboard/mlm');
    await waitForPageLoad(page);

    // Should show key metrics (network size, earnings, rank)
    const metricsContainer = page.locator('[data-testid="mlm-metrics"], .mlm-metrics, .stats-grid');
    if (await metricsContainer.isVisible()) {
      const metricCards = page.locator('[data-testid="metric-card"], .metric-card, .stat-card');
      expect(await metricCards.count()).toBeGreaterThan(0);
    }
  });

  authTest('should have navigation to structures', async ({ authenticatedPage: page }) => {
    await page.goto('/dashboard/mlm');

    const structuresLink = page.locator('a[href*="structures"]');
    if (await structuresLink.isVisible()) {
      await structuresLink.click();
      await expect(page).toHaveURL(/\/mlm\/structures/);
    }
  });

  authTest('should have navigation to my network', async ({ authenticatedPage: page }) => {
    await page.goto('/dashboard/mlm');

    const networkLink = page.locator('a[href*="my-network"]');
    if (await networkLink.isVisible()) {
      await networkLink.click();
      await expect(page).toHaveURL(/\/mlm\/my-network/);
    }
  });

  authTest('should have navigation to earnings', async ({ authenticatedPage: page }) => {
    await page.goto('/dashboard/mlm');

    const earningsLink = page.locator('a[href*="my-earnings"]');
    if (await earningsLink.isVisible()) {
      await earningsLink.click();
      await expect(page).toHaveURL(/\/mlm\/my-earnings/);
    }
  });
});

test.describe('MLM Structures', () => {
  authTest('should display structures list', async ({ authenticatedPage: page }) => {
    await page.goto('/dashboard/mlm/structures');
    await waitForPageLoad(page);

    // Should show structures page
    await expect(page.locator('h1:has-text("Structures"), [data-testid="structures-page"]')).toBeVisible();
  });

  authTest('should show structures table', async ({ authenticatedPage: page }) => {
    await page.goto('/dashboard/mlm/structures');
    await waitForPageLoad(page);

    // Should show table or list
    const table = page.locator('table, [data-testid="structures-table"], [data-testid="structures-list"]');
    await expect(table).toBeVisible();
  });

  authTest('should have create structure button for admin', async ({ adminPage: page }) => {
    await page.goto('/dashboard/mlm/structures');

    // Admin should see create button
    const createButton = page.locator('button:has-text("New Structure"), button:has-text("Create"), [data-testid="create-structure"]');
    // May or may not be visible depending on role
    if (await createButton.isVisible()) {
      await expect(createButton).toBeVisible();
    }
  });

  authTest('should show structure detail on row click', async ({ authenticatedPage: page }) => {
    await page.goto('/dashboard/mlm/structures');
    await waitForPageLoad(page);

    // Click first row if table has data
    const firstRow = page.locator('table tbody tr, [data-testid="structure-row"]').first();
    if (await firstRow.isVisible()) {
      await firstRow.click();
      // Should navigate to detail page
      await expect(page).toHaveURL(/\/mlm\/structures\/.+/);
    }
  });
});

test.describe('MLM Ranks', () => {
  authTest('should display ranks list', async ({ authenticatedPage: page }) => {
    await page.goto('/dashboard/mlm/ranks');
    await waitForPageLoad(page);

    // Should show ranks page
    await expect(page.locator('h1:has-text("Ranks"), [data-testid="ranks-page"]')).toBeVisible();
  });

  authTest('should show ranks table or cards', async ({ authenticatedPage: page }) => {
    await page.goto('/dashboard/mlm/ranks');
    await waitForPageLoad(page);

    // Should show ranks
    const ranksView = page.locator('table, [data-testid="ranks-table"], [data-testid="ranks-grid"], .ranks-grid');
    await expect(ranksView).toBeVisible();
  });

  authTest('should show rank progression', async ({ authenticatedPage: page }) => {
    await page.goto('/dashboard/mlm/ranks');
    await waitForPageLoad(page);

    // Look for progression indicator
    const progressIndicator = page.locator('[data-testid="rank-progress"], .rank-progress, .progress-bar');
    if (await progressIndicator.isVisible()) {
      await expect(progressIndicator).toBeVisible();
    }
  });
});

test.describe('MLM My Network', () => {
  authTest('should display my network page', async ({ authenticatedPage: page }) => {
    await page.goto('/dashboard/mlm/my-network');
    await waitForPageLoad(page);

    // Should show network page
    await expect(page.locator('h1:has-text("Network"), [data-testid="my-network-page"]')).toBeVisible();
  });

  authTest('should show network tree or list', async ({ authenticatedPage: page }) => {
    await page.goto('/dashboard/mlm/my-network');
    await waitForPageLoad(page);

    // Should show tree visualization or list
    const networkView = page.locator('[data-testid="network-tree"], [data-testid="network-list"], .network-tree, table');
    await expect(networkView).toBeVisible();
  });

  authTest('should show network statistics', async ({ authenticatedPage: page }) => {
    await page.goto('/dashboard/mlm/my-network');
    await waitForPageLoad(page);

    // Should show stats (total downline, active members, etc.)
    const stats = page.locator('[data-testid="network-stats"], .network-stats');
    if (await stats.isVisible()) {
      await expect(stats).toBeVisible();
    }
  });

  authTest('should navigate to node detail on click', async ({ authenticatedPage: page }) => {
    await page.goto('/dashboard/mlm/my-network');
    await waitForPageLoad(page);

    // Click on a node if available
    const node = page.locator('[data-testid="network-node"], .network-node, table tbody tr').first();
    if (await node.isVisible()) {
      await node.click();
      // May navigate to node detail or show info
      await page.waitForTimeout(500);
    }
  });
});

test.describe('MLM My Earnings', () => {
  authTest('should display earnings page', async ({ authenticatedPage: page }) => {
    await page.goto('/dashboard/mlm/my-earnings');
    await waitForPageLoad(page);

    // Should show earnings page
    await expect(page.locator('h1:has-text("Earnings"), [data-testid="my-earnings-page"]')).toBeVisible();
  });

  authTest('should show earnings summary', async ({ authenticatedPage: page }) => {
    await page.goto('/dashboard/mlm/my-earnings');
    await waitForPageLoad(page);

    // Should show earnings summary
    const summary = page.locator('[data-testid="earnings-summary"], .earnings-summary, .stats-grid');
    await expect(summary).toBeVisible();
  });

  authTest('should show earnings history', async ({ authenticatedPage: page }) => {
    await page.goto('/dashboard/mlm/my-earnings');
    await waitForPageLoad(page);

    // Should show history table or list
    const history = page.locator('table, [data-testid="earnings-history"], .earnings-history');
    await expect(history).toBeVisible();
  });

  authTest('should filter earnings by period', async ({ authenticatedPage: page }) => {
    await page.goto('/dashboard/mlm/my-earnings');
    await waitForPageLoad(page);

    // Look for period filter
    const periodFilter = page.locator('[data-testid="period-filter"], select[name="period"], input[type="date"]');
    if (await periodFilter.isVisible()) {
      await periodFilter.click();
    }
  });
});

test.describe('MLM - Unauthenticated', () => {
  test('should redirect to login if not authenticated', async ({ page }) => {
    await page.goto('/dashboard/mlm');
    await expect(page).toHaveURL(/\/auth\/login/);
  });

  test('should redirect structures page to login', async ({ page }) => {
    await page.goto('/dashboard/mlm/structures');
    await expect(page).toHaveURL(/\/auth\/login/);
  });

  test('should redirect my-network page to login', async ({ page }) => {
    await page.goto('/dashboard/mlm/my-network');
    await expect(page).toHaveURL(/\/auth\/login/);
  });

  test('should redirect my-earnings page to login', async ({ page }) => {
    await page.goto('/dashboard/mlm/my-earnings');
    await expect(page).toHaveURL(/\/auth\/login/);
  });
});