Merge pull request #6256 from Sage/playwright_refactor_settingsrow

test(settings-row): migrate cypress tests to playwright

playwright/components/settings-row/index.ts

@@ -0,0 +1,21 @@
+import type { Page } from "@playwright/test";
+import {
+  SETTINGS_ROW_COMPONENT,
+  SETTINGS_ROW_CHILDREN,
+  SETTINGS_ROW_DESCRIPTION,
+  SETTINGS_ROW_TITLE,
+} from "./locators";
+
+export const settingsRowPreview = (page: Page) => {
+  return page.locator(SETTINGS_ROW_COMPONENT);
+};
+export const settingsRowChildren = (page: Page) => {
+  return page.locator(SETTINGS_ROW_CHILDREN);
+};
+export const settingsRowDescription = (page: Page) => {
+  return page.locator(SETTINGS_ROW_DESCRIPTION);
+};
+
+export const settingsRowTitle = (page: Page) => {
+  return page.locator(SETTINGS_ROW_TITLE);
+};

cypress/locators/settings-row/locators.js → playwright/components/settings-row/locators.ts

@@ -2,3 +2,4 @@
 export const SETTINGS_ROW_COMPONENT = 'div[data-component="settings-row"]';
 export const SETTINGS_ROW_CHILDREN = `${SETTINGS_ROW_COMPONENT} > div:last-child`;
 export const SETTINGS_ROW_DESCRIPTION = 'div[data-element="subtitle"]';
+export const SETTINGS_ROW_TITLE = '[data-element="title"]';

playwright/support/helper.ts

@@ -122,3 +122,24 @@ export const expectEventWasNotCalled = async (callbackData: string[]) => {
   expect(count).toBe("0");
   expect(callbackData).toEqual([]);
 };
+
+/**
+ * Creates a safe regExp and uses the .toHaveClass() assertion
+ * As there is not a "contains" assertion for the .toHaveClass() assertion
+ * @param locatorFunc the locator you'd like to use
+ * @param className a className string you'd like to assert against
+ * @example await containsClass(exampleLocator(page), "foo");
+ */
+export const containsClass = async (
+  locatorFunc: Locator,
+  className: string
+) => {
+  const escapedClassName = className.replace(
+    /[-[\]{}()*+?.,\\^$|#\s]/g,
+    "\\$&"
+  );
+
+  const classNameRegEx = new RegExp(escapedClassName);
+
+  await expect(locatorFunc).toHaveClass(classNameRegEx);
+};

src/components/settings-row/components.test-pw.tsx

@@ -0,0 +1,70 @@
+import React from "react";
+import SettingsRow, { SettingsRowProps } from ".";
+import Link from "../../components/link";
+
+const SettingsRowDefault = (props: SettingsRowProps) => (
+  <SettingsRow {...props} />
+);
+
+const SettingRowWithLinkDescription = (props: SettingsRowProps) => {
+  const { description } = props;
+
+  return (
+    <SettingsRow
+      {...props}
+      description={
+        <Link href="https://carbon.sage.com/?path=/docs/setting-row--default-story">
+          {description || "foo"}
+        </Link>
+      }
+    >
+      Content for settings
+    </SettingsRow>
+  );
+};
+
+const SettingsRowWithHeadingTypes = () => (
+  <>
+    <SettingsRow
+      headingType="h1"
+      description="Description"
+      title="This is a h1 Title"
+    >
+      Content for settings
+    </SettingsRow>
+    <SettingsRow
+      headingType="h2"
+      description="Description"
+      title="This is a h2 Title"
+    >
+      Content for settings
+    </SettingsRow>
+    <SettingsRow
+      headingType="h3"
+      description="Description"
+      title="This is a h3 Title"
+    >
+      Content for settings
+    </SettingsRow>
+    <SettingsRow
+      headingType="h4"
+      description="Description"
+      title="This is a h4 Title"
+    >
+      Content for settings
+    </SettingsRow>
+    <SettingsRow
+      headingType="h5"
+      description="Description"
+      title="This is a h5 Title"
+    >
+      Content for settings
+    </SettingsRow>
+  </>
+);
+
+export {
+  SettingsRowDefault,
+  SettingRowWithLinkDescription,
+  SettingsRowWithHeadingTypes,
+};