Add unit tests

Author: openscript

README.md

@@ -53,7 +53,7 @@ The most important features of this component are:
  - ✅ Type definitions and type safety
  - ✅ DSV format detection
  - ✅ Fully compositable
- - ❌ Automatic testing with >90% coverage
+ - ✅ Automatic testing with >90% coverage
  - ❌ Input validation
  - ❌ [Material UI](https://material-ui.com/) integration
  - ❌ [ant.design](https://ant.design/) integration

jest.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  roots: ['./src'],
+  setupFilesAfterEnv: ['./jest.setup.ts'],
+  moduleFileExtensions: ['ts', 'tsx', 'js'],
+  testPathIgnorePatterns: ['node_modules/'],
+  transform: {
+    '^.+\\.tsx?$': 'ts-jest'
+  },
+  testMatch: ['**/*.test.(ts|tsx)'],
+  moduleNameMapper: {}
+};

jest.setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package.json

@@ -23,6 +23,9 @@
     "@storybook/addons": "^5.3.18",
     "@storybook/preset-typescript": "^3.0.0",
     "@storybook/react": "^5.3.18",
+    "@testing-library/jest-dom": "^5.5.0",
+    "@testing-library/react": "^10.0.2",
+    "@types/jest": "^25.2.1",
     "@types/node": "^13.11.1",
     "@types/react": "^16.9.34",
     "@types/react-dom": "^16.9.6",
@@ -34,18 +37,21 @@
     "eslint-config-prettier": "^6.10.1",
     "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-react": "^7.19.0",
+    "jest": "^25.3.0",
     "prettier": "^2.0.4",
     "react-is": "^16.13.1",
     "rollup": "^2.6.1",
+    "ts-jest": "^25.4.0",
     "ts-node": "^8.8.2",
     "tslib": "^1.11.1",
     "typescript": "^3.8.3"
   },
   "scripts": {
     "build": "yarn build:rollup",
     "dev": "yarn dev:storybook",
-    "test": "ts-node test/test.ts",
+    "test": "jest",
     "pretest": "yarn build",
+    "dev:test": "jest --watch",
     "dev:rollup": "rollup -c --w",
     "dev:storybook": "start-storybook -p 6006",
     "build:rollup": "rollup -c",

src/DSVImport.test.tsx

@@ -0,0 +1,37 @@
+import { ColumnsType } from './models/column';
+import { DSVImport } from '.';
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+
+describe('DSVImport', () => {
+  type TestType = { forename: string; surname: string; email: string };
+
+  const columns: ColumnsType<TestType> = [
+    { key: 'forename', label: 'Forename' },
+    { key: 'surname', label: 'Surname' },
+    { key: 'email', label: 'Email' }
+  ];
+
+  const onChangeMock = jest.fn();
+
+  const renderComponent = () => {
+    return render(
+      <DSVImport<TestType> columns={columns} onChange={onChangeMock}>
+        <DSVImport.TextareaInput />
+        <DSVImport.TablePreview />
+      </DSVImport>
+    );
+  };
+
+  it('should invoke the onChange callback on context change', () => {
+    const { container } = renderComponent();
+    const textarea = container.querySelector('textarea');
+
+    if (textarea) {
+      fireEvent.change(textarea, { target: { value: 'Max' } });
+    }
+
+    expect(onChangeMock).toBeCalledTimes(2);
+    expect(onChangeMock).toBeCalledWith([{ email: undefined, forename: 'Max', surname: undefined }]);
+  });
+});

src/components/inputs/TextareaInput.test.tsx

@@ -0,0 +1,35 @@
+import { render, fireEvent } from '@testing-library/react';
+import { TextareaInput } from './TextareaInput';
+import React from 'react';
+import { ColumnsType } from '../../models/column';
+import { getDSVImportContext } from '../../features/context';
+import { State } from '../../models/state';
+
+describe('TextareaInput', () => {
+  type TestType = {};
+  const columns: ColumnsType<TestType> = [];
+  const state: State<TestType> = { columns };
+  const Context = getDSVImportContext<TestType>();
+
+  const dispatchMock = jest.fn(() => state);
+
+  const renderComponent = () => {
+    return render(
+      <Context.Provider value={[state, dispatchMock]}>
+        <TextareaInput />
+      </Context.Provider>
+    );
+  };
+
+  it('should dispatch the setRaw action on input change', () => {
+    const { container } = renderComponent();
+    const textarea = container.querySelector('textarea');
+
+    if (textarea) {
+      fireEvent.change(textarea, { target: { value: 'Change' } });
+    }
+
+    expect(dispatchMock).toBeCalledTimes(1);
+    expect(dispatchMock).toBeCalledWith({ raw: 'Change', type: 'setRaw' });
+  });
+});

src/components/previews/TablePreview.test.tsx

@@ -0,0 +1,54 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+import { ColumnsType } from '../../models/column';
+import { TablePreview } from './TablePreview';
+import { State } from '../../models/state';
+import { getDSVImportContext } from '../../features/context';
+
+describe('TablePreview', () => {
+  type TestType = { forename: string; surname: string; email: string };
+  const columns: ColumnsType<TestType> = [
+    { key: 'forename', label: 'Forename' },
+    { key: 'surname', label: 'Surname' },
+    { key: 'email', label: 'Email' }
+  ];
+  const defaultState: State<TestType> = { columns };
+  const Context = getDSVImportContext<TestType>();
+
+  const dispatchMock = jest.fn(() => defaultState);
+
+  const renderComponent = (state = defaultState) => {
+    return render(
+      <Context.Provider value={[state, dispatchMock]}>
+        <TablePreview />
+      </Context.Provider>
+    );
+  };
+
+  it('should render the column labels in the table head', () => {
+    const { container } = renderComponent();
+    const tableHeadRow = container.querySelector('thead tr');
+
+    expect(tableHeadRow?.childElementCount).toBe(3);
+
+    expect(tableHeadRow?.children[0]).toHaveTextContent('Forename');
+    expect(tableHeadRow?.children[1]).toHaveTextContent('Surname');
+    expect(tableHeadRow?.children[2]).toHaveTextContent('Email');
+  });
+
+  it('should render the parsed content in the table body', () => {
+    const { container } = renderComponent({
+      ...defaultState,
+      parsed: [
+        { forename: 'Max', surname: 'Muster', email: '[email protected]' },
+        { forename: '', surname: '', email: '[email protected]' }
+      ]
+    });
+    const tableBody = container.querySelector('tbody');
+
+    expect(tableBody?.childElementCount).toBe(2);
+
+    expect(tableBody?.children[0].children[0]).toHaveTextContent('Max');
+    expect(tableBody?.children[1].children[2]).toHaveTextContent('[email protected]');
+  });
+});

src/features/context.test.ts

@@ -0,0 +1,24 @@
+import { reducer, getDSVImportContext } from './context';
+import { State } from '../models/state';
+
+describe('context', () => {
+  type TestType = {};
+  const defaultState: State<TestType> = { columns: [] };
+
+  it('should reduce raw data to state', () => {
+    const newState = reducer<TestType>(defaultState, { type: 'setRaw', raw: 'Raw data' });
+    expect(newState).toStrictEqual({ ...defaultState, raw: 'Raw data' });
+  });
+
+  it('should reduce parsed data to state', () => {
+    const newState = reducer<TestType>(defaultState, { type: 'setParsed', parsed: ['Parsed data'] });
+    expect(newState).toStrictEqual({ ...defaultState, parsed: ['Parsed data'] });
+  });
+
+  it('should create the context as singleton', () => {
+    const first = getDSVImportContext<TestType>();
+    const second = getDSVImportContext<TestType>();
+
+    expect(first).toStrictEqual(second);
+  });
+});

src/features/context.ts

@@ -1,28 +1,30 @@
 import { State, emptyState } from '../models/state';
 import { createContext, Dispatch, useContext } from 'react';
 
-export type Actions = { type: 'setRaw'; raw: string };
+export type Actions<T> = { type: 'setRaw'; raw: string } | { type: 'setParsed'; parsed: T[] };
 
-export const reducer = <T>(state: State<T>, action: Actions) => {
+export const reducer = <T>(state: State<T>, action: Actions<T>) => {
   switch (action.type) {
     case 'setRaw':
       return { ...state, raw: action.raw };
+    case 'setParsed':
+      return { ...state, parsed: action.parsed };
     default:
       return state;
   }
 };
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-let contextSingleton: React.Context<[State<any>, Dispatch<Actions>]>;
+let contextSingleton: React.Context<[State<any>, Dispatch<Actions<any>>]>;
 export const getDSVImportContext = <T>() => {
   if (!contextSingleton) {
-    contextSingleton = createContext<[State<T>, Dispatch<Actions>]>([
+    contextSingleton = createContext<[State<T>, Dispatch<Actions<T>>]>([
       (emptyState as unknown) as State<T>,
       () => {
         throw new Error('Not initialized');
       }
     ]);
   }
-  return contextSingleton as React.Context<[State<T>, Dispatch<Actions>]>;
+  return contextSingleton as React.Context<[State<T>, Dispatch<Actions<T>>]>;
 };
 export const useDSVImport = <T = { [key: string]: string }>() => useContext(getDSVImportContext<T>());

src/middlewares/simpleParserMiddleware.test.ts

@@ -0,0 +1,48 @@
+import { createSimpleParserMiddleware } from './simpleParserMiddleware';
+import { State } from '../models/state';
+import { ColumnsType } from '../models/column';
+import { Delimiter } from '../models/delimiter';
+
+describe('simpleParserMiddleware', () => {
+  type TestType = { forename: string; surname: string; email: string };
+  const columns: ColumnsType<TestType> = [
+    { key: 'forename', label: 'Forename' },
+    { key: 'surname', label: 'Surname' },
+    { key: 'email', label: 'Email' }
+  ];
+  const defaultState: State<TestType> = { columns };
+  const middleware = createSimpleParserMiddleware<TestType>();
+
+  const rawData = '[email protected]\[email protected]';
+
+  it('should set new parsed data when raw data is set', () => {
+    const newState = middleware(defaultState, { type: 'setRaw', raw: 'Max' });
+
+    expect(newState.parsed).toStrictEqual([{ forename: 'Max', surname: undefined, email: undefined }]);
+  });
+
+  it('should detect the correct delimiter from raw data', () => {
+    Object.values(Delimiter).forEach((d) => {
+      const newState = middleware(defaultState, { type: 'setRaw', raw: rawData.replace(/!/g, d) });
+
+      expect(newState.parsed?.length).toBe(2);
+      expect(newState.parsed?.[0]).toStrictEqual({ forename: 'Max', surname: 'Muster', email: '[email protected]' });
+      expect(newState.parsed?.[1]).toStrictEqual({
+        forename: '',
+        surname: '',
+        email: '[email protected]'
+      });
+    });
+  });
+
+  it('should invoke the onChange callback', () => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
+    const onChangeMock = jest.fn((_value: TestType[]) => {});
+    const middlewareWithOnChange = createSimpleParserMiddleware<TestType>(onChangeMock);
+
+    middlewareWithOnChange(defaultState, { type: 'setRaw', raw: 'Max' });
+
+    expect(onChangeMock).toBeCalledTimes(1);
+    expect(onChangeMock).toBeCalledWith([{ forename: 'Max', surname: undefined, email: undefined }]);
+  });
+});