WIP: Testing for reactjs-components

components/reactjs-components/jest.config.js

@@ -0,0 +1,20 @@
+module.exports = {
+    // The root of your source code, typically /src
+    // `<rootDir>` is a token Jest substitutes
+    roots: ['<rootDir>/src'],
+
+    // Jest transformations -- this adds support for TypeScript
+    // using ts-jest
+    transform: {
+        '^.+\\.tsx?$': 'ts-jest'
+    },
+
+    // Test spec file resolution pattern
+    // Filename should contain `test` or `spec`.
+    testRegex: '.*.(test|spec)\\.tsx?$',
+
+    setupFilesAfterEnv: ['<rootDir>src/setupTests.js'],
+
+    // Module file extensions for importing
+    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node']
+};

components/reactjs-components/package.json

@@ -11,6 +11,7 @@
         "watch": "tsc -W",
         "build": "tsc",
         "test": "jest",
+        "test:watch": "jest --watch",
         "bump": "yarn tsc && yarn version --no-git-tag-version --new-version"
     },
     "repository": {
@@ -28,16 +29,19 @@
     },
     "devDependencies": {
         "@tsconfig/node16": "^1.0.2",
+        "@types/enzyme": "^3.10.12",
+        "@types/jest": "^27.4.1",
         "@types/node": "^17.0.14",
         "@types/react": "*",
         "@types/react-dom": "*",
-        "jest": "^27.5.1"
+        "enzyme": "^3.11.0",
+        "enzyme-adapter-react-16": "^1.15.6",
+        "jest": "^27.5.1",
+        "ts-jest": "^27.1.4",
+        "typescript": "^4.5.5"
     },
     "dependencies": {
         "@crystallize/js-api-client": "*",
-        "typescript": "^4.5.5"
-    },
-    "peerDependencies": {
         "react": "*",
         "react-dom": "*"
     }

components/reactjs-components/src/grid/tests/CSSGrid.test.tsx

@@ -0,0 +1,17 @@
+import { shallow } from 'enzyme';
+import { CSSGrid } from '../CSSGrid';
+import { CellComponent, model, toCells } from './utils';
+
+const { rows } = model;
+const cells = toCells(rows);
+
+describe('CSSGrid', () => {
+    describe('when the `cellComponent` prop is given', () => {
+        it('renders the custom component for each cell', () => {
+            const wrapper = shallow(<CSSGrid cellComponent={CellComponent} cells={cells} />);
+            const cellComponents = wrapper.find(CellComponent);
+            expect(cellComponents).toHaveLength(3);
+            expect(cellComponents.first().prop('cell')).toEqual(rows[0].columns[0]);
+        });
+    });
+});

components/reactjs-components/src/grid/tests/GridRenderer.test.tsx

@@ -0,0 +1,46 @@
+import { shallow } from 'enzyme';
+import { GridRenderer } from '../GridRenderer';
+import { GridRenderingType } from '../types';
+import { CellComponent, model } from './utils';
+
+describe('GridRenderer', () => {
+    it('renders a grid correctly', () => {
+        const wrapper = shallow(<GridRenderer grid={model} cellComponent={CellComponent} />);
+        expect(wrapper).toMatchSnapshot();
+    });
+
+    it('renders a table correctly', () => {
+        const wrapper = shallow(
+            <GridRenderer grid={model} cellComponent={CellComponent} type={GridRenderingType.Table} />
+        );
+        expect(wrapper).toMatchSnapshot();
+    });
+
+    it('passes the `cellComponent` prop through correctly', () => {
+        const wrapper = shallow(<GridRenderer grid={model} cellComponent={CellComponent} />);
+        expect(wrapper.find('CSSGrid').prop('cellComponent')).toEqual(CellComponent);
+    });
+
+    it('passes the children through correctly', () => {
+        // The children should be a function as per the prop types
+        const mock = jest.fn();
+        const wrapper = shallow(
+            <GridRenderer grid={model} cellComponent={CellComponent}>
+                {mock}
+            </GridRenderer>
+        );
+        expect(wrapper.find('CSSGrid').prop('children')).toEqual(mock);
+    });
+
+    it('should allow custom props to be passed through to the grid component', () => {
+        const wrapper = shallow(
+            <GridRenderer
+                className="my-custom-class"
+                grid={model}
+                cellComponent={CellComponent}
+                type={GridRenderingType.Div}
+            />
+        );
+        expect(wrapper.find('CSSGrid').prop('className')).toEqual('my-custom-class');
+    });
+});

components/reactjs-components/src/grid/tests/Table.test.tsx

@@ -0,0 +1,14 @@
+import { shallow } from 'enzyme';
+import { Table } from '../Table';
+import { CellComponent, model } from './utils';
+
+const { rows } = model;
+
+describe('Table', () => {
+    it('renders correctly', () => {
+        const wrapper = shallow(<Table cellComponent={CellComponent} rows={rows} />);
+        const cells = wrapper.find(CellComponent);
+        expect(cells).toHaveLength(3);
+        expect(cells.first().prop('cell')).toEqual(rows[0].columns[0]);
+    });
+});

components/reactjs-components/src/grid/tests/__snapshots__/GridRenderer.test.tsx.snap

@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`GridRenderer renders a grid correctly 1`] = `ShallowWrapper {}`;
+
+exports[`GridRenderer renders a table correctly 1`] = `ShallowWrapper {}`;

components/reactjs-components/src/grid/tests/utils.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+
+export const model = {
+    rows: [
+        {
+            columns: [
+                {
+                    layout: {
+                        colspan: 2,
+                        rowspan: 1
+                    },
+                    item: {
+                        name: 'Item 1'
+                    }
+                },
+                {
+                    layout: {
+                        colspan: 2,
+                        rowspan: 1
+                    },
+                    item: {
+                        name: 'Item 2'
+                    }
+                }
+            ]
+        },
+        {
+            columns: [
+                {
+                    layout: {
+                        colspan: 4,
+                        rowspan: 1
+                    },
+                    item: {
+                        name: 'Item 3'
+                    }
+                }
+            ]
+        }
+    ]
+};
+
+export const toCells = (rows: any) => {
+    const columns = rows.map((row: any) => row.columns);
+    return [].concat.apply([], columns);
+};
+
+export const CellComponent = ({ cell }: { cell: any }) => (
+    <div className="custom-cell">
+        <h1>{cell.item.name}</h1>
+    </div>
+);

components/reactjs-components/src/grid/types.ts

@@ -9,21 +9,22 @@ export interface CSSGridProps {
     cellComponent: React.FunctionComponent<{ cell: any; totalColSpan: number }>;
     cells: any;
     children?: FunctionComponent<any>;
-    totalColSpan: number;
+    totalColSpan?: number;
     style?: React.CSSProperties;
 }
 
 export interface TableGridProps {
     cellComponent: React.FunctionComponent<{ cell: any; totalColSpan: number }>;
     rows: any;
     children?: FunctionComponent<any>;
-    totalColSpan: number;
+    totalColSpan?: number;
     style?: React.CSSProperties;
 }
 
 export interface GridRendererProps {
+    className?: string;
     cellComponent: React.FunctionComponent<{ cell: any; totalColSpan: number }>;
-    type: GridRenderingType;
+    type?: GridRenderingType;
     grid: {
         rows: any;
     };

components/reactjs-components/src/setupTests.js

@@ -0,0 +1,5 @@
+require('react');
+const { configure } = require('enzyme');
+const Adapter = require('enzyme-adapter-react-16');
+
+configure({ adapter: new Adapter() });

components/reactjs-components/tsconfig.json

@@ -1,6 +1,7 @@
 {
     "extends": "@tsconfig/node16/tsconfig.json",
     "compilerOptions": {
+        "esModuleInterop": true,
         "outDir": "./dist",
         "declaration": true,
         "lib": ["es2021", "DOM"],