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(accordion): migrate component tests to playwright #6255

Merged
merged 1 commit into from
Aug 22, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
640 changes: 0 additions & 640 deletions cypress/components/accordion/accordion.cy.tsx

This file was deleted.

21 changes: 2 additions & 19 deletions cypress/locators/accordion/index.js
Original file line number Diff line number Diff line change
@@ -1,22 +1,5 @@
import {
ACCORDION_PREVIEW,
ACCORDION_TITLE_CONTAINER,
ACCORDION_ICON,
ACCORDION_CONTENT,
} from "./locators";
import { ACCORDION_TITLE_CONTAINER } from "./locators";

// locators
export const accordionTitleContainer = () =>
cy.get(ACCORDION_PREVIEW).find(ACCORDION_TITLE_CONTAINER);
// eslint-disable-next-line import/prefer-default-export
export const accordionDefaultTitle = () => cy.get(ACCORDION_TITLE_CONTAINER);
export const accordionTitleContainerByPosition = (index) =>
cy
.get(ACCORDION_PREVIEW)
.find(ACCORDION_TITLE_CONTAINER)
.eq(index)
.children();
export const accordionIcon = () =>
accordionTitleContainer().find(ACCORDION_ICON);
export const accordionContent = () =>
cy.get(ACCORDION_PREVIEW).find(ACCORDION_CONTENT);
export const accordion = () => cy.get(ACCORDION_PREVIEW);
6 changes: 1 addition & 5 deletions cypress/locators/accordion/locators.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,4 @@
// component preview locators
export const ACCORDION_PREVIEW = '[data-component="accordion"]';
// eslint-disable-next-line import/prefer-default-export
export const ACCORDION_TITLE_CONTAINER =
'[data-element="accordion-title-container"]';
export const ACCORDION_ICON = '[data-component="icon"]';
export const ACCORDION_CONTENT = '[data-element="accordion-content"]';
export const ACCORDION_ADD_CONTENT = "add-content";
export const ACCORDION_REMOVE_CONTENT = "remove-content";
43 changes: 43 additions & 0 deletions playwright/components/accordion/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import type { Page } from "@playwright/test";
import {
ACCORDION_PREVIEW,
ACCORDION_TITLE_CONTAINER,
ACCORDION_ICON,
ACCORDION_CONTENT,
} from "./locators";

// locators
const accordionTitleContainer = (page: Page) => {
return page.locator(ACCORDION_PREVIEW).locator(ACCORDION_TITLE_CONTAINER);
};

const accordionDefaultTitle = (page: Page) => {
return page.locator(ACCORDION_TITLE_CONTAINER);
};

const accordionTitleContainerByPosition = (page: Page, index: number) => {
return page
.locator(ACCORDION_PREVIEW)
.locator(`${ACCORDION_TITLE_CONTAINER}:nth-child(${index + 1}) > *`);
};

const accordionIcon = (page: Page) => {
return accordionTitleContainer(page).locator(ACCORDION_ICON);
};

const accordionContent = (page: Page) => {
return page.locator(ACCORDION_PREVIEW).locator(ACCORDION_CONTENT);
};

const accordion = (page: Page) => {
return page.locator(ACCORDION_PREVIEW);
};

export {
accordionTitleContainer,
accordionDefaultTitle,
accordionTitleContainerByPosition,
accordionIcon,
accordionContent,
accordion,
};
8 changes: 8 additions & 0 deletions playwright/components/accordion/locators.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
// component preview locators
export const ACCORDION_PREVIEW = '[data-component="accordion"]';
export const ACCORDION_TITLE_CONTAINER =
'[data-element="accordion-title-container"]';
export const ACCORDION_ICON = '[data-component="icon"]';
export const ACCORDION_CONTENT = '[data-element="accordion-content"]';
export const ACCORDION_ADD_CONTENT = "add-content";
export const ACCORDION_REMOVE_CONTENT = "remove-content";
6 changes: 4 additions & 2 deletions playwright/components/index.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import type { Page } from "@playwright/test";
import { ICON } from "./locators";

const icon = (page: Page) => {
export const icon = (page: Page) => {
return page.locator(ICON);
};

export default icon;
export const getDataElementByValue = (page: Page, element: string) => {
return page.locator(`[data-element="${element}"]`);
};
45 changes: 45 additions & 0 deletions playwright/support/helper.ts
Original file line number Diff line number Diff line change
Expand Up @@ -143,3 +143,48 @@ export const containsClass = async (

await expect(locatorFunc).toHaveClass(classNameRegEx);
};

const positions = {
first: 0,
second: 1,
third: 2,
fourth: 3,
fifth: 4,
sixth: 5,
seventh: 6,
eighth: 7,
ninth: 8,
tenth: 9,
eleventh: 10,
thirteenth: 12,
};

export function positionOfElement(type: keyof typeof positions): number {
return positions[type];
}

/**
* Converts from a "matrix(a, b, c, d, e, f)" string output from a CSS transform: rotate
* to the actual rotation angle, while accounting for rounding errors in the calculation.
* Adapted from https://css-tricks.com/get-value-of-css-rotation-through-javascript/ */
export function getRotationAngle(cssTransformString: string) {
const matrixValues = cssTransformString
.split("(")[1]
.split(")")[0]
.split(",")
.map(Number);
const [a, b] = matrixValues;
const angleInRadians = Math.atan2(b, a);
const angleInDegrees = angleInRadians * (180 / Math.PI);
return Math.round(angleInDegrees);
}

export const assertCssValueIsApproximately = async (
element: Locator,
cssProp: string,
value: number
) => {
const val = await getStyle(element, cssProp);
expect(parseInt(val)).toBeGreaterThanOrEqual(value - 2);
expect(parseInt(val)).toBeLessThanOrEqual(value + 2);
};
Loading