add test for actions and Card component

package.json

@@ -42,6 +42,7 @@
   },
   "devDependencies": {
     "@types/react-redux": "^7.1.9",
+    "@types/redux-mock-store": "^1.0.2",
     "@types/testing-library__jest-dom": "^5.9.1",
     "@types/testing-library__react": "^10.2.0",
     "@typescript-eslint/eslint-plugin": "^3.2.0",
@@ -51,6 +52,7 @@
     "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-react": "^7.20.0",
     "prettier": "^2.0.5",
+    "redux-mock-store": "^1.5.4",
     "ts-jest": "^26.1.1"
   }
 }

src/actions/actions.test.tsx

@@ -0,0 +1,16 @@
+import { getTriangle, restTriangle } from "./index";
+import { FIND_TRIANGLE, REST_TRIANGLE } from "../constants";
+
+describe("actions", () => {
+  it("getTriangle()", () => {
+    const payload = { side1: "5", side2: "5", side3: "5" };
+    const expectedAction = { type: FIND_TRIANGLE, payload };
+    expect(getTriangle(payload)).toEqual(expectedAction);
+  });
+
+  it("restTriangle()", () => {
+    const payload = { side1: "", side2: "", side3: "" };
+    const expectedAction = { type: REST_TRIANGLE, payload };
+    expect(restTriangle(payload)).toEqual(expectedAction);
+  });
+});

src/components/Card/Card.test.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { render, screen } from "../../test-utils";
+import Card from "./Card";
+import { State, TType } from "../../types";
+
+const data: State[] = [
+  { type: "equilateral", side1: "5", side2: "5", side3: "5" },
+  { type: "scalene", side1: "5", side2: "6", side3: "7" },
+  { type: "isosceles", side1: "5", side2: "5", side3: "6" },
+];
+describe("<Card/>", () => {
+  for (const index in data) {
+    it("renders Card component", () => {
+      render(<Card />, {
+        initialState: data[index],
+      });
+      const obj: TType = data[index].type as TType;
+      const type: string = obj.slice(0, 1).toUpperCase() + obj.slice(1);
+      expect(screen.getByText(type)).toBeInTheDocument();
+    });
+  }
+});

src/components/Card/Card.tsx

@@ -44,6 +44,7 @@ function Card({
   };
 
   const title = type && type.slice(0, 1).toUpperCase() + type.slice(1);
+
   return (
     <Wrapper>
       <Img src={image} alt={`${type} triangle`} />
@@ -61,9 +62,10 @@ function Card({
 
 const mapStateToProps = (state: State): CardProps => {
   return {
-    image: data[state.type as keyof typeof data].image,
-    info: data[state.type as keyof typeof data].info,
-    link: data[state.type as keyof typeof data].link,
+    image: data?.[state.type as keyof typeof data].image,
+    info: data?.[state.type as keyof typeof data].info,
+    link: data?.[state.type as keyof typeof data].link,
+    type: state.type,
   };
 };
 

src/reducers/index.ts

@@ -2,7 +2,7 @@ import { State, ActionType } from "../types";
 import { triangleType } from "../utils";
 import { FIND_TRIANGLE, REST_TRIANGLE } from "../constants";
 
-const initialState: State = {
+export const initialState: State = {
   side1: "",
   side2: "",
   side3: "",

src/setupTests.ts

@@ -2,4 +2,4 @@
 // allows you to do things like:
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom/extend-expect';
+import "@testing-library/jest-dom/extend-expect";

src/test-utils.tsx

@@ -0,0 +1,73 @@
+import React, { ReactElement, ReactNode, ComponentType } from "react";
+import {
+  render as rtlRender,
+  RenderResult,
+  RenderOptions,
+} from "@testing-library/react";
+import { createStore, Store } from "redux";
+import { Provider } from "react-redux";
+import { ThemeProvider } from "styled-components";
+import { theme, GlobalStyles } from "./styles";
+import rootReducer, { initialState as defaultState } from "./reducers";
+import { State } from "./types";
+
+type AllProvidersProps = {
+  children: ReactElement | ReactElement[] | ReactNode;
+};
+
+type OptionsType = {
+  initialState?: Partial<State>;
+  store?: Store;
+} & RenderOptions;
+
+const render = (
+  ui: ReactElement,
+  {
+    initialState,
+    store = createStore(rootReducer, {
+      ...defaultState,
+      ...initialState,
+    }),
+    ...renderOptions
+  }: OptionsType
+): RenderResult => {
+  const Wrapper = ({ children }: AllProvidersProps): ReactElement => {
+    return (
+      <Provider store={store}>
+        <ThemeProvider theme={theme}>
+          <GlobalStyles />
+          {children}
+        </ThemeProvider>
+      </Provider>
+    );
+  };
+  return rtlRender(ui, {
+    wrapper: Wrapper as ComponentType,
+    ...renderOptions,
+  });
+};
+
+// const Wrapper = ({ children }: AllProvidersProps): ReactElement => {
+//   return (
+//     <Provider store={store}>
+//       <ThemeProvider theme={theme}>
+//         <GlobalStyles />
+//         {children}
+//       </ThemeProvider>
+//     </Provider>
+//   );
+// };
+
+// const render = (
+//   ui: ReactElement,
+//   state: State,
+//   store: Store = createStore(reducer, state)
+//   options?: RenderOptions =
+// ): RenderResult =>
+//   render(ui, { wrapper: Wrapper as ComponentType, ...options });
+
+// re-export everything
+export * from "@testing-library/react";
+
+// override render method
+export { render };

src/types.tsx

@@ -4,12 +4,7 @@ export type Data = {
   link: string;
 };
 
-export type TType =
-  | "equilateral"
-  | "isosceles"
-  | "scalene"
-  | "Not a Triangle"
-  | undefined;
+export type TType = "equilateral" | "isosceles" | "scalene" | "Not a Triangle";
 
 export type Sides = { side1: string; side2: string; side3: string };
 

yarn.lock

@@ -1655,6 +1655,13 @@
     "@types/prop-types" "*"
     csstype "^2.2.0"
 
+"@types/redux-mock-store@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@types/redux-mock-store/-/redux-mock-store-1.0.2.tgz#c27d5deadfb29d8514bdb0fc2cadae6feea1922d"
+  integrity sha512-6LBtAQBN34i7SI5X+Qs4zpTEZO1tTDZ6sZ9fzFjYwTl3nLQXaBtwYdoV44CzNnyKu438xJ1lSIYyw0YMvunESw==
+  dependencies:
+    redux "^4.0.5"
+
 "@types/stack-utils@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
@@ -6800,6 +6807,11 @@ lodash._reinterpolate@^3.0.0:
   resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
   integrity sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=
 
+lodash.isplainobject@^4.0.6:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz#7c526a52d89b45c45cc690b88163be0497f550cb"
+  integrity sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs=
+
 [email protected], lodash.memoize@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
@@ -9115,6 +9127,13 @@ redent@^3.0.0:
     indent-string "^4.0.0"
     strip-indent "^3.0.0"
 
+redux-mock-store@^1.5.4:
+  version "1.5.4"
+  resolved "https://registry.yarnpkg.com/redux-mock-store/-/redux-mock-store-1.5.4.tgz#90d02495fd918ddbaa96b83aef626287c9ab5872"
+  integrity sha512-xmcA0O/tjCLXhh9Fuiq6pMrJCwFRaouA8436zcikdIpYWWCjU76CRk+i2bHx8EeiSiMGnB85/lZdU3wIJVXHTA==
+  dependencies:
+    lodash.isplainobject "^4.0.6"
+
 redux@^4.0.0, redux@^4.0.5:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.5.tgz#4db5de5816e17891de8a80c424232d06f051d93f"