From 50510307ab8add2d45a9c625b8abca82078d07f2 Mon Sep 17 00:00:00 2001 From: Jen Jones Arnesen Date: Wed, 3 Aug 2022 09:32:22 +0200 Subject: [PATCH] chore: upgrade UI and jest snapshots (#2096) Changes to jest snapshots to reduce the amount of changes to snapshots caused by ui upgrades. --- .d2styleignore | 1 + package.json | 6 +- src/__tests__/AppWrapper.spec.js | 28 +- src/components/DashboardsBar/Chip.js | 4 +- .../DashboardsBar/__tests__/Chip.spec.js | 22 +- .../__tests__/DashboardsBar.spec.js | 116 +- .../__tests__/__snapshots__/Chip.spec.js.snap | 252 +-- .../__snapshots__/DashboardsBar.spec.js.snap | 1671 ----------------- src/components/DropdownButton/assets/Arrow.js | 6 +- .../Item/AppItem/__tests__/Item.spec.js | 20 + .../__tests__/__snapshots__/Item.spec.js.snap | 75 +- .../__tests__/ItemContextMenu.offline.spec.js | 17 +- .../__tests__/ItemContextMenu.spec.js | 57 +- .../ItemContextMenu.offline.spec.js.snap | 30 - .../ItemContextMenu.spec.js.snap | 30 - .../VisualizationItem/__tests__/Item.spec.js | 8 + .../__tests__/__snapshots__/Item.spec.js.snap | 30 +- src/components/__tests__/App.spec.js | 43 +- .../__tests__/ConfirmActionDialog.spec.js | 22 +- .../__tests__/__snapshots__/App.spec.js.snap | 35 + .../ConfirmActionDialog.spec.js.snap | 80 +- src/pages/edit/__tests__/ActionsBar.spec.js | 31 +- .../edit/__tests__/EditDashboard.spec.js | 23 + .../__tests__/FilterSettingsDialog.spec.js | 35 +- src/pages/edit/__tests__/NewDashboard.spec.js | 23 + src/pages/edit/__tests__/TitleBar.spec.js | 29 +- .../__snapshots__/ActionsBar.spec.js.snap | 244 +-- .../__snapshots__/EditDashboard.spec.js.snap | 156 +- .../FilterSettingsDialog.spec.js.snap | 276 +-- .../__snapshots__/NewDashboard.spec.js.snap | 96 +- .../__snapshots__/TitleBar.spec.js.snap | 486 +---- .../FilterBar/__tests__/FilterBadge.spec.js | 25 +- .../__snapshots__/FilterBadge.spec.js.snap | 59 + .../TitleBar/__tests__/FilterSelector.spec.js | 14 + .../__snapshots__/FilterSelector.spec.js.snap | 118 +- yarn.lock | 776 +++++++- 36 files changed, 1574 insertions(+), 3370 deletions(-) delete mode 100644 src/components/DashboardsBar/__tests__/__snapshots__/DashboardsBar.spec.js.snap create mode 100644 src/pages/view/FilterBar/__tests__/__snapshots__/FilterBadge.spec.js.snap diff --git a/.d2styleignore b/.d2styleignore index cc9010b2a..83af254cc 100644 --- a/.d2styleignore +++ b/.d2styleignore @@ -4,3 +4,4 @@ /src/locales/* /cypress/assets /cypress/fixtures +cypress.env.json diff --git a/package.json b/package.json index 3c683283f..138c2e040 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "private": true, "license": "BSD-3-Clause", "dependencies": { - "@dhis2/analytics": "^20.4.10", + "@dhis2/analytics": "^23.10.3", "@dhis2/app-runtime": "^2.12.3", "@dhis2/app-runtime-adapter-d2": "^1.1.0", "@dhis2/d2-i18n": "^1.1.0", @@ -15,7 +15,7 @@ "@dhis2/d2-ui-rich-text": "^7.3.3", "@dhis2/d2-ui-translation-dialog": "^7.3.3", "@dhis2/data-visualizer-plugin": "^38.0.16", - "@dhis2/ui": "^6.25.0", + "@dhis2/ui": "^8.4.0", "classnames": "^2.3.1", "d2": "^31.10.0", "d2-utilizr": "^0.2.16", @@ -31,7 +31,7 @@ "redux-logger": "^3.0.6", "redux-thunk": "^2.3.0", "reselect": "^4.0.0", - "styled-jsx": "3.3.2" + "styled-jsx": "^4.0.1" }, "scripts": { "start": "d2-app-scripts start", diff --git a/src/__tests__/AppWrapper.spec.js b/src/__tests__/AppWrapper.spec.js index ce6c190b7..9f78f4205 100644 --- a/src/__tests__/AppWrapper.spec.js +++ b/src/__tests__/AppWrapper.spec.js @@ -2,6 +2,12 @@ import React from 'react' import ReactDOM from 'react-dom' import AppWrapper from '../AppWrapper.js' +jest.mock('@dhis2/app-runtime-adapter-d2', () => { + return { + D2Shim: ({ children }) => children({ d2: {} }), + } +}) + jest.mock( '../components/App', () => @@ -9,13 +15,23 @@ jest.mock( return
} ) -jest.mock('@dhis2/app-runtime-adapter-d2', () => { - return { - D2Shim: ({ children }) => children({ d2: {} }), - } -}) -it('renders without crashing', () => { +jest.mock( + '../components/SystemSettingsProvider.js', + () => + function Mock() { + return
+ } +) +jest.mock( + '../components/UserSettingsProvider.js', + () => + function Mock() { + return
+ } +) + +test('renders without crashing', () => { const div = document.createElement('div') ReactDOM.render(, div) ReactDOM.unmountComponentAtNode(div) diff --git a/src/components/DashboardsBar/Chip.js b/src/components/DashboardsBar/Chip.js index 564f149b4..ffc9ce9a1 100644 --- a/src/components/DashboardsBar/Chip.js +++ b/src/components/DashboardsBar/Chip.js @@ -39,7 +39,9 @@ const Chip = ({ starred, selected, label, dashboardId, onClick }) => { className={classes.link} to={`/${dashboardId}`} onClick={handleClick} - data-test="dashboard-chip" + data-testid={`dashboard-chip${selected ? '-selected' : ''}${ + starred ? '-starred' : '' + }`} > { + const originalModule = jest.requireActual('@dhis2/ui') + + return { + __esModule: true, + ...originalModule, + Chip: function Mock({ children, ...props }) { + return ( +
+ {children} +
+ ) + }, + } +}) +/* eslint-enable react/prop-types */ + jest.mock('@dhis2/app-runtime', () => ({ useOnlineStatus: () => ({ online: true }), useCacheableSection: jest.fn(), @@ -42,7 +60,7 @@ const defaultProps = { }, } -test('renders an unstarred chip for a non-offline dashboard', () => { +test('renders an unstarred chip for a non-cached dashboard', () => { useCacheableSection.mockImplementation(() => mockNonOfflineDashboard) const { container } = render( @@ -53,7 +71,7 @@ test('renders an unstarred chip for a non-offline dashboard', () => { expect(container).toMatchSnapshot() }) -test('renders an unstarred chip for an offline dashboard', () => { +test('renders an unstarred chip for cached dashboard', () => { useCacheableSection.mockImplementation(() => mockOfflineDashboard) const { container } = render( diff --git a/src/components/DashboardsBar/__tests__/DashboardsBar.spec.js b/src/components/DashboardsBar/__tests__/DashboardsBar.spec.js index 4857b18cc..815a99377 100644 --- a/src/components/DashboardsBar/__tests__/DashboardsBar.spec.js +++ b/src/components/DashboardsBar/__tests__/DashboardsBar.spec.js @@ -1,4 +1,4 @@ -import { fireEvent } from '@testing-library/dom' +import { within } from '@testing-library/dom' import { render } from '@testing-library/react' import { createMemoryHistory } from 'history' import React from 'react' @@ -11,9 +11,6 @@ import DashboardsBar, { MAX_ROW_COUNT, } from '../DashboardsBar.js' -// TODO this spy is an implementation detail -jest.spyOn(window, 'requestAnimationFrame').mockImplementation((cb) => cb()) - jest.mock('@dhis2/app-runtime-adapter-d2', () => ({ useD2: () => ({ d2: { @@ -47,14 +44,14 @@ jest.mock('@dhis2/app-runtime', () => ({ })), })) -test('renders a DashboardsBar with minimum height', () => { +test('minimized DashboardsBar has Show more/less button', () => { const store = { dashboards, dashboardsFilter: '', controlBar: { userRows: parseInt(MIN_ROW_COUNT) }, selected: { id: 'rainbow123' }, } - const { container } = render( + const { queryAllByRole, queryByLabelText } = render( @@ -63,71 +60,19 @@ test('renders a DashboardsBar with minimum height', () => { ) - expect(container).toMatchSnapshot() -}) - -test('small screen: renders a DashboardsBar with minimum height', () => { - global.innerWidth = 480 - global.innerHeight = 400 - - const store = { - dashboards, - dashboardsFilter: '', - controlBar: { userRows: 3 }, - selected: { id: 'rainbow123' }, - } - const { container } = render( - - - - - - - - ) - expect(container).toMatchSnapshot() - global.innerWidth = 800 - global.innerHeight = 600 -}) - -test('small screen: clicking "Show more" maximizes dashboards bar height', () => { - global.innerWidth = 480 - global.innerHeight = 400 - const store = { - dashboards, - dashboardsFilter: '', - controlBar: { userRows: 3 }, - selected: { id: 'fluttershy123' }, - } - const mockExpandedChanged = jest.fn() - const { getByLabelText, asFragment } = render( - - - - - - - - ) - - fireEvent.click(getByLabelText('Show more dashboards')) - expect(asFragment()).toMatchSnapshot() - expect(mockExpandedChanged).toBeCalledWith(true) - global.innerWidth = 800 - global.innerHeight = 600 + const links = queryAllByRole('link') + expect(links.length).toEqual(Object.keys(dashboards).length) + expect(queryByLabelText('Show more dashboards')).toBeTruthy() }) -test('renders a DashboardsBar with maximum height', () => { +test('maximized DashboardsBar does not have a Show more/less button', () => { const store = { dashboards, dashboardsFilter: '', controlBar: { userRows: parseInt(MAX_ROW_COUNT) }, selected: { id: 'rainbow123' }, } - const { container } = render( + const { queryByTestId } = render( @@ -139,7 +84,7 @@ test('renders a DashboardsBar with maximum height', () => { ) - expect(container).toMatchSnapshot() + expect(queryByTestId('showmore-button')).toBeNull() }) test('renders a DashboardsBar with selected item', () => { @@ -150,7 +95,7 @@ test('renders a DashboardsBar with selected item', () => { selected: { id: 'fluttershy123' }, } - const { container } = render( + const { queryByTestId } = render( @@ -162,7 +107,16 @@ test('renders a DashboardsBar with selected item', () => { ) - expect(container).toMatchSnapshot() + expect( + within(queryByTestId('dashboard-chip-selected-starred')).queryByText( + 'Fluttershy' + ) + ).toBeTruthy() + expect( + within(queryByTestId('dashboard-chip-selected-starred')).queryByText( + 'Rainbow Dash' + ) + ).toBeNull() }) test('renders a DashboardsBar with no items', () => { @@ -173,7 +127,7 @@ test('renders a DashboardsBar with no items', () => { selected: { id: 'rainbow123' }, } - const { container } = render( + const { queryByRole } = render( @@ -185,31 +139,5 @@ test('renders a DashboardsBar with no items', () => { ) - expect(container).toMatchSnapshot() -}) - -test('clicking "Show more" maximizes dashboards bar height', () => { - const store = { - dashboards, - dashboardsFilter: '', - controlBar: { userRows: parseInt(MIN_ROW_COUNT) }, - selected: { id: 'fluttershy123' }, - } - const mockOnExpandedChanged = jest.fn() - const { getByLabelText, asFragment } = render( - - - - - - - - ) - - fireEvent.click(getByLabelText('Show more dashboards')) - expect(mockOnExpandedChanged).toBeCalledWith(true) - expect(asFragment()).toMatchSnapshot() + expect(queryByRole('link')).toBeNull() }) diff --git a/src/components/DashboardsBar/__tests__/__snapshots__/Chip.spec.js.snap b/src/components/DashboardsBar/__tests__/__snapshots__/Chip.spec.js.snap index 305b23b23..c6b267f0b 100644 --- a/src/components/DashboardsBar/__tests__/__snapshots__/Chip.spec.js.snap +++ b/src/components/DashboardsBar/__tests__/__snapshots__/Chip.spec.js.snap @@ -4,53 +4,32 @@ exports[`renders a starred chip for a cached dashboard 1`] = `
`; @@ -59,38 +38,17 @@ exports[`renders a starred chip for a non-cached dashboard 1`] = `
- - - - - + + Rainbow Dash - - - Rainbow Dash - - - +
`; @@ -99,53 +57,32 @@ exports[`renders a starred, selected chip for a cached dashboard 1`] = `
- - - - + Rainbow Dash - - - Rainbow Dash - - - - - - + + +
`; @@ -154,99 +91,68 @@ exports[`renders a starred, selected chip for non-cached dashboard 1`] = `
- - - - - - - - - Rainbow Dash - + + Rainbow Dash - +
`; -exports[`renders an unstarred chip for a non-offline dashboard 1`] = ` +exports[`renders an unstarred chip for a non-cached dashboard 1`] = `
- - - - Rainbow Dash - + + Rainbow Dash - +
`; -exports[`renders an unstarred chip for an offline dashboard 1`] = ` +exports[`renders an unstarred chip for cached dashboard 1`] = `
- - - Rainbow Dash - - - - + Rainbow Dash - + + + +
`; diff --git a/src/components/DashboardsBar/__tests__/__snapshots__/DashboardsBar.spec.js.snap b/src/components/DashboardsBar/__tests__/__snapshots__/DashboardsBar.spec.js.snap deleted file mode 100644 index 9c77a2f43..000000000 --- a/src/components/DashboardsBar/__tests__/__snapshots__/DashboardsBar.spec.js.snap +++ /dev/null @@ -1,1671 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`clicking "Show more" maximizes dashboards bar height 1`] = ` - -