Merge pull request #6979 from Sage/FE-6804-detail-rtl

refactor(detail): convert enzyme tests to RTL

src/__internal__/utils/helpers/tags/tags-specs/index.ts

@@ -1 +1 @@
-export { elementsTagTest, rootTagTest } from "./tags-specs";
+export { default } from "./tags-specs";

src/__internal__/utils/helpers/tags/tags-specs/tags-specs.ts

@@ -1,17 +1,6 @@
 import { ReactWrapper, ShallowWrapper } from "enzyme";
 
-export const elementsTagTest = (
-  wrapper: ReactWrapper | ShallowWrapper,
-  elements: string[]
-) => {
-  elements.forEach((element) => {
-    it(`include 'data-element="${element}"'`, () => {
-      expect(wrapper.find({ "data-element": element }).length).toEqual(1);
-    });
-  });
-};
-
-export const rootTagTest = (
+const rootTagTest = (
   rootNode: ReactWrapper | ShallowWrapper,
   comp: string,
   elem?: string,
@@ -21,3 +10,5 @@ export const rootTagTest = (
   expect(rootNode.prop("data-element")).toEqual(elem);
   expect(rootNode.prop("data-role")).toEqual(role);
 };
+
+export default rootTagTest;

src/components/detail/detail.component.tsx

@@ -41,7 +41,11 @@ export const Detail = ({
     </StyledDetailContent>
 
     {footnote && (
-      <StyledDetailFootnote data-element="footnote" hasIcon={!!icon}>
+      <StyledDetailFootnote
+        data-element="footnote"
+        data-role="footnote"
+        hasIcon={!!icon}
+      >
         {footnote}
       </StyledDetailFootnote>
     )}

src/components/detail/detail.test.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import { render, screen, within } from "@testing-library/react";
+import Detail from ".";
+import { testStyledSystemMargin } from "../../__spec_helper__/__internal__/test-utils";
+
+test("renders children", () => {
+  render(<Detail>foo</Detail>);
+
+  expect(screen.getByText("foo")).toBeVisible();
+});
+
+test("renders with provided `footnote`", () => {
+  render(<Detail footnote="extra info">foo</Detail>);
+
+  const footnoteText = within(screen.getByTestId("footnote")).getByText(
+    "extra info"
+  );
+
+  expect(footnoteText).toBeVisible();
+});
+
+test("renders with provided `icon`", () => {
+  render(<Detail icon="bin">foo</Detail>);
+
+  const icon = screen.getByTestId("icon");
+
+  expect(icon).toBeVisible();
+  expect(icon).toHaveAttribute("type", "bin");
+});
+
+test("renders with provided data- tags", () => {
+  render(
+    <Detail data-element="bar" data-role="baz">
+      foo
+    </Detail>
+  );
+
+  expect(screen.getByTestId("baz")).toHaveAttribute("data-element", "bar");
+});
+
+// coverage
+test("renders with expected styles when `icon` and `footnote` are passed", () => {
+  render(
+    <Detail icon="bin" footnote="extra info">
+      foo
+    </Detail>
+  );
+
+  const footnote = screen.getByTestId("footnote");
+
+  expect(footnote).toHaveStyle("margin-left: 26px");
+});
+
+testStyledSystemMargin((props) => <Detail {...props}>foo</Detail>);

src/components/popover-container/popover-container.spec.tsx

@@ -26,7 +26,7 @@ import Icon from "../icon";
 import guid from "../../__internal__/utils/helpers/guid";
 import { Select, Option } from "../select";
 import useMediaQuery from "../../hooks/useMediaQuery";
-import { rootTagTest } from "../../__internal__/utils/helpers/tags/tags-specs";
+import rootTagTest from "../../__internal__/utils/helpers/tags/tags-specs";
 
 jest.mock("../../hooks/useMediaQuery", () => {
   return {

src/components/tabs/tabs.spec.tsx

@@ -5,7 +5,7 @@ import { act } from "react-dom/test-utils";
 import TabTitle from "./__internal__/tab-title/tab-title.component";
 import { Tabs, Tab, TabsProps } from ".";
 import TabContext from "./tab/__internal__/tab.context";
-import { rootTagTest } from "../../__internal__/utils/helpers/tags/tags-specs";
+import rootTagTest from "../../__internal__/utils/helpers/tags/tags-specs";
 import StyledTabs, { StyledTabsProps } from "./tabs.style";
 import StyledTab from "./tab/tab.style";
 import { StyledTabTitleButton } from "./__internal__/tab-title/tab-title.style";

src/components/tile/tile-footer/tile-footer.spec.tsx

@@ -6,7 +6,7 @@ import {
   testStyledSystemPadding,
 } from "../../../__spec_helper__/__internal__/test-utils";
 import StyledTileFooter from "./tile-footer.style";
-import { rootTagTest } from "../../../__internal__/utils/helpers/tags/tags-specs";
+import rootTagTest from "../../../__internal__/utils/helpers/tags/tags-specs";
 
 describe("TileFooter", () => {
   let wrapper: ReactWrapper;

src/components/tile/tile-header/tile-header.spec.tsx

@@ -6,7 +6,7 @@ import {
   testStyledSystemPadding,
 } from "../../../__spec_helper__/__internal__/test-utils";
 import StyledTileHeader from "./tile-header.style";
-import { rootTagTest } from "../../../__internal__/utils/helpers/tags/tags-specs";
+import rootTagTest from "../../../__internal__/utils/helpers/tags/tags-specs";
 
 describe("TileHeader", () => {
   let wrapper: ReactWrapper;

src/components/tile/tile.spec.tsx

@@ -10,7 +10,7 @@ import {
   testStyledSystemHeight,
 } from "../../__spec_helper__/__internal__/test-utils";
 import { TileProps } from "./tile.component";
-import { rootTagTest } from "../../__internal__/utils/helpers/tags/tags-specs";
+import rootTagTest from "../../__internal__/utils/helpers/tags/tags-specs";
 import StyledTile from "./tile.style";
 import { TILE_HIGHLIGHT_VARIANTS } from "./tile.config";