Merge branch 'master' into FDG-9315

Author: ntsim99

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);
+    });
   });
 });

src/layouts/explainer/sections/government-revenue/sources-of-federal-revenue/sources-of-revenue-circle-chart/sources-of-revenue-circle-chart.spec.js

@@ -1,9 +1,15 @@
-import { render, waitFor } from '@testing-library/react';
+import { render, waitFor, fireEvent, act } from '@testing-library/react';
 import React from 'react';
 import SourcesOfRevenueCircleChart from './sources-of-revenue-circle-chart';
 import userEvent from '@testing-library/user-event';
 import { sourcesOfRevenueCircleChartMatcher } from '../../../../explainer-helpers/government-revenue/government-revenue-test-helper';
 import { setGlobalFetchMatchingResponse } from '../../../../../../utils/mock-utils';
+import Analytics from '../../../../../../utils/analytics/analytics';
+
+// Mock Analytics to track calls
+jest.mock('../../../../../../utils/analytics/analytics', () => ({
+  event: jest.fn(),
+}));
 
 class ResizeObserver {
   observe() {}
@@ -13,10 +19,12 @@ class ResizeObserver {
 
 describe('Circle chart', () => {
   window.ResizeObserver = ResizeObserver;
+
   beforeAll(() => {
     jest.spyOn(console, 'warn').mockImplementation(() => {});
     setGlobalFetchMatchingResponse(jest, sourcesOfRevenueCircleChartMatcher);
   });
+
   afterAll(() => {
     jest.resetModules();
     global.fetch.mockReset();
@@ -66,4 +74,64 @@ describe('Circle chart', () => {
     expect(await getByText('corporate income taxes is $2.43 T', { exact: false })).toBeInTheDocument();
     await waitFor(() => expect(getByText('making up 11%', { exact: false })).toBeInTheDocument());
   });
+
+  it('ignores keyboard interaction if key is not "Enter"', async () => {
+    const { getAllByText, getByText } = render(<SourcesOfRevenueCircleChart />);
+    await waitFor(() => expect(getByText('Corporate')).toBeInTheDocument());
+
+    const labelText = getByText('Corporate').closest('text');
+    labelText.focus();
+
+    fireEvent.keyPress(labelText, { key: 'A', code: 'KeyA' });
+
+    expect(await getAllByText('Individual Income Taxes')).toHaveLength(2);
+  });
+
+  it('updates the header on keyboard "Enter" interaction with a label', async () => {
+    const { getAllByText, getByText } = render(<SourcesOfRevenueCircleChart />);
+    await waitFor(() => expect(getByText('Corporate')).toBeInTheDocument());
+
+    const labelText = getByText('Corporate').closest('text');
+
+    labelText.focus();
+    fireEvent.keyPress(labelText, { key: 'Enter', code: 'Enter', charCode: 13 });
+
+    expect(await getAllByText('Corporate Income Taxes', { exact: false })).toHaveLength(2);
+  });
+
+  it('resets the chart to default view when mouse leaves the chart area', async () => {
+    const { getAllByText, getByText, getByTestId, getByRole } = render(<SourcesOfRevenueCircleChart />);
+    await waitFor(() => expect(getByText('Corporate')).toBeInTheDocument());
+
+    const corporateIncomeTaxesCircle = getByRole('img').children[1].children[1];
+    userEvent.hover(corporateIncomeTaxesCircle);
+    expect(await getAllByText('Corporate Income Taxes', { exact: false })).toHaveLength(3);
+
+    const chartParent = getByTestId('chartParent');
+    userEvent.unhover(chartParent);
+
+    expect(await getAllByText('Individual Income Taxes')).toHaveLength(2);
+  });
+
+  it('tracks analytics event on chart hover', async () => {
+    jest.useFakeTimers();
+    const { getByTestId, getByText } = render(<SourcesOfRevenueCircleChart />);
+    await waitFor(() => expect(getByText('Corporate')).toBeInTheDocument());
+
+    const chartParent = getByTestId('chartParent');
+
+    fireEvent.mouseEnter(chartParent);
+
+    act(() => {
+      jest.advanceTimersByTime(3100);
+    });
+
+    expect(Analytics.event).toHaveBeenCalledWith({
+      category: 'Explainers',
+      action: 'Chart Hover',
+      label: 'Revenue - Sources of Federal Revenue',
+    });
+
+    jest.useRealTimers();
+  });
 });