From 592a521f5328106a7cb8b84a6c5263b7a4e71605 Mon Sep 17 00:00:00 2001
From: edleeks87 <edward.leeks@sage.com>
Date: Thu, 10 Oct 2024 18:15:22 +0100
Subject: [PATCH] refactor(option-row): convert unit tests to RTL

---
 .../__snapshots__/option-row.spec.tsx.snap    |  42 ----
 .../option-row/option-row.component.tsx       |   4 +-
 .../select/option-row/option-row.spec.tsx     | 180 ---------------
 .../select/option-row/option-row.test.tsx     | 218 ++++++++++++++++++
 4 files changed, 220 insertions(+), 224 deletions(-)
 delete mode 100644 src/components/select/option-row/__snapshots__/option-row.spec.tsx.snap
 delete mode 100644 src/components/select/option-row/option-row.spec.tsx
 create mode 100644 src/components/select/option-row/option-row.test.tsx

diff --git a/src/components/select/option-row/__snapshots__/option-row.spec.tsx.snap b/src/components/select/option-row/__snapshots__/option-row.spec.tsx.snap
deleted file mode 100644
index 6f3985d790..0000000000
--- a/src/components/select/option-row/__snapshots__/option-row.spec.tsx.snap
+++ /dev/null
@@ -1,42 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`OptionRow renders properly 1`] = `
-.c0 {
-  cursor: pointer;
-  width: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  background-color: var(--colorsUtilityMajor200);
-}
-
-.c0:hover {
-  background-color: var(--colorsUtilityMajor100);
-}
-
-.c0 td {
-  line-height: 16px;
-  padding: 12px 16px;
-}
-
-.c0 td:first-child {
-  font-weight: 500;
-}
-
-<table>
-  <tbody>
-    <tr
-      aria-selected={true}
-      className="c0"
-      data-component="option-row"
-      id="1"
-      onClick={[Function]}
-      role="option"
-    >
-      <td>
-        foo
-      </td>
-    </tr>
-  </tbody>
-</table>
-`;
diff --git a/src/components/select/option-row/option-row.component.tsx b/src/components/select/option-row/option-row.component.tsx
index 9befd0198c..a443f78605 100644
--- a/src/components/select/option-row/option-row.component.tsx
+++ b/src/components/select/option-row/option-row.component.tsx
@@ -5,7 +5,7 @@ import guid from "../../../__internal__/utils/helpers/guid";
 import StyledOptionRow from "./option-row.style";
 import SelectListContext from "../__internal__/select-list/select-list.context";
 
-export interface OptionRowProps extends TagProps {
+export interface OptionRowProps extends Omit<TagProps, "data-component"> {
   /** The option's visible text, displayed within <Textbox> of <Select> */
   text: string;
   /** Row content, should consist of multiple td elements */
@@ -84,7 +84,6 @@ const OptionRow = React.forwardRef(
         ref={ref}
         aria-selected={isSelected}
         aria-disabled={disabled}
-        data-component="option-row"
         isDisabled={disabled}
         onClick={handleClick}
         isHighlighted={selectListContext.currentOptionsListIndex === index}
@@ -92,6 +91,7 @@ const OptionRow = React.forwardRef(
         hidden={hidden}
         style={style}
         {...rest}
+        data-component="option-row"
       >
         {children}
       </StyledOptionRow>
diff --git a/src/components/select/option-row/option-row.spec.tsx b/src/components/select/option-row/option-row.spec.tsx
deleted file mode 100644
index 2d8c1c12f1..0000000000
--- a/src/components/select/option-row/option-row.spec.tsx
+++ /dev/null
@@ -1,180 +0,0 @@
-import React from "react";
-import TestRenderer from "react-test-renderer";
-import { shallow, mount } from "enzyme";
-import OptionRow, { OptionRowProps } from "./option-row.component";
-import SelectListContext from "../__internal__/select-list/select-list.context";
-
-function renderOptionRow(
-  props: Omit<OptionRowProps, "id" | "children">,
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  renderer: any = shallow
-) {
-  return renderer(
-    <table>
-      <tbody>
-        <OptionRow id="1" {...props}>
-          <td>foo</td>
-        </OptionRow>
-      </tbody>
-    </table>
-  );
-}
-
-describe("OptionRow", () => {
-  it("renders properly", () => {
-    const props = { id: "1", value: "1", text: "foo", children: "bar" };
-    expect(renderOptionRow(props, TestRenderer.create)).toMatchSnapshot();
-  });
-
-  describe("when isHighlighted prop is set", () => {
-    it("then it should have expected background", () => {
-      const props = { value: "1", text: "foo", isHighlighted: true };
-      expect(renderOptionRow(props, mount)).toHaveStyleRule(
-        "background-color",
-        "var(--colorsUtilityMajor200)"
-      );
-    });
-  });
-
-  describe("when hidden prop is set", () => {
-    it("then it should have display set to none", () => {
-      const props = { value: "1", text: "foo", hidden: true };
-      expect(renderOptionRow(props, mount)).toHaveStyleRule("display", "none");
-    });
-  });
-
-  describe("when disabled prop is set", () => {
-    it("should have expected style", () => {
-      const props = { value: "1", text: "foo", disabled: true };
-      expect(renderOptionRow(props, mount)).toHaveStyleRule(
-        "color",
-        "var(--colorsUtilityYin030)"
-      );
-      expect(renderOptionRow(props, mount)).toHaveStyleRule(
-        "cursor",
-        "not-allowed"
-      );
-    });
-
-    it("aria-disabled should be set to true", () => {
-      const props = { value: "1", text: "foo", disabled: true };
-      const wrapper = renderOptionRow(props, mount);
-      expect(
-        wrapper.find(OptionRow).getDOMNode().getAttribute("aria-disabled")
-      ).toBe("true");
-    });
-
-    it("onSelect should not be called when the element is clicked", () => {
-      const onSelect = jest.fn();
-      const props = {
-        id: "1",
-        value: "1",
-        text: "foo",
-        onSelect,
-        disabled: true,
-      };
-      const wrapper = renderOptionRow(props, mount);
-      wrapper.find(OptionRow).simulate("click");
-
-      expect(onSelect).not.toBeCalled();
-    });
-  });
-
-  describe("when the multiselectValues list contains the element value", () => {
-    it("then the aria-selected attribute should be set to true", () => {
-      const wrapper = mount(
-        <table>
-          <tbody>
-            <SelectListContext.Provider value={{ multiselectValues: ["1"] }}>
-              <OptionRow id="1" value="1" text="foo">
-                <td>foo</td>
-              </OptionRow>
-            </SelectListContext.Provider>
-          </tbody>
-        </table>
-      );
-      expect(
-        wrapper.find(OptionRow).getDOMNode().getAttribute("aria-selected")
-      ).toBe("true");
-      wrapper.unmount();
-    });
-  });
-
-  describe("when the multiselectValues list does not contain the element value", () => {
-    it("then the aria-selected attribute should be set to false", () => {
-      const wrapper = mount(
-        <table>
-          <tbody>
-            <SelectListContext.Provider
-              value={{ multiselectValues: ["1", "2"] }}
-            >
-              <OptionRow id="3" value="3" text="foo">
-                <td>foo</td>
-              </OptionRow>
-            </SelectListContext.Provider>
-          </tbody>
-        </table>
-      );
-      expect(
-        wrapper.find(OptionRow).getDOMNode().getAttribute("aria-selected")
-      ).toBe("false");
-      wrapper.unmount();
-    });
-  });
-
-  describe("when the element is hovered over", () => {
-    it("then it should have expected background", () => {
-      const props = { value: "1", text: "foo" };
-      expect(renderOptionRow(props, mount)).toHaveStyleRule(
-        "background-color",
-        "var(--colorsUtilityMajor100)",
-        { modifier: ":hover" }
-      );
-    });
-  });
-
-  describe("when the element is clicked", () => {
-    it("then onSelect should be called with text and value", () => {
-      const onSelect = jest.fn();
-      const props = { id: "1", value: "1", text: "foo", onSelect };
-      const wrapper = renderOptionRow(props, mount);
-      wrapper.find(OptionRow).simulate("click");
-
-      expect(onSelect).toHaveBeenCalledWith({
-        id: props.id,
-        text: props.text,
-        value: props.value,
-      });
-    });
-  });
-
-  describe("tags on component", () => {
-    it("includes correct component, element and role data tags", () => {
-      const wrapper = mount(
-        <table>
-          <tbody>
-            <OptionRow
-              value="1"
-              text="one"
-              data-component="foo"
-              data-element="bar"
-              data-role="baz"
-            >
-              <td>qux</td>
-            </OptionRow>
-          </tbody>
-        </table>
-      );
-
-      expect(
-        wrapper.find(OptionRow).getDOMNode().getAttribute("data-component")
-      ).toEqual("foo");
-      expect(
-        wrapper.find(OptionRow).getDOMNode().getAttribute("data-element")
-      ).toEqual("bar");
-      expect(
-        wrapper.find(OptionRow).getDOMNode().getAttribute("data-role")
-      ).toEqual("baz");
-    });
-  });
-});
diff --git a/src/components/select/option-row/option-row.test.tsx b/src/components/select/option-row/option-row.test.tsx
new file mode 100644
index 0000000000..2870135776
--- /dev/null
+++ b/src/components/select/option-row/option-row.test.tsx
@@ -0,0 +1,218 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import OptionRow from "./option-row.component";
+import SelectListContext from "../__internal__/select-list/select-list.context";
+
+test("renders with children content visible", () => {
+  render(
+    <table>
+      <tbody>
+        <OptionRow value="1" text="foo">
+          <td>bar</td>
+        </OptionRow>
+      </tbody>
+    </table>
+  );
+
+  expect(screen.getByRole("option", { name: "bar" })).toBeVisible();
+});
+
+test("should not render when hidden prop is set", () => {
+  render(
+    <table>
+      <tbody>
+        <OptionRow value="1" text="foo" hidden>
+          <td>bar</td>
+        </OptionRow>
+      </tbody>
+    </table>
+  );
+
+  expect(screen.queryByRole("option", { name: "bar" })).not.toBeInTheDocument();
+});
+
+describe("when `disabled` prop is set", () => {
+  it("should have expected style", () => {
+    render(
+      <table>
+        <tbody>
+          <OptionRow value="1" text="foo" disabled>
+            <td>bar</td>
+          </OptionRow>
+        </tbody>
+      </table>
+    );
+    const optionRow = screen.getByRole("option", { name: "bar" });
+
+    expect(optionRow).toHaveStyleRule("color", "var(--colorsUtilityYin030)");
+    expect(optionRow).toHaveStyle("cursor: not-allowed");
+  });
+
+  it("should render with aria-disabled attribute set to true", () => {
+    render(
+      <table>
+        <tbody>
+          <OptionRow value="1" text="foo" disabled>
+            <td>bar</td>
+          </OptionRow>
+        </tbody>
+      </table>
+    );
+    const optionRow = screen.getByRole("option", { name: "bar" });
+
+    expect(optionRow).toHaveAttribute("aria-disabled", "true");
+  });
+
+  it("should not call onSelect when the user clicks on the element", async () => {
+    const user = userEvent.setup();
+    const onSelect = jest.fn();
+    render(
+      <table>
+        <tbody>
+          <OptionRow value="1" text="foo" disabled onSelect={onSelect}>
+            <td>bar</td>
+          </OptionRow>
+        </tbody>
+      </table>
+    );
+    const optionRow = screen.getByRole("option", { name: "bar" });
+    await user.click(optionRow);
+
+    expect(onSelect).not.toHaveBeenCalled();
+  });
+});
+
+describe("when `disabled` prop is not set", () => {
+  it("should have expected style", () => {
+    render(
+      <table>
+        <tbody>
+          <OptionRow value="1" text="foo">
+            <td>bar</td>
+          </OptionRow>
+        </tbody>
+      </table>
+    );
+    const optionRow = screen.getByRole("option", { name: "bar" });
+
+    expect(optionRow).not.toHaveStyleRule(
+      "color",
+      "var(--colorsUtilityYin030)"
+    );
+    expect(optionRow).toHaveStyle("cursor: pointer");
+  });
+
+  it("should not have aria-disabled attribute set", () => {
+    render(
+      <table>
+        <tbody>
+          <OptionRow value="1" text="foo">
+            <td>bar</td>
+          </OptionRow>
+        </tbody>
+      </table>
+    );
+    const optionRow = screen.getByRole("option", { name: "bar" });
+
+    expect(optionRow).not.toHaveAttribute("aria-disabled");
+  });
+
+  it("should call onSelect when the user clicks on the element", async () => {
+    const user = userEvent.setup();
+    const onSelect = jest.fn();
+    render(
+      <table>
+        <tbody>
+          <OptionRow id="foo" text="bar" value="baz" onSelect={onSelect}>
+            <td>bar</td>
+          </OptionRow>
+        </tbody>
+      </table>
+    );
+    const optionRow = screen.getByRole("option", { name: "bar" });
+    await user.click(optionRow);
+
+    expect(onSelect).toHaveBeenCalledWith({
+      id: "foo",
+      text: "bar",
+      value: "baz",
+    });
+  });
+});
+
+test("should render with `data-` attributes set when props are passed", () => {
+  render(
+    <table>
+      <tbody>
+        <OptionRow value="1" text="foo" data-element="bar" data-role="baz">
+          <td>bar</td>
+        </OptionRow>
+      </tbody>
+    </table>
+  );
+  const optionRow = screen.getByRole("option", { name: "bar" });
+
+  expect(optionRow).toHaveAttribute("data-component", "option-row");
+  expect(optionRow).toHaveAttribute("data-element", "bar");
+  expect(optionRow).toHaveAttribute("data-role", "baz");
+});
+
+describe("when the `multiSelectValues` list is passed via context", () => {
+  it("should set aria-selected to true when the value is in the list", () => {
+    render(
+      <SelectListContext.Provider value={{ multiselectValues: ["1"] }}>
+        <table>
+          <tbody>
+            <OptionRow id="1" value="1" text="foo">
+              <td>foo</td>
+            </OptionRow>
+          </tbody>
+        </table>
+      </SelectListContext.Provider>
+    );
+
+    expect(screen.getByRole("option", { name: "foo" })).toHaveAttribute(
+      "aria-selected",
+      "true"
+    );
+  });
+
+  it("should set aria-selected to false when the value is not in the list", () => {
+    render(
+      <SelectListContext.Provider value={{ multiselectValues: ["2"] }}>
+        <table>
+          <tbody>
+            <OptionRow id="1" value="1" text="foo">
+              <td>foo</td>
+            </OptionRow>
+          </tbody>
+        </table>
+      </SelectListContext.Provider>
+    );
+
+    expect(screen.getByRole("option", { name: "foo" })).toHaveAttribute(
+      "aria-selected",
+      "false"
+    );
+  });
+
+  it("should set aria-selected to false when the list is empty", () => {
+    render(
+      <SelectListContext.Provider value={{ multiselectValues: [] }}>
+        <table>
+          <tbody>
+            <OptionRow id="1" value="1" text="foo">
+              <td>foo</td>
+            </OptionRow>
+          </tbody>
+        </table>
+      </SelectListContext.Provider>
+    );
+
+    expect(screen.getByRole("option", { name: "foo" })).toHaveAttribute(
+      "aria-selected",
+      "false"
+    );
+  });
+});