Merge pull request #63 from ts-graphviz/add-tests

Add tests and error handlings

Author: kamiazya

.eslintrc.json

@@ -39,6 +39,7 @@
     "prettier/prettier": "error",
     "import/extensions": "off",
     "import/prefer-default-export": "off",
+    "import/no-extraneous-dependencies": "off",
     "react/forbid-prop-types": "off",
     "react/jsx-wrap-multilines": "off",
     "react/prop-types": [

jest.config.js

@@ -3,22 +3,11 @@ module.exports = {
   testEnvironment: 'node',
   verbose: true,
   collectCoverage: true,
-  setupFilesAfterEnv: [
-    '<rootDir>/config/jest/setup-jest.ts',
-  ],
-  roots: [
-    '<rootDir>/src'
-  ],
+  setupFilesAfterEnv: ['<rootDir>/config/jest/setup-jest.ts'],
+  roots: ['<rootDir>/src'],
   transform: {
-    '^.+\\.tsx?$': 'ts-jest'
+    '^.+\\.tsx?$': 'ts-jest',
   },
-  testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$',
-  moduleFileExtensions: [
-    'ts',
-    'tsx',
-    'js',
-    'jsx',
-    'json',
-    'node',
-  ],
+  testMatch: ['**/(__tests__|__specs__)/**/*.(spec|test).(ts|tsx)'],
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
 };

package.json

@@ -42,6 +42,7 @@
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^11.1.0",
+    "@testing-library/react-hooks": "^3.2.1",
     "@types/prop-types": "^15.7.3",
     "@types/react": "^16.9.17",
     "@types/react-dom": "^16.9.4",
@@ -58,10 +59,11 @@
     "eslint-plugin-react": "^7.19.0",
     "eslint-plugin-react-hooks": "^3.0.0",
     "jest": "^25.3.0",
-    "jest-graphviz": "^0.2.0",
+    "jest-graphviz": "^0.3.1",
     "prettier": "^1.19.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-test-renderer": "^16.13.1",
     "rollup": "^2.6.1",
     "rollup-plugin-terser": "^5.3.0",
     "rollup-plugin-typescript2": "^0.27.0",

src/components/Digraph.tsx

@@ -1,15 +1,21 @@
 import React, { FC, ReactElement } from 'react';
 import PropTypes from 'prop-types';
-import { RootCluster } from './contexts/RootCluster';
+import { RootCluster, NoRootCluster } from './contexts/RootCluster';
 import { Cluster } from './contexts/Cluster';
 import { useDigraph, DigraphProps } from '../hooks/use-digraph';
 import { useRenderedID } from '../hooks/use-rendered-id';
+import { useRootCluster } from '../hooks/use-root-cluster';
+import { DuplicatedRootClusterErrorMessage } from '../utils/errors';
 
 type Props = Omit<DigraphProps, 'label'> & {
   label?: ReactElement | string;
 };
 
 export const Digraph: FC<Props> = ({ children, label, ...props }) => {
+  const root = useRootCluster();
+  if (root !== NoRootCluster) {
+    throw Error(DuplicatedRootClusterErrorMessage);
+  }
   const renderedLabel = useRenderedID(label);
   if (renderedLabel !== undefined) Object.assign(props, { label: renderedLabel });
   const digraph = useDigraph(props);

src/components/Graph.tsx

@@ -1,15 +1,21 @@
 import React, { FC, ReactElement } from 'react';
 import PropTypes from 'prop-types';
-import { RootCluster } from './contexts/RootCluster';
+import { RootCluster, NoRootCluster } from './contexts/RootCluster';
 import { Cluster } from './contexts/Cluster';
 import { GraphProps, useGraph } from '../hooks/use-graph';
 import { useRenderedID } from '../hooks/use-rendered-id';
+import { useRootCluster } from '../hooks/use-root-cluster';
+import { DuplicatedRootClusterErrorMessage } from '../utils/errors';
 
 type Props = Omit<GraphProps, 'label'> & {
   label?: ReactElement | string;
 };
 
 export const Graph: FC<Props> = ({ children, label, ...props }) => {
+  const root = useRootCluster();
+  if (root !== NoRootCluster) {
+    throw Error(DuplicatedRootClusterErrorMessage);
+  }
   const renderedLabel = useRenderedID(label);
   if (renderedLabel !== undefined) Object.assign(props, { label: renderedLabel });
   const graph = useGraph(props);

src/components/__tests__/Digraph.spec.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Digraph } from '../Digraph';
+import { DuplicatedRootClusterErrorMessage } from '../../utils/errors';
+import { renderExpectToThrow } from './utils/renderExpectToThrow';
+
+describe('Digraph', () => {
+  // eslint-disable-next-line jest/expect-expect
+  test('An error occurs when duplicate <Digraph />', () => {
+    renderExpectToThrow(
+      <Digraph>
+        <Digraph />
+      </Digraph>,
+      DuplicatedRootClusterErrorMessage,
+    );
+  });
+});

src/components/__tests__/Graph.spec.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Graph } from '../Graph';
+import { DuplicatedRootClusterErrorMessage } from '../../utils/errors';
+import { renderExpectToThrow } from './utils/renderExpectToThrow';
+
+describe('Graph', () => {
+  // eslint-disable-next-line jest/expect-expect
+  test('An error occurs when duplicate <Graph />', () => {
+    renderExpectToThrow(
+      <Graph>
+        <Graph />
+      </Graph>,
+      DuplicatedRootClusterErrorMessage,
+    );
+  });
+});

src/components/__tests__/utils/renderExpectToThrow.tsx

@@ -0,0 +1,40 @@
+/* eslint-disable react/destructuring-assignment */
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+import React, { Component, ReactElement } from 'react';
+import { Context } from 'ts-graphviz';
+import { render } from '../../../renderer/render';
+
+export function renderExpectToThrow(element: ReactElement, expectedError: string) {
+  const errors: Error[] = [];
+  class ErrorBoundary extends Component<{}, { hasError: boolean }> {
+    constructor(props: {}) {
+      super(props);
+      this.state = { hasError: false };
+    }
+
+    static getDerivedStateFromError() {
+      return { hasError: true };
+    }
+
+    componentDidCatch(error: Error) {
+      errors.push(error);
+    }
+
+    render() {
+      if (this.state.hasError) {
+        return <></>;
+      }
+      return this.props.children;
+    }
+  }
+
+  const context = new Context();
+  try {
+    render(<ErrorBoundary>{element}</ErrorBoundary>, context);
+  } catch (e) {
+    errors.push(e);
+  }
+
+  expect(errors.length).toBe(1);
+  expect(errors[0].message).toContain(expectedError);
+}

src/components/contexts/Cluster.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { ICluster } from 'ts-graphviz';
 
-export const Cluster = React.createContext<ICluster<string>>({} as ICluster<string>);
+export const NoCluster = {} as ICluster<string>;
+export const Cluster = React.createContext<ICluster<string>>(NoCluster);
 Cluster.displayName = 'Cluster';

src/components/contexts/GraphvizContext.ts

@@ -1,5 +1,7 @@
 import React from 'react';
 import { Context } from 'ts-graphviz';
 
-export const GraphvizContext = React.createContext<Context>(new Context());
+export const NoContext = {} as Context;
+
+export const GraphvizContext = React.createContext<Context>(NoContext);
 GraphvizContext.displayName = 'GraphvizContext';

src/components/contexts/RootCluster.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { IRootCluster } from 'ts-graphviz';
 
-export const RootCluster = React.createContext<IRootCluster>({} as IRootCluster);
+export const NoRootCluster = {} as IRootCluster;
+export const RootCluster = React.createContext<IRootCluster>(NoRootCluster);
 RootCluster.displayName = 'RootCluster';

src/hooks/__tests__/__snapshots__/use-rendered-id.spec.tsx.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`useRenderedID  1`] = `"hoge"`;
+
+exports[`useRenderedID  2`] = `"<<b>bold</b>>"`;
+
+exports[`useRenderedID  3`] = `"<<b>bold</b>>"`;
+
+exports[`useRenderedID  4`] = `"<<table BORDER=\\"0\\" CELLBORDER=\\"1\\" CELLSPACING=\\"0\\"><tr><td>left</td><td PORT=\\"m\\">middle</td><td PORT=\\"r\\">right</td></tr></table>>"`;

src/hooks/__tests__/use-cluster.spec.ts

@@ -0,0 +1,42 @@
+import { Digraph, Graph, Subgraph } from 'ts-graphviz';
+import { renderHook } from '@testing-library/react-hooks';
+import { useCluster } from '../use-cluster';
+import { digraph, graph, graphInSubgraph, digraphInSubgraph } from './utils/wrapper';
+import { NoClusterErrorMessage } from '../../utils/errors';
+
+describe('useCluster', () => {
+  describe('get parent cluster', () => {
+    test('returns Diagram instance in digraph wrapper', () => {
+      const { result } = renderHook(() => useCluster(), {
+        wrapper: digraph(),
+      });
+      expect(result.current).toBeInstanceOf(Digraph);
+    });
+
+    test('returns Graph instance in graph wrapper', () => {
+      const { result } = renderHook(() => useCluster(), {
+        wrapper: graph(),
+      });
+      expect(result.current).toBeInstanceOf(Graph);
+    });
+
+    test('returns Subgraph instance in graphInSubgraph wrapper', () => {
+      const { result } = renderHook(() => useCluster(), {
+        wrapper: graphInSubgraph(),
+      });
+      expect(result.current).toBeInstanceOf(Subgraph);
+    });
+
+    test('returns Subgraph instance in digraphInSubgraph wrapper', () => {
+      const { result } = renderHook(() => useCluster(), {
+        wrapper: digraphInSubgraph(),
+      });
+      expect(result.current).toBeInstanceOf(Subgraph);
+    });
+  });
+
+  test('An error occurs when called outside the cluster', () => {
+    const { result } = renderHook(() => useCluster());
+    expect(result.error).toStrictEqual(Error(NoClusterErrorMessage));
+  });
+});

src/hooks/__tests__/use-digraph.spec.ts

@@ -0,0 +1,13 @@
+import { Digraph } from 'ts-graphviz';
+import { renderHook } from '@testing-library/react-hooks';
+import { context } from './utils/wrapper';
+import { useDigraph } from '../use-digraph';
+
+describe('useDigraph', () => {
+  it('returns Digraph instance', () => {
+    const { result } = renderHook(() => useDigraph(), {
+      wrapper: context(),
+    });
+    expect(result.current).toBeInstanceOf(Digraph);
+  });
+});

src/hooks/__tests__/use-edge.spec.ts

@@ -0,0 +1,28 @@
+import { Edge } from 'ts-graphviz';
+import { renderHook } from '@testing-library/react-hooks';
+import { useEdge } from '../use-edge';
+import { digraph, graph } from './utils/wrapper';
+import { EdgeTargetLengthErrorMessage } from '../../utils/errors';
+
+describe('useEdge', () => {
+  it('returns Edge instance in digraph wrapper', () => {
+    const { result } = renderHook(() => useEdge({ targets: ['a', 'b'] }), {
+      wrapper: digraph(),
+    });
+    expect(result.current).toBeInstanceOf(Edge);
+  });
+
+  it('returns Edge instance in graph wrapper', () => {
+    const { result } = renderHook(() => useEdge({ targets: ['a', 'b'] }), {
+      wrapper: graph(),
+    });
+    expect(result.current).toBeInstanceOf(Edge);
+  });
+
+  test('throw error if the target is less than 2', () => {
+    const { result } = renderHook(() => useEdge({ targets: ['a'] }), {
+      wrapper: graph(),
+    });
+    expect(result.error).toStrictEqual(Error(EdgeTargetLengthErrorMessage));
+  });
+});

src/hooks/__tests__/use-graph.spec.ts

@@ -0,0 +1,13 @@
+import { Graph } from 'ts-graphviz';
+import { renderHook } from '@testing-library/react-hooks';
+import { context } from './utils/wrapper';
+import { useGraph } from '../use-graph';
+
+describe('useGraph', () => {
+  it('returns Graph instance', () => {
+    const { result } = renderHook(() => useGraph(), {
+      wrapper: context(),
+    });
+    expect(result.current).toBeInstanceOf(Graph);
+  });
+});

src/hooks/__tests__/use-graphviz-context.spec.ts

@@ -0,0 +1,19 @@
+import { Context } from 'ts-graphviz';
+import { renderHook } from '@testing-library/react-hooks';
+import { context } from './utils/wrapper';
+import { useGraphvizContext } from '../use-graphviz-context';
+import { NoGraphvizContextErrorMessage } from '../../utils/errors';
+
+describe('useGraphvizContext', () => {
+  test('returns Context instance', () => {
+    const { result } = renderHook(() => useGraphvizContext(), {
+      wrapper: context(),
+    });
+    expect(result.current).toBeInstanceOf(Context);
+  });
+
+  test('An error occurs when called outside the GraphvizContext', () => {
+    const { result } = renderHook(() => useGraphvizContext());
+    expect(result.error).toStrictEqual(Error(NoGraphvizContextErrorMessage));
+  });
+});

src/hooks/__tests__/use-node.spec.ts

@@ -0,0 +1,14 @@
+import { Node } from 'ts-graphviz';
+import { renderHook } from '@testing-library/react-hooks';
+
+import { useNode } from '../use-node';
+import { digraph } from './utils/wrapper';
+
+describe('useNode', () => {
+  it('returns Node instance', () => {
+    const { result } = renderHook(() => useNode({ id: 'hoge' }), {
+      wrapper: digraph(),
+    });
+    expect(result.current).toBeInstanceOf(Node);
+  });
+});

src/hooks/__tests__/use-rendered-id.spec.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { renderHook } from '@testing-library/react-hooks';
+import { context } from './utils/wrapper';
+import { useRenderedID } from '../use-rendered-id';
+import { DOT } from '../../components/HtmlLike';
+
+describe('useRenderedID', () => {
+  test.each([
+    'hoge',
+    '<<b>bold</b>>',
+    <DOT.B>bold</DOT.B>,
+    <DOT.TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0">
+      <DOT.TR>
+        <DOT.TD>left</DOT.TD>
+        <DOT.TD PORT="m">middle</DOT.TD>
+        <DOT.TD PORT="r">right</DOT.TD>
+      </DOT.TR>
+    </DOT.TABLE>,
+  ])('', id => {
+    const { result } = renderHook(() => useRenderedID(id), {
+      wrapper: context(),
+    });
+    expect(result.current).toMatchSnapshot();
+  });
+});