Merge pull request #3 from openscript/develop

openscript · web-flow · commit 30dacb722016 · 2020-04-18T13:10:02.000+02:00
Add unit tests
diff --git a/.codeclimate.yml b/.codeclimate.yml
@@ -0,0 +1,22 @@
+plugins: 
+  eslint:
+    enabled: true
+    channel: "eslint-6"
+  editorconfig:
+    enabled: false
+  fixme:
+    enabled: true
+  markdownlint:
+    enabled: false
+
+exclude_patterns:
+  - "dist/"
+  - "**/node_modules/"
+  - "**/spec/"
+  - "**/test/"
+  - "**/tests/"
+  - "**/vendor/"
+  - "**/*.d.ts"
+  - "**/*.stories.*"
+  - "**/*.test.*"
+  - "*.js"
diff --git a/.travis.yml b/.travis.yml
@@ -10,10 +10,19 @@ cache:
 install:
   - yarn install --frozen-lockfile
 
+before_script:
+  - curl -L https://codeclimate.com/downloads/test-reporter/test-reporter-latest-linux-amd64 > ./cc-test-reporter
+  - chmod +x ./cc-test-reporter
+
 script:
+  - yarn test
+  - 'if [ "$TRAVIS_PULL_REQUEST" = "false" ]; then ./cc-test-reporter format-coverage -t lcov coverage/lcov.info -o coverage/codeclimate.json; fi'
   - yarn build:rollup
   - yarn build:storybook
 
+after_script:
+  - 'if [ "$TRAVIS_PULL_REQUEST" = "false" ]; then ./cc-test-reporter upload-coverage; fi'
+
 deploy:
   - provider: pages
     local_dir: storybook-static
diff --git a/README.md b/README.md
@@ -12,7 +12,7 @@ Add the package with the package manager of choice to your project:
 
 ### TypeScript
 ```
-import { DSVImport, ColumnsType, TablePreview, TextareaInput } from 'react-dsv-import';
+import { DSVImport, ColumnsType } from 'react-dsv-import';
 
 type BasicType = { forename: string; surname: string; email: string };
 
@@ -23,14 +23,14 @@ const columns: ColumnsType<BasicType> = [
 ];
 
 <DSVImport<BasicType> columns={columns}>
-  <TextareaInput />
-  <TablePreview />
+  <DSVImport.TextareaInput />
+  <DSVImport.TablePreview />
 </DSVImport>
 ```
 
 ### JavaScript
 ```
-import { DSVImport, TablePreview, TextareaInput } from 'react-dsv-import';
+import { DSVImport } from 'react-dsv-import';
 
 const columns = [
   { key: 'forename', label: 'Forename' },
@@ -39,8 +39,8 @@ const columns = [
 ];
 
 <DSVImport columns={columns}>
-  <TextareaInput />
-  <TablePreview />
+  <DSVImport.TextareaInput />
+  <DSVImport.TablePreview />
 </DSVImport>
 ```
 
@@ -53,6 +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
  - ❌ Input validation
  - ❌ [Material UI](https://material-ui.com/) integration
  - ❌ [ant.design](https://ant.design/) integration
diff --git a/jest.config.js b/jest.config.js
@@ -0,0 +1,12 @@
+module.exports = {
+  roots: ['./src'],
+  setupFilesAfterEnv: ['./jest.setup.ts'],
+  moduleFileExtensions: ['ts', 'tsx', 'js'],
+  testPathIgnorePatterns: ['node_modules/'],
+  transform: {
+    '^.+\\.tsx?$': 'ts-jest'
+  },
+  testMatch: ['**/*.test.(ts|tsx)'],
+  collectCoverageFrom: ['**/!(*.stories).(ts|tsx)'],
+  moduleNameMapper: {}
+};
diff --git a/jest.setup.ts b/jest.setup.ts
@@ -0,0 +1 @@
+import '@testing-library/jest-dom';
diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
     "react"
   ],
   "homepage": "https://openscript.github.io/react-dsv-import/",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "main": "dist/index.js",
   "module": "dist/es/index.js",
   "types": "dist/index.d.ts",
@@ -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 --coverage",
     "pretest": "yarn build",
+    "dev:test": "jest --watchAll --coverage",
     "dev:rollup": "rollup -c --w",
     "dev:storybook": "start-storybook -p 6006",
     "build:rollup": "rollup -c",
diff --git a/src/DSVImport.stories.tsx b/src/DSVImport.stories.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { DSVImport, ColumnsType, TablePreview, TextareaInput } from './';
+import { DSVImport, ColumnsType } from './';
 import { action } from '@storybook/addon-actions';
 
 export default { title: 'Usage' };
@@ -17,8 +17,8 @@ const onChangeAction = action('Parsed value has changed');
 export const BasicUsage = () => {
   return (
     <DSVImport<BasicType> columns={columns} onChange={onChangeAction}>
-      <TextareaInput />
-      <TablePreview />
+      <DSVImport.TextareaInput />
+      <DSVImport.TablePreview />
     </DSVImport>
   );
 };
diff --git a/src/DSVImport.test.tsx b/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 }]);
+  });
+});
diff --git a/src/DSVImport.tsx b/src/DSVImport.tsx
@@ -4,7 +4,7 @@ import { getDSVImportContext } from './features/context';
 import { createSimpleParserMiddleware } from './middlewares/simpleParserMiddleware';
 import { State } from './models/state';
 
-interface Props<T> {
+export interface Props<T> {
   onChange?: (value: T[]) => void;
   columns: ColumnsType<T>;
 }
diff --git a/src/components/inputs/TextareaInput.test.tsx b/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' });
+  });
+});
diff --git a/src/components/previews/TablePreview.test.tsx b/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: 'max@example.com' },
+        { forename: '', surname: '', email: 'unknown@example.com' }
+      ]
+    });
+    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('unknown@example.com');
+  });
+});
diff --git a/src/features/context.test.ts b/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);
+  });
+});
diff --git a/src/features/context.ts b/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>());
diff --git a/src/index.tsx b/src/index.tsx
@@ -1,12 +1,13 @@
-// composite
-export * from './DSVImport';
+import { TextareaInput } from './components/inputs/TextareaInput';
+import { TablePreview } from './components/previews/TablePreview';
+import { DSVImport as Import, Props } from './DSVImport';
+import { PropsWithChildren } from 'react';
 
-// components
-export * from './components/inputs/TextareaInput';
-export * from './components/previews/TablePreview';
+export function DSVImport<T extends { [key: string]: string }>(props: PropsWithChildren<Props<T>>) {
+  return Import<T>(props);
+}
 
-// features
-export { useDSVImport } from './features/context';
+DSVImport.TextareaInput = TextareaInput;
+DSVImport.TablePreview = TablePreview;
 
-// models
-export * from './models/column';
+export { ColumnsType } from './models/column';
diff --git a/src/middlewares/simpleParserMiddleware.test.ts b/src/middlewares/simpleParserMiddleware.test.ts
diff --git a/src/middlewares/simpleParserMiddleware.ts b/src/middlewares/simpleParserMiddleware.ts
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,7 @@ import { getDSVImportContext } from './features/context';`
`4`	`4`	`import { createSimpleParserMiddleware } from './middlewares/simpleParserMiddleware';`
`5`	`5`	`import { State } from './models/state';`
`6`	`6`
`7`		`-interface Props<T> {`
	`7`	`+export interface Props<T> {`
`8`	`8`	`onChange?: (value: T[]) => void;`
`9`	`9`	`columns: ColumnsType<T>;`
`10`	`10`	`}`