test(SegmentedSwitch): add visual tests

packages/orbit-components/src/SegmentedSwitch/SegmentedSwitch.ct-story.tsx

@@ -0,0 +1,60 @@
+import * as React from "react";
+
+import type { Option } from "./types";
+
+import SegmentedSwitch from ".";
+
+const options: Option[] = [
+  { label: "Male", value: "Male" },
+  { label: "Female", value: "Female" },
+];
+
+const optionsWithDefaultChecked: Option[] = [
+  { label: "Male", value: "Male" },
+  { label: "Female", value: "Female", defaultChecked: true },
+];
+
+export function SegmentedSwitchStory() {
+  return (
+    <div className="gap-md p-md flex flex-col">
+      <SegmentedSwitch options={options} onChange={() => {}} />
+      <SegmentedSwitch options={options} label="Custom label" onChange={() => {}} />
+      <SegmentedSwitch
+        options={optionsWithDefaultChecked}
+        label="Custom label"
+        onChange={() => {}}
+      />
+      <SegmentedSwitch
+        options={options}
+        label="Custom label"
+        help="Do or do not. There is no try."
+        onChange={() => {}}
+      />
+      <SegmentedSwitch
+        options={options}
+        label="Custom label"
+        error="You shall not pass!"
+        onChange={() => {}}
+      />
+      <div className="mt-xl">
+        <SegmentedSwitch
+          options={options}
+          label="Custom label"
+          help="Do or do not. There is no try."
+          showTooltip
+          onChange={() => {}}
+        />
+      </div>
+      <div className="mt-xl">
+        <SegmentedSwitch
+          options={options}
+          label="Custom label"
+          error="You shall not pass!"
+          onChange={() => {}}
+          showTooltip
+        />
+      </div>
+      <SegmentedSwitch options={options} maxWidth="300px" onChange={() => {}} />
+    </div>
+  );
+}

packages/orbit-components/src/SegmentedSwitch/SegmentedSwitch.ct.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { test, expect } from "@playwright/experimental-ct-react";
+
+import { SegmentedSwitchStory } from "./SegmentedSwitch.ct-story";
+import RenderInRtl from "../utils/rtl/RenderInRtl";
+
+test.describe("visual SegmentedSwitch", () => {
+  test("default", async ({ mount }) => {
+    const component = await mount(<SegmentedSwitchStory />);
+
+    await expect(component).toHaveScreenshot();
+  });
+
+  test("rtl", async ({ mount }) => {
+    const component = await mount(
+      <RenderInRtl>
+        <SegmentedSwitchStory />
+      </RenderInRtl>,
+    );
+
+    await expect(component).toHaveScreenshot();
+  });
+});