-
Notifications
You must be signed in to change notification settings - Fork 83
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #6409 from Sage/pw_refactor_globalheader
test(global-header): playwright refactor
- Loading branch information
Showing
6 changed files
with
173 additions
and
139 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| import { Page } from "playwright-core"; | ||
| import { GLOBAL_HEADER, GLOBAL_HEADER_LOGO_WRAPPER } from "./locators"; | ||
|
|
||
| export const globalHeader = (page: Page) => page.locator(GLOBAL_HEADER); | ||
| export const globalHeaderLogo = (page: Page) => | ||
| page.locator(GLOBAL_HEADER_LOGO_WRAPPER).nth(0).first(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| // component preview locators | ||
| export const GLOBAL_HEADER = "[data-component='global-header']"; | ||
| export const GLOBAL_HEADER_LOGO_WRAPPER = | ||
| "[data-element='global-header-logo-wrapper']"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,83 @@ | ||
| import React, { useState, useEffect } from "react"; | ||
| import carbonlogo from "../../../logo/carbon-logo.png"; | ||
| import GlobalHeader, { GlobalHeaderProps } from "./global-header.component"; | ||
| import { Menu, MenuItem, MenuDivider } from "../menu"; | ||
| import NavigationBar from "../navigation-bar"; | ||
|
|
||
| export const FullMenuExample = () => ( | ||
| <> | ||
| <GlobalHeader> | ||
| <Menu menuType="black" display="flex" flex="1"> | ||
| <MenuItem flex="1" submenu="Product Switcher"> | ||
| <MenuItem href="#">Product A</MenuItem> | ||
| </MenuItem> | ||
| <MenuItem flex="0 0 auto" submenu="Parent Menu 1"> | ||
| <MenuItem href="#">Child Item 1</MenuItem> | ||
| <MenuItem href="#">Child Item 2</MenuItem> | ||
| <MenuItem href="#">Child Item 3</MenuItem> | ||
| </MenuItem> | ||
| <MenuItem flex="0 0 auto" submenu="Parent Menu 2"> | ||
| <MenuItem>Child Item</MenuItem> | ||
| </MenuItem> | ||
| </Menu> | ||
| </GlobalHeader> | ||
| <NavigationBar position="fixed" orientation="top" offset="40px"> | ||
| <Menu display="flex" flex="1"> | ||
| <MenuItem flex="1">Menu Item One</MenuItem> | ||
| <MenuItem flex="0 0 auto" href="#"> | ||
| Menu Item Two | ||
| </MenuItem> | ||
| <MenuItem flex="0 0 auto" submenu="Menu Item Three"> | ||
| <MenuItem href="#">Item Submenu One</MenuItem> | ||
| <MenuItem href="#">Item Submenu Two</MenuItem> | ||
| <MenuDivider /> | ||
| <MenuItem icon="settings" href="#"> | ||
| Item Submenu Three | ||
| </MenuItem> | ||
| <MenuItem href="#">Item Submenu Four</MenuItem> | ||
| </MenuItem> | ||
| <MenuItem flex="0 0 auto" submenu="Menu Item Four"> | ||
| <MenuItem href="#">Item Submenu One</MenuItem> | ||
| <MenuItem href="#">Item Submenu Two</MenuItem> | ||
| </MenuItem> | ||
| </Menu> | ||
| </NavigationBar> | ||
| </> | ||
| ); | ||
|
|
||
| export const GlobalHeaderWithErrorHandler = ({ | ||
| ...props | ||
| }: GlobalHeaderProps) => { | ||
| const [error, setError] = useState(""); | ||
| useEffect(() => { | ||
| const handleError = (e: ErrorEvent) => { | ||
| setError(e.message); | ||
| }; | ||
| window.addEventListener("error", handleError); | ||
|
|
||
| return () => window.removeEventListener("error", handleError); | ||
| }); | ||
| return ( | ||
| <> | ||
| <GlobalHeader {...props} /> | ||
| <div id="error-div">{error}</div> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export const GlobalHeaderWithLogo = () => { | ||
| const logoHeight = 41; | ||
| const logo = ( | ||
| <img | ||
| data-element="logo" | ||
| height={logoHeight} | ||
| src={carbonlogo} | ||
| alt="Carbon logo" | ||
| /> | ||
| ); | ||
| return ( | ||
| <> | ||
| <GlobalHeader logo={logo}>Example</GlobalHeader> | ||
| </> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| import React from "react"; | ||
| import { test, expect } from "@playwright/experimental-ct-react17"; | ||
| import { | ||
| FullMenuExample, | ||
| GlobalHeaderWithErrorHandler, | ||
| GlobalHeaderWithLogo, | ||
| } from "./component.test-pw"; | ||
| import navigationBar from "../../../playwright/components/navigation-bar"; | ||
| import { | ||
| globalHeader, | ||
| globalHeaderLogo, | ||
| } from "../../../playwright/components/global-header"; | ||
| import { checkAccessibility } from "../../../playwright/support/helper"; | ||
|
|
||
| test.describe("Global Header component", () => { | ||
| test("should render without causing a ResiveObserver related error", async ({ | ||
| mount, | ||
| page, | ||
| }) => { | ||
| await mount(<GlobalHeaderWithErrorHandler />); | ||
|
|
||
| await page.waitForTimeout(500); | ||
|
|
||
| const errorState = page.locator("#error-div"); | ||
| await expect(errorState).toHaveText(""); | ||
| }); | ||
|
|
||
| test("should render with z-index of component greater than z-index of NavigationBar", async ({ | ||
| mount, | ||
| page, | ||
| }) => { | ||
| await mount(<FullMenuExample />); | ||
|
|
||
| const globalHeaderZIndex = await globalHeader(page).evaluate((element) => { | ||
| const style = getComputedStyle(element); | ||
| return style.zIndex; | ||
| }); | ||
|
|
||
| const navigationBarZIndex = await navigationBar(page).evaluate( | ||
| (element) => { | ||
| const style = getComputedStyle(element); | ||
| return style.zIndex; | ||
| } | ||
| ); | ||
|
|
||
| const globalIndex = parseInt(globalHeaderZIndex.toString()); | ||
| const NavIndex = parseInt(navigationBarZIndex.toString()); | ||
|
|
||
| expect(globalIndex).toBeGreaterThan(NavIndex); | ||
| }); | ||
|
|
||
| test("should render with height of logo element never exceeding the max height of the component when logo prop is passed", async ({ | ||
| mount, | ||
| page, | ||
| }) => { | ||
| await mount(<GlobalHeaderWithLogo />); | ||
|
|
||
| await expect(globalHeaderLogo(page)).toHaveCSS("height", `40px`); | ||
| }); | ||
|
|
||
| test.describe("Accessibility tests", () => { | ||
| test("should pass tests for FullMenuExample", async ({ mount, page }) => { | ||
| await mount(<FullMenuExample />); | ||
|
|
||
| await checkAccessibility(page); | ||
| }); | ||
|
|
||
| test("should pass tests for GlobalHeaderWithLogo example", async ({ | ||
| mount, | ||
| page, | ||
| }) => { | ||
| await mount(<GlobalHeaderWithLogo />); | ||
|
|
||
| await checkAccessibility(page); | ||
| }); | ||
| }); | ||
| }); |