diff --git a/cypress/components/profile/profile.cy.tsx b/cypress/components/profile/profile.cy.tsx deleted file mode 100644 index fb75523631..0000000000 --- a/cypress/components/profile/profile.cy.tsx +++ /dev/null @@ -1,177 +0,0 @@ -import React from "react"; -import { ProfileProps } from "components/profile/profile.component"; -import { ProfileComponentTest as ProfileComponent } from "../../../src/components/profile/profile-test.stories"; -import CypressMountWithProviders from "../../support/component-helper/cypress-mount"; -import { assertCssValueIsApproximately } from "../../support/component-helper/common-steps"; -import { CHARACTERS } from "../../support/component-helper/constants"; -import { PROFILE_SIZES } from "../../../src/components/profile/profile.config"; - -import { - profilePreview, - emailPreview, - namePreview, - avatarPreview, - initialPreview, -} from "../../locators/profile/index"; - -const testData = [CHARACTERS.DIACRITICS, CHARACTERS.SPECIALCHARACTERS]; - -context("Tests for Profile component", () => { - describe("should check Profile component properties", () => { - it("should check className for Profile component", () => { - CypressMountWithProviders( - - ); - profilePreview().should("have.class", "profile-cypress-classname"); - }); - - it.each(testData)( - "should check email as %s for Profile component", - (email) => { - CypressMountWithProviders( - - ); - emailPreview().should("have.text", email); - } - ); - - it.each(testData)( - "should check name as %s for Profile component", - (name) => { - CypressMountWithProviders( - - ); - namePreview().should("have.text", name); - } - ); - - it.each([ - [ - "https://avataaars.io/?avatarStyle=Transparent&topType=LongHairStraight&accessoriesType=Blank&hairColor=BrownDark&facialHairType=Blank&clotheType=BlazerShirt&eyeType=Default&eyebrowType=Default&mouthType=Default&skinColor=Light", - ], - [ - "https://www.gravatar.com/avatar/05c1c705ee45d7ae88b80b3a8866ddaa?s=24&d=404", - ], - ])("should check avatar for Profile component", (srcImage) => { - CypressMountWithProviders(); - avatarPreview() - .should("have.css", "height", "40px") - .and("have.css", "width", "40px"); - avatarPreview().children().should("have.attr", "src", srcImage); - }); - - it.each([ - [PROFILE_SIZES[0], 22], - [PROFILE_SIZES[1], 30], - [PROFILE_SIZES[2], 38], - [PROFILE_SIZES[3], 54], - [PROFILE_SIZES[4], 70], - [PROFILE_SIZES[5], 102], - [PROFILE_SIZES[6], 126], - ] as [ProfileProps["size"], number][])( - "should check %s size for Profile component", - (size, heightAndWidth) => { - CypressMountWithProviders(); - initialPreview().then(($el) => { - assertCssValueIsApproximately($el, "height", heightAndWidth); - assertCssValueIsApproximately($el, "width", heightAndWidth); - }); - } - ); - - it.each([ - ["Dan Jin", "DJ"], - ["Sid Ford", "SF"], - ])( - "should check initials for %s in Profile component", - (name, passInitials) => { - CypressMountWithProviders( - - ); - initialPreview().then(($el) => { - assertCssValueIsApproximately($el, "height", 38); - assertCssValueIsApproximately($el, "width", 38); - }); - } - ); - }); - - describe("Accessibility tests for Profile component", () => { - it("should check className for accessibility tests", () => { - CypressMountWithProviders( - - ); - cy.checkAccessibility(); - }); - - it.each(testData)( - "should check email as %s for accessibility tests", - (email) => { - CypressMountWithProviders( - - ); - cy.checkAccessibility(); - } - ); - - it.each(testData)( - "should check name as %s for accessibility tests", - (name) => { - CypressMountWithProviders( - - ); - cy.checkAccessibility(); - } - ); - - it.each([ - [ - "https://avataaars.io/?avatarStyle=Transparent&topType=LongHairStraight&accessoriesType=Blank&hairColor=BrownDark&facialHairType=Blank&clotheType=BlazerShirt&eyeType=Default&eyebrowType=Default&mouthType=Default&skinColor=Light", - ], - [ - "https://www.gravatar.com/avatar/05c1c705ee45d7ae88b80b3a8866ddaa?s=24&d=404", - ], - ])("should check src image as %s for accessibility tests", (srcImage) => { - CypressMountWithProviders(); - cy.checkAccessibility(); - }); - - it.each([ - PROFILE_SIZES[0], - PROFILE_SIZES[1], - PROFILE_SIZES[2], - PROFILE_SIZES[3], - PROFILE_SIZES[4], - PROFILE_SIZES[5], - PROFILE_SIZES[6], - ])("should check profile size as %s for accessibility tests", (size) => { - CypressMountWithProviders(); - cy.checkAccessibility(); - }); - - it.each([ - ["Dan Jin", "DJ"], - ["Sid Ford", "SF"], - ])( - "should check %s initials as %s for accessibility tests", - (name, passInitials) => { - CypressMountWithProviders( - - ); - cy.checkAccessibility(); - } - ); - }); -}); diff --git a/playwright/components/profile/index.ts b/playwright/components/profile/index.ts new file mode 100644 index 0000000000..b9667d58e6 --- /dev/null +++ b/playwright/components/profile/index.ts @@ -0,0 +1,21 @@ +import type { Page } from "@playwright/test"; +import { EMAIL, NAME, INITIALS, PROFILE } from "./locators"; + +// component preview locators + +const emailPreview = (page: Page) => { + return page.locator(EMAIL); +}; + +const namePreview = (page: Page) => { + return page.locator(NAME); +}; + +const profilePreview = (page: Page) => { + return page.locator(PROFILE); +}; + +const initialPreview = (page: Page) => { + return page.locator(INITIALS); +}; +export { emailPreview, namePreview, profilePreview, initialPreview }; diff --git a/playwright/components/profile/locators.ts b/playwright/components/profile/locators.ts new file mode 100644 index 0000000000..22a6c2be22 --- /dev/null +++ b/playwright/components/profile/locators.ts @@ -0,0 +1,5 @@ +// component preview locators +export const EMAIL = '[data-element="email"]'; +export const NAME = '[data-element="name"]'; +export const INITIALS = '[data-element="initials"]'; +export const PROFILE = '[data-component="profile"]'; diff --git a/src/components/profile/component.test-pw.tsx b/src/components/profile/component.test-pw.tsx new file mode 100644 index 0000000000..bfb593cd8b --- /dev/null +++ b/src/components/profile/component.test-pw.tsx @@ -0,0 +1,10 @@ +import React from "react"; +import Profile, { ProfileProps } from "."; + +const ProfileComponent = (props: Partial) => { + return ( + + ); +}; + +export default ProfileComponent; diff --git a/src/components/profile/profile.pw.tsx b/src/components/profile/profile.pw.tsx new file mode 100644 index 0000000000..a4e6569e91 --- /dev/null +++ b/src/components/profile/profile.pw.tsx @@ -0,0 +1,195 @@ +import React from "react"; +import { test, expect } from "@playwright/experimental-ct-react17"; +import ProfileComponent from "./component.test-pw"; +import { CHARACTERS } from "../../../playwright/support/constants"; + +import { + emailPreview, + namePreview, + profilePreview, + initialPreview, +} from "../../../playwright/components/profile"; + +import { portraitImage } from "../../../playwright/components/portrait"; + +import { PROFILE_SIZES } from "../../../src/components/profile/profile.config"; + +import { + checkAccessibility, + containsClass, +} from "../../../playwright/support/helper"; +import { ProfileProps } from "./profile.component"; + +const testImage = + "https://www.gravatar.com/avatar/05c1c705ee45d7ae88b80b3a8866ddaa?s=24&d=404"; + +const imageURLs = [ + "https://avataaars.io/?avatarStyle=Transparent&topType=LongHairStraight&accessoriesType=Blank&hairColor=BrownDark&facialHairType=Blank&clotheType=BlazerShirt&eyeType=Default&eyebrowType=Default&mouthType=Default&skinColor=Light", + "https://www.gravatar.com/avatar/05c1c705ee45d7ae88b80b3a8866ddaa?s=24&d=404", +]; + +const testData = [CHARACTERS.DIACRITICS, CHARACTERS.SPECIALCHARACTERS]; + +test.describe("Prop checks for Profile component", () => { + test(`should render with className`, async ({ mount, page }) => { + await mount(); + + await containsClass(profilePreview(page), "profile-playwright-classname"); + }); + + testData.forEach((email) => { + test(`should render with email prop is passed as ${email}`, async ({ + mount, + page, + }) => { + await mount(); + + await expect(emailPreview(page)).toHaveText(email); + }); + }); + + testData.forEach((name) => { + test(`should render with name prop is passed as ${name}`, async ({ + mount, + page, + }) => { + await mount(); + + await expect(namePreview(page)).toHaveText(name); + }); + }); + + ([ + [PROFILE_SIZES[0], 22], + [PROFILE_SIZES[1], 30], + [PROFILE_SIZES[2], 38], + [PROFILE_SIZES[3], 54], + [PROFILE_SIZES[4], 70], + [PROFILE_SIZES[5], 102], + [PROFILE_SIZES[6], 126], + ] as [ProfileProps["size"], number][]).forEach(([size, heightAndWidth]) => { + test(`should render with size prop is passed as ${size}`, async ({ + mount, + page, + }) => { + await mount(); + + await expect(initialPreview(page)).toHaveCSS( + "height", + `${heightAndWidth}px` + ); + await expect(initialPreview(page)).toHaveCSS( + "width", + `${heightAndWidth}px` + ); + }); + }); + + ([ + [PROFILE_SIZES[0], 22], + [PROFILE_SIZES[1], 30], + [PROFILE_SIZES[2], 38], + [PROFILE_SIZES[3], 54], + [PROFILE_SIZES[4], 70], + [PROFILE_SIZES[5], 102], + [PROFILE_SIZES[6], 126], + ] as [ProfileProps["size"], number][]).forEach(([size, heightAndWidth]) => { + test(`should render with size prop is passed as ${size} and initials prop is passed`, async ({ + mount, + page, + }) => { + await mount(); + + await expect(initialPreview(page)).toHaveCSS( + "height", + `${heightAndWidth}px` + ); + await expect(initialPreview(page)).toHaveCSS( + "width", + `${heightAndWidth}px` + ); + }); + }); + + imageURLs.forEach((url) => { + test(`should render with src prop passed as ${url}`, async ({ + mount, + page, + }) => { + await mount(); + + await expect(portraitImage(page)).toHaveCSS("height", "40px"); + await expect(portraitImage(page)).toHaveCSS("width", "40px"); + await expect(portraitImage(page)).toHaveAttribute("src", url); + }); + }); +}); + +test.describe("should check Accessibility tests for Profile component", () => { + test(`should pass accessibility tests when className prop is passed`, async ({ + mount, + page, + }) => { + await mount(); + + await checkAccessibility(page); + }); + + testData.forEach((email) => { + test(`should pass accessibility tests when email prop is passed as ${email}`, async ({ + mount, + page, + }) => { + await mount(); + + await checkAccessibility(page); + }); + }); + + testData.forEach((name) => { + test(`should pass accessibility tests when name prop is passed as ${name}`, async ({ + mount, + page, + }) => { + await mount(); + + await checkAccessibility(page); + }); + }); + + (["XS", "S", "M", "ML", "L", "XL", "XXL"] as const).forEach((size) => { + test(`should pass accessibility tests when size prop is passed as ${size}`, async ({ + mount, + page, + }) => { + await mount(); + + await checkAccessibility(page); + }); + }); + + [ + ["Dan Jin", "DJ"], + ["Sid Ford", "SF"], + ].forEach(([name, passInitials]) => { + test(`should pass accessibility tests when initials prop is passed as ${passInitials}`, async ({ + mount, + page, + }) => { + await mount(); + + await checkAccessibility(page); + }); + }); + + imageURLs.forEach((url) => { + test(`should pass accessibility tests when src prop is passed as ${url}`, async ({ + mount, + page, + }) => { + await mount(); + + await checkAccessibility(page); + }); + }); +});