test(accordion): migrate component tests to playwright

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/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

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