add unit test demos

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

@@ -0,0 +1,66 @@
+import React from 'react';
+import { render, RenderResult, fireEvent } from '@testing-library/react';
+
+import { NewCar, CarKeys } from '../models/car';
+import { CarForm } from '../components/CarForm';
+
+describe('CarViewRow testing library', () => {
+  let car: NewCar;
+  let textInputKeys: CarKeys[] = ['make', 'model', 'color'];
+  let numberInputKeys: CarKeys[] = ['year', 'price'];
+  let renderResult: RenderResult;
+  let submitCarSpy: jest.Mock;
+
+  beforeEach(() => {
+    car = {
+      make: 'Ford',
+      model: 'Fusion Hybrid',
+      year: 2020,
+      color: 'red',
+      price: 45000,
+    };
+
+    submitCarSpy = jest.fn();
+  });
+
+  beforeEach(() => {
+    renderResult = render(
+      <CarForm buttonText="Add Car" onSubmitCar={submitCarSpy} />,
+    );
+  });
+
+  test('render CarViewRow component', () => {
+    const { getAllByRole } = renderResult;
+
+    const textboxInputs = getAllByRole('textbox');
+    expect(textboxInputs.length).toBe(3);
+    textboxInputs.forEach((input: HTMLInputElement, index: number) => {
+      const evt = {
+        target: {
+          type: input.type,
+          value: car[textInputKeys[index]],
+          name: input.name,
+        },
+      };
+      fireEvent.change(input, evt);
+    });
+
+    const spinbuttonInputs = getAllByRole('spinbutton');
+    expect(spinbuttonInputs.length).toBe(2);
+    spinbuttonInputs.forEach((input: HTMLInputElement, index: number) => {
+      const evt = {
+        target: {
+          type: input.type,
+          value: car[numberInputKeys[index]],
+          name: input.name,
+        },
+      };
+      fireEvent.change(input, evt);
+    });
+
+    const submitButton = renderResult.getByRole('button');
+
+    fireEvent.click(submitButton);
+    expect(submitCarSpy).toHaveBeenCalledWith(car);
+  });
+});

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

@@ -0,0 +1,55 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { Car, CarsOrder, ORDER_ASC } from '../models/car';
+import { CarTable } from './CarTable';
+
+jest.mock('./CarViewRow');
+jest.mock('./CarEditRow');
+
+describe('CarTable render', () => {
+  let cars: Car[];
+  let carsOrder: CarsOrder;
+
+  beforeEach(() => {
+    carsOrder = {
+      column: 'id',
+      direction: ORDER_ASC,
+    };
+    cars = [
+      {
+        id: 1,
+        make: 'Ford',
+        model: 'Fusion Hybrid',
+        year: 2020,
+        color: 'blue',
+        price: 45000,
+      },
+      {
+        id: 2,
+        make: 'Tesla',
+        model: 'S',
+        year: 2019,
+        color: 'red',
+        price: 120000,
+      },
+    ];
+  });
+
+  test('render', () => {
+    const { debug } = render(
+      <CarTable
+        cars={cars}
+        editCarId={-1}
+        carsOrder={carsOrder}
+        onEditCar={() => null}
+        onDeleteCar={() => null}
+        onSaveCar={() => null}
+        onCancelCar={() => null}
+        onSortCars={() => null}
+      />,
+    );
+
+    debug();
+  });
+});

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

@@ -1,8 +1,8 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, RenderResult, fireEvent } from '@testing-library/react';
 import renderer from 'react-test-renderer';
 
-import { Car } from '../models/car';
+import { Car, CarKeys } from '../models/car';
 import { CarViewRow } from '../components/CarViewRow';
 
 test('snapshot CarViewRow component', () => {
@@ -29,8 +29,14 @@ test('snapshot CarViewRow component', () => {
 });
 
 describe('CarViewRow testing library', () => {
-  test('render CarViewRow component', () => {
-    const car = {
+  let car: Car;
+  let carKeys: CarKeys[];
+  let renderResult: RenderResult;
+  let editCarSpy: jest.Mock;
+  let deleteCarSpy: jest.Mock;
+
+  beforeEach(() => {
+    car = {
       id: 1,
       make: 'Ford',
       model: 'Fusion Hybrid',
@@ -39,19 +45,27 @@ describe('CarViewRow testing library', () => {
       price: 45000,
     };
 
-    const carKeys = Object.keys(car);
-    const renderResult = render(
+    carKeys = Object.keys(car) as CarKeys[];
+
+    editCarSpy = jest.fn();
+    deleteCarSpy = jest.fn();
+  });
+
+  beforeEach(() => {
+    renderResult = render(
       <table>
         <tbody>
           <CarViewRow
             car={car}
-            onEditCar={() => null}
-            onDeleteCar={() => null}
+            onEditCar={editCarSpy}
+            onDeleteCar={deleteCarSpy}
           />
         </tbody>
       </table>,
     );
+  });
 
+  test('render CarViewRow component', () => {
     const cells = renderResult.getAllByRole('cell');
 
     expect(cells.length).toBe(7);
@@ -60,4 +74,14 @@ describe('CarViewRow testing library', () => {
       expect(element.textContent).toBe(String(car[carKeys[index]]));
     });
   });
+
+  test('click edit', () => {
+    fireEvent.click(renderResult.getByText('Edit'));
+    expect(editCarSpy).toHaveBeenCalledWith(1);
+  });
+
+  test('click delete', () => {
+    fireEvent.click(renderResult.getByText('Delete'));
+    expect(deleteCarSpy).toHaveBeenCalledWith(1);
+  });
 });

demo-app/src/components/__mocks__/CarEditRow.tsx

@@ -0,0 +1,3 @@
+import React from 'react';
+
+export const CarEditRow = () => <></>;

demo-app/src/components/__mocks__/CarViewRow.tsx

@@ -0,0 +1,3 @@
+import React from 'react';
+
+export const CarViewRow = () => <></>;

demo-app/src/hooks/useForm.test.ts

@@ -0,0 +1,56 @@
+import { ChangeEvent } from 'react';
+import { renderHook, act } from '@testing-library/react-hooks';
+import { useForm } from './useForm';
+
+describe('use form custom hook', () => {
+  test('use form', () => {
+    const { result } = renderHook(() => useForm({ firstName: '', age: NaN }));
+
+    let form = result.current[0];
+    expect(form.firstName).toEqual('');
+    expect(form.age).toBeNaN();
+
+    act(() => {
+      const e = {
+        target: {
+          name: 'firstName',
+          type: 'text',
+          value: 'B',
+        } as HTMLInputElement,
+      } as ChangeEvent<HTMLInputElement>;
+
+      const change = result.current[1];
+      change(e);
+    });
+
+    form = result.current[0];
+    expect(form.firstName).toEqual('B');
+    expect(form.age).toBeNaN();
+
+    act(() => {
+      const e = {
+        target: {
+          name: 'age',
+          type: 'number',
+          value: '20',
+        } as HTMLInputElement,
+      } as ChangeEvent<HTMLInputElement>;
+
+      const change = result.current[1];
+      change(e);
+    });
+
+    form = result.current[0];
+    expect(form.firstName).toEqual('B');
+    expect(form.age).toEqual(20);
+
+    act(() => {
+      const resetForm = result.current[2];
+      resetForm();
+    });
+
+    form = result.current[0];
+    expect(form.firstName).toEqual('');
+    expect(form.age).toBeNaN();
+  });
+});