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"]';

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