diff --git a/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-webkit-darwin.png b/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-webkit-darwin.png index a227d2fa8a..0f83c264ae 100644 Binary files a/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-webkit-darwin.png and b/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-webkit-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-webkit-darwin.png b/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-webkit-darwin.png index 2d6b5b123c..0318a80b4d 100644 Binary files a/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-webkit-darwin.png and b/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-webkit-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js new file mode 100644 index 0000000000..83d784aebd --- /dev/null +++ b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js @@ -0,0 +1,134 @@ +// @ts-check +const { test, expect } = require("@playwright/test"); + +test("Topbar page exist", async ({ page }) => { + await page.goto("http://localhost:3000/"); + await page + .getByRole("link", { + name: "Components Find all currently available components here", + }) + .click(); + await expect(page.getByRole("link", { name: "Topbar" })).toHaveCount( + page.viewportSize().width < 991 ? 1 : 2, + ); + await page.getByText("call_to_actionTopbararrow_forward").click(); + await expect(page).toHaveTitle(/Topbar/); + await expect( + page.getByRole("heading", { name: "Topbar", exact: true, level: 1 }), + ).toBeVisible(); +}); + +const topbarTabs = [ + { + name: "legacy desktop", + btnText: "Desktop", + desktopTopbar: true, + isModalUnexpandedFullScreen: false, + hasModal: false, + isLegacy: true, + }, + { + name: "legacy mobile", + btnText: "Mobile/tablet", + desktopTopbar: false, + isModalUnexpandedFullScreen: false, + hasModal: true, + isLegacy: true, + }, +]; +let brand; + +/** + * + * @param {import("@playwright/test").Page} page Playwright page object + * @param {string} tabBtnText text of the doc preview container tab + */ +const clickDocPreviewTab = async (page, tabBtnText) => { + await page.getByRole("link", { name: tabBtnText, exact: true }).click(); +}; + +test.describe("visual regressions topbar", () => { + test.beforeEach(async ({ page }) => { + await page.goto("http://localhost:3000/components/topbar"); + + brand = (await page.title()).includes("Swedbank") ? "SwedbankPay" : "PayEx"; + }); + + test(`general UI closed`, async ({ page }) => { + for (const topbarTab of topbarTabs) { + clickDocPreviewTab(page, topbarTab.btnText); + + await expect( + page.locator(".component-preview-content > div"), + ).toHaveScreenshot(`${brand}-topbar-${topbarTab.name}-closed.png`); + } + }); + + // for legacy topbar, on mobile we skip since no links are displayed, no nav displayed in topbar, only in modal + test(`hover & active & normal links`, async ({ page }) => { + test.skip((await page.viewportSize().width) < 1200); + + for (const topbarTab of topbarTabs.filter((tab) => tab.desktopTopbar)) { + clickDocPreviewTab(page, topbarTab.btnText); + + await page.locator("#demo-topbar").getByRole("link").nth(2).hover(); + await expect( + page.locator("#demo-topbar").getByRole("navigation"), + ).toHaveScreenshot( + `${brand}-topbar-${topbarTab.name}-links-ui-feedbacks.png`, + ); + } + }); + + test(`general UI modal opened`, async ({ page }) => { + for (const topbarTab of topbarTabs.filter((tab) => tab.hasModal)) { + await page.reload(); + clickDocPreviewTab(page, topbarTab.btnText); + + await page.locator("#demo-topbar").getByLabel("Open menu").click(); + + const modalContainer = topbarTab.isModalUnexpandedFullScreen + ? page.locator("#demo-topbar").getByRole("navigation") + : page.locator(".component-preview-content > div"); + + await expect(modalContainer).toHaveScreenshot( + `${brand}-topbar-${topbarTab.name}-opened.png`, + ); + } + }); + + test(`only pinned links are visible on non-expanded view`, async ({ + page, + }) => { + for (const topbarTab of topbarTabs.filter( + (tab) => tab.desktopTopbar && !tab.isLegacy, + )) { + clickDocPreviewTab(page, topbarTab.btnText); + + // screenshot hover & active & normal links + const pinnedLinks = page + .locator("#demo-topbar") + .getByRole("navigation") + .locator("a.pinned"); + const pinnedLinksAmount = await pinnedLinks.count(); + + for (let linkIndex = 0; linkIndex < pinnedLinksAmount; linkIndex++) { + const loopedLink = pinnedLinks.nth(linkIndex); + + await expect(loopedLink).toBeVisible(); + } + + const nonPinnedLinks = page + .locator("#demo-topbar") + .getByRole("navigation") + .locator("a:not(.pinned)"); + const nonPinnedLinksAmount = await nonPinnedLinks.count(); + + for (let linkIndex = 0; linkIndex < nonPinnedLinksAmount; linkIndex++) { + const loopedLink = nonPinnedLinks.nth(linkIndex); + + await expect(loopedLink).not.toBeVisible(); + } + } + }); +}); diff --git a/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-desktop-closed-Mobile-Chrome-darwin.png b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-desktop-closed-Mobile-Chrome-darwin.png new file mode 100644 index 0000000000..d79833ccf7 Binary files /dev/null and b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-desktop-closed-Mobile-Chrome-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-desktop-closed-Mobile-Safari-darwin.png b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-desktop-closed-Mobile-Safari-darwin.png new file mode 100644 index 0000000000..cfc0d53efd Binary files /dev/null and b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-desktop-closed-Mobile-Safari-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-desktop-closed-chromium-darwin.png b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-desktop-closed-chromium-darwin.png new file mode 100644 index 0000000000..b300d6ec6e Binary files /dev/null and b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-desktop-closed-chromium-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-desktop-closed-firefox-darwin.png b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-desktop-closed-firefox-darwin.png new file mode 100644 index 0000000000..cafb53254a Binary files /dev/null and b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-desktop-closed-firefox-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-desktop-closed-webkit-darwin.png b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-desktop-closed-webkit-darwin.png new file mode 100644 index 0000000000..b1b065fe65 Binary files /dev/null and b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-desktop-closed-webkit-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-desktop-links-ui-feedbacks-chromium-darwin.png b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-desktop-links-ui-feedbacks-chromium-darwin.png new file mode 100644 index 0000000000..13acc46157 Binary files /dev/null and b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-desktop-links-ui-feedbacks-chromium-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-desktop-links-ui-feedbacks-firefox-darwin.png b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-desktop-links-ui-feedbacks-firefox-darwin.png new file mode 100644 index 0000000000..3663c10356 Binary files /dev/null and b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-desktop-links-ui-feedbacks-firefox-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-desktop-links-ui-feedbacks-webkit-darwin.png b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-desktop-links-ui-feedbacks-webkit-darwin.png new file mode 100644 index 0000000000..7ff338436e Binary files /dev/null and b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-desktop-links-ui-feedbacks-webkit-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-closed-Mobile-Chrome-darwin.png b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-closed-Mobile-Chrome-darwin.png new file mode 100644 index 0000000000..d79833ccf7 Binary files /dev/null and b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-closed-Mobile-Chrome-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-closed-Mobile-Safari-darwin.png b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-closed-Mobile-Safari-darwin.png new file mode 100644 index 0000000000..cfc0d53efd Binary files /dev/null and b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-closed-Mobile-Safari-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-closed-chromium-darwin.png b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-closed-chromium-darwin.png new file mode 100644 index 0000000000..213b251316 Binary files /dev/null and b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-closed-chromium-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-closed-firefox-darwin.png b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-closed-firefox-darwin.png new file mode 100644 index 0000000000..9d9457b0ec Binary files /dev/null and b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-closed-firefox-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-closed-webkit-darwin.png b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-closed-webkit-darwin.png new file mode 100644 index 0000000000..6f6b83c964 Binary files /dev/null and b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-closed-webkit-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-opened-Mobile-Chrome-darwin.png b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-opened-Mobile-Chrome-darwin.png new file mode 100644 index 0000000000..82477f207f Binary files /dev/null and b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-opened-Mobile-Chrome-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-opened-Mobile-Safari-darwin.png b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-opened-Mobile-Safari-darwin.png new file mode 100644 index 0000000000..c1f1ad612a Binary files /dev/null and b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-opened-Mobile-Safari-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-opened-chromium-darwin.png b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-opened-chromium-darwin.png new file mode 100644 index 0000000000..1042a25aef Binary files /dev/null and b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-opened-chromium-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-opened-firefox-darwin.png b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-opened-firefox-darwin.png new file mode 100644 index 0000000000..fe9fc39c98 Binary files /dev/null and b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-opened-firefox-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-opened-webkit-darwin.png b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-opened-webkit-darwin.png new file mode 100644 index 0000000000..ab2736b89f Binary files /dev/null and b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-opened-webkit-darwin.png differ diff --git a/src/scripts/main/topbar/topbar.e2e.spec.js b/src/scripts/main/topbar/topbar.e2e.spec.js new file mode 100644 index 0000000000..1c57033bf7 --- /dev/null +++ b/src/scripts/main/topbar/topbar.e2e.spec.js @@ -0,0 +1,169 @@ +// @ts-check +const { test, expect } = require("@playwright/test"); + +test.describe(`legacy-topbar script behave correctly`, () => { + test(`topbar opens`, async ({ page }) => { + await page.goto("http://localhost:3000/components/topbar"); + await page.getByRole("link", { name: "Desktop", exact: true }).click(); + + const isDesktopViewport = (await page.viewportSize().width) > 1200; + + // expect topbar links to be visible on Desktop but NOT on mobile + if (isDesktopViewport) { + await expect( + page.locator("#demo-topbar").getByRole("navigation"), + ).toBeVisible(); + } else { + await expect( + page.locator("#demo-topbar").getByRole("navigation"), + ).not.toBeVisible(); + } + + // expect, on load, not to have the "topbar-nav-open" class present YET (until we click on open button) + if (isDesktopViewport) { + await expect( + page.locator("#demo-topbar").getByRole("navigation"), + ).not.toHaveClass(/topbar-nav-open/); + } + + // on desktop, before clicking any btn, all links & buttons present in nav should always be visible + if (isDesktopViewport) { + for (const navLinkOrBtn of await page + .locator("#demo-topbar") + .getByRole("navigation") + .locator(".topbar-link-container") + .locator("a, button") + .all()) { + expect(navLinkOrBtn).toBeVisible(); + } + } + + // get dimensions of navigation element + let modalBox = isDesktopViewport + ? await page.locator("#demo-topbar").getByRole("navigation").boundingBox() + : null; + + // on desktop expect nav to be smaller than full screen (on mobile no nav yet, so we don't care) + if (isDesktopViewport) { + await expect(modalBox.width).not.toBe(page.viewportSize().width); + await expect(modalBox.height).not.toBe(page.viewportSize().height); + } + + if (isDesktopViewport) { + // expect NO hamburger menu btn on desktop + await expect( + page.locator("#demo-topbar").getByLabel("Open menu"), + ).not.toBeVisible(); + } else { + // open modal by clicking the open btn - only MOBILE + await page.locator("#demo-topbar").getByLabel("Open menu").click(); + // expect nav to be visible for both desktop AND mobile + await expect( + page.locator("#demo-topbar").getByRole("navigation"), + ).toBeVisible(); + // expect nav to now have CS class "topbar-nav-open" present + await expect( + page.locator("#demo-topbar").getByRole("navigation"), + ).toHaveClass(/topbar-nav-open/); + + // expect all links and buttons present in nav to be visible + for (const navLinkOrBtn of await page + .locator("#demo-topbar") + .getByRole("navigation") + .locator(".topbar-link-container") + .locator("a, button") + .all()) { + expect(navLinkOrBtn).toBeVisible(); + } + + // re-calculate modal dimensions + modalBox = await page + .locator("#demo-topbar") + .getByRole("navigation") + .boundingBox(); + + const topbarDimensions = await page.locator("#demo-topbar").boundingBox(); + + // modal should have the same width as the header + await expect(modalBox.width).toBe(topbarDimensions.width); + // modal should be greater than 90% of the viewport height + await expect(modalBox.height).toBeGreaterThan( + (await page.viewportSize().height) * 0.8, + ); + } + }); + + const closeModalActions = [ + { + actionType: "keyboardPress", + key: "Escape", + }, + { + actionType: "click", + locator: ".topbar-nav.topbar-nav-open", + position: "topLeft", + }, + { + actionType: "click", + locator: "#demo-topbar", + position: "closeButton", + }, + ]; + + // on legacy topbar only MOBILE have a modal to open and close, so we're only testing on mobile viewport + closeModalActions.map((closingAction) => { + test(`topbar closes on ${closingAction.actionType}-${closingAction.position}`, async ({ + page, + }) => { + test.skip((await page.viewportSize().width) > 1200); + await page.goto("http://localhost:3000/components/topbar"); + await page.getByRole("link", { name: "Desktop", exact: true }).click(); + + await page.locator("#demo-topbar").getByLabel("Open menu").click(); + await expect( + page.locator("#demo-topbar").getByRole("navigation"), + ).toHaveClass(/topbar-nav-open/); + + const modalBox = await page + .locator("#demo-topbar") + .getByRole("navigation") + .boundingBox(); + + const topbarDimensions = await page.locator("#demo-topbar").boundingBox(); + + // modal should have the same width as the header + await expect(modalBox.width).toBe(topbarDimensions.width); + // modal should be greater than 90% of the viewport height + await expect(modalBox.height).toBeGreaterThan( + (await page.viewportSize().height) * 0.8, + ); + + // closes the modal + if (closingAction.actionType === "keyboardPress") { + await page.keyboard.press(closingAction.key); + } else if ( + closingAction.actionType === "click" && + closingAction.position === "topLeft" + ) { + await page + .locator(closingAction.locator) + .click({ position: { x: 0, y: 0 } }); + } else if ( + closingAction.actionType === "click" && + closingAction.position === "closeButton" + ) { + await page + .locator(closingAction.locator) + .getByRole("button", { name: "Close menu" }) + .click(); + } + + await expect( + page.locator("#demo-topbar").getByRole("navigation"), + ).not.toHaveClass(/topbar-nav-open/); + await expect( + page.locator("#demo-topbar").getByRole("navigation"), + ).not.toBeVisible(); + }); + }); +});