Merge pull request #193 from kabisa/try-out-test-helper

Try out test helper

.eslintrc

@@ -22,6 +22,7 @@
     "max-len": ["error", { "code": 120 }],
     "react/button-has-type": "off",
     "react/react-in-jsx-scope": "off",
+    "react/prop-types": "off",
     "@typescript-eslint/no-explicit-any": "off",
     "@typescript-eslint/ban-ts-comment": "off",
     "@typescript-eslint/explicit-function-return-type": "off",

src/components/AuthenticatedRoute.spec.tsx

@@ -1,55 +1,66 @@
-import { withMockedProviders } from "../spec_helper";
 import AuthenticatedRoute from "./AuthenticatedRoute";
 import { Auth } from "../support";
-import { render, screen } from "@testing-library/react";
+import { screen } from "@testing-library/react";
+import { setTestSubject } from "../support/testing/testSubject";
+import { PATH_CHOOSE_TEAM, PATH_LOGIN } from "../routes";
+import { routingDecorator } from "../support/testing/testDecorators";
 
 jest.mock("../support/auth");
 
-const fakeComponent = () => <h1>Fake component</h1>;
-
-const setup = (allowNoTeam: boolean) => {
-  render(
-    withMockedProviders(
-      <AuthenticatedRoute
-        allowNoTeam={allowNoTeam}
-        component={fakeComponent}
-      />,
-    ),
+describe("<AuthenticatedRoute />", () => {
+  const { renderComponent, updateDecorator, updateProps } = setTestSubject(
+    AuthenticatedRoute,
+    {
+      decorators: [routingDecorator()],
+      props: {
+        allowNoTeam: false,
+        component: () => <h1>Fake component</h1>,
+      },
+    },
   );
-};
 
-describe("<AuthenticatedRoute />", () => {
   afterEach(() => {
     jest.clearAllMocks();
     jest.resetAllMocks();
   });
 
+  beforeEach(() => {
+    updateDecorator("routing", {
+      paths: {
+        [PATH_LOGIN]: "Login Page",
+        [PATH_CHOOSE_TEAM]: "Choose team Page",
+      },
+    });
+  });
+
   it("does not render the page if the user is not logged in", () => {
     Auth.isLoggedIn = jest.fn(() => false);
-    setup(false);
+    renderComponent();
 
     expect(screen.getByText("Login Page")).toBeInTheDocument();
   });
 
   it("does not render the page if the user has no team and allowNoTeam is false", () => {
     Auth.isLoggedIn = jest.fn(() => true);
     Auth.hasTeam = jest.fn(() => false);
-    setup(false);
+    renderComponent();
 
     expect(screen.getByText("Choose team Page")).toBeInTheDocument();
   });
 
   it("does render the page if the user has no team and allowNoTeam is true", () => {
     Auth.isLoggedIn = jest.fn(() => true);
     Auth.hasTeam = jest.fn(() => false);
-    setup(true);
+    updateProps({ allowNoTeam: true });
+    renderComponent();
+
     expect(screen.getByText("Fake component")).toBeInTheDocument();
   });
 
   it("does render the page if the user is logged in and has a team", () => {
     Auth.isLoggedIn = jest.fn(() => true);
     Auth.hasTeam = jest.fn(() => true);
-    setup(false);
+    renderComponent();
 
     expect(screen.getByText("Fake component")).toBeInTheDocument();
   });

src/components/AuthenticatedRoute.tsx

@@ -1,26 +1,35 @@
-import { Redirect, Route } from "react-router-dom";
+import {
+  Redirect,
+  Route,
+  RouteComponentProps,
+  RouteProps,
+} from "react-router-dom";
 import { PATH_CHOOSE_TEAM, PATH_LOGIN } from "../routes";
 import { Auth } from "../support";
 
-export default function AuthenticatedRoute({
+type Props = {
+  allowNoTeam?: boolean;
+  component: React.ComponentType<RouteComponentProps>;
+} & RouteProps;
+
+const AuthenticatedRoute: React.FC<Props> = ({
   allowNoTeam,
   component: Component,
   ...rest
-}: any) {
-  return (
-    <Route
-      {...rest}
-      render={(props) => {
-        if (!Auth.isLoggedIn()) {
-          return <Redirect to={PATH_LOGIN} />;
-        }
+}) => (
+  <Route
+    {...rest}
+    render={(props) => {
+      if (!Auth.isLoggedIn()) {
+        return <Redirect to={PATH_LOGIN} />;
+      }
 
-        if (Auth.hasTeam() || allowNoTeam) {
-          return <Component {...props} />;
-        }
+      if (Auth.hasTeam() || allowNoTeam) {
+        return <Component {...props} />;
+      }
 
-        return <Redirect to={PATH_CHOOSE_TEAM} />;
-      }}
-    />
-  );
-}
+      return <Redirect to={PATH_CHOOSE_TEAM} />;
+    }}
+  />
+);
+export default AuthenticatedRoute;

src/components/Circle/Circle.spec.tsx

@@ -1,19 +1,18 @@
-import { withMockedProviders } from "../../spec_helper";
+import { setTestSubject } from "../../support/testing/testSubject";
 import CustomCircle from "./Circle";
-import { render, screen } from "@testing-library/react";
+import { screen } from "@testing-library/react";
 
 describe("<CustomCircle />", () => {
+  const { setProps, renderComponent } = setTestSubject(CustomCircle);
+  setProps({
+    percent: 50,
+    currentKudos: 200,
+    neededKudos: 500,
+    goal: "Some goal",
+  });
+
   beforeEach(() => {
-    render(
-      withMockedProviders(
-        <CustomCircle
-          percent={50}
-          currentKudos={200}
-          neededKudos={500}
-          goal="Some goal"
-        />,
-      ),
-    );
+    renderComponent();
   });
 
   it("renders the correct current kudo amount", () => {

src/components/navigation/Desktop.spec.tsx

@@ -1,6 +1,11 @@
-import { render, RenderResult, screen } from "@testing-library/react";
-import { mockLocalstorage, withMockedProviders } from "../../spec_helper";
+import { screen } from "@testing-library/react";
+import { mockLocalstorage } from "../../spec_helper";
 import Desktop, { GET_USER } from "./Desktop";
+import { setTestSubject } from "../../support/testing/testSubject";
+import {
+  dataDecorator,
+  routingDecorator,
+} from "../../support/testing/testDecorators";
 
 export const mocks = () => [
   {
@@ -20,24 +25,29 @@ export const mocks = () => [
 ];
 
 describe("<Desktop />", () => {
+  const { renderComponent } = setTestSubject(Desktop, {
+    decorators: [dataDecorator(mocks()), routingDecorator()],
+    props: {},
+  });
+
   it("renders the users name", async () => {
-    render(withMockedProviders(<Desktop />, mocks()));
+    renderComponent();
+
     const node = await screen.findByText("Max");
     expect(node).toBeInTheDocument();
   });
 
   it("should have a link to the home page", async () => {
-    render(withMockedProviders(<Desktop />, mocks()));
+    renderComponent();
 
     const button = await screen.findByTestId("home-button");
     expect(button).toBeInTheDocument();
   });
 
   describe("profile menu", () => {
-    let renderResult: RenderResult;
-
     beforeEach(async () => {
-      renderResult = render(withMockedProviders(<Desktop />, mocks()));
+      renderComponent();
+
       const button = await screen.findByRole("button", { name: "Max" });
       button.click();
     });
@@ -58,21 +68,23 @@ describe("<Desktop />", () => {
     });
 
     describe("as admin", () => {
-      beforeEach(() => {
+      beforeEach(async () => {
         mockLocalstorage("admin");
-        renderResult.rerender(withMockedProviders(<Desktop />, mocks()));
+        renderComponent();
+        await screen.findByText("Max");
       });
 
       it("has a manage team button", () => {
-        const profileLink = screen.queryByTestId("manage-team-button");
+        const profileLink = screen.findByTestId("manage-team-button");
         expect(profileLink).not.toBeNull();
       });
     });
 
     describe("as member", () => {
-      beforeEach(() => {
+      beforeEach(async () => {
         mockLocalstorage("member");
-        renderResult.rerender(withMockedProviders(<Desktop />, mocks()));
+        renderComponent();
+        await screen.findByText("Max");
       });
 
       it("does not have a manage team button", () => {

src/components/navigation/Mobile.spec.tsx

@@ -1,21 +1,20 @@
-import { mockLocalstorage, withMockedProviders } from "../../spec_helper";
+import { mockLocalstorage } from "../../spec_helper";
 import Mobile from "./Mobile";
 import { Auth } from "../../support";
-import { RenderResult, render, screen } from "@testing-library/react";
-
-let result: RenderResult | null = null;
-const setup = () => {
-  if (result) {
-    result.unmount();
-  }
-  result = render(withMockedProviders(<Mobile />));
-};
+import { screen } from "@testing-library/react";
+import { setTestSubject } from "../../support/testing/testSubject";
+import { routingDecorator } from "../../support/testing/testDecorators";
 
 describe("<Mobile />", () => {
   mockLocalstorage("fakeToken");
 
+  const { renderComponent } = setTestSubject(Mobile, {
+    decorators: [routingDecorator()],
+    props: {},
+  });
+
   beforeEach(() => {
-    setup();
+    renderComponent();
   });
 
   it("has a button to the settings page", () => {
@@ -44,7 +43,7 @@ describe("<Mobile />", () => {
 
   it("has no buttons to the feed, statistics and notifications page if the user has no team", () => {
     Auth.hasTeam = jest.fn(() => false);
-    setup();
+    renderComponent();
 
     expect(screen.queryByRole("link", { name: "monitoring" })).toBeNull();
     expect(screen.queryByRole("link", { name: "notifications" })).toBeNull();

src/components/organisms/RepoList/RepoList.spec.tsx

@@ -1,7 +1,9 @@
-import { render, screen } from "@testing-library/react";
+import { screen } from "@testing-library/react";
 import { GET_POSTS } from "../../../modules/feed/queries";
-import { mockLocalstorage, withMockedProviders } from "../../../spec_helper";
+import { mockLocalstorage } from "../../../spec_helper";
 import { RepoList } from "./RepoList";
+import { setTestSubject } from "../../../support/testing/testSubject";
+import { dataDecorator } from "../../../support/testing/testDecorators";
 
 export const mocks = (hasNextPage: boolean) => [
   {
@@ -78,16 +80,19 @@ const mocksWithError = [
   },
 ];
 
-const setup = (mock: any) =>
-  render(withMockedProviders(<RepoList />, mock, undefined, true));
-
 describe("<RepoList />", () => {
+  const { renderComponent, updateDecorator } = setTestSubject(RepoList, {
+    decorators: [dataDecorator(mocks(false))],
+    props: {},
+  });
+
   beforeEach(() => {
     mockLocalstorage("1");
-    setup(mocks(false));
   });
 
   it("shows loading when the query is loading", async () => {
+    renderComponent();
+
     const element = screen.getByText("Loading..");
     expect(element).toBeInTheDocument();
 
@@ -96,23 +101,31 @@ describe("<RepoList />", () => {
   });
 
   it("shows show the error message when there is an error", async () => {
-    setup(mocksWithError);
+    updateDecorator("application", { mocks: mocksWithError });
+    renderComponent();
+
     const element = await screen.findByText("It broke");
     expect(element).toBeInTheDocument();
   });
 
   it("renders all the posts", async () => {
+    renderComponent();
+
     const elements = await screen.findAllByTestId("kudo-transaction");
     expect(elements).toHaveLength(1);
   });
 
   it("shows a load next button when there are more posts", async () => {
-    setup(mocks(true));
+    updateDecorator("application", { mocks: mocks(true) });
+    renderComponent();
+
     const nextPageButton = await screen.findByTestId("next-page-button");
     expect(nextPageButton).toBeInTheDocument();
   });
 
   it("should not show a load next button when there are no more posts", async () => {
+    renderComponent();
+
     const nextPageButton = screen.queryByTestId("next-page-button");
     expect(nextPageButton).toBeNull();