test-legal.spec.js

import { test, expect } from '@playwright/test';

test.describe('Legal Disclosure Page Tests', () => {
  test('should access homepage and find footer link', async ({ page }) => {
    await page.goto('http://localhost:3001/');

    // Check homepage loads
    await expect(page).toHaveTitle(/高橋智彦のポートフォリオ/);

    // Check footer legal disclosure link exists
    const footerLink = page.locator('footer a[href="/legal-disclosure"]');
    await expect(footerLink).toBeVisible();
    await expect(footerLink).toContainText(/特定商取引法に基づく表記|通信販売に関する表示事項/);
  });

  test('should navigate to legal disclosure page', async ({ page }) => {
    await page.goto('http://localhost:3001/legal-disclosure');

    // Check page title
    await expect(page).toHaveTitle(/特定商取引法に基づく表記/);

    // Check main heading
    const h1 = page.locator('h1');
    await expect(h1).toBeVisible();
    await expect(h1).toContainText('特定商取引法に基づく表記');
  });

  test('should display all mandatory business information', async ({ page }) => {
    await page.goto('http://localhost:3001/legal-disclosure');

    // Check for mandatory fields
    await expect(page.locator('text=販売業者の名称')).toBeVisible();
    await expect(page.locator('text=高橋智彦')).toBeVisible();
    await expect(page.locator('text=運営統括責任者')).toBeVisible();
    await expect(page.locator('text=メールアドレス')).toBeVisible();
    await expect(page.locator('text=contact@tomohiko.io')).toBeVisible();
  });

  test('should display contact and address information', async ({ page }) => {
    await page.goto('http://localhost:3001/legal-disclosure');

    // Check address section
    await expect(page.locator('text=所在地')).toBeVisible();

    // Check for privacy protection or actual address
    const hasPrivacyNotice = await page.locator('text=請求があったら遅滞なく開示します').count();
    expect(hasPrivacyNotice).toBeGreaterThan(0);

    // Check phone section
    await expect(page.locator('text=電話番号')).toBeVisible();
  });

  test('should display return and exchange policy', async ({ page }) => {
    await page.goto('http://localhost:3001/legal-disclosure');

    await expect(page.locator('text=返品・交換')).toBeVisible();
    await expect(page.locator('text=お客様都合')).toBeVisible();
    await expect(page.locator('text=不備がある場合')).toBeVisible();
  });

  test('should display payment and delivery information', async ({ page }) => {
    await page.goto('http://localhost:3001/legal-disclosure');

    await expect(page.locator('text=引渡時期')).toBeVisible();
    await expect(page.locator('text=決済手段')).toBeVisible();
    await expect(page.locator('text=販売価格')).toBeVisible();
  });

  test('should be responsive on mobile', async ({ page }) => {
    await page.setViewportSize({ width: 375, height: 667 });
    await page.goto('http://localhost:3001/legal-disclosure');

    // Check main content is visible on mobile
    await expect(page.locator('h1')).toBeVisible();

    // Check no horizontal scrolling
    const bodyWidth = await page.evaluate(() => document.body.scrollWidth);
    const viewportWidth = await page.evaluate(() => window.innerWidth);
    expect(bodyWidth).toBeLessThanOrEqual(viewportWidth + 20);
  });

  test('should have proper email link', async ({ page }) => {
    await page.goto('http://localhost:3001/legal-disclosure');

    const emailLink = page.locator('a[href^="mailto:contact@tomohiko.io"]');
    await expect(emailLink).toBeVisible();
    await expect(emailLink).toHaveAttribute('href', 'mailto:contact@tomohiko.io');
  });

  test('should have proper accessibility features', async ({ page }) => {
    await page.goto('http://localhost:3001/legal-disclosure');

    // Check for exactly one h1
    const h1Count = await page.locator('h1').count();
    expect(h1Count).toBe(1);

    // Check for multiple h2 sections
    const h2Count = await page.locator('h2').count();
    expect(h2Count).toBeGreaterThan(3);

    // Check for ARIA label on email link
    const emailLink = page.locator('a[href^="mailto:"]');
    const ariaLabel = await emailLink.getAttribute('aria-label');
    expect(ariaLabel).toBeTruthy();
  });

  test('should display legal compliance notice', async ({ page }) => {
    await page.goto('http://localhost:3001/legal-disclosure');

    // Check for compliance notice in footer
    await expect(page.locator('text=この表記は特定商取引法第11条に基づく表示です')).toBeVisible();
  });

  test('should be accessible via direct production URL', async ({ page }) => {
    // Test for production environment direct access
    // This test documents the issue that needs infrastructure fix
    try {
      await page.goto('https://tomohiko.io/legal-disclosure', { timeout: 10000 });

      // If we reach here, the fix has been applied
      await expect(page).toHaveTitle(/特定商取引法に基づく表記/);
      await expect(page.locator('h1')).toContainText('特定商取引法に基づく表記');
    } catch (error) {
      // Expected to fail until infrastructure fix is applied
      console.log('Direct production access still failing (expected until CloudFront/S3 fix):', error.message);
      // Mark test as expected to fail for now
      test.skip();
    }
  });
});

test.describe('Footer Integration', () => {
  test('should have footer on homepage with legal link', async ({ page }) => {
    await page.goto('http://localhost:3001/');

    // Check footer exists
    const footer = page.locator('footer');
    await expect(footer).toBeVisible();

    // Check legal section in footer
    await expect(footer.locator('text=Legal')).toBeVisible();
    await expect(footer.locator('a[href="/legal-disclosure"]')).toBeVisible();
  });

  test('should navigate from homepage to legal page via footer', async ({ page }) => {
    await page.goto('http://localhost:3001/');

    // Click footer link
    await page.click('footer a[href="/legal-disclosure"]');

    // Verify navigation
    await expect(page).toHaveURL(/.*legal-disclosure/);
    await expect(page.locator('h1')).toContainText('特定商取引法に基づく表記');
  });
});