add unit testing to demo app

demo-app/exercises/exercise-19.md

@@ -0,0 +1,9 @@
+# Exercise 19
+
+1. Implement a snapshot test for Car View Row.
+
+2. Implement a DOM-based test for Car View Row.
+
+Ideally, use the "getAllByRole" and test the content of the tds.
+
+3. Ensure it works!

demo-app/package.json

@@ -42,9 +42,12 @@
     ]
   },
   "devDependencies": {
+    "@testing-library/react-hooks": "^3.4.2",
     "@types/react-redux": "^7.1.9",
+    "jest-fetch-mock": "^3.0.3",
     "json-server": "^0.16.2",
     "npm-run-all": "^4.1.5",
+    "react-test-renderer": "^16.13.1",
     "redux-devtools-extension": "^2.13.8"
   }
 }

demo-app/src/components/ToolHeader.test.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import { render } from '@testing-library/react';
+import renderer from 'react-test-renderer';
+
+import { ToolHeader } from './ToolHeader';
+
+test('snapshot ToolHeader component', () => {
+  expect(
+    renderer.create(<ToolHeader headerText="The Tool" />).toJSON(),
+  ).toMatchSnapshot();
+});
+
+describe('ToolHeader component', () => {
+  test('renders ToolHeader component', () => {
+    const { getByText, getByRole, getAllByRole } = render(
+      <ToolHeader headerText="The Tool" />,
+    );
+
+    // expect(getByText('The Tool').textContent).toBe('The Tool');
+    expect(getByText('The Tool')).toBeInTheDocument();
+
+    expect(getByRole('heading').textContent).toBe('The Tool');
+  });
+});

demo-app/src/components/ToolHeader.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import React, { FC } from 'react';
 
 export interface ToolHeaderProps {
   headerText: string;

demo-app/src/components/__snapshots__/ToolHeader.test.tsx.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`snapshot ToolHeader component 1`] = `
+<header>
+  <h1>
+    The Tool
+  </h1>
+</header>
+`;

demo-app/src/globals.d.ts

@@ -0,0 +1 @@
+import 'jest-dom/extend-expect';

demo-app/src/services/RestClient.ts

@@ -1,6 +1,13 @@
 import { Item, ItemId } from '../models/item';
 
 export class RestClient<T extends Item> {
+
+  // private baseUrl: string;
+
+  // constructor(baseUrl: string) {
+  //   this.baseUrl = baseUrl;
+  // }
+
   constructor(private baseUrl: string) {}
 
   async all() {
@@ -9,7 +16,7 @@ export class RestClient<T extends Item> {
     return items as T[];
   }
 
-  async append(newItem: Omit<Item, 'id'>) {
+  async append(newItem: Omit<T, 'id'>) {
     const res = await fetch(`${this.baseUrl}`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
@@ -20,7 +27,7 @@ export class RestClient<T extends Item> {
     return car.id;
   }
 
-  async replace(item: Item) {
+  async replace(item: T) {
     await fetch(`${this.baseUrl}/${encodeURIComponent(item.id)}`, {
       method: 'PUT',
       headers: { 'Content-Type': 'application/json' },

perf-car-tool-app-starter/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

perf-car-tool-app-starter/.prettierrc

@@ -0,0 +1,19 @@
+{
+  "arrowParens": "always",
+  "bracketSpacing": true,
+  "embeddedLanguageFormatting": "auto",
+  "htmlWhitespaceSensitivity": "css",
+  "insertPragma": false,
+  "jsxBracketSameLine": true,
+  "jsxSingleQuote": false,
+  "printWidth": 80,
+  "proseWrap": "preserve",
+  "quoteProps": "consistent",
+  "requirePragma": false,
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "useTabs": false,
+  "vueIndentScriptAndStyle": false
+}

perf-car-tool-app-starter/README.md

@@ -0,0 +1 @@
+# Performance Car Tool App Starter