diff --git a/src/visits/charts/ChartCard.tsx b/src/visits/charts/ChartCard.tsx index c68da31a..bb1e8253 100644 --- a/src/visits/charts/ChartCard.tsx +++ b/src/visits/charts/ChartCard.tsx @@ -8,7 +8,7 @@ type ChartCardProps = PropsWithChildren<{ }>; export const ChartCard: FC = ({ title, footer, children }) => ( - + {typeof title === 'function' ? title() : title} {children} {footer && {footer}} diff --git a/test/visits/charts/SortableBarChartCard.test.tsx b/test/visits/charts/SortableBarChartCard.test.tsx index a9ebe28a..5a534b7c 100644 --- a/test/visits/charts/SortableBarChartCard.test.tsx +++ b/test/visits/charts/SortableBarChartCard.test.tsx @@ -1,15 +1,12 @@ -import { shallow, ShallowWrapper } from 'enzyme'; +import { ReactNode } from 'react'; +import { screen } from '@testing-library/react'; import { range } from 'ramda'; -import { OrderingDropdown } from '../../../src/utils/OrderingDropdown'; -import { PaginationDropdown } from '../../../src/utils/PaginationDropdown'; import { rangeOf } from '../../../src/utils/utils'; -import { OrderDir } from '../../../src/utils/helpers/ordering'; import { Stats } from '../../../src/visits/types'; import { SortableBarChartCard } from '../../../src/visits/charts/SortableBarChartCard'; -import { HorizontalBarChart } from '../../../src/visits/charts/HorizontalBarChart'; +import { renderWithEvents } from '../../__helpers__/setUpTest'; describe('', () => { - let wrapper: ShallowWrapper; const sortingItems = { name: 'Name', amount: 'Amount', @@ -18,98 +15,63 @@ describe('', () => { Foo: 100, Bar: 50, }; - const createWrapper = (withPagination = false, extraStats = {}) => { - wrapper = shallow( - , - ); - - return wrapper; - }; - - afterEach(() => wrapper?.unmount()); + const setUp = (withPagination = false, extraStats = {}, extra?: (foo?: string[]) => ReactNode) => renderWithEvents( + , + ); it('renders stats unchanged when no ordering is set', () => { - const wrapper = createWrapper(); - const chart = wrapper.find(HorizontalBarChart); + const { container } = setUp(); - expect(chart.prop('stats')).toEqual(stats); + expect(container.firstChild).not.toBeNull(); + expect(container.firstChild).toMatchSnapshot(); }); - describe('renders properly ordered stats when ordering is set', () => { - let assert: (sortName: string, sortDir: OrderDir, keys: string[], values: number[]) => void; + it.each([ + ['Name', 1], + ['Amount', 1], + ['Name', 2], + ['Amount', 2], + ])('renders properly ordered stats when ordering is set', async (name, clicks) => { + const { user } = setUp(); - beforeEach(() => { - const wrapper = createWrapper(); - const dropdown = wrapper.renderProp('title' as never)().find(OrderingDropdown); + await user.click(screen.getByRole('button')); + await Promise.all(rangeOf(clicks, async () => user.click(screen.getByRole('menuitem', { name })))); - assert = (sortName: string, sortDir: OrderDir, keys: string[], values: number[]) => { - dropdown.prop('onChange')(sortName, sortDir); - - const stats = wrapper.find(HorizontalBarChart).prop('stats'); - - expect(Object.keys(stats)).toEqual(keys); - expect(Object.values(stats)).toEqual(values); - }; - }); - - it('name - ASC', () => assert('name', 'ASC', ['Bar', 'Foo'], [50, 100])); - it('name - DESC', () => assert('name', 'DESC', ['Foo', 'Bar'], [100, 50])); - it('value - ASC', () => assert('value', 'ASC', ['Bar', 'Foo'], [50, 100])); - it('value - DESC', () => assert('value', 'DESC', ['Foo', 'Bar'], [100, 50])); + expect(screen.getByRole('document')).toMatchSnapshot(); }); - describe('renders properly paginated stats when pagination is set', () => { - let assert: (itemsPerPage: number, expectedStats: string[]) => void; + it.each([ + [0], + [1], + [2], + [3], + ])('renders properly paginated stats when pagination is set', async (itemIndex) => { + const { user } = setUp(true, range(1, 159).reduce((accum, value) => { + accum[`key_${value}`] = value; + return accum; + }, {})); - beforeEach(() => { - const wrapper = createWrapper(true, range(1, 159).reduce((accum, value) => { - accum[`key_${value}`] = value; + await user.click(screen.getAllByRole('button')[1]); + await user.click(screen.getAllByRole('menuitem')[itemIndex]); - return accum; - }, {})); - const dropdown = wrapper.renderProp('title' as never)().find(PaginationDropdown); - - assert = (itemsPerPage: number, expectedStats: string[]) => { - dropdown.prop('setValue')(itemsPerPage); - - const stats = wrapper.find(HorizontalBarChart).prop('stats'); - - expect(Object.keys(stats)).toEqual(expectedStats); - }; - }); - - const buildExpected = (size: number): string[] => ['Foo', 'Bar', ...rangeOf(size - 2, (i) => `key_${i}`)]; - - it('50 items per page', () => assert(50, buildExpected(50))); - it('100 items per page', () => assert(100, buildExpected(100))); - it('200 items per page', () => assert(200, buildExpected(160))); - it('500 items per page', () => assert(500, buildExpected(160))); + expect(screen.getByRole('document')).toMatchSnapshot(); }); it('renders extra header content', () => { - const wrapper = shallow( + setUp(false, {}, () => ( - ( - - Foo - Bar - - )} - /> - , - ).find(SortableBarChartCard); - const header = wrapper.renderProp('extraHeaderContent')(); + Foo in header + Bar in header + + )); - expect(header.find('.foo-span')).toHaveLength(1); - expect(header.find('.bar-span')).toHaveLength(1); + expect(screen.getByText('Foo in header')).toHaveClass('foo-span'); + expect(screen.getByText('Bar in header')).toHaveClass('bar-span'); }); }); diff --git a/test/visits/charts/__snapshots__/SortableBarChartCard.test.tsx.snap b/test/visits/charts/__snapshots__/SortableBarChartCard.test.tsx.snap new file mode 100644 index 00000000..a5274662 --- /dev/null +++ b/test/visits/charts/__snapshots__/SortableBarChartCard.test.tsx.snap @@ -0,0 +1,1231 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` renders properly ordered stats when ordering is set 1`] = ` +
+
+ Foo +
+
+ + +
+
+
+ +
+
+`; + +exports[` renders properly ordered stats when ordering is set 2`] = ` +
+
+ Foo +
+
+ + +
+
+
+ +
+
+`; + +exports[` renders properly ordered stats when ordering is set 3`] = ` +
+
+ Foo +
+
+ + +
+
+
+ +
+
+`; + +exports[` renders properly ordered stats when ordering is set 4`] = ` +
+
+ Foo +
+
+ + +
+
+
+ +
+
+`; + +exports[` renders properly paginated stats when pagination is set 1`] = ` +
+
+ Foo +
+
+ + +
+
+
+ + +
+
+
+ +
+
+ +
+
+`; + +exports[` renders properly paginated stats when pagination is set 2`] = ` +
+
+ Foo +
+
+ + +
+
+
+ + +
+
+
+ +
+
+ +
+
+`; + +exports[` renders properly paginated stats when pagination is set 3`] = ` +
+
+ Foo +
+
+ + +
+
+
+ + +
+
+
+ +
+
+`; + +exports[` renders properly paginated stats when pagination is set 4`] = ` +
+
+ Foo +
+
+ + +
+
+
+ + +
+
+
+ +
+
+`; + +exports[` renders stats unchanged when no ordering is set 1`] = ` +
+
+ Foo +
+
+ + +
+
+
+ +
+
+`;