community-rule/tests/e2e/header.responsive.spec.js

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

const breakpoints = [
  { name: "xs", width: 320, height: 700 },
  { name: "sm", width: 360, height: 700 },
  { name: "md", width: 480, height: 700 },
  { name: "lg", width: 640, height: 700 },
  { name: "xl", width: 768, height: 700 },
  { name: "2xl", width: 1024, height: 700 },
  { name: "3xl", width: 1280, height: 700 },
  { name: "4xl", width: 1440, height: 700 },
  { name: "full", width: 1920, height: 700 },
];

for (const bp of breakpoints) {
  test.describe(`Header responsive behavior at ${bp.name} breakpoint`, () => {
    test.beforeEach(async ({ page }) => {
      await page.setViewportSize({ width: bp.width, height: bp.height });
      await page.goto("/");
    });

    test(`header layout at ${bp.name}`, async ({ page }) => {
      const nav = page.getByRole("navigation", { name: /main navigation/i });
      await expect(nav).toBeVisible();

      // Check that header banner is visible
      const header = page.getByRole("banner", {
        name: /home page navigation header/i,
      });
      await expect(header).toBeVisible();
    });

    test(`navigation items visibility at ${bp.name}`, async ({ page }) => {
      // All breakpoints should have navigation items
      await expect(
        page.getByRole("menuitem", { name: /use cases/i }),
      ).toBeVisible();
      await expect(
        page.getByRole("menuitem", { name: /learn/i }),
      ).toBeVisible();
      await expect(
        page.getByRole("menuitem", { name: /about/i }),
      ).toBeVisible();
    });

    test(`authentication elements visibility at ${bp.name}`, async ({
      page,
    }) => {
      // All breakpoints should have login button
      await expect(
        page.getByRole("menuitem", { name: /log in to your account/i }),
      ).toBeVisible();

      // All breakpoints should have create rule button
      await expect(
        page.getByRole("button", {
          name: /create a new rule with avatar decoration/i,
        }),
      ).toBeVisible();
    });

    test.skip(`logo visibility at ${bp.name}`, async ({ page }) => {
      // TODO: Fix logo visibility test - currently all logos are hidden at xs breakpoint
      // Logo should be visible at all breakpoints
      // Look for any visible logo text in the header navigation
      const logos = page
        .getByRole("navigation", { name: /main navigation/i })
        .getByText("CommunityRule");
      const logoCount = await logos.count();

      // At least one logo should be visible
      expect(logoCount).toBeGreaterThan(0);

      // Check that at least one logo is visible (not all are hidden)
      let hasVisibleLogo = false;
      for (let i = 0; i < logoCount; i++) {
        const logo = logos.nth(i);
        if (await logo.isVisible()) {
          hasVisibleLogo = true;
          break;
        }
      }
      expect(hasVisibleLogo).toBe(true);
    });

    // Breakpoint-specific tests
    if (bp.name === "xs") {
      test("xs breakpoint specific behavior", async ({ page }) => {
        // At xs, navigation items should be in the right section
        // (removed data-testid dependency since it doesn't exist)

        // Navigation items should be in the auth section at xs
        const useCasesLink = page.getByRole("menuitem", { name: /use cases/i });
        await expect(useCasesLink).toBeVisible();

        // Login button should be in the auth section
        const loginButton = page.getByRole("menuitem", {
          name: /log in to your account/i,
        });
        await expect(loginButton).toBeVisible();

        // Create rule button should be visible
        const createRuleButton = page.getByRole("button", {
          name: /create a new rule with avatar decoration/i,
        });
        await expect(createRuleButton).toBeVisible();
      });
    }

    if (bp.name === "sm") {
      test("sm breakpoint specific behavior", async ({ page }) => {
        // At sm, navigation items should be visible
        const useCasesLink = page.getByRole("menuitem", { name: /use cases/i });
        await expect(useCasesLink).toBeVisible();

        // Create rule button should be visible
        const createRuleButton = page.getByRole("button", {
          name: /create a new rule with avatar decoration/i,
        });
        await expect(createRuleButton).toBeVisible();
      });
    }

    if (bp.name === "md") {
      test("md breakpoint specific behavior", async ({ page }) => {
        // At md, navigation items should be visible
        const useCasesLink = page.getByRole("menuitem", { name: /use cases/i });
        await expect(useCasesLink).toBeVisible();

        // Login and create rule buttons should be visible
        const loginButton = page.getByRole("menuitem", {
          name: /log in to your account/i,
        });
        await expect(loginButton).toBeVisible();

        const createRuleButton = page.getByRole("button", {
          name: /create a new rule with avatar decoration/i,
        });
        await expect(createRuleButton).toBeVisible();
      });
    }

    if (bp.name === "lg") {
      test("lg breakpoint specific behavior", async ({ page }) => {
        // At lg, navigation items should be visible
        const useCasesLink = page.getByRole("menuitem", { name: /use cases/i });
        await expect(useCasesLink).toBeVisible();

        // Login and create rule buttons should be visible
        const loginButton = page.getByRole("menuitem", {
          name: /log in to your account/i,
        });
        await expect(loginButton).toBeVisible();

        const createRuleButton = page.getByRole("button", {
          name: /create a new rule with avatar decoration/i,
        });
        await expect(createRuleButton).toBeVisible();
      });
    }

    if (bp.name === "xl") {
      test("xl breakpoint specific behavior", async ({ page }) => {
        // At xl, navigation items should be visible
        const useCasesLink = page.getByRole("menuitem", { name: /use cases/i });
        await expect(useCasesLink).toBeVisible();

        // Login and create rule buttons should be visible
        const loginButton = page.getByRole("menuitem", {
          name: /log in to your account/i,
        });
        await expect(loginButton).toBeVisible();

        const createRuleButton = page.getByRole("button", {
          name: /create a new rule with avatar decoration/i,
        });
        await expect(createRuleButton).toBeVisible();
      });
    }
  });
}

// Visual regression tests
test.describe("Header visual regression", () => {
  test("header visual consistency across breakpoints", async ({ page }) => {
    // Test visual consistency at all breakpoints
    for (const bp of breakpoints) {
      await page.setViewportSize({ width: bp.width, height: bp.height });
      await page.goto("/");

      // Wait for layout to stabilize
      await page.waitForTimeout(500);

      // Take a screenshot for visual regression testing
      await expect(page.locator("header").first()).toHaveScreenshot(
        `header-${bp.name}.png`,
      );
    }
  });

  test("header hover states visual consistency", async ({ page }) => {
    // Test hover states at key breakpoints
    const keyBreakpoints = [
      { name: "xs", width: 320, height: 700 },
      { name: "md", width: 768, height: 700 },
      { name: "xl", width: 1280, height: 700 },
    ];

    for (const bp of keyBreakpoints) {
      await page.setViewportSize({ width: bp.width, height: bp.height });
      await page.goto("/");

      // Test hover on navigation items
      const useCasesLink = page.getByRole("menuitem", { name: /use cases/i });
      await useCasesLink.hover();
      await page.waitForTimeout(200);
      await expect(page.locator("header").first()).toHaveScreenshot(
        `header-${bp.name}-hover-nav.png`,
      );

      // Test hover on create rule button
      const createRuleButton = page.getByRole("button", {
        name: /create a new rule with avatar decoration/i,
      });
      await createRuleButton.hover();
      await page.waitForTimeout(200);
      await expect(page.locator("header").first()).toHaveScreenshot(
        `header-${bp.name}-hover-button.png`,
      );
    }
  });

  test("header focus states visual consistency", async ({ page }) => {
    // Test focus states at key breakpoints
    const keyBreakpoints = [
      { name: "xs", width: 320, height: 700 },
      { name: "md", width: 768, height: 700 },
      { name: "xl", width: 1280, height: 700 },
    ];

    for (const bp of keyBreakpoints) {
      await page.setViewportSize({ width: bp.width, height: bp.height });
      await page.goto("/");

      // Test focus on navigation items
      const useCasesLink = page.getByRole("menuitem", { name: /use cases/i });
      await useCasesLink.focus();
      await page.waitForTimeout(200);
      await expect(page.locator("header").first()).toHaveScreenshot(
        `header-${bp.name}-focus-nav.png`,
      );

      // Test focus on create rule button
      const createRuleButton = page.getByRole("button", {
        name: /create a new rule with avatar decoration/i,
      });
      await createRuleButton.focus();
      await page.waitForTimeout(200);
      await expect(page.locator("header").first()).toHaveScreenshot(
        `header-${bp.name}-focus-button.png`,
      );
    }
  });
});

// Additional responsive behavior tests
test.describe("Header responsive behavior", () => {
  test("header maintains proper layout across breakpoints", async ({
    page,
  }) => {
    // Test that header doesn't break at edge cases
    const edgeCases = [
      { width: 320, height: 700 }, // Very small
      { width: 1920, height: 700 }, // Very large
    ];

    for (const viewport of edgeCases) {
      await page.setViewportSize(viewport);
      await page.goto("/");

      const header = page.getByRole("banner", {
        name: /home page navigation header/i,
      });
      await expect(header).toBeVisible();

      const nav = page.getByRole("navigation", { name: /main navigation/i });
      await expect(nav).toBeVisible();
    }
  });

  test("header elements are properly accessible across breakpoints", async ({
    page,
  }) => {
    // Test accessibility at different breakpoints
    for (const bp of breakpoints) {
      await page.setViewportSize({ width: bp.width, height: bp.height });
      await page.goto("/");

      // Check that all interactive elements are accessible
      const interactiveElements = [
        page.getByRole("menuitem", { name: /use cases/i }),
        page.getByRole("menuitem", { name: /learn/i }),
        page.getByRole("menuitem", { name: /about/i }),
        page.getByRole("menuitem", { name: /log in to your account/i }),
        page.getByRole("button", {
          name: /create a new rule with avatar decoration/i,
        }),
      ];

      for (const element of interactiveElements) {
        await expect(element).toBeVisible();
        await expect(element).toBeEnabled();
      }
    }
  });
});