140 lines
4.5 KiB
TypeScript
140 lines
4.5 KiB
TypeScript
import { SELECTORS } from "../../fixtures/selectors";
|
|
import { expect, test } from "../../fixtures/test";
|
|
|
|
test.describe("Footer Link Rendering @smoke", () => {
|
|
test.beforeEach(async ({ gotoApp, waitForAppReady }) => {
|
|
await gotoApp();
|
|
await waitForAppReady();
|
|
});
|
|
|
|
test("footer renders GitHub link when configured", async ({ page }) => {
|
|
const githubLink = page.locator(SELECTORS.footer.githubLink);
|
|
|
|
// Check if GitHub link exists (may or may not be present based on config)
|
|
const count = await githubLink.count();
|
|
|
|
if (count > 0) {
|
|
// If present, should be visible and have correct attributes
|
|
await expect(githubLink).toBeVisible();
|
|
await expect(githubLink).toHaveAttribute("href");
|
|
await expect(githubLink).toHaveAttribute("target", "_blank");
|
|
await expect(githubLink).toHaveAttribute("rel", "noopener");
|
|
|
|
// Should link to GitHub
|
|
const href = await githubLink.getAttribute("href");
|
|
expect(href).toContain("github.com");
|
|
}
|
|
});
|
|
|
|
test("footer renders contact email link when configured", async ({
|
|
page,
|
|
}) => {
|
|
const contactLink = page.locator(SELECTORS.footer.contactLink);
|
|
|
|
// Check if contact link exists (may or may not be present based on config)
|
|
const count = await contactLink.count();
|
|
|
|
if (count > 0) {
|
|
// If present, should be visible and have correct attributes
|
|
await expect(contactLink).toBeVisible();
|
|
await expect(contactLink).toHaveAttribute("href");
|
|
|
|
// Should be mailto link
|
|
const href = await contactLink.getAttribute("href");
|
|
expect(href).toMatch(/^mailto:/);
|
|
|
|
// Should have email text
|
|
const text = await contactLink.textContent();
|
|
expect(text).toContain("@");
|
|
}
|
|
});
|
|
|
|
test("footer layout is stable regardless of link configuration", async ({
|
|
page,
|
|
}) => {
|
|
const footer = page.locator(SELECTORS.footer.root);
|
|
|
|
// Footer should always be visible
|
|
await expect(footer).toBeVisible();
|
|
|
|
// Footer should have consistent structure
|
|
const poweredBy = footer.locator(SELECTORS.footer.poweredBy);
|
|
await expect(poweredBy).toBeVisible();
|
|
|
|
const termsLink = footer.locator(SELECTORS.footer.termsLink);
|
|
await expect(termsLink).toBeVisible();
|
|
|
|
const attributionLink = footer.locator(SELECTORS.footer.attributionLink);
|
|
await expect(attributionLink).toBeVisible();
|
|
|
|
const copyright = footer.locator("text=All rights reserved");
|
|
await expect(copyright).toBeVisible();
|
|
});
|
|
|
|
test("footer links are interactive", async ({ page }) => {
|
|
// Terms link should open modal
|
|
const termsLink = page.locator(SELECTORS.footer.termsLink);
|
|
await termsLink.click();
|
|
|
|
const termsModal = page.locator(SELECTORS.policyModal.root);
|
|
await expect(termsModal).toBeVisible();
|
|
await expect(
|
|
termsModal.locator(SELECTORS.policyModal.termsTitle),
|
|
).toBeVisible();
|
|
|
|
// Close modal
|
|
await page.keyboard.press("Escape");
|
|
await page.waitForTimeout(500);
|
|
|
|
// Attribution link should open modal
|
|
const attributionLink = page.locator(SELECTORS.footer.attributionLink);
|
|
await attributionLink.click();
|
|
|
|
const attributionModal = page.locator(SELECTORS.policyModal.root);
|
|
await expect(attributionModal).toBeVisible();
|
|
await expect(
|
|
attributionModal.locator(SELECTORS.policyModal.attributionTitle),
|
|
).toBeVisible();
|
|
});
|
|
|
|
test("footer links have proper accessible names", async ({ page }) => {
|
|
// Terms link
|
|
const termsLink = page.locator(SELECTORS.footer.termsLink);
|
|
const termsText = await termsLink.textContent();
|
|
expect(termsText?.toLowerCase()).toContain("terms");
|
|
|
|
// Attribution link
|
|
const attributionLink = page.locator(SELECTORS.footer.attributionLink);
|
|
const attributionText = await attributionLink.textContent();
|
|
expect(attributionText?.toLowerCase()).toContain("attribution");
|
|
|
|
// GitHub link (if present)
|
|
const githubLink = page.locator(SELECTORS.footer.githubLink);
|
|
const githubCount = await githubLink.count();
|
|
if (githubCount > 0) {
|
|
const githubText = await githubLink.textContent();
|
|
expect(githubText?.toLowerCase()).toContain("github");
|
|
}
|
|
});
|
|
|
|
test("footer is responsive across viewports", async ({
|
|
page,
|
|
setViewport,
|
|
}) => {
|
|
const viewports = ["mobile", "tablet", "desktop"] as const;
|
|
|
|
for (const viewport of viewports) {
|
|
await setViewport(viewport);
|
|
|
|
const footer = page.locator(SELECTORS.footer.root);
|
|
await expect(footer).toBeVisible();
|
|
|
|
// Footer should not overflow
|
|
const footerBox = await footer.boundingBox();
|
|
const viewportWidth = await page.evaluate(() => window.innerWidth);
|
|
|
|
expect(footerBox!.width).toBeLessThanOrEqual(viewportWidth);
|
|
}
|
|
});
|
|
});
|