FDG-8051 Improve Code Coverage - bar.jsx

src/components/charts/bar/bar.spec.js

@@ -1,19 +1,26 @@
 import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
-import renderer from 'react-test-renderer';
+import { render, fireEvent, waitFor } from '@testing-library/react';
 import BarGraph from './bar';
 import { staggeredData } from '../helpers/helpersData';
-import { ResponsiveBar } from '@nivo/bar';
 import helpers from './helpers/helpers';
 
-class ResizeObserver {
-  observe() {}
-  unobserve() {}
-  disconnect() {}
-}
+jest.mock('@nivo/bar', () => ({
+  Bar: jest.fn(({ barComponent: BarComponent, data, indexBy, keys }) => {
+    return (
+      <div data-testid="mock-nivo-bar">
+        {data.map((item, index) => (
+          <div key={index}>{BarComponent && <BarComponent index={index} value={item[keys[0]]} data={item} />}</div>
+        ))}
+      </div>
+    );
+  }),
+}));
+
+jest.mock('./bar-component/bar-component', () => ({ index, value, handleTempValueChange }) => {
+  return <button data-testid={`custom-bar-trigger-${index}`} onClick={() => handleTempValueChange(index, value)} />;
+});
 
 describe('BarGraph component', () => {
-  window.ResizeObserver = ResizeObserver;
   it('does not render anything if invalid params are detected', () => {
     const { queryByTestId } = render(<BarGraph />);
     expect(queryByTestId('barGraph')).toBeNull();
@@ -23,47 +30,65 @@ describe('BarGraph component', () => {
     const { queryByTestId } = render(<BarGraph graphData={staggeredData} graphIndex="year" valueKeys={['value']} />);
     expect(queryByTestId('barGraph')).toBeDefined();
   });
-
-  // TODO - Nivo not rendering internal chart
-  it.skip('sets left and bottom axis attributes each to null by default to prevent unwanted tick marks along the axes', async () => {
-    // let component = renderer.create();
-    // let instance = null;
-    // await renderer.act(async () => {
-    //   component = await renderer.create(<BarGraph graphData={staggeredData} graphIndex="year" valueKeys={['value']} />);
-    //   instance = component.root;
-    // });
-    //
-    // const barGraphCanvas = instance.findByType(ResponsiveBar);
-    // expect(barGraphCanvas.props.axisLeft).toBeNull();
-    // expect(barGraphCanvas.props.axisBottom).toBeNull();
-  });
 });
 
 describe('BarGraph component - Custom bar graph', () => {
-  window.ResizeObserver = ResizeObserver;
-  const barGraph = <BarGraph graphData={staggeredData} graphIndex="year" valueKeys={['value']} useCustomBarComponent />;
+  const mouseEnterPropSpy = jest.fn();
+  const mockSetTempValue = jest.fn();
+  const mockSetTempDate = jest.fn();
   const mouseEnterSpy = jest.spyOn(helpers, 'mouseEnterEvent');
   const mouseLeaveSpy = jest.spyOn(helpers, 'mouseLeaveEvent');
 
-  // TODO - Nivo not rendering internal chart
-  it.skip('creates a customBarGraph', () => {
-    // let component = renderer.create();
-    // renderer.act(() => {
-    //   component = renderer.create(barGraph);
-    // });
-    // const instance = component.root;
-    // const responsiveBar = instance.findByType(ResponsiveBar);
-    // expect(responsiveBar.props.barComponent).toBeDefined();
+  const barGraphProps = {
+    graphData: staggeredData,
+    graphIndex: 'year',
+    valueKeys: ['value'],
+    useCustomBarComponent: true,
+    mouseEnter: mouseEnterPropSpy,
+    setTempValue: mockSetTempValue,
+    setTempDate: mockSetTempDate,
+    dateField: 'year',
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    // needed so mouseLeave executes callback
+    mouseLeaveSpy.mockImplementation((cardId, callback) => {
+      if (callback && typeof callback === 'function') {
+        callback();
+      }
+    });
   });
 
-  it('triggers mouseEnter and mouseLeave events', () => {
+  it('triggers the mouseEnter and mouseLeave events', () => {
     jest.clearAllMocks();
-    const { getByTestId } = render(barGraph);
-    const container = getByTestId('barGraph');
-    fireEvent.mouseEnter(container);
+    const { getByTestId } = render(<BarGraph {...barGraphProps} />);
+    const chartContainer = getByTestId('barGraph');
+    fireEvent.mouseEnter(chartContainer);
     expect(mouseEnterSpy).toHaveBeenCalledTimes(1);
+    expect(mouseEnterPropSpy).toHaveBeenCalled();
+    fireEvent.mouseLeave(chartContainer);
+    expect(mouseLeaveSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls setTempValue and setTempDate with the correct values when the bar is clicked', async () => {
+    const { getByTestId } = render(<BarGraph {...barGraphProps} />);
+    const firstBar = getByTestId('custom-bar-trigger-0');
+    fireEvent.click(firstBar);
+    await waitFor(() => {
+      expect(mockSetTempValue).toHaveBeenCalledWith('500');
+      expect(mockSetTempDate).toHaveBeenCalledWith('2017');
+    });
+  });
 
-    fireEvent.mouseLeave(container);
+  it('resets temp states when mouse leaves the bar', async () => {
+    const { getByTestId } = render(<BarGraph {...barGraphProps} />);
+    const chartContainer = getByTestId('barGraph');
+    fireEvent.mouseLeave(chartContainer);
     expect(mouseLeaveSpy).toHaveBeenCalledTimes(1);
+    await waitFor(() => {
+      expect(mockSetTempValue).toHaveBeenCalledWith(null);
+      expect(mockSetTempDate).toHaveBeenCalledWith(null);
+    });
   });
 });