chore: upgrade UI and jest snapshots (#2096)

Changes to jest snapshots to reduce the amount of changes to snapshots caused by ui upgrades.
dhis2 · Aug 3, 2022 · 5051030 · 5051030
1 parent 6742e70
commit 5051030
Show file tree

Hide file tree

Showing 36 changed files with 1,574 additions and 3,370 deletions.
diff --git 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
@@ -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
@@ -2,20 +2,36 @@ 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',
     () =>
         function MockApp() {
             return <div />
         }
 )
-jest.mock('@dhis2/app-runtime-adapter-d2', () => {
-    return {
-        D2Shim: ({ children }) => children({ d2: {} }),
-    }
-})
 
-it('renders without crashing', () => {
+jest.mock(
+    '../components/SystemSettingsProvider.js',
+    () =>
+        function Mock() {
+            return <div className="SystemSettingsProvider" />
+        }
+)
+jest.mock(
+    '../components/UserSettingsProvider.js',
+    () =>
+        function Mock() {
+            return <div className="UserSettingsProvider" />
+        }
+)
+
+test('renders without crashing', () => {
     const div = document.createElement('div')
     ReactDOM.render(<AppWrapper />, div)
     ReactDOM.unmountComponentAtNode(div)

diff --git 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' : ''
+            }`}
         >
             <UiChip {...chipProps}>
                 <span

diff --git a/src/components/DashboardsBar/__tests__/Chip.spec.js b/src/components/DashboardsBar/__tests__/Chip.spec.js
@@ -5,6 +5,24 @@ import React from 'react'
 import { Router } from 'react-router-dom'
 import Chip from '../Chip.js'
 
+/* eslint-disable react/prop-types */
+jest.mock('@dhis2/ui', () => {
+    const originalModule = jest.requireActual('@dhis2/ui')
+
+    return {
+        __esModule: true,
+        ...originalModule,
+        Chip: function Mock({ children, ...props }) {
+            return (
+                <div className="ui-Chip" {...props}>
+                    {children}
+                </div>
+            )
+        },
+    }
+})
+/* 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(
         <Router history={createMemoryHistory()}>
@@ -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(
         <Router history={createMemoryHistory()}>

diff --git 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(
         <Provider store={mockStore(store)}>
             <WindowDimensionsProvider>
                 <Router history={createMemoryHistory()}>
@@ -63,71 +60,19 @@ test('renders a DashboardsBar with minimum height', () => {
             </WindowDimensionsProvider>
         </Provider>
     )
-    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(
-        <Provider store={mockStore(store)}>
-            <WindowDimensionsProvider>
-                <Router history={createMemoryHistory()}>
-                    <DashboardsBar />
-                </Router>
-            </WindowDimensionsProvider>
-        </Provider>
-    )
-    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(
-        <Provider store={mockStore(store)}>
-            <WindowDimensionsProvider>
-                <Router history={createMemoryHistory()}>
-                    <DashboardsBar
-                        expanded={false}
-                        onExpandedChanged={mockExpandedChanged}
-                    />
-                </Router>
-            </WindowDimensionsProvider>
-        </Provider>
-    )
-
-    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(
         <Provider store={mockStore(store)}>
             <WindowDimensionsProvider>
                 <Router history={createMemoryHistory()}>
@@ -139,7 +84,7 @@ test('renders a DashboardsBar with maximum height', () => {
             </WindowDimensionsProvider>
         </Provider>
     )
-    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(
         <WindowDimensionsProvider>
             <Router history={createMemoryHistory()}>
                 <Provider store={mockStore(store)}>
@@ -162,7 +107,16 @@ test('renders a DashboardsBar with selected item', () => {
             </Router>
         </WindowDimensionsProvider>
     )
-    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(
         <Provider store={mockStore(store)}>
             <WindowDimensionsProvider>
                 <Router history={createMemoryHistory()}>
@@ -185,31 +139,5 @@ test('renders a DashboardsBar with no items', () => {
             </WindowDimensionsProvider>
         </Provider>
     )
-    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(
-        <Provider store={mockStore(store)}>
-            <WindowDimensionsProvider>
-                <Router history={createMemoryHistory()}>
-                    <DashboardsBar
-                        expanded={false}
-                        onExpandedChanged={mockOnExpandedChanged}
-                    />
-                </Router>
-            </WindowDimensionsProvider>
-        </Provider>
-    )
-
-    fireEvent.click(getByLabelText('Show more dashboards'))
-    expect(mockOnExpandedChanged).toBeCalledWith(true)
-    expect(asFragment()).toMatchSnapshot()
+    expect(queryByRole('link')).toBeNull()
 })