add basic test suites for hooks folder

web/package.json

@@ -39,7 +39,7 @@
   "scripts": {
     "start": "craco start",
     "build": "craco build",
-    "test:unit": "craco test --watchAll=false",
+    "test:unit": "craco test --watchAll=false --coverage",
     "test:integration": "npm run cy:run",
     "test:lint": "eslint ./src/**/*.{ts,tsx}",
     "test:types": "tsc",
@@ -99,6 +99,7 @@
     "@storybook/preset-create-react-app": "^4.1.0",
     "@storybook/react": "^6.4.22",
     "@storybook/testing-library": "^0.0.11",
+    "@testing-library/react-hooks": "^8.0.0",
     "@types/jmespath": "^0.15.0",
     "@types/lodash": "^4.14.181",
     "@types/styled-components": "^5.1.21",

web/src/hooks/__tests__/useDAGChart.test.tsx

@@ -0,0 +1,39 @@
+import {renderHook} from '@testing-library/react-hooks';
+import {SemanticGroupNames} from '../../constants/SemanticGroupNames.constants';
+import {useDAGChart} from '../useDAGChart';
+
+test('useDAGChart with empty span', () => {
+  const {result} = renderHook(() => useDAGChart({}));
+  expect(result.current).toBe(undefined);
+});
+
+test('useDAGChart with filled span', () => {
+  const {result} = renderHook(() =>
+    useDAGChart({
+      cesco: {
+        id: '1',
+        data: {
+          attributes: {},
+          instrumentationLibrary: {name: 'fist', version: '1'},
+          type: SemanticGroupNames.Http,
+          duration: 10,
+          signature: [],
+          attributeList: [],
+          endTimeUnixNano: '',
+          kind: '',
+          name: '',
+          parentSpanId: '',
+          spanId: '',
+          startTimeUnixNano: '',
+          status: {code: ''},
+          traceId: '',
+        },
+        parentIds: [],
+      },
+    })
+  );
+  expect(result.current).toEqual({
+    dag: {data: {id: '1', parentIds: []}, dataChildren: [], value: 0, x: 100, y: 75},
+    layout: {height: 150, width: 200},
+  });
+});

web/src/hooks/__tests__/useDoubleClick.test.tsx

@@ -0,0 +1,14 @@
+import {act, renderHook} from '@testing-library/react-hooks';
+import {useDoubleClick} from '../useDoubleClick';
+
+test('useDoubleClick', () => {
+  const doubleClick = jest.fn();
+  const click = jest.fn();
+  const {result} = renderHook(() => useDoubleClick(doubleClick, click));
+
+  act(() => {
+    result.current({detail: 28});
+  });
+
+  expect(doubleClick).toBeCalled();
+});

web/src/hooks/__tests__/useElementSize.test.tsx

@@ -0,0 +1,8 @@
+import {renderHook} from '@testing-library/react-hooks';
+import {useElementSize} from '../useElementSize';
+
+test('useElementSize', () => {
+  const {result} = renderHook(() => useElementSize());
+  expect(result.current[1].width).toBe(0);
+  expect(result.current[1].height).toBe(0);
+});

web/src/hooks/__tests__/useGuidedTour.test.tsx

@@ -0,0 +1,8 @@
+import {renderHook} from '@testing-library/react-hooks';
+import {GuidedTours} from '../../services/GuidedTour.service';
+import useGuidedTour from '../useGuidedTour';
+
+test('useGuidedTour', () => {
+  const {result} = renderHook(() => useGuidedTour(GuidedTours.Home));
+  expect(result.current.isOpen).toBe(false);
+});

web/src/hooks/__tests__/usePolling.test.tsx

@@ -0,0 +1,10 @@
+import {renderHook} from '@testing-library/react-hooks';
+import usePolling from '../usePolling';
+
+test('usePolling', async () => {
+  const callback = jest.fn();
+  const payload = {callback, isPolling: true, delay: 0};
+  await renderHook(() => usePolling(payload));
+
+  expect(callback).toBeCalledTimes(0);
+});

web/src/hooks/useDAGChart.ts

@@ -1,8 +1,14 @@
 import * as d3DAG from 'd3-dag';
+import {Dag} from 'd3-dag';
 import _ from 'lodash';
-import { TSpanMap } from '../components/Diagram/components/DAG';
+import {TSpanMap} from '../components/Diagram/components/DAG';
 
-export const useDAGChart = (spanMap: TSpanMap = {}) => {
+interface DAGResponse {
+  dag: Dag<{id: string; parentIds: string[]}, undefined>;
+  layout: {width: number; height: number};
+}
+
+export const useDAGChart = (spanMap: TSpanMap = {}): void | DAGResponse => {
   if (_.isEmpty(spanMap)) {
     return;
   }

web/src/hooks/useDoubleClick.tsx

@@ -1,6 +1,14 @@
 import {useCallback, useRef} from 'react';
 
-export const useDoubleClick = (doubleClick: any, click?: any, timeout = 200) => {
+interface E {
+  detail: any;
+}
+
+export const useDoubleClick = (
+  doubleClick: (e?: E) => void,
+  click?: (e?: E) => void,
+  timeout = 200
+): ((e: E) => void) => {
   // we're using useRef here for the useCallback to rememeber the timeout
   const clickTimeout = useRef<any>();
 

web/src/hooks/usePolling.ts

@@ -2,22 +2,25 @@ import {useEffect} from 'react';
 
 interface usePollingProps {
   callback(): void;
+
   delay: number;
   isPolling: boolean;
 }
 
-const usePolling = ({callback, delay = 1000, isPolling}: usePollingProps) => {
+const usePolling = ({callback, delay = 1000, isPolling}: usePollingProps): void => {
   useEffect(() => {
     let interval: any = null;
-
     interval = setInterval(() => {
-      if (isPolling) callback();
-      else {
+      if (isPolling) {
+        callback();
+      } else {
         interval && clearInterval(interval);
       }
     }, delay);
 
-    return () => interval && clearInterval(interval);
+    return () => {
+      return interval && clearInterval(interval);
+    };
   }, [delay, isPolling, callback]);
 };