Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

test(switch): convert tests to playwright #6470

Merged
merged 1 commit into from
Dec 8, 2023

Conversation

ZhuoyuJin
Copy link
Contributor

Proposed behaviour

Reactor tests to use Playwright.

Current behaviour

Tests currently use Cypress.

Checklist

  • Commits follow our style guide
  • Related issues linked in commit messages if required
  • Screenshots are included in the PR if useful
  • All themes are supported if required
  • Unit tests added or updated if required
  • Cypress automation tests added or updated if required
  • Playwright automation tests added or updated if required
  • Storybook added or updated if required
  • Translations added or updated (including creating or amending translation keys table in storybook) if required
  • Typescript d.ts file added or updated if required
  • Related docs have been updated if required

QA

  • Tested in CodeSandbox/storybook
  • Add new Cypress test coverage if required
  • Carbon implementation matches Design System/designs
  • UI Tests GitHub check reviewed if required

Additional context

N/A

Testing instructions

N/A

Copy link

codesandbox-ci bot commented Dec 5, 2023

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 67dfa18:

Sandbox Source
carbon-quickstart Configuration
carbon-quickstart-typescript Configuration

@DipperTheDan DipperTheDan self-requested a review December 6, 2023 13:40
playwright/components/switch/index.ts Show resolved Hide resolved
playwright/components/switch/index.ts Outdated Show resolved Hide resolved
src/components/switch/components.test-pw.tsx Outdated Show resolved Hide resolved
src/components/switch/components.test-pw.tsx Outdated Show resolved Hide resolved
src/components/switch/switch.pw.tsx Outdated Show resolved Hide resolved
});

([SIZE.SMALL, SIZE.LARGE] as SwitchProps["size"][]).forEach((size) => {
test(`check accessibility with size sets to ${size}`, async ({
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
test(`check accessibility with size sets to ${size}`, async ({
test(`check accessibility with size set to ${size}`, async ({

src/components/switch/switch.pw.tsx Outdated Show resolved Hide resolved
src/components/switch/switch.pw.tsx Outdated Show resolved Hide resolved
src/components/switch/switch.pw.tsx Outdated Show resolved Hide resolved
src/components/switch/switch.pw.tsx Outdated Show resolved Hide resolved
});
});

test("should verify with data-component", async ({ mount, page }) => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
test("should verify with data-component", async ({ mount, page }) => {
test("should render with data-component", async ({ mount, page }) => {

);
});

test("should verify with data-element", async ({ mount, page }) => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
test("should verify with data-element", async ({ mount, page }) => {
test("should render with data-element", async ({ mount, page }) => {

);
});

test("should verify with data-role", async ({ mount, page }) => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
test("should verify with data-role", async ({ mount, page }) => {
test("should render with data-role", async ({ mount, page }) => {

});

[true, false].forEach((boolVal) => {
test(`should render when fieldHelpInline sets to ${boolVal}`, async ({
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
test(`should render when fieldHelpInline sets to ${boolVal}`, async ({
test(`should render with fieldHelpInline set to ${boolVal}`, async ({

});

["error", "warning", "info"].forEach((validation) => {
test(`should render with ${validation} validation icon`, async ({
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
test(`should render with ${validation} validation icon`, async ({
test(`should render with ${validation} validation icon`, async ({

[SIZE.LARGE, 82, 44],
] as [SwitchProps["size"], number, number][]).forEach(
([size, width, height]) => {
test(`should render with size sets to ${size}`, async ({
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
test(`should render with size sets to ${size}`, async ({
test(`should render with size set to ${size}`, async ({

});

[true, false].forEach((boolVal) => {
test(`check accessibility with loading prop is ${boolVal}`, async ({
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
test(`check accessibility with loading prop is ${boolVal}`, async ({
test(`check accessibility when loading prop is ${boolVal}`, async ({

});
});

test("check accessibility with data-component prop sets", async ({
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
test("check accessibility with data-component prop sets", async ({
test("check accessibility with data-component prop set", async ({

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This comment can be applied to each test which has prop sets

});

[true, false].forEach((boolVal) => {
test(`check accessibility with defaultChecked is ${boolVal}`, async ({
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
test(`check accessibility with defaultChecked is ${boolVal}`, async ({
test(`check accessibility when defaultChecked is ${boolVal}`, async ({

});
});

test("check accessibility for with Margin example", async ({
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
test("check accessibility for with Margin example", async ({
test("check accessibility for WithMargin example", async ({

@ZhuoyuJin ZhuoyuJin force-pushed the playwright_refactor_switch branch from b4b83a9 to 960490c Compare December 7, 2023 15:50
@ZhuoyuJin ZhuoyuJin force-pushed the playwright_refactor_switch branch from 38e5cb2 to 67dfa18 Compare December 8, 2023 12:22
@ZhuoyuJin ZhuoyuJin marked this pull request as ready for review December 8, 2023 14:12
@ZhuoyuJin ZhuoyuJin requested review from a team as code owners December 8, 2023 14:12
@ZhuoyuJin ZhuoyuJin merged commit d014058 into master Dec 8, 2023
@ZhuoyuJin ZhuoyuJin deleted the playwright_refactor_switch branch December 8, 2023 14:29
@carbonci
Copy link
Collaborator

carbonci commented Dec 8, 2023

🎉 This PR is included in version 124.2.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
Development

Successfully merging this pull request may close these issues.

4 participants