diff --git a/src/layouts/explainer/sections/government-revenue/sources-of-federal-revenue/sources-of-revenue-circle-chart/sources-of-revenue-circle-chart.spec.js b/src/layouts/explainer/sections/government-revenue/sources-of-federal-revenue/sources-of-revenue-circle-chart/sources-of-revenue-circle-chart.spec.js index 56ff1a6e1..dcae2a1a8 100644 --- a/src/layouts/explainer/sections/government-revenue/sources-of-federal-revenue/sources-of-revenue-circle-chart/sources-of-revenue-circle-chart.spec.js +++ b/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(); + 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(); + 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(); + 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(); + 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(); + }); });