Fix test snapshots to not render nested components (#61)

* Add 'react-test-renderer' to dependency whitelist

* Add test utilities for mocking nested components

* Update snapshots using mocked nested components

* Fix some snapshots

* Update snapshots with mocks and ploc strings

* Fix some test snapshot rendering

package.json

@@ -26,7 +26,6 @@
  "react-redux": "^7.0.3",
  "react-router-dom": "^5.1.2",
  "react-spinners": "^0.6.1",
- "react-test-renderer": "^16.13.1",
  "redux": "^4.0.1",
  "redux-thunk": "^2.3.0",
  "serialize-javascript": "^1.7.0",
@@ -53,6 +52,7 @@
  "razzle": "^3.0.0",
  "razzle-plugin-scss": "^3.0.0",
  "razzle-plugin-typescript": "^3.0.0",
+ "react-test-renderer": "^16.13.1",
  "ts-jest": "^25.0.0",
  "tslint": "^5.19.0",
  "tslint-react": "^4.0.0",
@@ -65,7 +65,7 @@
  "^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/node_modules/razzle/config/jest/fileTransform.js"
  },
  "testMatch": [
- "<rootDir>/src/**/__tests__/**/*.(ts|js)?(x)",
+ "<rootDir>/src/**/__tests__/**/*(spec|test).(ts|js)?(x)",
  "<rootDir>/src/**/?(*.)(spec|test).(ts|js)?(x)"
  ],
  "moduleFileExtensions": [

src/__tests__/TestUtils.ts

@@ -0,0 +1,30 @@
+type ComponentGenerator = (props: {}) => string;
+
+export const mockComponent = (componentName: string): ComponentGenerator => {
+ return (props: {}): string => {
+ const openingTag: string = `[component: ${componentName}`;
+ const closingTag: string = `/]`;
+
+ const propKeys: string[] = Object.keys(props);
+
+ if (propKeys.length === 0) {
+ return `${openingTag} ${closingTag}`;
+ }
+
+ const propsList: string[] = [];
+
+ for (const propKey of propKeys) {
+ const value: any = props[propKey];
+ const valueString: string =
+ value
+ ? typeof value === "function"
+ ? "[Function]"
+ : value.toString().replace(/</g, "⋖").replace(/>/g, "⋗")
+ : "undefined";
+
+ propsList.push(`${propKey}=(${valueString})`);
+ }
+
+ return `${openingTag} ${propsList.join(" ")} ${closingTag}`;
+ };
+};

src/web/App.test.tsx

@@ -13,9 +13,9 @@ describe("<App />", () => {
  const div: HTMLDivElement = document.createElement("div");
  const store: Store<AppState, AnyAction> = configureStore({
  strings: {
- about: "About",
- appTitle: "Test App",
- home: "Home",
+ about: "áβôúƭ",
+ appTitle: "áƥƥTïƭℓè",
+ home: "λô₥è",
  },
  });
 

src/web/views/About/About.test.tsx

@@ -13,18 +13,19 @@ describe("<About />", () => {
  test("renders without exploding", () => {
  const store: Store<AppState, AnyAction> = configureStore({
  strings: {
- about: "About",
- appTitle: "Test App",
+ about: "áβôúƭ",
+ appTitle: "áƥƥTïƭℓè",
  citationTypeDescriptions: {
- hearsay: "hearsay description",
- publication: "publication description",
- statement: "statement description",
+ hearsay: "λèářƨá¥Ðèƨçřïƥƭïôñ",
+ publication: "ƥúβℓïçáƭïôñÐèƨçřïƥƭïôñ",
+ statement: "ƨƭáƭè₥èñƭÐèƨçřïƥƭïôñ",
  },
  citationTypes: {
- hearsay: "hearsay",
- publication: "publication",
- statement: "statement",
+ hearsay: "λèářƨá¥",
+ publication: "ƥúβℓïçáƭïôñ",
+ statement: "ƨƭáƭè₥èñƭ",
  },
+ submit: "ƨúβ₥ïƭ",
  },
  });
 

src/web/views/About/__snapshots__/About.test.tsx.snap

@@ -16,7 +16,7 @@ exports[`<About /> renders without exploding 1`] = `
  <p>
  <strong />
  (
- Test App
+ áƥƥTïƭℓè
  ) is a collaborative, open-source project designed to track the responses of employers to the 
  <a
  href="https://en.wikipedia.org/wiki/Coronavirus_disease_2019"
@@ -67,7 +67,7 @@ exports[`<About /> renders without exploding 1`] = `
  employer claim
  </strong>
  is one or more declarations about an employer which include a summary and citations to back it up. This appears as a single bullet-point in the employer's listing beneath a header such as "
- publication
+ ƥúβℓïçáƭïôñ
  ".
  </p>
  <p>
@@ -92,34 +92,35 @@ exports[`<About /> renders without exploding 1`] = `
  </h2>
  <p>
  To submit a claim change of any kind, please click the "
+ ƨúβ₥ïƭ
  " link in the navigation menu. From there, you can either submit a request for someone to update our data files, or submit a GitHub pull request to update the files yourself.
  </p>
  <h2
  id="citation-types"
  >
  What is the difference between "
- publication
+ ƥúβℓïçáƭïôñ
  ", "
- statement
+ ƨƭáƭè₥èñƭ
  ", and "
- hearsay
+ λèářƨá¥
  "?
  </h2>
  <ul>
  <li>
- publication
+ ƥúβℓïçáƭïôñ
  : 
- publication description
+ ƥúβℓïçáƭïôñÐèƨçřïƥƭïôñ
  </li>
  <li>
- statement
+ ƨƭáƭè₥èñƭ
  : 
- statement description
+ ƨƭáƭè₥èñƭÐèƨçřïƥƭïôñ
  </li>
  <li>
- hearsay
+ λèářƨá¥
  : 
- hearsay description
+ λèářƨá¥Ðèƨçřïƥƭïôñ
  </li>
  </ul>
  <h2

src/web/views/EmployerActionLinks/EmployerActionLinks.test.tsx

@@ -16,12 +16,9 @@ describe("<EmployerActionLinks />", () => {
  const store: Store<AppState, AnyAction> = configureStore({
  strings: {
  detailDescriptions: {
- edit: "edit string",
- employees: "employees string",
- location: "location string",
- officialWebsite: "officialWebsite string",
- rating: "rating string",
- wikipedia: "wikipedia string",
+ edit: "èδïƭ",
+ officialWebsite: "ôƒƒïçïáℓWèβƨïƭè",
+ wikipedia: "ωïƙïƥèδïá",
  },
  },
  });

src/web/views/EmployerActionLinks/__snapshots__/EmployerActionLinks.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`<EmployerActionLinks /> renders without exploding 1`] = `
  className="EmployerActionLinks__Link"
  href="https://github.com/ekumlin/covid-employer-response/blob/master/public/employers/.yml"
  target="_blank"
- title="edit string"
+ title="èδïƭ"
 >
  <i
  className="material-icons"

src/web/views/EmployerCitationList/EmployerCitationList.test.tsx

@@ -4,26 +4,31 @@ import { BrowserRouter } from "react-router-dom";
 import renderer, { ReactTestRendererJSON } from "react-test-renderer";
 import { AnyAction, Store } from "redux";
 
+import { mockComponent } from "../../../__tests__/TestUtils";
 import { Citation } from "../../../common/Citation";
 
 import { AppState } from "../../state/AppState";
 import configureStore from "../../state/configureStore";
 
 import EmployerCitationList from "./EmployerCitationList";
 
+jest.mock(
+ "../EmployerCitation/EmployerCitation",
+ () => mockComponent("EmployerCitation"));
+
 describe("<EmployerCitationList />", () => {
  test("renders without exploding", () => {
  const store: Store<AppState, AnyAction> = configureStore({
  strings: {
  citationTypeDescriptions: {
- hearsay: "hearsay desc value",
- publication: "publication desc value",
- statement: "statement desc value",
+ hearsay: "λèářƨá¥Ðèƨçřïƥƭïôñ",
+ publication: "ƥúβℓïçáƭïôñÐèƨçřïƥƭïôñ",
+ statement: "ƨƭáƭè₥èñƭÐèƨçřïƥƭïôñ",
  },
  citationTypes: {
- hearsay: "hearsay value",
- publication: "publication value",
- statement: "statement value",
+ hearsay: "λèářƨá¥",
+ publication: "ƥúβℓïçáƭïôñ",
+ statement: "ƨƭáƭè₥èñƭ",
  },
  },
  });

src/web/views/EmployerCitationList/__snapshots__/EmployerCitationList.test.tsx.snap

@@ -4,28 +4,15 @@ exports[`<EmployerCitationList /> renders without exploding 1`] = `
 <div>
  <h3
  className="EmployerCitationList__Header"
- title="publication desc value"
+ title="ƥúβℓïçáƭïôñÐèƨçřïƥƭïôñ"
  >
- publication value
+ ƥúβℓïçáƭïôñ
  </h3>
  <ul
  className="EmployerCitationList__Citations"
  >
  <li>
- <div
- className="EmployerCitation__Container"
- >
- <i
- className="material-icons EmployerCitation__Indicator EmployerCitation__Indicator--Neutral"
- >
- error_outline
- </i>
- <span
- className="EmployerCitation__Summary"
- >
- 
- </span>
- </div>
+ [component: EmployerCitation citation=([object Object]) citationSourceBase=(undefined) /]
  </li>
  </ul>
 </div>

src/web/views/EmployerDetailsHeader/EmployerDetailsHeader.test.tsx

@@ -4,30 +4,34 @@ import { BrowserRouter } from "react-router-dom";
 import renderer, { ReactTestRendererJSON } from "react-test-renderer";
 import { AnyAction, Store } from "redux";
 
-import { Citation } from "../../../common/Citation";
+import { mockComponent } from "../../../__tests__/TestUtils";
 import { EmployerRecord } from "../../../common/EmployerRecord";
 
 import { AppState } from "../../state/AppState";
 import configureStore from "../../state/configureStore";
 
 import EmployerDetailsHeader from "./EmployerDetailsHeader";
 
+jest.mock(
+ "../EmployerActionLinks/EmployerActionLinks",
+ () => mockComponent("EmployerActionLinks"));
+
 describe("<EmployerDetailsHeader />", () => {
  test("renders without exploding", () => {
  const store: Store<AppState, AnyAction> = configureStore({
  strings: {
  detailDescriptions: {
- edit: "edit string",
- employees: "employees string",
- location: "location string",
- officialWebsite: "officialWebsite string",
- rating: "rating string",
- wikipedia: "wikipedia string",
+ aka: "áƙá",
+ employees: "è₥ƥℓô¥èèƨ",
+ location: "ℓôçáƭïôñ",
+ rating: "řáƭïñϱ",
+ ratingCounts: "řáƭïñϱÇôúñƭƨ",
+ ticker: "ƭïçƙèř",
  },
  ratingLabels: {
- fair: "fair string",
- good: "good string",
- poor: "poor string",
+ fair: "ƒáïř",
+ good: "ϱôôδ",
+ poor: "ƥôôř",
  },
  },
  });

src/web/views/EmployerDetailsHeader/__snapshots__/EmployerDetailsHeader.test.tsx.snap

@@ -13,26 +13,15 @@ Array [
  
  </a>
  </h2>
- <a
- className="EmployerActionLinks__Link"
- href="https://github.com/ekumlin/covid-employer-response/blob/master/public/employers/.yml"
- target="_blank"
- title="edit string"
- >
- <i
- className="material-icons"
- >
- edit
- </i>
- </a>
+ [component: EmployerActionLinks employer=([object Object]) /]
  <span
  className="EmployerDetailsHeader__TitleGap"
  />
  <span
  className="EmployerDetailsHeader__Rating EmployerDetailsHeader__Rating--fair"
- title="rating string"
+ title="řáƭïñϱ"
  >
- fair string
+ ƒáïř
  <i
  className="material-icons EmployerDetailsHeader__RatingIcon"
  >
@@ -45,6 +34,7 @@ Array [
  >
  <span
  className="EmployerDetailsHeader__AggregateRatings"
+ title="řáƭïñϱÇôúñƭƨ"
  >
  <span
  className="EmployerDetailsHeader__GoodRatings"

src/web/views/EmployerList/EmployerList.test.tsx

@@ -4,6 +4,7 @@ import { BrowserRouter } from "react-router-dom";
 import renderer, { ReactTestRendererJSON } from "react-test-renderer";
 import { AnyAction, Store } from "redux";
 
+import { mockComponent } from "../../../__tests__/TestUtils";
 import { EmployerRecord } from "../../../common/EmployerRecord";
 
 import { AppState } from "../../state/AppState";
@@ -13,12 +14,20 @@ import { EmployerListSearchFilter } from "../EmployerListSearch/EmployerListSear
 
 import EmployerList from "./EmployerList";
 
+jest.mock(
+ "../EmployerListDetails/EmployerListDetails",
+ () => mockComponent("EmployerListDetails"));
+
+jest.mock(
+ "../EmployerPageDetails/EmployerPageDetails",
+ () => mockComponent("EmployerPageDetails"));
+
 describe("<EmployerList />", () => {
  test("renders without exploding", () => {
  const store: Store<AppState, AnyAction> = configureStore({
  strings: {
- loading: "Loading",
- noResults: "NoResults",
+ loading: "ℓôáδïñϱ",
+ noResults: "ñôRèƨúℓƭƨ",
  },
  });
 

src/web/views/EmployerList/__snapshots__/EmployerList.test.tsx.snap

@@ -4,6 +4,6 @@ exports[`<EmployerList /> renders without exploding 1`] = `
 <div
  className="EmployerList__Container--NoResults"
 >
- NoResults
+ ñôRèƨúℓƭƨ
 </div>
 `;