p19-bug-fixes
This commit is contained in:
250
e2e/tests/capabilities/responsive/sticky.spec.ts
Normal file
250
e2e/tests/capabilities/responsive/sticky.spec.ts
Normal file
@@ -0,0 +1,250 @@
|
||||
import { SELECTORS } from "../../fixtures/selectors";
|
||||
import { expect, test } from "../../fixtures/test";
|
||||
import { getStickyPosition, ViewportSize } from "../../fixtures/viewports";
|
||||
|
||||
test.describe("Sticky Header Behavior @smoke", () => {
|
||||
test.beforeEach(async ({ gotoApp, waitForAppReady }) => {
|
||||
await gotoApp();
|
||||
await waitForAppReady();
|
||||
});
|
||||
|
||||
test("header is sticky on scroll", async ({ page }) => {
|
||||
const header = page.locator(SELECTORS.header.root);
|
||||
|
||||
// Check initial position
|
||||
const initialPosition = await getStickyPosition(
|
||||
page,
|
||||
SELECTORS.header.root,
|
||||
);
|
||||
expect(initialPosition.isSticky).toBe(true);
|
||||
|
||||
// Scroll down
|
||||
await page.evaluate(() => window.scrollTo(0, 500));
|
||||
await page.waitForTimeout(500);
|
||||
|
||||
// Header should still be at top
|
||||
const scrolledPosition = await getStickyPosition(
|
||||
page,
|
||||
SELECTORS.header.root,
|
||||
);
|
||||
expect(scrolledPosition.top).toBeLessThanOrEqual(10); // Allow small offset
|
||||
expect(scrolledPosition.isSticky).toBe(true);
|
||||
});
|
||||
|
||||
test("header shrinks on scroll", async ({ page }) => {
|
||||
const header = page.locator(SELECTORS.header.root);
|
||||
const headerContainer = header.locator("> div");
|
||||
|
||||
// Get initial height
|
||||
const initialHeight = await headerContainer.evaluate(
|
||||
(el) => el.offsetHeight,
|
||||
);
|
||||
|
||||
// Scroll down
|
||||
await page.evaluate(() => window.scrollTo(0, 300));
|
||||
await page.waitForTimeout(500);
|
||||
|
||||
// Get scrolled height
|
||||
const scrolledHeight = await headerContainer.evaluate(
|
||||
(el) => el.offsetHeight,
|
||||
);
|
||||
|
||||
// Header should shrink (or stay same, but not grow)
|
||||
expect(scrolledHeight).toBeLessThanOrEqual(initialHeight);
|
||||
});
|
||||
|
||||
test("header maintains glass effect on scroll", async ({ page }) => {
|
||||
// Scroll down
|
||||
await page.evaluate(() => window.scrollTo(0, 500));
|
||||
await page.waitForTimeout(500);
|
||||
|
||||
// Check header has backdrop blur
|
||||
const hasBlur = await page.evaluate(() => {
|
||||
const header = document.querySelector("header");
|
||||
if (!header) return false;
|
||||
const style = window.getComputedStyle(header);
|
||||
return style.backdropFilter.includes("blur");
|
||||
});
|
||||
|
||||
expect(hasBlur).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
test.describe("Sticky Footer Behavior", () => {
|
||||
test.beforeEach(async ({ gotoApp, waitForAppReady }) => {
|
||||
await gotoApp();
|
||||
await waitForAppReady();
|
||||
});
|
||||
|
||||
test("footer is sticky at bottom", async ({ page }) => {
|
||||
const footer = page.locator(SELECTORS.footer.root);
|
||||
|
||||
// Check footer is visible
|
||||
await expect(footer).toBeVisible();
|
||||
|
||||
// Check footer position
|
||||
const footerBox = await footer.boundingBox();
|
||||
const viewportHeight = await page.evaluate(() => window.innerHeight);
|
||||
|
||||
// Footer should be at bottom of viewport
|
||||
expect(footerBox!.y + footerBox!.height).toBeGreaterThanOrEqual(
|
||||
viewportHeight - 10,
|
||||
);
|
||||
});
|
||||
|
||||
test("footer does not overlap main content", async ({ page }) => {
|
||||
const footer = page.locator(SELECTORS.footer.root);
|
||||
const mainContent = page.locator("main");
|
||||
|
||||
// Get bounding boxes
|
||||
const footerBox = await footer.boundingBox();
|
||||
const mainBox = await mainContent.boundingBox();
|
||||
|
||||
// Main content should have padding at bottom to account for footer
|
||||
const bodyPadding = await page.evaluate(() => {
|
||||
const body = document.body;
|
||||
const style = window.getComputedStyle(body);
|
||||
return parseInt(style.paddingBottom || "0");
|
||||
});
|
||||
|
||||
expect(bodyPadding).toBeGreaterThan(0);
|
||||
});
|
||||
});
|
||||
|
||||
test.describe("Back to Top Behavior @smoke", () => {
|
||||
test.beforeEach(async ({ gotoApp, waitForAppReady }) => {
|
||||
await gotoApp();
|
||||
await waitForAppReady();
|
||||
});
|
||||
|
||||
test("back to top is hidden initially", async ({ page }) => {
|
||||
const backToTop = page.locator(SELECTORS.backToTop.root);
|
||||
|
||||
// Should not be visible at top of page
|
||||
const isVisible = await backToTop.isVisible().catch(() => false);
|
||||
expect(isVisible).toBe(false);
|
||||
});
|
||||
|
||||
test("back to top appears on scroll", async ({ page }) => {
|
||||
// Scroll down
|
||||
await page.evaluate(() => window.scrollTo(0, 800));
|
||||
await page.waitForTimeout(500);
|
||||
|
||||
const backToTop = page.locator(SELECTORS.backToTop.root);
|
||||
|
||||
// Should be visible after scroll
|
||||
await expect(backToTop).toBeVisible();
|
||||
});
|
||||
|
||||
test("back to top scrolls to top when clicked", async ({ page }) => {
|
||||
// Scroll down
|
||||
await page.evaluate(() => window.scrollTo(0, 1000));
|
||||
await page.waitForTimeout(500);
|
||||
|
||||
// Click back to top
|
||||
const backToTop = page.locator(SELECTORS.backToTop.root);
|
||||
await backToTop.click();
|
||||
|
||||
// Wait for scroll animation
|
||||
await page.waitForTimeout(1000);
|
||||
|
||||
// Should be at top
|
||||
const scrollPosition = await page.evaluate(() => window.scrollY);
|
||||
expect(scrollPosition).toBeLessThanOrEqual(50);
|
||||
});
|
||||
|
||||
test("back to top is accessible", async ({ page }) => {
|
||||
// Scroll down to make visible
|
||||
await page.evaluate(() => window.scrollTo(0, 800));
|
||||
await page.waitForTimeout(500);
|
||||
|
||||
const backToTop = page.locator(SELECTORS.backToTop.root);
|
||||
|
||||
// Should have aria-label
|
||||
await expect(backToTop).toHaveAttribute("aria-label");
|
||||
|
||||
// Should be keyboard focusable
|
||||
await backToTop.focus();
|
||||
await expect(backToTop).toBeFocused();
|
||||
});
|
||||
});
|
||||
|
||||
test.describe("Sticky Behavior Across Breakpoints", () => {
|
||||
test("header and footer work on mobile", async ({
|
||||
gotoApp,
|
||||
waitForAppReady,
|
||||
setViewport,
|
||||
page,
|
||||
}) => {
|
||||
await setViewport("mobile");
|
||||
await gotoApp();
|
||||
await waitForAppReady();
|
||||
|
||||
// Check header is sticky
|
||||
const header = page.locator(SELECTORS.header.root);
|
||||
await expect(header).toBeVisible();
|
||||
|
||||
// Scroll down
|
||||
await page.evaluate(() => window.scrollTo(0, 500));
|
||||
await page.waitForTimeout(500);
|
||||
|
||||
// Header should still be visible
|
||||
await expect(header).toBeVisible();
|
||||
|
||||
// Footer should be visible
|
||||
const footer = page.locator(SELECTORS.footer.root);
|
||||
await expect(footer).toBeVisible();
|
||||
});
|
||||
|
||||
test("header and footer work on tablet", async ({
|
||||
gotoApp,
|
||||
waitForAppReady,
|
||||
setViewport,
|
||||
page,
|
||||
}) => {
|
||||
await setViewport("tablet");
|
||||
await gotoApp();
|
||||
await waitForAppReady();
|
||||
|
||||
// Check header is sticky
|
||||
const header = page.locator(SELECTORS.header.root);
|
||||
await expect(header).toBeVisible();
|
||||
|
||||
// Scroll down
|
||||
await page.evaluate(() => window.scrollTo(0, 500));
|
||||
await page.waitForTimeout(500);
|
||||
|
||||
// Header should still be visible
|
||||
await expect(header).toBeVisible();
|
||||
|
||||
// Footer should be visible
|
||||
const footer = page.locator(SELECTORS.footer.root);
|
||||
await expect(footer).toBeVisible();
|
||||
});
|
||||
|
||||
test("header and footer work on desktop", async ({
|
||||
gotoApp,
|
||||
waitForAppReady,
|
||||
setViewport,
|
||||
page,
|
||||
}) => {
|
||||
await setViewport("desktop");
|
||||
await gotoApp();
|
||||
await waitForAppReady();
|
||||
|
||||
// Check header is sticky
|
||||
const header = page.locator(SELECTORS.header.root);
|
||||
await expect(header).toBeVisible();
|
||||
|
||||
// Scroll down
|
||||
await page.evaluate(() => window.scrollTo(0, 500));
|
||||
await page.waitForTimeout(500);
|
||||
|
||||
// Header should still be visible
|
||||
await expect(header).toBeVisible();
|
||||
|
||||
// Footer should be visible
|
||||
const footer = page.locator(SELECTORS.footer.root);
|
||||
await expect(footer).toBeVisible();
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user