From 7b81d73bdec13eace8b56cf8a4e0c58519774937 Mon Sep 17 00:00:00 2001 From: nuria1110 Date: Mon, 23 Sep 2024 11:57:40 +0100 Subject: [PATCH] refactor(content): convert enzyme tests to RTL --- src/components/content/content.component.tsx | 2 + src/components/content/content.spec.tsx | 230 ------------------- src/components/content/content.test.tsx | 95 ++++++++ 3 files changed, 97 insertions(+), 230 deletions(-) delete mode 100644 src/components/content/content.spec.tsx create mode 100644 src/components/content/content.test.tsx diff --git a/src/components/content/content.component.tsx b/src/components/content/content.component.tsx index 6e7a097cad..570585e53c 100644 --- a/src/components/content/content.component.tsx +++ b/src/components/content/content.component.tsx @@ -40,6 +40,7 @@ export const Content = ({ variant={variant} inline={inline} data-element="content-title" + data-role="content-title" titleWidth={titleWidth} align={align} > @@ -50,6 +51,7 @@ export const Content = ({ variant={variant} inline={inline} data-element="content-body" + data-role="content-body" bodyFullWidth={bodyFullWidth} titleWidth={titleWidth} align={align} diff --git a/src/components/content/content.spec.tsx b/src/components/content/content.spec.tsx deleted file mode 100644 index 89915d0902..0000000000 --- a/src/components/content/content.spec.tsx +++ /dev/null @@ -1,230 +0,0 @@ -import React from "react"; -import { ThemeProvider } from "styled-components"; -import { mount, shallow } from "enzyme"; -import sageTheme from "../../style/themes/sage"; -import Content, { ContentProps } from "."; -import { - StyledContent, - StyledContentTitle, - StyledContentBody, - AlignOptions, -} from "./content.style"; -import { - assertStyleMatch, - testStyledSystemMargin, -} from "../../__spec_helper__/__internal__/test-utils"; -import { rootTagTest } from "../../__internal__/utils/helpers/tags/tags-specs"; - -describe("Content", () => { - let wrapper; - - const renderWrapper = (props?: ContentProps, render = mount) => { - return render( - - Foo - - ); - }; - - testStyledSystemMargin((props) => Foo); - - describe("render", () => { - it("renders a title", () => { - wrapper = renderWrapper(); - expect(wrapper.find(StyledContentTitle).exists()).toBe(true); - }); - - it("renders a custom title", () => { - wrapper = renderWrapper({ - title: Title, - }); - expect(wrapper.find("span").text()).toBe("Title"); - }); - - it("renders a body", () => { - wrapper = renderWrapper(); - expect(wrapper.find(StyledContentBody).exists()).toBe(true); - }); - }); - - describe("styles", () => { - describe("renders correct styles for the Content component", () => { - it("if there is more than one Content component next to each other", () => { - wrapper = renderWrapper(); - assertStyleMatch( - { - marginTop: "15px", - }, - wrapper, - { modifier: `& + ${StyledContent}` } - ); - }); - - it.each([ - ["center", "center"], - ["right", "right"], - ["left", "left"], - ] as const)( - "if prop is `%s`", - (a: AlignOptions, expected: AlignOptions) => { - wrapper = renderWrapper({ align: a }); - assertStyleMatch( - { - textAlign: expected, - }, - wrapper - ); - } - ); - - it("if there is prop align", () => { - wrapper = renderWrapper(); - assertStyleMatch( - { - marginTop: "15px", - }, - wrapper, - { modifier: `& + ${StyledContent}` } - ); - }); - - it("if there is prop `inline` used along with `bodyFullWidth`", () => { - wrapper = renderWrapper({ inline: true, bodyFullWidth: true }); - assertStyleMatch( - { - marginTop: "15px", - }, - wrapper.find(StyledContentBody) - ); - }); - }); - - describe("renders correct styles for title", () => { - it("as default", () => { - wrapper = renderWrapper(); - assertStyleMatch( - { - display: "block", - fontWeight: "bold", - }, - wrapper.find(StyledContentTitle) - ); - }); - - it("if `titleWidth` is 50", () => { - wrapper = renderWrapper({ titleWidth: "50" }); - assertStyleMatch( - { - width: "calc(50% - 30px)", - }, - wrapper.find(StyledContentTitle) - ); - }); - - it("if prop `inline` is false and prop `align` is center", () => { - wrapper = renderWrapper({ inline: false, align: "center" }); - assertStyleMatch( - { - textAlign: "center", - }, - wrapper.find(StyledContentTitle) - ); - }); - - it("if prop `variant` is `secondary` and prop `align` is center", () => { - wrapper = renderWrapper({ variant: "secondary" }); - assertStyleMatch( - { - color: "var(--colorsUtilityYin055)", - fontWeight: "normal", - }, - wrapper.find(StyledContentTitle) - ); - }); - - it("if prop `inline` is true and prop `align` is center", () => { - wrapper = renderWrapper({ inline: true, align: "center" }); - assertStyleMatch( - { - textAlign: "right", - width: "calc(50% - 30px)", - }, - wrapper.find(StyledContentTitle) - ); - }); - }); - - describe("render correct styles for body", () => { - it("as default", () => { - wrapper = renderWrapper(); - assertStyleMatch( - { - display: "block", - marginTop: "2px", - whiteSpace: "pre-wrap", - wordWrap: "break-word", - }, - wrapper.find(StyledContentBody) - ); - }); - - it("if prop `inline` is true", () => { - wrapper = renderWrapper({ inline: true }); - assertStyleMatch( - { - display: "inline-block", - whiteSpace: "pre-wrap", - wordWrap: "break-word", - marginTop: "0", - marginLeft: "30px", - textAlign: "left", - }, - wrapper.find(StyledContentBody) - ); - }); - - it("if prop `align` is center and prop `inline` is true", () => { - wrapper = renderWrapper({ inline: true, align: "center" }); - assertStyleMatch( - { - width: "50%", - }, - wrapper.find(StyledContentBody) - ); - }); - - it("if prop `bodyFullWidth` is true", () => { - wrapper = renderWrapper({ bodyFullWidth: true }); - assertStyleMatch( - { - width: "100%", - }, - wrapper.find(StyledContentBody) - ); - }); - - it("if prop `titleWidth` is 90", () => { - wrapper = renderWrapper({ titleWidth: "90" }); - assertStyleMatch( - { - width: "10%", - }, - wrapper.find(StyledContentBody) - ); - }); - }); - }); - - describe("tags", () => { - describe("on component", () => { - it("include correct component, element and role data tags", () => { - wrapper = shallow( - -
- - ); - rootTagTest(wrapper, "content", "bar", "baz"); - }); - }); - }); -}); diff --git a/src/components/content/content.test.tsx b/src/components/content/content.test.tsx new file mode 100644 index 0000000000..1de6aa9367 --- /dev/null +++ b/src/components/content/content.test.tsx @@ -0,0 +1,95 @@ +import React from "react"; +import { render, screen, within } from "@testing-library/react"; +import Content from "."; +import { testStyledSystemMargin } from "../../__spec_helper__/__internal__/test-utils"; + +test("renders the provided `title` as a string", () => { + render(); + + expect(screen.getByText("Title")).toBeVisible(); +}); + +test("renders the provided `title` as a node", () => { + render(Title} />); + + expect(screen.getByText("Title")).toBeVisible(); +}); + +test("renders children as the body", () => { + render(Body); + + const body = within(screen.getByTestId("content-body")).getByText("Body"); + + expect(body).toBeVisible(); +}); + +test("renders with expected data- tags", () => { + render(); + + expect(screen.getByTestId("bar")).toHaveAttribute("data-element", "foo"); +}); + +// coverage +test("renders with expected styles when `inline` prop is true", () => { + render(); + + const title = screen.getByTestId("content-title"); + const body = screen.getByTestId("content-body"); + + expect(title).toHaveStyle({ display: "inline-block" }); + expect(body).toHaveStyle({ display: "inline-block" }); +}); + +// coverage +test("renders with expected styles when `align` is 'center' and `inline` is true", () => { + render(); + + const title = screen.getByTestId("content-title"); + const body = screen.getByTestId("content-body"); + + expect(title).toHaveStyle({ textAlign: "right", width: "calc(50% - 30px)" }); + expect(body).toHaveStyle({ width: "50%" }); +}); + +// coverage +test("renders with expected styles when `variant` is 'secondary'", () => { + render(); + + const title = screen.getByTestId("content-title"); + + expect(title).toHaveStyle({ fontWeight: "normal" }); + expect(title).toHaveStyleRule("color", "var(--colorsUtilityYin055)"); +}); + +// coverage +test("renders with expected styles when `bodyFullWidth` is true", () => { + render(); + + const content = screen.getByTestId("content"); + const body = screen.getByTestId("content-body"); + + expect(content).toHaveStyle({ textAlign: "left" }); + expect(body).toHaveStyle({ width: "100%" }); +}); + +// coverage +test("renders with expected styles when `titleWidth` is set", () => { + render(); + + const title = screen.getByTestId("content-title"); + const body = screen.getByTestId("content-body"); + + expect(title).toHaveStyle({ width: "calc(70% - 30px)" }); + expect(body).toHaveStyle({ width: "30%" }); +}); + +// coverage +test("renders with expected styles when `inline` is true and `bodyFullWidth` is true", () => { + render(); + + const body = screen.getByTestId("content-body"); + + expect(body).toHaveStyle({ marginTop: "15px" }); +}); + +testStyledSystemMargin((props) => Foo);