Added unit tests examples

Author: gsaini

.vscode/launch.json

@@ -0,0 +1,31 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "node",
+      "name": "vscode-jest-tests",
+      "request": "launch",
+      "args": ["test", "--runInBand"],
+      "cwd": "${workspaceFolder}",
+      "console": "integratedTerminal",
+      "internalConsoleOptions": "neverOpen",
+      "disableOptimisticBPs": true,
+      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/react-scripts",
+      "protocol": "inspector"
+    },
+    {
+      "type": "node",
+      "name": "Jest Current File",
+      "request": "launch",
+      "args": ["test", "${fileBasenameNoExtension}", "--runInBand"],
+      "console": "integratedTerminal",
+      "internalConsoleOptions": "neverOpen",
+      "disableOptimisticBPs": true,
+      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/react-scripts",
+      "protocol": "inspector"
+    }
+  ]
+}

src/apollo/cache.ts

@@ -0,0 +1,3 @@
+import { InMemoryCache } from "@apollo/client";
+
+export const cache = new InMemoryCache();

src/apollo/client.ts

@@ -1,10 +1,9 @@
-import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client';
+import { ApolloClient, HttpLink } from "@apollo/client";
+import { cache } from "./cache";
 
-const client = new ApolloClient({
-  cache: new InMemoryCache(),
+export const client = new ApolloClient({
+  cache,
   link: new HttpLink({
-    uri: 'http://localhost:4000',
-  })
+    uri: "http://localhost:4000",
+  }),
 });
-
-export default client;

src/apollo/index.ts

@@ -0,0 +1,2 @@
+export * from "./cache";
+export * from "./client";

src/components/TodoItem/TodoItem.spec.tsx

@@ -4,7 +4,7 @@ import { ApolloProvider } from '@apollo/client';
 import './index.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
-import client from './apollo/client';
+import { client } from './apollo/client';
 import { Todos } from './pages';
 import { AbilityContext } from './rules/Can'
 import ability from './rules/abilityBuilder'

src/index.tsx

@@ -1,24 +1,57 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render } from '../../test-utils';
 import { generateImage } from 'jsdom-screenshot';
 import { axe } from '../../test-utils';
 import { Todos } from './Todos';
+import { GET_TODOS, UPDATE_TODO } from './queries';
+import { todos } from './mocks';
+import { act, fireEvent, waitFor } from '@testing-library/react';
 
 describe('Todos components', () => {
+    const mocks = [{
+        request: {
+            query: GET_TODOS
+        },
+        result: {
+            data: { todos }
+        }
+    }];
+
     it('should render snapshot', async () => {
-        const { container } = render(<Todos />);
+        const { container } = await render(<Todos />, { mocks });
         expect(container).toMatchSnapshot();
     });
 
     it('should render visual snapshot', async () => {
-        render(<Todos />);
+        await render(<Todos />, { mocks });
 
         const screenshot = await generateImage();
         expect(screenshot).toMatchImageSnapshot();
     });
 
     it('should validate accessibility voilations', async () => {
-        const { container } = render(<Todos />);
+        const { container } = await render(<Todos />, { mocks });
         expect(await axe(container)).toHaveNoViolations();
     });
+
+    it('should update todo on toggle task selection', async () => {
+        const mutationMock = [{
+            request: {
+                query: UPDATE_TODO,
+                variables: { id: '1', completed: true }
+            },
+            result: jest.fn(() => ({
+                data: {
+                    updateTodo: {
+                        ...todos[0],
+                        completed: true
+                    }
+                }
+            }))
+        }];
+        const { getByLabelText } = await render(<Todos />, { mocks: mutationMock });
+        fireEvent.click(getByLabelText(todos[0].title));
+        const updateMutationMock = mutationMock[0].result;
+        await waitFor(() => expect(updateMutationMock).toHaveBeenCalledWith());
+    });
 });

src/pages/Todos/Todos.spec.tsx

@@ -12,16 +12,24 @@ export const Todos = () => {
   if (loading) return <p>Loading...</p>;
   if (error) return <p>Error :(</p>;
 
+  /**
+   * Toggle Todo item.
+   * @param todo todo item
+   */
+  const onToggleTaskItem = ({ id, completed }): void => {
+    updateTodo({ variables: { id, completed } });
+  }
+
   return (
     <form className="Todo">
-      {
-        data.todos.map((todo: ToDo) => {
-          return (
-            <div className="Todo__list">
-              <TodoItem todo={todo} onChange={({ id, completed }) => updateTodo({ variables: { id, completed } })} />
-            </div>
-          );
-        })
-      }
+      <div className="Todo__list">
+        {
+          data.todos.map((todo: ToDo) => {
+            return (
+              <TodoItem key={`item-${todo.id}`} todo={todo} onChange={onToggleTaskItem} />
+            );
+          })
+        }
+      </div>
     </form>);
 }

src/pages/Todos/Todos.tsx

@@ -0,0 +1,80 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Todos components should render snapshot 1`] = `
+<div>
+  <form
+    class="Todo"
+  >
+    <div
+      class="Todo__list"
+    >
+      <div
+        class="Todo__item"
+      >
+        <label
+          for="1-checkbox"
+        >
+          delectus aut autem
+        </label>
+        <input
+          id="1-checkbox"
+          type="checkbox"
+        />
+      </div>
+      <div
+        class="Todo__item"
+      >
+        <label
+          for="2-checkbox"
+        >
+          quis ut nam facilis et officia qui
+        </label>
+        <input
+          id="2-checkbox"
+          type="checkbox"
+        />
+      </div>
+      <div
+        class="Todo__item"
+      >
+        <label
+          for="3-checkbox"
+        >
+          fugiat veniam minus
+        </label>
+        <input
+          id="3-checkbox"
+          type="checkbox"
+        />
+      </div>
+      <div
+        class="Todo__item"
+      >
+        <label
+          for="4-checkbox"
+        >
+          et porro tempora
+        </label>
+        <input
+          checked=""
+          id="4-checkbox"
+          type="checkbox"
+        />
+      </div>
+      <div
+        class="Todo__item"
+      >
+        <label
+          for="5-checkbox"
+        >
+          laboriosam mollitia et enim quasi adipisci quia provident illum
+        </label>
+        <input
+          id="5-checkbox"
+          type="checkbox"
+        />
+      </div>
+    </div>
+  </form>
+</div>
+`;