From ec7c7d521f01ad7b9a2fcad271b23d039de4082d Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Sat, 11 Jun 2022 17:28:47 +0200 Subject: [PATCH 1/4] Migrated TableOrderIcon test to react testing library --- test/common/SimplePaginator.test.tsx | 2 +- test/servers/reducers/selectedServer.test.ts | 2 +- test/utils/table/TableOrderIcon.test.tsx | 38 +++++++------------ .../TableOrderIcon.test.tsx.snap | 37 ++++++++++++++++++ 4 files changed, 53 insertions(+), 26 deletions(-) create mode 100644 test/utils/table/__snapshots__/TableOrderIcon.test.tsx.snap diff --git a/test/common/SimplePaginator.test.tsx b/test/common/SimplePaginator.test.tsx index 128221d9..7b2c060a 100644 --- a/test/common/SimplePaginator.test.tsx +++ b/test/common/SimplePaginator.test.tsx @@ -9,7 +9,7 @@ describe('', () => { it.each([-3, -2, 0, 1])('renders empty when the amount of pages is smaller than 2', (pagesCount) => { const { container } = setUp(pagesCount); - expect(container.firstChild).toEqual(null); + expect(container.firstChild).toBeNull(); }); describe('ELLIPSIS are rendered where expected', () => { diff --git a/test/servers/reducers/selectedServer.test.ts b/test/servers/reducers/selectedServer.test.ts index f50a12ac..2074bcd3 100644 --- a/test/servers/reducers/selectedServer.test.ts +++ b/test/servers/reducers/selectedServer.test.ts @@ -14,7 +14,7 @@ import { NonReachableServer, NotFoundServer, RegularServer } from '../../../src/ describe('selectedServerReducer', () => { describe('reducer', () => { it('returns default when action is RESET_SELECTED_SERVER', () => - expect(reducer(null, { type: RESET_SELECTED_SERVER, selectedServer: null })).toEqual(null)); + expect(reducer(null, { type: RESET_SELECTED_SERVER, selectedServer: null })).toBeNull()); it('returns selected server when action is SELECT_SERVER', () => { const selectedServer = Mock.of({ id: 'abc123' }); diff --git a/test/utils/table/TableOrderIcon.test.tsx b/test/utils/table/TableOrderIcon.test.tsx index 8a4f72c9..03bc25e5 100644 --- a/test/utils/table/TableOrderIcon.test.tsx +++ b/test/utils/table/TableOrderIcon.test.tsx @@ -1,38 +1,29 @@ -import { shallow, ShallowWrapper } from 'enzyme'; -import { faCaretDown as caretDownIcon, faCaretUp as caretUpIcon } from '@fortawesome/free-solid-svg-icons'; +import { render } from '@testing-library/react'; import { TableOrderIcon } from '../../../src/utils/table/TableOrderIcon'; import { OrderDir } from '../../../src/utils/helpers/ordering'; describe('', () => { - let wrapper: ShallowWrapper; - const createWrapper = (field: string, currentDir?: OrderDir, className?: string) => { - wrapper = shallow( - , - ); - - return wrapper; - }; - - afterEach(() => wrapper?.unmount()); + const setUp = (field: string, currentDir?: OrderDir, className?: string) => render( + , + ); it.each([ ['foo', undefined], ['bar', 'DESC' as OrderDir], ['bar', 'ASC' as OrderDir], ])('renders empty when not all conditions are met', (field, dir) => { - const wrapper = createWrapper(field, dir); - - expect(wrapper.html()).toEqual(null); + const { container } = setUp(field, dir); + expect(container.firstChild).toBeNull(); }); it.each([ - ['DESC' as OrderDir, caretDownIcon], - ['ASC' as OrderDir, caretUpIcon], - ])('renders an icon when all conditions are met', (dir, expectedIcon) => { - const wrapper = createWrapper('foo', dir); + ['DESC' as OrderDir], + ['ASC' as OrderDir], + ])('renders an icon when all conditions are met', (dir) => { + const { container } = setUp('foo', dir); - expect(wrapper.html()).not.toEqual(null); - expect(wrapper.prop('icon')).toEqual(expectedIcon); + expect(container.firstChild).not.toBeNull(); + expect(container.firstChild).toMatchSnapshot(); }); it.each([ @@ -40,8 +31,7 @@ describe('', () => { ['foo', 'foo'], ['bar', 'bar'], ])('renders expected classname', (className, expectedClassName) => { - const wrapper = createWrapper('foo', 'ASC', className); - - expect(wrapper.prop('className')).toEqual(expectedClassName); + const { container } = setUp('foo', 'ASC', className); + expect(container.firstChild).toHaveClass(expectedClassName); }); }); diff --git a/test/utils/table/__snapshots__/TableOrderIcon.test.tsx.snap b/test/utils/table/__snapshots__/TableOrderIcon.test.tsx.snap new file mode 100644 index 00000000..ba31f4f9 --- /dev/null +++ b/test/utils/table/__snapshots__/TableOrderIcon.test.tsx.snap @@ -0,0 +1,37 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` renders an icon when all conditions are met 1`] = ` + +`; + +exports[` renders an icon when all conditions are met 2`] = ` + +`; From b75fd2e03af71fc47c093789534f6464507de7dd Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Sat, 11 Jun 2022 17:38:12 +0200 Subject: [PATCH 2/4] Migrated MapModal test to react testing library --- test/visits/helpers/MapModal.test.tsx | 43 +--- .../__snapshots__/MapModal.test.tsx.snap | 183 ++++++++++++++++++ 2 files changed, 188 insertions(+), 38 deletions(-) create mode 100644 test/visits/helpers/__snapshots__/MapModal.test.tsx.snap diff --git a/test/visits/helpers/MapModal.test.tsx b/test/visits/helpers/MapModal.test.tsx index f582a582..2b053896 100644 --- a/test/visits/helpers/MapModal.test.tsx +++ b/test/visits/helpers/MapModal.test.tsx @@ -1,14 +1,9 @@ -import { shallow, ShallowWrapper } from 'enzyme'; -import { Marker, Popup } from 'react-leaflet'; -import { Modal } from 'reactstrap'; +import { render, screen } from '@testing-library/react'; import { MapModal } from '../../../src/visits/helpers/MapModal'; import { CityStats } from '../../../src/visits/types'; describe('', () => { - let wrapper: ShallowWrapper; - const toggle = () => ''; - const isOpen = true; - const title = 'Foobar'; + const toggle = jest.fn(); const zaragozaLat = 41.6563497; const zaragozaLong = -0.876566; const newYorkLat = 40.730610; @@ -26,36 +21,8 @@ describe('', () => { }, ]; - beforeEach(() => { - wrapper = shallow(); - }); - - afterEach(() => wrapper.unmount()); - - it('renders modal with provided props', () => { - const modal = wrapper.find(Modal); - const header = wrapper.find('.map-modal__modal-title'); - - expect(modal.prop('toggle')).toEqual(toggle); - expect(modal.prop('isOpen')).toEqual(isOpen); - expect(header.find('.btn-close').prop('onClick')).toEqual(toggle); - expect(header.text()).toContain(title); - }); - - it('renders open street map tile', () => { - expect(wrapper.find('OpenStreetMapTile')).toHaveLength(1); - }); - - it('renders proper amount of markers', () => { - const markers = wrapper.find(Marker); - - expect(markers).toHaveLength(locations.length); - locations.forEach(({ latLong, count, cityName }, index) => { - const marker = markers.at(index); - const popup = marker.find(Popup); - - expect(marker.prop('position')).toEqual(latLong); - expect(popup.text()).toEqual(`${count} visits from ${cityName}`); - }); + it('renders expected map', () => { + render(); + expect(screen.getByRole('dialog')).toMatchSnapshot(); }); }); diff --git a/test/visits/helpers/__snapshots__/MapModal.test.tsx.snap b/test/visits/helpers/__snapshots__/MapModal.test.tsx.snap new file mode 100644 index 00000000..efe77267 --- /dev/null +++ b/test/visits/helpers/__snapshots__/MapModal.test.tsx.snap @@ -0,0 +1,183 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` renders expected map 1`] = ` +