Merge pull request #6255 from Sage/FE-6091-accordion-playwright

test(accordion): migrate component tests to playwright

cypress/locators/accordion/index.js

@@ -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);

cypress/locators/accordion/locators.js

@@ -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";

playwright/components/accordion/index.ts

@@ -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,
+};

playwright/components/accordion/locators.ts

@@ -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";

playwright/components/index.ts

@@ -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}"]`);
+};

playwright/support/helper.ts

@@ -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);
+};