Update some more tests to new structure

src/modules/user/UserPage.spec.tsx

@@ -62,7 +62,7 @@ const mocksWithSlackId = [
 ];
 
 describe("<UserPage/>", () => {
-  const { setProps, renderComponent, updateDecorator } = setComponent(
+  const { renderComponent, setProps, updateDecorator } = setComponent(
     makeFC(UserPage),
     { decorators: [dataDecorator(mocks())] },
   );

src/ui/Card/Card.spec.tsx

@@ -1,33 +1,27 @@
-import { render } from "@testing-library/react";
+import { screen } from "@testing-library/react";
 import { Card } from ".";
+import { setComponent } from "../../support/testing/testComponent";
 
-test("given an icon name, renders an icon", () => {
-  const { getByText } = render(
-    <Card
-      theme="light"
-      title={{
-        text: "Kudometer",
-        iconName: "flag",
-      }}
-      content="content"
-      footer="footer"
-    />,
-  );
+describe("Card", () => {
+  const { renderComponent, updateProps } = setComponent(Card, {
+    props: {
+      title: { text: "Kudometer" },
+      content: "content",
+    },
+  });
 
-  getByText("Kudometer");
-  getByText("flag");
-});
+  test("given an icon name, renders an icon", () => {
+    updateProps({ title: { text: "Kudometer", iconName: "flag" } });
+    renderComponent();
+
+    screen.getByText("Kudometer");
+    screen.getByText("flag");
+  });
 
-test("render a default card with mandatory settings", () => {
-  const { getByText } = render(
-    <Card
-      title={{
-        text: "Kudometer",
-      }}
-      content="content"
-    />,
-  );
+  test("render a default card with mandatory settings", () => {
+    renderComponent();
 
-  getByText("Kudometer");
-  getByText("content");
+    screen.getByText("Kudometer");
+    screen.getByText("content");
+  });
 });

src/ui/Dropdown/Dropdown.spec.tsx

@@ -1,34 +1,47 @@
-import { render, fireEvent } from "@testing-library/react";
+import { screen, fireEvent } from "@testing-library/react";
 import { Dropdown, DropdownMenuItem } from ".";
+import { Decorator, setComponent } from "../../support/testing/testComponent";
+
+const dropdownDecorator: Decorator<"dropdown"> = {
+  name: "dropdown",
+  settings: {},
+  Decorator: ({ Component }) => (
+    <Dropdown label="Dropdown Label">
+      <Component />
+    </Dropdown>
+  ),
+};
 
 describe("Dropdown Component", () => {
-  it("should display the dropdown menu when clicked", () => {
-    const { queryByText, getByRole } = render(
-      <Dropdown label="Dropdown Label">
-        <DropdownMenuItem label="Item 1" />
-      </Dropdown>,
-    );
+  const { renderComponent, updateProps } = setComponent(DropdownMenuItem, {
+    decorators: [dropdownDecorator],
+    props: {
+      label: "Item 1",
+    },
+  });
 
-    expect(queryByText("Item 1")).toBeNull();
+  it("should display the dropdown menu when clicked", () => {
+    renderComponent();
 
-    const dropdownButton = getByRole("button", { name: "Dropdown Label" });
+    expect(screen.queryByText("Item 1")).toBeNull();
+    const dropdownButton = screen.getByRole("button", {
+      name: "Dropdown Label",
+    });
     fireEvent.click(dropdownButton);
 
-    expect(getByRole("menuitem", { name: "Item 1" })).toBeInTheDocument();
+    expect(
+      screen.getByRole("menuitem", { name: "Item 1" }),
+    ).toBeInTheDocument();
   });
 
   it("should render an icon when passed", () => {
-    const iconName = "man";
+    updateProps({ iconName: "man" });
+    renderComponent();
 
-    const { getByText, getByRole } = render(
-      <Dropdown label="Dropdown Label">
-        <DropdownMenuItem label="Item 1" iconName={iconName} />
-      </Dropdown>,
-    );
-
-    const dropdownButton = getByRole("button", { name: "Dropdown Label" });
+    const dropdownButton = screen.getByRole("button", {
+      name: "Dropdown Label",
+    });
     fireEvent.click(dropdownButton);
-
-    expect(getByText(iconName)).toBeInTheDocument();
+    expect(screen.getByText("man")).toBeInTheDocument();
   });
 });

src/ui/Dropzone/index.spec.tsx

@@ -1,19 +1,16 @@
-import { render } from "@testing-library/react";
-
+import { screen } from "@testing-library/react";
+import { setComponent } from "../../support/testing/testComponent";
 import Dropzone from ".";
 
 describe("<Dropzone/>", () => {
-    const props = {
-        label: 'Drop it!'
-    }
-
-    test('renders an img with provided alt text', () => {
-        const { queryByText } = render(
-            <Dropzone { ...props } />
-        );
+  const { renderComponent } = setComponent(Dropzone, {
+    props: { label: "Drop it!" },
+  });
 
-        const label = queryByText(props.label);
+  test("renders an img with provided alt text", () => {
+    renderComponent();
 
-        expect(label).toBeInTheDocument();
-    });
+    const label = screen.queryByText("Drop it!");
+    expect(label).toBeInTheDocument();
+  });
 });

src/ui/InputField/InputField.spec.tsx

@@ -1,35 +1,34 @@
 import { render, screen } from "@testing-library/react";
 import InputField from ".";
+import { setComponent } from "../../support/testing/testComponent";
 
-test("given an element type input (by default), it renders a input field", () => {
-  render(
-    <InputField
-      id="input"
-      label="Enter some text"
-      type="text"
-      placeholder="Placeholder"
-    />,
-  );
+describe("InputField", () => {
+  const { renderComponent, updateProps } = setComponent(InputField, {
+    props: {
+      id: "input",
+      label: "Enter some text",
+      type: "text",
+      placeholder: "Placeholder",
+    },
+  });
 
-  const inputElement = screen.getByLabelText("Enter some text");
-  expect(inputElement).toHaveAttribute("id", "input");
-  expect(inputElement).toHaveAttribute("type", "text");
-  expect(inputElement).toHaveAttribute("placeholder", "Placeholder");
-  expect(inputElement.tagName).toBe("INPUT");
-});
+  test("given an element type input (by default), it renders a input field", () => {
+    renderComponent();
+
+    const inputElement = screen.getByLabelText("Enter some text");
+    expect(inputElement).toHaveAttribute("id", "input");
+    expect(inputElement).toHaveAttribute("type", "text");
+    expect(inputElement).toHaveAttribute("placeholder", "Placeholder");
+    expect(inputElement.tagName).toBe("INPUT");
+  });
 
-test("given an element type textarea, it renders a textarea field", () => {
-  render(
-    <InputField
-      elementType="textarea"
-      id="textfield-1"
-      label="Enter some text"
-      placeholder="Placeholder"
-    />,
-  );
+  test("given an element type textarea, it renders a textarea field", () => {
+    updateProps({ id: "textfield-1", elementType: "textarea" });
+    renderComponent();
 
-  const inputElement = screen.getByLabelText("Enter some text");
-  expect(inputElement).toHaveAttribute("id", "textfield-1");
-  expect(inputElement).toHaveAttribute("placeholder", "Placeholder");
-  expect(inputElement.tagName).toBe("TEXTAREA");
+    const inputElement = screen.getByLabelText("Enter some text");
+    expect(inputElement).toHaveAttribute("id", "textfield-1");
+    expect(inputElement).toHaveAttribute("placeholder", "Placeholder");
+    expect(inputElement.tagName).toBe("TEXTAREA");
+  });
 });