test(menu): playwright refactor #6466
Merged
Conversation
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 pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit bbaa149:
|
stephenogorman
force-pushed
the
pw_refactor_menu
branch
from
e8cb113 to
b1a8a38
Compare
ZhuoyuJin
reviewed
Dec 8, 2023
|
|
||
| const menuTypes: MenuType[] = ["white", "light", "dark", "black"]; | ||
|
|
||
| export const MenuComponent = (props: Partial<MenuProps> & MenuDividerProps) => { |
There was a problem hiding this comment.
can we delete these mock components from menu-test.stories.tsx since they are already moved to the components.test-pw.tsx?
ZhuoyuJin
reviewed
Dec 8, 2023
src/components/menu/menu.pw.tsx
Outdated
| @@ -0,0 +1,2426 @@ | |||
| /* eslint-disable @typescript-eslint/no-non-null-assertion, no-await-in-loop */ | |||
There was a problem hiding this comment.
is this line still necessary?
ZhuoyuJin
reviewed
Dec 8, 2023
src/components/menu/menu.pw.tsx
Outdated
| ["dark", "rgb(0, 25, 38)", 4], | ||
| ["black", "rgb(38, 38, 38)", 6], | ||
| ] as [string, string, number][]).forEach(([colorName, color, menuNumber]) => { | ||
| test(`should verify submenu background color is ${colorName}`, async ({ |
There was a problem hiding this comment.
Suggested change
| test(`should verify submenu background color is ${colorName}`, async ({ | |
| test(`should verify the ${menuNumber}th submenu background color is ${colorName}`, async ({ |
ZhuoyuJin
reviewed
Dec 8, 2023
src/components/menu/menu.pw.tsx
Outdated
| ["dark", "rgb(0, 50, 76)", 8], | ||
| ["black", "rgb(0, 0, 0)", 12], | ||
| ] as [string, string, number][]).forEach(([colorName, color, menuNumber]) => { | ||
| test(`should verify Menu background color is ${colorName}`, async ({ |
There was a problem hiding this comment.
Suggested change
| test(`should verify Menu background color is ${colorName}`, async ({ | |
| test(`should verify the ${menuNumber}th menu background color is ${colorName}`, async ({ |
ZhuoyuJin
reviewed
Dec 8, 2023
src/components/menu/menu.pw.tsx
Outdated
| ["default", 1], | ||
| ["large", 4], | ||
| ] as [MenuDividerProps["size"], number][]).forEach(([size, height]) => { | ||
| test(`should verify Menu Divider size is ${size}`, async ({ |
There was a problem hiding this comment.
Suggested change
| test(`should verify Menu Divider size is ${size}`, async ({ | |
| test(`should verify Menu Divider has the proper height when the size is ${size}`, async ({ |
ZhuoyuJin
reviewed
Dec 8, 2023
src/components/menu/menu.pw.tsx
Outdated
| ["ArrowDown", 0], | ||
| ["ArrowUp", 2], | ||
| ] as [string, number][]).forEach(([key, tabs]) => { | ||
| test(`should verify the Search component is focusable by using the ${key} key`, async ({ |
There was a problem hiding this comment.
Suggested change
| test(`should verify the Search component is focusable by using the ${key} key`, async ({ | |
| test(`should verify the Search component is focusable by pressing the ${key} key`, async ({ |
ZhuoyuJin
reviewed
Dec 8, 2023
src/components/menu/menu.pw.tsx
Outdated
| await expect(subMenuBlock).toBeVisible(); | ||
| }); | ||
|
|
||
| test(`should render with a menu item with a very long label and verify the width of the whole submenu is determined by this item`, async ({ |
There was a problem hiding this comment.
Suggested change
| test(`should render with a menu item with a very long label and verify the width of the whole submenu is determined by this item`, async ({ | |
| test(`should render with a menu item that has a very long label and verify the width of the whole submenu is determined by this item`, async ({ |
ZhuoyuJin
reviewed
Dec 8, 2023
src/components/menu/menu.pw.tsx
Outdated
| CHARACTERS.DIACRITICS, | ||
| CHARACTERS.SPECIALCHARACTERS, | ||
| ].forEach((text) => { | ||
| test(`should render with Menu Item text ${text}`, async ({ |
There was a problem hiding this comment.
Suggested change
| test(`should render with Menu Item text ${text}`, async ({ | |
| test(`should render with submenu text set to ${text}`, async ({ |
ZhuoyuJin
reviewed
Dec 8, 2023
src/components/menu/menu.pw.tsx
Outdated
| ["250px", 250], | ||
| ] as [ScrollableBlockProps["height"], number][]).forEach( | ||
| ([height, pixels]) => { | ||
| test(`should render with scroll block height of ${pixels}px when height prop is passed a number or string`, async ({ |
There was a problem hiding this comment.
Suggested change
| test(`should render with scroll block height of ${pixels}px when height prop is passed a number or string`, async ({ | |
| test(`should render with scroll block height of ${pixels}px when height prop is passed as a number or string`, async ({ |
ZhuoyuJin
reviewed
Dec 8, 2023
src/components/menu/menu.pw.tsx
Outdated
| await expect(fullMenuItem).toBeFocused(); | ||
| }); | ||
|
|
||
| test(`should verify that inner Menu without link is NOT available with tabbing in Fullscreen Menu`, async ({ |
There was a problem hiding this comment.
Suggested change
| test(`should verify that inner Menu without link is NOT available with tabbing in Fullscreen Menu`, async ({ | |
| test(`should verify that inner Menu without link is NOT available when tabbing in Fullscreen Menu`, async ({ |
ZhuoyuJin
reviewed
Dec 8, 2023
src/components/menu/menu.pw.tsx
Outdated
| }); | ||
|
|
||
| test.describe("Accessibility tests for Menu component", () => { | ||
| test(`should pass tests for default Menu`, async ({ mount, page }) => { |
There was a problem hiding this comment.
Suggested change
| test(`should pass tests for default Menu`, async ({ mount, page }) => { | |
| test(`should pass accessibility tests for default Menu`, async ({ mount, page }) => { |
same as below for all the accessibility tests
stephenogorman
force-pushed
the
pw_refactor_menu
branch
from
b1a8a38 to
fc53cd4
Compare
edleeks87
previously approved these changes
Dec 12, 2023
divyajindel
approved these changes
Dec 14, 2023
stephenogorman
force-pushed
the
pw_refactor_menu
branch
from
4d8a984 to
bbaa149
Compare
|
🎉 This PR is included in version 124.3.1 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Proposed behaviour
Refactor Menu tests from Cypress to Playwright
Current behaviour
Tests are currently Cypress
Checklist
d.tsfile added or updated if requiredQA
Additional context
N/A
Testing instructions
Testing instructions
menu.pw.tsxfile passed*.pw.tsxfiles have regressed