Skip to content

Commit

Permalink
test(accordion): migrate component tests to playwright
Browse files Browse the repository at this point in the history
  • Loading branch information
robinzigmond committed Aug 11, 2023
1 parent 0878063 commit e2781af
Show file tree
Hide file tree
Showing 10 changed files with 1,413 additions and 667 deletions.
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 @@ -122,3 +122,48 @@ export const expectEventWasNotCalled = async (callbackData: string[]) => {
expect(count).toBe("0");
expect(callbackData).toEqual([]);
};

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

0 comments on commit e2781af

Please sign in to comment.