test(advanced-color-picker): refine testing suite

Author: paulrobinson88

src/components/advanced-color-picker/advanced-color-picker.interaction.stories.tsx

@@ -58,42 +58,6 @@ async function ensurePickerIsOpen(trigger: HTMLElement) {
   await waitFor(() => expect(radiosCount()).toBeGreaterThan(0));
 }
 
-export const ColorSelection: Story = {
-  render: () => (
-    <Box mb={3}>
-      <AdvancedColorPickerWithState />
-    </Box>
-  ),
-  play: async ({ canvasElement }) => {
-    if (!allowInteractions()) return;
-
-    const canvas = within(canvasElement);
-
-    const trigger = canvas.getByRole("button", { name: /change colo(u)?r/i });
-    await userEvent.click(trigger);
-
-    const portal = within(document.body);
-
-    const blue = await portal.findByLabelText(/blue/i);
-    await userEvent.click(blue);
-
-    await portal.findByLabelText(/blue/i, { selector: "input:checked" });
-
-    await ensurePickerIsOpen(trigger);
-  },
-  decorators: [
-    (StoryToRender) => (
-      <DefaultDecorator>
-        <StoryToRender />
-      </DefaultDecorator>
-    ),
-  ],
-};
-ColorSelection.storyName = "Color Selection";
-ColorSelection.parameters = {
-  chromatic: { disableSnapshot: true },
-};
-
 export const ColorPreviewInteraction: Story = {
   render: () => (
     <Box mb={3}>
@@ -147,9 +111,6 @@ export const DialogOpenAndCloseStates: Story = {
       <AdvancedColorPickerWithState />
     </Box>
   ),
-  parameters: {
-    chromatic: { disableSnapshot: true },
-  },
   play: async ({ canvasElement }) => {
     if (!allowInteractions()) return;
 
@@ -163,17 +124,40 @@ export const DialogOpenAndCloseStates: Story = {
     const blueRadioOption = await portal.findByLabelText(/blue/i);
     expect(blueRadioOption).toBeInTheDocument();
 
-    await userEvent.click(blueRadioOption);
-    await userEvent.keyboard("{Enter}");
+    blueRadioOption.focus();
+    await waitFor(() => expect(blueRadioOption).toHaveFocus());
+
+    await userEvent.keyboard("{ArrowLeft}");
+    const colorBlack = await portal.findByLabelText(/black/i);
+    await expect(colorBlack).toHaveFocus();
+
+    await userEvent.keyboard("{ArrowRight}");
+    const colorBlue = await portal.findByLabelText(/blue/i);
+    await expect(colorBlue).toHaveFocus();
+
+    await userEvent.keyboard("{ArrowDown}");
+    const colorDesert = await portal.findByLabelText(/desert/i);
+    await expect(colorDesert).toHaveFocus();
 
+    await userEvent.keyboard("{ArrowUp}");
+    await expect(colorBlue).toHaveFocus();
+
+    await userEvent.keyboard("{Escape}");
     await waitFor(() =>
       expect(portal.queryByLabelText(/blue/i)).not.toBeInTheDocument(),
     );
-
     await userEvent.click(trigger);
     await portal.findByLabelText(/blue/i);
 
     await ensurePickerIsOpen(trigger);
+
+    const blueForTab = await portal.findByLabelText(/blue/i);
+    blueForTab.focus();
+    await waitFor(() => expect(blueForTab).toHaveFocus());
+
+    await userEvent.tab();
+    const closeButton = await portal.findByRole("button", { name: /close/i });
+    await expect(closeButton).toHaveFocus();
   },
   decorators: [
     (StoryToRender) => (
@@ -185,7 +169,7 @@ export const DialogOpenAndCloseStates: Story = {
 };
 DialogOpenAndCloseStates.storyName = "Dialog Open And Close States";
 DialogOpenAndCloseStates.parameters = {
-  chromatic: { disableSnapshot: true },
+  chromatic: { disableSnapshot: false },
 };
 
 export const FocusManagement: Story = {
@@ -284,54 +268,6 @@ export const RestoreOnFocus: Story = {
   ],
 };
 RestoreOnFocus.storyName = "Restore On Focus";
-
-export const ColorGridNavigation: Story = {
-  render: () => (
-    <Box mb={3}>
-      <AdvancedColorPickerWithState />
-    </Box>
-  ),
-  play: async ({ canvasElement }) => {
-    if (!allowInteractions()) return;
-
-    const canvas = within(canvasElement);
-    const trigger = canvas.getByRole("button", { name: /change colo(u)?r/i });
-    await userEvent.click(trigger);
-
-    const portal = within(document.body);
-    const labels = ["white", "blue", "pink", "turquoise", "mint"] as const;
-
-    for (const label of labels) {
-      const option = await portal.findByLabelText(
-        new RegExp(`^${label}$`, "i"),
-      );
-      await userEvent.click(option);
-      await portal.findByLabelText(new RegExp(`^${label}$`, "i"), {
-        selector: "input:checked",
-      });
-    }
-
-    const lastOption = portal.getByLabelText(/mint/i);
-    lastOption.focus();
-    await userEvent.keyboard(" ");
-    await waitFor(() => expect(portal.queryByRole("radio")).toBeNull());
-
-    await ensurePickerIsOpen(trigger);
-    const mintForSnapshot = await within(document.body).findByLabelText(
-      /mint/i,
-    );
-    mintForSnapshot.focus();
-    await waitFor(() => expect(mintForSnapshot).toHaveFocus());
-  },
-  decorators: [
-    (StoryToRender) => (
-      <DefaultDecorator>
-        <StoryToRender />
-      </DefaultDecorator>
-    ),
-  ],
-};
-ColorGridNavigation.storyName = "Color Grid Navigation";
-ColorGridNavigation.parameters = {
-  chromatic: { disableSnapshot: true },
+RestoreOnFocus.parameters = {
+  chromatic: { disableSnapshot: false },
 };

src/components/advanced-color-picker/advanced-color-picker.pw.tsx

@@ -5,8 +5,6 @@ import {
   currentColorDescription,
   advancedColorPickerCell,
   simpleColorPickerInput,
-  simpleColorPickerComponent,
-  advancedColorPickerPreview,
 } from "../../../playwright/components/advanced-color-picker";
 import {
   dialog as advancedColorPickerParent,
@@ -16,25 +14,6 @@ import { closeIconButton } from "../../../playwright/components/index";
 import { CHARACTERS } from "../../../playwright/support/constants";
 import { checkAccessibility } from "../../../playwright/support/helper";
 
-// TODO: Skipped due to flaky focus behaviour. To review in FE-6428
-test.skip("should have the expected styling when focused", async ({
-  mount,
-  page,
-}) => {
-  await mount(<AdvancedColorPickerCustom open />);
-
-  const icon = closeIconButton(page);
-  await icon.focus();
-  await expect(closeIconButton(page)).toHaveCSS(
-    "box-shadow",
-    "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px",
-  );
-  await expect(closeIconButton(page)).toHaveCSS(
-    "outline",
-    "rgba(0, 0, 0, 0) solid 3px",
-  );
-});
-
 test("when AdvancedColorPicker is opened and then closed, with the `restoreFocusOnClose` prop passed as `false`, the call to action element should not be focused", async ({
   mount,
   page,
@@ -57,38 +36,6 @@ test("when AdvancedColorPicker is opened and then closed, with the `restoreFocus
 });
 
 test.describe("should render AdvancedColorPicker component and check functionality", () => {
-  (
-    [
-      ["ArrowUp", 2],
-      ["ArrowLeft", 6],
-      ["ArrowRight", 8],
-    ] as [string, number][]
-  ).forEach(([key, index]) => {
-    test(`should use ${key} key and move selection`, async ({
-      mount,
-      page,
-    }) => {
-      await mount(<AdvancedColorPickerCustom />);
-
-      const picker = simpleColorPickerInput(page, 7);
-      await picker.press(key);
-      await expect(simpleColorPickerInput(page, index)).toBeChecked();
-    });
-  });
-
-  test("should move selection down using downarrow", async ({
-    mount,
-    page,
-  }) => {
-    await mount(<AdvancedColorPickerCustom />);
-
-    const picker = simpleColorPickerInput(page, 7);
-    await picker.press("ArrowUp");
-    const newPicker = simpleColorPickerInput(page, 2);
-    await newPicker.press("ArrowDown");
-    await expect(simpleColorPickerInput(page, 7)).toBeChecked();
-  });
-
   test("should regain focus on color after second tab", async ({
     mount,
     page,
@@ -103,40 +50,10 @@ test.describe("should render AdvancedColorPicker component and check functionali
 
     await expect(simpleColorPickerInput(page, 7)).toBeFocused();
   });
-
-  (["Space", "Enter"] as const).forEach((key) => {
-    test(`should close AdvancedColorPicker using ${key} on selected color`, async ({
-      mount,
-      page,
-    }) => {
-      await mount(<AdvancedColorPickerCustom />);
-
-      const picker = simpleColorPickerInput(page, 7);
-      await picker.press(key);
-      await expect(simpleColorPickerComponent(page)).toBeHidden();
-    });
-  });
-
-  [1, 2, 3].forEach((index) => {
-    test(`should confirm dedicated ${index} color was selected`, async ({
-      mount,
-      page,
-    }) => {
-      await mount(<AdvancedColorPickerCustom />);
-
-      const input = simpleColorPickerInput(page, index);
-      await input.click();
-      await expect(simpleColorPickerInput(page, index)).toBeChecked();
-    });
-  });
 });
 
 test.describe("should render AdvancedColorPicker component and check props", () => {
   const testPropValue = CHARACTERS.STANDARD;
-  const colors = [
-    { value: "#111222", label: "superBlack" },
-    { value: "#333555", label: "black" },
-  ];
 
   test("should render AdvancedColorPicker with aria-describedby prop", async ({
     mount,
@@ -210,88 +127,6 @@ test.describe("should render AdvancedColorPicker component and check props", ()
     );
   });
 
-  test("should render AdvancedColorPicker with availableColors prop", async ({
-    mount,
-    page,
-  }) => {
-    await mount(
-      <AdvancedColorPickerCustom
-        availableColors={colors}
-        selectedColor="#111222"
-      />,
-    );
-
-    await expect(simpleColorPickerInput(page, 0)).toHaveAttribute(
-      "value",
-      colors[0].value,
-    );
-    await expect(simpleColorPickerInput(page, 0)).toHaveAttribute(
-      "aria-label",
-      colors[0].label,
-    );
-    await expect(simpleColorPickerInput(page, 1)).toHaveAttribute(
-      "value",
-      colors[1].value,
-    );
-    await expect(simpleColorPickerInput(page, 1)).toHaveAttribute(
-      "aria-label",
-      colors[1].label,
-    );
-  });
-
-  test("should render AdvancedColorPicker with selectedColor prop", async ({
-    mount,
-    page,
-  }) => {
-    await mount(
-      <AdvancedColorPickerCustom
-        availableColors={colors}
-        selectedColor="#333555"
-      />,
-    );
-
-    await expect(simpleColorPickerInput(page, 1)).toHaveAttribute(
-      "value",
-      colors[1].value,
-    );
-    await expect(simpleColorPickerInput(page, 1)).toHaveAttribute(
-      "aria-label",
-      colors[1].label,
-    );
-  });
-
-  test("should render AdvancedColorPicker with defaultColor prop", async ({
-    mount,
-    page,
-  }) => {
-    await mount(
-      <AdvancedColorPickerCustom
-        availableColors={colors}
-        selectedColor="#111222"
-      />,
-    );
-
-    await expect(advancedColorPickerPreview(page)).toHaveAttribute(
-      "color",
-      colors[0].value,
-    );
-  });
-
-  [true, false].forEach((bool) => {
-    test(`should render AdvancedColorPicker with open prop set to ${bool}`, async ({
-      mount,
-      page,
-    }) => {
-      await mount(<AdvancedColorPickerCustom open={bool} />);
-
-      if (bool) {
-        await expect(advancedColorPickerParent(page)).toBeVisible();
-      } else {
-        await expect(advancedColorPickerParent(page)).toBeHidden();
-      }
-    });
-  });
-
   test("should render AdvancedColorPicker with correct description when color is selected", async ({
     mount,
     page,
@@ -314,14 +149,3 @@ test.describe("Accessibility tests for AdvancedColorPicker component", () => {
     await checkAccessibility(page);
   });
 });
-
-test("color picker preview should have the expected border radius styling", async ({
-  mount,
-  page,
-}) => {
-  await mount(<AdvancedColorPickerCustom />);
-  await expect(advancedColorPickerPreview(page)).toHaveCSS(
-    "border-radius",
-    "4px",
-  );
-});