Properly mock withTranslation to wrap the provided component

Also improved some test suites to use a custom render method to reduce
duplicate code. The render method provides default props and
automatically dives and casts the wrapper.

Signed-off-by: Mcat12 <newtoncat12@yahoo.com>

src/components/common/EnableDisable.tsx

@@ -32,7 +32,7 @@ import {
   ModalHeader
 } from "reactstrap";
 
-export interface EnableDisableProps extends WithTranslation {
+export interface EnableDisableProps {
   status: Status;
   refresh: (data?: ApiStatus) => void;
   onSetStatus: (
@@ -49,7 +49,7 @@ export interface EnableDisableState {
 }
 
 export class EnableDisable extends Component<
-  EnableDisableProps,
+  EnableDisableProps & WithTranslation,
   EnableDisableState
 > {
   state: EnableDisableState = {

src/components/common/__tests__/EnableDisable.test.tsx

@@ -53,6 +53,20 @@ describe("EnableDisableContainer", () => {
 });
 
 describe("EnableDisable", () => {
+  const defaultProps: EnableDisableProps = {
+    refresh: jest.fn(),
+    status: "unknown",
+    onSetStatus: jest.fn()
+  };
+
+  const renderEnableDisable = (
+    props: Partial<EnableDisableProps>
+  ): EnableDisableWrapper => {
+    return shallow(
+      <TranslatedEnableDisable {...defaultProps} {...props} />
+    ).dive() as EnableDisableWrapper;
+  };
+
   describe("API calls", () => {
     /**
      * Test clicking on a button and expecting it to call setStatus
@@ -73,13 +87,11 @@ describe("EnableDisable", () => {
       );
       const refresh = jest.fn();
 
-      const wrapper = shallow(
-        <TranslatedEnableDisable
-          refresh={refresh}
-          status={initialStatus}
-          onSetStatus={setStatus}
-        />
-      );
+      const wrapper = renderEnableDisable({
+        refresh,
+        status: initialStatus,
+        onSetStatus: setStatus
+      });
 
       wrapper
         .find(NavButton)
@@ -119,13 +131,10 @@ describe("EnableDisable", () => {
         Promise.resolve({ status: "success" } as ApiSuccessResponse)
       );
 
-      const wrapper: EnableDisableWrapper = shallow(
-        <TranslatedEnableDisable
-          refresh={jest.fn()}
-          status="disabled"
-          onSetStatus={setStatus}
-        />
-      );
+      const wrapper = renderEnableDisable({
+        status: "disabled",
+        onSetStatus: setStatus
+      });
 
       wrapper.setState({ processing: true });
 
@@ -143,13 +152,11 @@ describe("EnableDisable", () => {
       );
       const refresh = jest.fn();
 
-      const wrapper = shallow(
-        <TranslatedEnableDisable
-          refresh={refresh}
-          status="disabled"
-          onSetStatus={setStatus}
-        />
-      );
+      const wrapper = renderEnableDisable({
+        refresh,
+        status: "disabled",
+        onSetStatus: setStatus
+      });
 
       wrapper
         .find(NavButton)
@@ -167,13 +174,10 @@ describe("EnableDisable", () => {
     it("resets processing flag if a setStatus request fails", async () => {
       const setStatus = jest.fn(() => Promise.reject({ error: "test" }));
 
-      const wrapper: EnableDisableWrapper = shallow(
-        <TranslatedEnableDisable
-          refresh={jest.fn()}
-          status="disabled"
-          onSetStatus={setStatus}
-        />
-      );
+      const wrapper = renderEnableDisable({
+        status: "disabled",
+        onSetStatus: setStatus
+      });
 
       wrapper
         .find(NavButton)
@@ -196,13 +200,10 @@ describe("EnableDisable", () => {
         HTMLFormElement
       >;
 
-      const wrapper: EnableDisableWrapper = shallow(
-        <TranslatedEnableDisable
-          refresh={jest.fn()}
-          status="enabled"
-          onSetStatus={setStatus}
-        />
-      );
+      const wrapper = renderEnableDisable({
+        status: "enabled",
+        onSetStatus: setStatus
+      });
 
       wrapper.setState({ customModalShown: true });
       wrapper.find(Form).props().onSubmit!(event);
@@ -213,13 +214,7 @@ describe("EnableDisable", () => {
 
   describe("interactions", () => {
     it("opens the custom time modal with the corresponding button is clicked", () => {
-      const wrapper = shallow(
-        <TranslatedEnableDisable
-          refresh={jest.fn()}
-          status="enabled"
-          onSetStatus={jest.fn()}
-        />
-      );
+      const wrapper = renderEnableDisable({ status: "enabled" });
 
       expect(wrapper.find(Modal).props().isOpen).toBeFalsy();
 
@@ -233,13 +228,7 @@ describe("EnableDisable", () => {
     });
 
     it("should close the modal when clicking outside", () => {
-      const wrapper: EnableDisableWrapper = shallow(
-        <TranslatedEnableDisable
-          refresh={jest.fn()}
-          status="enabled"
-          onSetStatus={jest.fn()}
-        />
-      );
+      const wrapper = renderEnableDisable({ status: "enabled" });
 
       wrapper.setState({ customModalShown: true });
       expect(wrapper.find(Modal).props().isOpen).toBeTruthy();
@@ -248,13 +237,7 @@ describe("EnableDisable", () => {
     });
 
     it("should close the modal when the header close button is clicked", () => {
-      const wrapper: EnableDisableWrapper = shallow(
-        <TranslatedEnableDisable
-          refresh={jest.fn()}
-          status="enabled"
-          onSetStatus={jest.fn()}
-        />
-      );
+      const wrapper = renderEnableDisable({ status: "enabled" });
 
       wrapper.setState({ customModalShown: true });
       expect(wrapper.find(Modal).props().isOpen).toBeTruthy();
@@ -263,13 +246,9 @@ describe("EnableDisable", () => {
     });
 
     it("should close the modal when the cancel button is clicked", () => {
-      const wrapper: EnableDisableWrapper = shallow(
-        <TranslatedEnableDisable
-          refresh={jest.fn()}
-          status="enabled"
-          onSetStatus={jest.fn()}
-        />
-      );
+      const wrapper = renderEnableDisable({
+        status: "enabled"
+      });
 
       wrapper.setState({ customModalShown: true });
       expect(wrapper.find(Modal).props().isOpen).toBeTruthy();
@@ -282,13 +261,7 @@ describe("EnableDisable", () => {
     });
 
     it("should allow custom disable times", () => {
-      const wrapper: EnableDisableWrapper = shallow(
-        <TranslatedEnableDisable
-          refresh={jest.fn()}
-          status="enabled"
-          onSetStatus={jest.fn()}
-        />
-      );
+      const wrapper = renderEnableDisable({ status: "enabled" });
 
       wrapper.setState({ customModalShown: true });
 
@@ -305,13 +278,7 @@ describe("EnableDisable", () => {
     });
 
     it("should allow changing the custom disable time unit", () => {
-      const wrapper: EnableDisableWrapper = shallow(
-        <TranslatedEnableDisable
-          refresh={jest.fn()}
-          status="enabled"
-          onSetStatus={jest.fn()}
-        />
-      );
+      const wrapper = renderEnableDisable({ status: "enabled" });
 
       wrapper.setState({ customModalShown: true });
 
@@ -330,37 +297,19 @@ describe("EnableDisable", () => {
 
   describe("rendering", () => {
     it("renders null if status is unknown", () => {
-      const wrapper = shallow(
-        <TranslatedEnableDisable
-          refresh={jest.fn()}
-          status="unknown"
-          onSetStatus={jest.fn()}
-        />
-      );
+      const wrapper = renderEnableDisable({ status: "unknown" });
 
       expect(wrapper).toBeEmptyRender();
     });
 
     it("shows an enable button if status is disabled", () => {
-      const wrapper = shallow(
-        <TranslatedEnableDisable
-          refresh={jest.fn()}
-          status="disabled"
-          onSetStatus={jest.fn()}
-        />
-      );
+      const wrapper = renderEnableDisable({ status: "disabled" });
 
       expect(wrapper.find(NavButton).props().name).toEqual("Enable");
     });
 
     it("shows a dropdown with disable buttons if status is enabled", () => {
-      const wrapper = shallow(
-        <TranslatedEnableDisable
-          refresh={jest.fn()}
-          status="enabled"
-          onSetStatus={jest.fn()}
-        />
-      );
+      const wrapper = renderEnableDisable({ status: "enabled" });
 
       expect(wrapper.find(NavDropdown)).toExist();
       expect(wrapper.find(NavButton)).toHaveLength(5);

src/components/common/__tests__/FooterUpdateStatus.test.tsx

@@ -14,13 +14,15 @@ import * as React from "react";
 import { Link } from "react-router-dom";
 
 it("renders as null if no update is available", () => {
-  const wrapper = shallow(<FooterUpdateStatus updateAvailable={false} />);
+  const wrapper = shallow(
+    <FooterUpdateStatus updateAvailable={false} />
+  ).dive();
 
   expect(wrapper).toBeEmptyRender();
 });
 
 it("renders a link to the versions page if there is an update", () => {
-  const wrapper = shallow(<FooterUpdateStatus updateAvailable={true} />);
+  const wrapper = shallow(<FooterUpdateStatus updateAvailable={true} />).dive();
 
   expect(wrapper.find(Link).props().to).toEqual("/settings/versions");
 });

src/components/common/__tests__/StatusBadge.test.tsx

@@ -14,14 +14,14 @@ import StatusBadge, { TranslatedStatusBadge } from "../StatusBadge";
 import { StatusContext, StatusContextType } from "../context/StatusContext";
 
 it("shows green enabled message if API returns enabled", async () => {
-  const wrapper = shallow(<TranslatedStatusBadge status="enabled" />);
+  const wrapper = shallow(<TranslatedStatusBadge status="enabled" />).dive();
 
   expect(wrapper.childAt(2)).toHaveText("Enabled");
   expect(wrapper.childAt(0)).toHaveClassName("text-success");
 });
 
 it("shows red disabled message if API doesn't return enabled", async () => {
-  const wrapper = shallow(<TranslatedStatusBadge status="disabled" />);
+  const wrapper = shallow(<TranslatedStatusBadge status="disabled" />).dive();
 
   expect(wrapper.childAt(2)).toHaveText("Disabled");
   expect(wrapper.childAt(0)).toHaveClassName("text-danger");

src/components/dashboard/__tests__/ClientsGraph.test.tsx

@@ -39,7 +39,7 @@ const fakeData: ApiClientsGraph = {
 };
 
 it("shows loading indicator correctly", () => {
-  const wrapper = shallow(<TranslatedClientsGraph {...loadingProps} />);
+  const wrapper = shallow(<TranslatedClientsGraph {...loadingProps} />).dive();
 
   expect(wrapper.children(".card-img-overlay")).toExist();
 });

src/components/dashboard/__tests__/SummaryStats.test.tsx

@@ -61,7 +61,7 @@ it("transforms the API data correctly", () => {
 it("displays summary stats correctly", async () => {
   const wrapper = shallow(
     <TranslatedSummaryStats {...transformData(fakeData)} />
-  );
+  ).dive();
 
   await tick();
   wrapper.update();
@@ -73,7 +73,7 @@ it("displays summary stats correctly", async () => {
 });
 
 it("displays error message correctly", async () => {
-  const wrapper = shallow(<TranslatedSummaryStats {...errorProps} />);
+  const wrapper = shallow(<TranslatedSummaryStats {...errorProps} />).dive();
 
   await tick();
   wrapper.update();

src/components/list/DomainInput.tsx

@@ -12,7 +12,7 @@ import React, { ChangeEvent, Component, FormEvent } from "react";
 import { WithTranslation, withTranslation } from "react-i18next";
 import api from "../../util/api";
 
-export interface DomainInputProps extends WithTranslation {
+export interface DomainInputProps {
   placeholder?: string;
   onEnter: (domain: string) => void;
   onRefresh: () => void;
@@ -25,7 +25,10 @@ export interface DomainInputState {
   isValid: boolean;
 }
 
-class DomainInput extends Component<DomainInputProps, DomainInputState> {
+export class DomainInput extends Component<
+  DomainInputProps & WithTranslation,
+  DomainInputState
+> {
   static defaultProps = {
     placeholder: ""
   };
@@ -92,4 +95,6 @@ class DomainInput extends Component<DomainInputProps, DomainInputState> {
   }
 }
 
-export default withTranslation(["common", "lists"])(DomainInput);
+export const DomainInputContainer = withTranslation(["common", "lists"])(
+  DomainInput
+);

src/components/list/ListPage.tsx

@@ -10,7 +10,7 @@
 
 import React, { Component } from "react";
 import { WithTranslation, withTranslation } from "react-i18next";
-import DomainInput from "./DomainInput";
+import { DomainInputContainer } from "./DomainInput";
 import Alert, { AlertType } from "../common/Alert";
 import DomainList from "./DomainList";
 import {
@@ -19,7 +19,7 @@ import {
   makeCancelable
 } from "../../util/CancelablePromise";
 
-export interface ListPageProps extends WithTranslation {
+export interface ListPageProps {
   title: string;
   note?: {} | string;
   placeholder: string;
@@ -36,7 +36,10 @@ export interface ListPageState {
   messageType: AlertType;
 }
 
-export class ListPage extends Component<ListPageProps, ListPageState> {
+export class ListPage extends Component<
+  ListPageProps & WithTranslation,
+  ListPageState
+> {
   static defaultProps = {
     note: ""
   };
@@ -157,7 +160,7 @@ export class ListPage extends Component<ListPageProps, ListPageState> {
       <div style={{ marginBottom: "24px" }}>
         <h2 className="text-center">{this.props.title}</h2>
         <br />
-        <DomainInput
+        <DomainInputContainer
           placeholder={this.props.placeholder}
           onEnter={this.onEnter}
           onRefresh={this.onRefresh}

src/components/list/__tests__/DomainInput.test.tsx

@@ -10,38 +10,46 @@
 
 import React from "react";
 import { shallow, ShallowWrapper } from "enzyme";
-import DomainInput, {
+import {
   DomainInputProps,
-  DomainInputState
+  DomainInputState,
+  DomainInput,
+  DomainInputContainer
 } from "../DomainInput";
 import api from "../../../util/api";
 import { isValidDomain } from "../../../util/validate";
 
+type DomainInputWrapper = ShallowWrapper<
+  DomainInputProps,
+  DomainInputState,
+  DomainInput
+>;
+
+const defaultProps: DomainInputProps = {
+  onEnter: jest.fn(),
+  onRefresh: jest.fn(),
+  isValid: isValidDomain,
+  onValidationError: jest.fn()
+};
+
+const renderDomainInput = (
+  props: Partial<DomainInputProps> = {}
+): DomainInputWrapper => {
+  return shallow(
+    <DomainInputContainer {...defaultProps} {...props} />
+  ).dive() as DomainInputWrapper;
+};
+
 it("has a placeholder", () => {
   const placeholder = "placeholder";
-  const wrapper = shallow(
-    <DomainInput
-      placeholder={placeholder}
-      onEnter={jest.fn()}
-      onRefresh={jest.fn()}
-      isValid={isValidDomain}
-      onValidationError={jest.fn()}
-    />
-  );
+  const wrapper = renderDomainInput({ placeholder });
 
   expect(wrapper.find("input")).toHaveProp("placeholder", placeholder);
 });
 
 it("sets state to input", () => {
   const domain = "domain";
-  const wrapper: ShallowWrapper<DomainInputProps, DomainInputState> = shallow(
-    <DomainInput
-      onEnter={jest.fn()}
-      onRefresh={jest.fn()}
-      isValid={isValidDomain}
-      onValidationError={jest.fn()}
-    />
-  );
+  const wrapper = renderDomainInput();
 
   wrapper.find("input").simulate("change", { target: { value: domain } });
 
@@ -49,27 +57,13 @@ it("sets state to input", () => {
 });
 
 it("only has one button when not logged in", () => {
-  const wrapper = shallow(
-    <DomainInput
-      onEnter={jest.fn()}
-      onRefresh={jest.fn()}
-      isValid={isValidDomain}
-      onValidationError={jest.fn()}
-    />
-  );
+  const wrapper = renderDomainInput();
 
   expect(wrapper.find("button")).toHaveLength(1);
 });
 
 it("disables input when not logged in", () => {
-  const wrapper = shallow(
-    <DomainInput
-      onEnter={jest.fn()}
-      onRefresh={jest.fn()}
-      isValid={isValidDomain}
-      onValidationError={jest.fn()}
-    />
-  );
+  const wrapper = renderDomainInput();
 
   expect(wrapper.find("input")).toBeDisabled();
 });
@@ -77,28 +71,14 @@ it("disables input when not logged in", () => {
 it("enables input when logged in", () => {
   api.loggedIn = true;
 
-  const wrapper = shallow(
-    <DomainInput
-      onEnter={jest.fn()}
-      onRefresh={jest.fn()}
-      isValid={isValidDomain}
-      onValidationError={jest.fn()}
-    />
-  );
+  const wrapper = renderDomainInput();
 
   expect(wrapper.find("input")).not.toBeDisabled();
 });
 
 it("calls onRefresh when the refresh button is clicked", () => {
   const onRefresh = jest.fn();
-  const wrapper = shallow(
-    <DomainInput
-      onEnter={jest.fn()}
-      onRefresh={onRefresh}
-      isValid={isValidDomain}
-      onValidationError={jest.fn()}
-    />
-  );
+  const wrapper = renderDomainInput({ onRefresh });
 
   wrapper
     .find("button")
@@ -111,14 +91,7 @@ it("calls onRefresh when the refresh button is clicked", () => {
 it("has two buttons when logged in", () => {
   api.loggedIn = true;
 
-  const wrapper = shallow(
-    <DomainInput
-      onEnter={jest.fn()}
-      onRefresh={jest.fn()}
-      isValid={isValidDomain}
-      onValidationError={jest.fn()}
-    />
-  );
+  const wrapper = renderDomainInput();
 
   expect(wrapper.find("button")).toHaveLength(2);
 });
@@ -127,14 +100,10 @@ it("does not call onEnter when input is empty", () => {
   api.loggedIn = true;
 
   const onEnter = jest.fn();
-  const wrapper = shallow(
-    <DomainInput
-      onEnter={onEnter}
-      onRefresh={jest.fn()}
-      isValid={() => true}
-      onValidationError={jest.fn()}
-    />
-  );
+  const wrapper = renderDomainInput({
+    onEnter,
+    isValid: () => true
+  });
 
   wrapper
     .find("form")
@@ -149,14 +118,7 @@ it("calls onEnter when input is not empty", () => {
 
   const domain = "domain.com";
   const onEnter = jest.fn();
-  const wrapper = shallow(
-    <DomainInput
-      onEnter={onEnter}
-      onRefresh={jest.fn()}
-      isValid={isValidDomain}
-      onValidationError={jest.fn()}
-    />
-  );
+  const wrapper = renderDomainInput({ onEnter });
 
   wrapper.find("input").simulate("change", { target: { value: domain } });
   wrapper
@@ -170,14 +132,7 @@ it("calls onEnter when input is not empty", () => {
 it("clears input after clicking add button", () => {
   api.loggedIn = true;
 
-  const wrapper: ShallowWrapper<DomainInputProps, DomainInputState> = shallow(
-    <DomainInput
-      onEnter={jest.fn()}
-      onRefresh={jest.fn()}
-      isValid={isValidDomain}
-      onValidationError={jest.fn()}
-    />
-  );
+  const wrapper = renderDomainInput();
 
   wrapper.find("input").simulate("change", { target: { value: "domain.com" } });
   wrapper
@@ -192,14 +147,7 @@ it("clears input after clicking add button", () => {
 it("sets state.isValid to true when domain is properly formatted", () => {
   api.loggedIn = true;
 
-  const wrapper: ShallowWrapper<DomainInputProps, DomainInputState> = shallow(
-    <DomainInput
-      onEnter={jest.fn()}
-      onRefresh={jest.fn()}
-      isValid={isValidDomain}
-      onValidationError={jest.fn()}
-    />
-  );
+  const wrapper = renderDomainInput();
 
   wrapper
     .find("input")
@@ -211,14 +159,7 @@ it("sets state.isValid to true when domain is properly formatted", () => {
 it("sets state.isValid to false when domain is not properly formatted", () => {
   api.loggedIn = true;
 
-  const wrapper: ShallowWrapper<DomainInputProps, DomainInputState> = shallow(
-    <DomainInput
-      onEnter={jest.fn()}
-      onRefresh={jest.fn()}
-      isValid={isValidDomain}
-      onValidationError={jest.fn()}
-    />
-  );
+  const wrapper = renderDomainInput();
 
   wrapper
     .find("input")
@@ -234,14 +175,7 @@ it("sets state.isValid to false when domain is not properly formatted", () => {
 it("sets is-invalid class to the input when domain is not properly formatted", () => {
   api.loggedIn = true;
 
-  const wrapper = shallow(
-    <DomainInput
-      onEnter={jest.fn()}
-      onRefresh={jest.fn()}
-      isValid={isValidDomain}
-      onValidationError={jest.fn()}
-    />
-  );
+  const wrapper = renderDomainInput();
 
   wrapper
     .find("input")

src/components/list/__tests__/DomainList.test.tsx

@@ -19,13 +19,15 @@ const domains = ["domain1.com", "domain2.com", "domain3.com"];
 it("shows a list of domains", () => {
   const wrapper = shallow(
     <DomainList domains={domains} onRemove={jest.fn()} />
-  );
+  ).dive();
 
   expect(wrapper.find("li")).toHaveLength(domains.length);
 });
 
 it("shows an alert if there are no domains", () => {
-  const wrapper = shallow(<DomainList domains={[]} onRemove={jest.fn()} />);
+  const wrapper = shallow(
+    <DomainList domains={[]} onRemove={jest.fn()} />
+  ).dive();
 
   expect(wrapper.find("li")).not.toExist();
   expect(wrapper.find(Alert)).toExist();
@@ -47,7 +49,7 @@ it("has a delete button when logged in", () => {
 
   const wrapper = shallow(
     <DomainList domains={domains} onRemove={jest.fn()} />
-  );
+  ).dive();
 
   expect(
     wrapper
@@ -61,7 +63,9 @@ it("calls onRemove when a delete button is clicked", () => {
   api.loggedIn = true;
 
   const onRemove = jest.fn();
-  const wrapper = shallow(<DomainList domains={domains} onRemove={onRemove} />);
+  const wrapper = shallow(
+    <DomainList domains={domains} onRemove={onRemove} />
+  ).dive();
 
   wrapper
     .find("ul")

src/components/list/__tests__/ListPage.test.tsx

@@ -16,7 +16,7 @@ import ListPage, {
   ListPageState
 } from "../ListPage";
 import Alert from "../../common/Alert";
-import DomainInput from "../DomainInput";
+import { DomainInputContainer } from "../DomainInput";
 import DomainList from "../DomainList";
 
 const ignoreAPI = global.ignoreAPI;
@@ -28,90 +28,57 @@ type ListPageWrapper = ShallowWrapper<
   ListPageType
 >;
 
+const defaultProps: ListPageProps = {
+  title: "",
+  placeholder: "",
+  note: "",
+  onAdd: ignoreAPI,
+  onRefresh: ignoreAPI,
+  onRemove: ignoreAPI,
+  isValid: jest.fn(),
+  validationErrorMsg: ""
+};
+
+const renderListPage = (
+  props: Partial<ListPageProps> = {}
+): ListPageWrapper => {
+  return shallow(
+    <ListPage {...defaultProps} {...props} />
+  ).dive() as ListPageWrapper;
+};
+
 it("shows the title", () => {
   const title = "My Title";
-  const wrapper = shallow(
-    <ListPage
-      title={title}
-      placeholder=""
-      note=""
-      onAdd={ignoreAPI}
-      onRefresh={ignoreAPI}
-      onRemove={ignoreAPI}
-      isValid={jest.fn()}
-      validationErrorMsg=""
-    />
-  );
+  const wrapper = renderListPage({ title });
 
   expect(wrapper.find("h2")).toHaveText(title);
 });
 
 it("shows the placeholder", () => {
   const placeholder = "My Placeholder";
-  const wrapper = shallow(
-    <ListPage
-      title=""
-      placeholder={placeholder}
-      note=""
-      onAdd={ignoreAPI}
-      onRefresh={ignoreAPI}
-      onRemove={ignoreAPI}
-      isValid={jest.fn()}
-      validationErrorMsg=""
-    />
-  );
+  const wrapper = renderListPage({ placeholder });
 
-  expect(wrapper.find(DomainInput)).toHaveProp("placeholder", placeholder);
+  expect(wrapper.find(DomainInputContainer)).toHaveProp(
+    "placeholder",
+    placeholder
+  );
 });
 
 it("shows the note", () => {
   const note = "My Note";
-  const wrapper = shallow(
-    <ListPage
-      title=""
-      placeholder=""
-      note={note}
-      onAdd={ignoreAPI}
-      onRefresh={ignoreAPI}
-      onRemove={ignoreAPI}
-      isValid={jest.fn()}
-      validationErrorMsg=""
-    />
-  );
+  const wrapper = renderListPage({ note });
 
   expect(wrapper).toIncludeText(note);
 });
 
 it("starts with no alerts shown", () => {
-  const wrapper = shallow(
-    <ListPage
-      title=""
-      placeholder=""
-      note=""
-      onAdd={ignoreAPI}
-      onRefresh={ignoreAPI}
-      onRemove={ignoreAPI}
-      isValid={jest.fn()}
-      validationErrorMsg=""
-    />
-  );
+  const wrapper = renderListPage();
 
   expect(wrapper.find(Alert)).not.toExist();
 });
 
 it("hides the alert if closed", () => {
-  const wrapper: ListPageWrapper = shallow(
-    <ListPage
-      title=""
-      placeholder=""
-      note=""
-      onAdd={ignoreAPI}
-      onRefresh={ignoreAPI}
-      onRemove={ignoreAPI}
-      isValid={jest.fn()}
-      validationErrorMsg=""
-    />
-  );
+  const wrapper = renderListPage();
 
   // Show an error message
   wrapper.instance().onAlreadyAdded("domain");
@@ -127,18 +94,9 @@ it("hides the alert if closed", () => {
 });
 
 it("cancels requests when un-mounting", async () => {
-  const wrapper: ListPageWrapper = shallow(
-    <ListPage
-      title=""
-      placeholder=""
-      note=""
-      onAdd={ignoreAPI}
-      onRefresh={() => Promise.resolve(["domain"])}
-      onRemove={ignoreAPI}
-      isValid={jest.fn()}
-      validationErrorMsg=""
-    />
-  );
+  const wrapper = renderListPage({
+    onRefresh: () => Promise.resolve(["domain"])
+  });
 
   // Load the domains into state
   await tick();
@@ -164,45 +122,25 @@ it("cancels requests when un-mounting", async () => {
 });
 
 it("shows a validation message as an error", () => {
-  const validationError = "test message";
-  const wrapper = shallow(
-    <ListPage
-      title=""
-      placeholder=""
-      note=""
-      onAdd={ignoreAPI}
-      onRefresh={ignoreAPI}
-      onRemove={ignoreAPI}
-      isValid={jest.fn()}
-      validationErrorMsg={validationError}
-    />
-  );
+  const validationErrorMsg = "test message";
+  const wrapper = renderListPage({ validationErrorMsg });
 
   wrapper
-    .find(DomainInput)
+    .find(DomainInputContainer)
     .props()
     .onValidationError();
 
   const alert = wrapper.find(Alert);
   expect(alert).toExist();
-  expect(alert.props().message).toEqual(validationError);
+  expect(alert.props().message).toEqual(validationErrorMsg);
   expect(alert.props().type).toEqual("danger");
 });
 
 it("loads domains after mounting", async () => {
   const domains = ["domain1", "domain2.com", "domain3.net"];
-  const wrapper = shallow(
-    <ListPage
-      title=""
-      placeholder=""
-      note=""
-      onAdd={ignoreAPI}
-      onRefresh={() => Promise.resolve(domains)}
-      onRemove={ignoreAPI}
-      isValid={jest.fn()}
-      validationErrorMsg=""
-    />
-  );
+  const wrapper = renderListPage({
+    onRefresh: () => Promise.resolve(domains)
+  });
 
   await tick();
 
@@ -211,18 +149,9 @@ it("loads domains after mounting", async () => {
 
 it("checks if the domain was already added", async () => {
   const domains = ["domain1", "domain2.com", "domain3.net"];
-  const wrapper: ListPageWrapper = shallow(
-    <ListPage
-      title=""
-      placeholder=""
-      note=""
-      onAdd={ignoreAPI}
-      onRefresh={() => Promise.resolve(domains)}
-      onRemove={ignoreAPI}
-      isValid={jest.fn()}
-      validationErrorMsg=""
-    />
-  );
+  const wrapper = renderListPage({
+    onRefresh: () => Promise.resolve(domains)
+  });
   const onAlreadyAdded = jest.spyOn(wrapper.instance(), "onAlreadyAdded");
 
   // Setup with domains (wait for promise to resolve)
@@ -236,18 +165,7 @@ it("checks if the domain was already added", async () => {
 it("calls the add prop when adding a domain", () => {
   const domain = "domain";
   const onAdd = jest.fn(ignoreAPI);
-  const wrapper: ListPageWrapper = shallow(
-    <ListPage
-      title=""
-      placeholder=""
-      note=""
-      onAdd={onAdd}
-      onRefresh={ignoreAPI}
-      onRemove={ignoreAPI}
-      isValid={jest.fn()}
-      validationErrorMsg=""
-    />
-  );
+  const wrapper = renderListPage({ onAdd });
 
   wrapper.instance().onEnter(domain);
 
@@ -256,18 +174,7 @@ it("calls the add prop when adding a domain", () => {
 
 it("calls onAdding when adding a domain", () => {
   const domain = "domain";
-  const wrapper: ListPageWrapper = shallow(
-    <ListPage
-      title=""
-      placeholder=""
-      note=""
-      onAdd={ignoreAPI}
-      onRefresh={ignoreAPI}
-      onRemove={ignoreAPI}
-      isValid={jest.fn()}
-      validationErrorMsg=""
-    />
-  );
+  const wrapper = renderListPage();
   const onAdding = jest.spyOn(wrapper.instance(), "onAdding");
 
   wrapper.instance().onEnter(domain);
@@ -277,18 +184,9 @@ it("calls onAdding when adding a domain", () => {
 
 it("calls onAdded after API request succeeds", async () => {
   const domain = "domain";
-  const wrapper: ListPageWrapper = shallow(
-    <ListPage
-      title=""
-      placeholder=""
-      note=""
-      onAdd={() => Promise.resolve()}
-      onRefresh={ignoreAPI}
-      onRemove={ignoreAPI}
-      isValid={jest.fn()}
-      validationErrorMsg=""
-    />
-  );
+  const wrapper = renderListPage({
+    onAdd: () => Promise.resolve()
+  });
   const onAdded = jest.spyOn(wrapper.instance(), "onAdded");
 
   wrapper.instance().onEnter(domain);
@@ -299,18 +197,9 @@ it("calls onAdded after API request succeeds", async () => {
 
 it("calls onAddFailed after API request fails", async () => {
   const domain = "domain";
-  const wrapper: ListPageWrapper = shallow(
-    <ListPage
-      title=""
-      placeholder=""
-      note=""
-      onAdd={() => Promise.reject({})}
-      onRefresh={ignoreAPI}
-      onRemove={ignoreAPI}
-      isValid={jest.fn()}
-      validationErrorMsg=""
-    />
-  );
+  const wrapper = renderListPage({
+    onAdd: () => Promise.reject({})
+  });
   const onAddFailed = jest.spyOn(wrapper.instance(), "onAddFailed");
 
   wrapper.instance().onEnter(domain);
@@ -321,18 +210,9 @@ it("calls onAddFailed after API request fails", async () => {
 
 it("adds the domain in onAdded", async () => {
   const domain = "domain";
-  const wrapper: ListPageWrapper = shallow(
-    <ListPage
-      title=""
-      placeholder=""
-      note=""
-      onAdd={() => Promise.resolve()}
-      onRefresh={ignoreAPI}
-      onRemove={ignoreAPI}
-      isValid={jest.fn()}
-      validationErrorMsg=""
-    />
-  );
+  const wrapper = renderListPage({
+    onAdd: () => Promise.resolve()
+  });
 
   wrapper.instance().onEnter(domain);
   await tick();
@@ -342,18 +222,9 @@ it("adds the domain in onAdded", async () => {
 
 it("resets the domains when adding failed", async () => {
   const domain = "domain";
-  const wrapper: ListPageWrapper = shallow(
-    <ListPage
-      title=""
-      placeholder=""
-      note=""
-      onAdd={() => Promise.reject({})}
-      onRefresh={ignoreAPI}
-      onRemove={ignoreAPI}
-      isValid={jest.fn()}
-      validationErrorMsg=""
-    />
-  );
+  const wrapper = renderListPage({
+    onAdd: () => Promise.reject({})
+  });
 
   wrapper.instance().onEnter(domain);
   await tick();
@@ -364,18 +235,9 @@ it("resets the domains when adding failed", async () => {
 it("does not remove the domain if it is not present", async () => {
   const domain = "domain1";
   const domains = ["domain2"];
-  const wrapper: ListPageWrapper = shallow(
-    <ListPage
-      title=""
-      placeholder=""
-      note=""
-      onAdd={ignoreAPI}
-      onRefresh={() => Promise.resolve(domains)}
-      onRemove={ignoreAPI}
-      isValid={jest.fn()}
-      validationErrorMsg=""
-    />
-  );
+  const wrapper = renderListPage({
+    onRefresh: () => Promise.resolve(domains)
+  });
 
   await tick();
   wrapper.instance().onRemove(domain);
@@ -387,18 +249,10 @@ it("removes the domain from state when onRemove is called", async () => {
   const domain = "domain";
   const domain2 = "domain2";
   const domains = [domain, domain2];
-  const wrapper: ListPageWrapper = shallow(
-    <ListPage
-      title=""
-      placeholder=""
-      note=""
-      onAdd={ignoreAPI}
-      onRefresh={() => Promise.resolve(domains)}
-      onRemove={() => Promise.resolve()}
-      isValid={jest.fn()}
-      validationErrorMsg=""
-    />
-  );
+  const wrapper = renderListPage({
+    onRefresh: () => Promise.resolve(domains),
+    onRemove: () => Promise.resolve()
+  });
 
   await tick();
   wrapper.instance().onRemove(domain);
@@ -409,18 +263,10 @@ it("removes the domain from state when onRemove is called", async () => {
 it("resets the domains when removal failed", async () => {
   const domain = "domain";
   const domains = [domain];
-  const wrapper: ListPageWrapper = shallow(
-    <ListPage
-      title=""
-      placeholder=""
-      note=""
-      onAdd={ignoreAPI}
-      onRefresh={() => Promise.resolve(domains)}
-      onRemove={() => Promise.reject()}
-      isValid={jest.fn()}
-      validationErrorMsg=""
-    />
-  );
+  const wrapper = renderListPage({
+    onRefresh: () => Promise.resolve(domains),
+    onRemove: () => Promise.reject()
+  });
 
   await tick();
   wrapper.instance().onRemove(domain);

src/components/login/__tests__/ForgotPassword.test.tsx

@@ -13,7 +13,7 @@ import { shallow } from "enzyme";
 import ForgotPassword from "../ForgotPassword";
 
 it("collapses and displays normal if there is no error", () => {
-  const wrapper = shallow(<ForgotPassword error={false} />);
+  const wrapper = shallow(<ForgotPassword error={false} />).dive();
 
   expect(wrapper.childAt(0)).toHaveClassName("border-white");
   expect(wrapper.childAt(0).childAt(0)).toHaveClassName("bg-white");
@@ -26,7 +26,7 @@ it("collapses and displays normal if there is no error", () => {
 });
 
 it("expands and displays red if there is an error", () => {
-  const wrapper = shallow(<ForgotPassword error={true} />);
+  const wrapper = shallow(<ForgotPassword error={true} />).dive();
 
   expect(wrapper.childAt(0)).toHaveClassName("border-danger");
   expect(wrapper.childAt(0).childAt(0)).toHaveClassName("bg-danger");
@@ -39,7 +39,7 @@ it("expands and displays red if there is an error", () => {
 });
 
 it("expands and collapses if clicked without error", () => {
-  const wrapper = shallow(<ForgotPassword error={false} />);
+  const wrapper = shallow(<ForgotPassword error={false} />).dive();
 
   wrapper.find("button").simulate("click");
   expect(
@@ -59,7 +59,7 @@ it("expands and collapses if clicked without error", () => {
 });
 
 it("does not collapse if clicked with error", () => {
-  const wrapper = shallow(<ForgotPassword error={true} />);
+  const wrapper = shallow(<ForgotPassword error={true} />).dive();
 
   wrapper.find("button").simulate("click");
   expect(

src/components/settings/__tests__/DHCPInfo.test.tsx

@@ -31,7 +31,7 @@ const fakeData = {
 it("retrieves settings correctly", async () => {
   fetchMock.mock(endpoint, { body: fakeData });
 
-  const wrapper = shallow(<DHCPInfo />);
+  const wrapper = shallow(<DHCPInfo />).dive();
 
   await tick();
 
@@ -41,7 +41,7 @@ it("retrieves settings correctly", async () => {
 it("disables the apply button if an input is invalid", async () => {
   fetchMock.mock(endpoint, { body: fakeData });
 
-  const wrapper = shallow(<DHCPInfo />);
+  const wrapper = shallow(<DHCPInfo />).dive();
 
   await tick();
 
@@ -57,7 +57,7 @@ it("disables inputs only when DHCP is not enabled", async () => {
 
   const wrapper: ShallowWrapper<WithTranslation, DHCPInfoState> = shallow(
     <DHCPInfo />
-  );
+  ).dive();
 
   await tick();
   wrapper.update();
@@ -77,7 +77,7 @@ it("disables the apply button when processing setting update", async () => {
 
   const wrapper: ShallowWrapper<WithTranslation, DHCPInfoState> = shallow(
     <DHCPInfo />
-  );
+  ).dive();
 
   await tick();
 
@@ -96,7 +96,7 @@ it("sends the correct data to the API when apply is clicked", async () => {
 
   const wrapper: ShallowWrapper<WithTranslation, DHCPInfoState> = shallow(
     <DHCPInfo />
-  );
+  ).dive();
 
   await tick();
 
@@ -118,7 +118,7 @@ it("shows a success message after successfully saving settings", async () => {
   fetchMock.get(endpoint, { body: fakeData });
   fetchMock.put(endpoint, { body: { status: "success" } });
 
-  const wrapper = shallow(<DHCPInfo />);
+  const wrapper = shallow(<DHCPInfo />).dive();
 
   wrapper.find("Form").simulate("submit", { preventDefault: jest.fn() });
 
@@ -134,7 +134,7 @@ it("shows an API error message if an API error occurs when saving settings", asy
     body: { error: { key: "unknown", message: "Unknown", data: null } }
   });
 
-  const wrapper = shallow(<DHCPInfo />);
+  const wrapper = shallow(<DHCPInfo />).dive();
 
   wrapper.find("Form").simulate("submit", { preventDefault: jest.fn() });
 

src/setupTests.tsx

@@ -8,6 +8,7 @@
  * This file is copyright under the latest version of the EUPL.
  * Please see LICENSE file for your rights under this license. */
 
+import React from "react";
 import { configure } from "enzyme";
 import Adapter from "enzyme-adapter-react-16";
 import "jest-enzyme";
@@ -25,13 +26,9 @@ global.t = ((key: string) => key) as i18next.TFunction;
 // Mock out react-i18next
 jest.mock("react-i18next", () => ({
   // This mock makes sure any components using the withTranslation HoC receive the t function as a prop
-  withTranslation: () => (component: any) => {
-    component.defaultProps = {
-      ...component.defaultProps,
-      t: global.t
-    };
-    return component;
-  }
+  withTranslation: () => (Component: any) => (props: any) => (
+    <Component {...props} t={global.t} />
+  )
 }));
 
 beforeEach(() => {

src/types/global.d.ts

@@ -12,8 +12,8 @@ namespace NodeJS {
   import i18next from "i18next";
 
   interface Global {
-    tick(): Promise<any>
-    ignoreAPI(): Promise<any>
-    t: i18next.TFunction
+    tick(): Promise<any>;
+    ignoreAPI(): Promise<any>;
+    t: i18next.TFunction;
   }
 }