From dcdf0c77dca60dc18b6971cf5767d8967142a106 Mon Sep 17 00:00:00 2001 From: HendrikThePendric Date: Wed, 4 Dec 2024 17:09:02 +0100 Subject: [PATCH] chore: align tests to new implementation --- .../__tests__/FilterSelector.spec.js | 63 +++----- .../__snapshots__/FilterSelector.spec.js.snap | 36 ----- .../__tests__/NavigationMenu.spec.js | 12 +- .../__tests__/NavigationMenuItem.spec.js | 6 +- .../__tests__/DashboardsBar.spec.js | 145 ------------------ .../DashboardsBar/__tests__/Filter.spec.js | 40 ----- 6 files changed, 32 insertions(+), 270 deletions(-) delete mode 100644 src/components/DashboardsBar/InformationBlock/__tests__/__snapshots__/FilterSelector.spec.js.snap delete mode 100644 src/components/DashboardsBar/__tests__/DashboardsBar.spec.js delete mode 100644 src/components/DashboardsBar/__tests__/Filter.spec.js diff --git a/src/components/DashboardsBar/InformationBlock/__tests__/FilterSelector.spec.js b/src/components/DashboardsBar/InformationBlock/__tests__/FilterSelector.spec.js index ded375771..108da2d4e 100644 --- a/src/components/DashboardsBar/InformationBlock/__tests__/FilterSelector.spec.js +++ b/src/components/DashboardsBar/InformationBlock/__tests__/FilterSelector.spec.js @@ -2,81 +2,65 @@ import { useDhis2ConnectionStatus } from '@dhis2/app-runtime' import { render, screen } from '@testing-library/react' import React from 'react' import { Provider } from 'react-redux' -import configureMockStore from 'redux-mock-store' +import { createStore } from 'redux' import useDimensions from '../../../../modules/useDimensions.js' import FilterSelector from '../FilterSelector.js' -const mockStore = configureMockStore() - jest.mock('@dhis2/app-runtime', () => ({ useDhis2ConnectionStatus: jest.fn(() => ({ isDisconnected: false })), })) -/* eslint-disable react/prop-types */ -jest.mock( - '../../../../components/DropdownButton/DropdownButton.js', - () => - function Mock({ children, ...props }) { - return ( - - ) - } -) -/* eslint-enable react/prop-types */ - jest.mock('../../../../modules/useDimensions', () => jest.fn()) useDimensions.mockImplementation(() => ['Moomin', 'Snorkmaiden']) +const baseState = { activeModalDimension: {}, itemFilters: {} } +const createMockStore = (state) => + createStore(() => Object.assign({}, baseState, state)) + test('is disabled when offline', () => { useDhis2ConnectionStatus.mockImplementationOnce( jest.fn(() => ({ isDisconnected: true })) ) - const store = { activeModalDimension: {}, itemFilters: {} } - const props = { allowedFilters: [], restrictFilters: false, } - const { container } = render( - + const { getByTestId } = render( + ) - expect(container).toMatchSnapshot() + expect(getByTestId('dhis2-uicore-button')).toBeDisabled() }) test('is enabled when online', () => { - // useDhis2ConnectionStatus.mockImplementation(jest.fn(() => ({ isDisconnected: false }))) - - const store = { activeModalDimension: {}, itemFilters: {} } + useDhis2ConnectionStatus.mockImplementation( + jest.fn(() => ({ isDisconnected: false })) + ) const props = { allowedFilters: [], restrictFilters: false, } - const { container } = render( - + const { getByTestId } = render( + ) - expect(container).toMatchSnapshot() + expect(getByTestId('dhis2-uicore-button')).toBeEnabled() }) test('is null when no filters are restricted and no filters are allowed', () => { - const store = { activeModalDimension: {}, itemFilters: {} } - const props = { allowedFilters: [], restrictFilters: true, } const { container } = render( - + ) @@ -84,48 +68,43 @@ test('is null when no filters are restricted and no filters are allowed', () => }) test('is null when no filters are restricted and allowedFilters undefined', () => { - const store = { activeModalDimension: {}, itemFilters: {} } - const props = { restrictFilters: true, } const { container } = render( - + ) + expect(container.firstChild).toBeNull() }) test('shows button when filters are restricted and at least one filter is allowed', () => { - const store = { activeModalDimension: {}, itemFilters: {} } - const props = { allowedFilters: ['Moomin'], restrictFilters: true, } render( - + ) - expect(screen.getByRole('button')).toBeTruthy() + expect(screen.getByRole('button')).toBeVisible() }) test('shows button when filters are not restricted', () => { - const store = { activeModalDimension: {}, itemFilters: {} } - const props = { allowedFilters: [], restrictFilters: false, } render( - + ) - expect(screen.getByRole('button')).toBeTruthy() + expect(screen.getByRole('button')).toBeVisible() }) diff --git a/src/components/DashboardsBar/InformationBlock/__tests__/__snapshots__/FilterSelector.spec.js.snap b/src/components/DashboardsBar/InformationBlock/__tests__/__snapshots__/FilterSelector.spec.js.snap deleted file mode 100644 index 9d53db4ad..000000000 --- a/src/components/DashboardsBar/InformationBlock/__tests__/__snapshots__/FilterSelector.spec.js.snap +++ /dev/null @@ -1,36 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`is disabled when offline 1`] = ` -
- - - -
-`; - -exports[`is enabled when online 1`] = ` -
- - - -
-`; diff --git a/src/components/DashboardsBar/NavigationMenu/__tests__/NavigationMenu.spec.js b/src/components/DashboardsBar/NavigationMenu/__tests__/NavigationMenu.spec.js index 7dfb0a38d..0eb1fab56 100644 --- a/src/components/DashboardsBar/NavigationMenu/__tests__/NavigationMenu.spec.js +++ b/src/components/DashboardsBar/NavigationMenu/__tests__/NavigationMenu.spec.js @@ -67,8 +67,10 @@ test('renders a notification if no dashboards are available', () => { ) - expect(getByText('No dashboards available.')).toBeTruthy() - expect(getByText('Create a new dashboard using the + button.')).toBeTruthy() + expect(getByText('No dashboards available.')).toBeVisible() + expect( + getByText('Create a new dashboard using the + button.') + ).toBeVisible() }) test('renders a placeholder list item if no dashboards meet the filter criteria', () => { @@ -81,6 +83,8 @@ test('renders a placeholder list item if no dashboards meet the filter criteria' ) - expect(getByPlaceholderText('Search for a dashboard').value).toBe(filterStr) - expect(getByText('No dashboards found')).toBeTruthy() + expect(getByPlaceholderText('Search for a dashboard')).toHaveValue( + filterStr + ) + expect(getByText('No dashboards found')).toBeVisible() }) diff --git a/src/components/DashboardsBar/NavigationMenu/__tests__/NavigationMenuItem.spec.js b/src/components/DashboardsBar/NavigationMenu/__tests__/NavigationMenuItem.spec.js index 455a0d0cd..c0261e884 100644 --- a/src/components/DashboardsBar/NavigationMenu/__tests__/NavigationMenuItem.spec.js +++ b/src/components/DashboardsBar/NavigationMenu/__tests__/NavigationMenuItem.spec.js @@ -82,7 +82,7 @@ test('renders an inactive MenuItem with a star icon, for a starred dashboard', ( ) expect(container.querySelector('.container').childNodes).toHaveLength(2) - expect(getByTestId('starred-dashboard')).toBeTruthy() + expect(getByTestId('starred-dashboard')).toBeVisible() }) test('renders an inactive MenuItem with an offline icon for a cached dashboard', () => { @@ -96,7 +96,7 @@ test('renders an inactive MenuItem with an offline icon for a cached dashboard', ) expect(container.querySelector('.container').childNodes).toHaveLength(2) - expect(getByTestId('dashboard-saved-offline')).toBeTruthy() + expect(getByTestId('dashboard-saved-offline')).toBeVisible() }) test('renders an active MenuItem for the currently selected dashboard', () => { @@ -111,7 +111,7 @@ test('renders an active MenuItem for the currently selected dashboard', () => { ) expect(container.querySelector('.container').childNodes).toHaveLength(1) - expect(getByTestId('dhis2-uicore-menuitem')).toBeTruthy() + expect(getByTestId('dhis2-uicore-menuitem')).toBeVisible() }) test('Navigates to the related menu item when an item is clicked', () => { diff --git a/src/components/DashboardsBar/__tests__/DashboardsBar.spec.js b/src/components/DashboardsBar/__tests__/DashboardsBar.spec.js deleted file mode 100644 index 7f4a720ba..000000000 --- a/src/components/DashboardsBar/__tests__/DashboardsBar.spec.js +++ /dev/null @@ -1,145 +0,0 @@ -import { within } from '@testing-library/dom' -import { render } from '@testing-library/react' -import { createMemoryHistory } from 'history' -import React from 'react' -import { Provider } from 'react-redux' -import { Router } from 'react-router-dom' -import configureMockStore from 'redux-mock-store' -import WindowDimensionsProvider from '../../WindowDimensionsProvider.js' -import DashboardsBar, { - MIN_ROW_COUNT, - MAX_ROW_COUNT, -} from '../../DashboardsBar/DashboardsBar.js' - -jest.mock('@dhis2/analytics', () => ({ - useCachedDataQuery: () => ({ - currentUser: { - username: 'rainbowDash', - id: 'r3nb0d5h', - }, - }), -})) - -const mockStore = configureMockStore() -const dashboards = { - rainbow123: { - id: 'rainbow123', - displayName: 'Rainbow Dash', - starred: false, - }, - fluttershy123: { - id: 'fluttershy123', - displayName: 'Fluttershy', - starred: true, - }, -} - -jest.mock('@dhis2/app-runtime', () => ({ - useDhis2ConnectionStatus: () => ({ isConnected: true }), - useCacheableSection: jest.fn(() => ({ - isCached: false, - recordingState: 'default', - })), - useDataEngine: jest.fn(), -})) - -test('minimized DashboardsBar has Show more/less button', () => { - const store = { - dashboards, - dashboardsFilter: '', - controlBar: { userRows: parseInt(MIN_ROW_COUNT) }, - selected: { id: 'rainbow123' }, - } - const { queryAllByRole, queryByLabelText } = render( - - - - - - - - ) - const links = queryAllByRole('link') - expect(links.length).toEqual(Object.keys(dashboards).length) - expect(queryByLabelText('Show more dashboards')).toBeTruthy() -}) - -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 { queryByLabelText } = render( - - - - - - - - ) - expect(queryByLabelText('Show more dashboards')).toBeNull() -}) - -test('renders a DashboardsBar with selected item', () => { - const store = { - dashboards, - dashboardsFilter: '', - controlBar: { userRows: parseInt(MIN_ROW_COUNT) }, - selected: { id: 'fluttershy123' }, - } - - const { queryAllByRole } = render( - - - - - - - - ) - - const chips = queryAllByRole('link') - - const fluttershyChip = chips.find((lnk) => - within(lnk).queryByText('Fluttershy') - ) - - expect(fluttershyChip.firstChild.classList.contains('selected')).toBe(true) - - const rainbowChip = chips.find((lnk) => - within(lnk).queryByText('Rainbow Dash') - ) - expect(rainbowChip.firstChild.classList.contains('selected')).toBe(false) -}) - -test('renders a DashboardsBar with no items', () => { - const store = { - dashboards: {}, - dashboardsFilter: '', - controlBar: { userRows: parseInt(MIN_ROW_COUNT) }, - selected: { id: 'rainbow123' }, - } - - const { queryByRole } = render( - - - - - - - - ) - expect(queryByRole('link')).toBeNull() -}) diff --git a/src/components/DashboardsBar/__tests__/Filter.spec.js b/src/components/DashboardsBar/__tests__/Filter.spec.js deleted file mode 100644 index af465685b..000000000 --- a/src/components/DashboardsBar/__tests__/Filter.spec.js +++ /dev/null @@ -1,40 +0,0 @@ -import { render } from '@testing-library/react' -import React from 'react' -import { Provider } from 'react-redux' -import configureMockStore from 'redux-mock-store' -import WindowDimensionsProvider from '../../WindowDimensionsProvider.js' -import Filter from '../../DashboardsBar/Filter.js' - -const mockStore = configureMockStore() - -test('Filter renders with empty filter text', () => { - const store = { - dashboardsFilter: '', - } - const props = { classes: {} } - const { container } = render( - - - - - - ) - expect(container).toMatchSnapshot() -}) - -test('Filter renders with filter text', () => { - const store = { - dashboardsFilter: 'rainbow', - } - - const props = { classes: {} } - const { container } = render( - - - - - - ) - - expect(container).toMatchSnapshot() -})