From cd451b85dd2dad50f2032f83c891e8e2195f3643 Mon Sep 17 00:00:00 2001 From: HendrikThePendric Date: Wed, 4 Dec 2024 17:08:16 +0100 Subject: [PATCH] fix: adjust filter-badge so that it is only enabled when online and align tests accordingly --- src/pages/view/FilterBar/FilterBadge.js | 86 +++++++++---------- .../FilterBar/__tests__/FilterBadge.spec.js | 86 +++++++++++++------ .../__snapshots__/FilterBadge.spec.js.snap | 59 ------------- .../FilterBar/styles/FilterBadge.module.css | 10 +-- 4 files changed, 105 insertions(+), 136 deletions(-) delete mode 100644 src/pages/view/FilterBar/__tests__/__snapshots__/FilterBadge.spec.js.snap diff --git a/src/pages/view/FilterBar/FilterBadge.js b/src/pages/view/FilterBar/FilterBadge.js index e7a896ab6..e3cebd867 100644 --- a/src/pages/view/FilterBar/FilterBadge.js +++ b/src/pages/view/FilterBar/FilterBadge.js @@ -6,66 +6,62 @@ import PropTypes from 'prop-types' import React from 'react' import { connect } from 'react-redux' import { acSetActiveModalDimension } from '../../../actions/activeModalDimension.js' -import { useCacheableSection } from '../../../modules/useCacheableSection.js' import { sGetSelectedId } from '../../../reducers/selected.js' import classes from './styles/FilterBadge.module.css' -const FilterBadge = ({ dashboardId, filter, openFilterModal, onRemove }) => { - const { isConnected: online } = useDhis2ConnectionStatus() - const { isCached } = useCacheableSection(dashboardId) +const getFilterValuesText = (values) => + values.length === 1 + ? values[0].name + : i18n.t('{{count}} selected', { count: values.length }) - const notAllowed = !isCached && !online - - const filterText = `${filter.name}: ${ - filter.values.length > 1 - ? i18n.t('{{count}} selected', { - count: filter.values.length, - }) - : filter.values[0].name - }` +const FilterBadge = ({ filter, openFilterModal, onRemove }) => { + const { isConnected } = useDhis2ConnectionStatus() return ( -
- - - {({ onFocus, onBlur, onMouseOver, onMouseOut, ref }) => ( + + {({ onFocus, onBlur, onMouseOver, onMouseOut, ref }) => ( +
!isConnected && onFocus()} + onBlur={() => !isConnected && onBlur()} + onMouseOver={() => !isConnected && onMouseOver()} + onMouseOut={() => !isConnected && onMouseOut()} + ref={ref} + > + - )} - -
+
+ )} + ) } FilterBadge.propTypes = { - dashboardId: PropTypes.string.isRequired, filter: PropTypes.object.isRequired, openFilterModal: PropTypes.func.isRequired, onRemove: PropTypes.func.isRequired, diff --git a/src/pages/view/FilterBar/__tests__/FilterBadge.spec.js b/src/pages/view/FilterBar/__tests__/FilterBadge.spec.js index 1164dca2d..e0bf348dc 100644 --- a/src/pages/view/FilterBar/__tests__/FilterBadge.spec.js +++ b/src/pages/view/FilterBar/__tests__/FilterBadge.spec.js @@ -1,38 +1,47 @@ +import { useDhis2ConnectionStatus } from '@dhis2/app-runtime' import { render } from '@testing-library/react' import React from 'react' import { Provider } from 'react-redux' -import configureMockStore from 'redux-mock-store' +import { createStore } from 'redux' import FilterBadge from '../FilterBadge.js' -const mockStore = configureMockStore() - -const store = { selected: { id: 'dashboard1' } } - -jest.mock('@dhis2/analytics', () => ({ - useCachedDataQuery: () => ({ - currentUser: { - username: 'rainbowDash', - id: 'r3nb0d5h', - }, - }), -})) - jest.mock('@dhis2/app-runtime', () => ({ - useDhis2ConnectionStatus: () => ({ isConnected: true }), - useCacheableSection: jest.fn(() => ({ - isCached: false, - recordingState: 'default', - })), + useDhis2ConnectionStatus: jest.fn(() => ({ isConnected: true })), })) -test('Filter Badge displays badge containing number of items in filter', () => { +const baseState = { selected: { id: 'dashboard1' } } +const createMockStore = (state) => + createStore(() => Object.assign({}, baseState, state)) + +test('Displays badge containing number of filter items when filtered on multiple', () => { const filter = { id: 'ponies', name: 'Ponies', values: [{ name: 'Rainbow Dash' }, { name: 'Twilight Sparkle' }], } - const { container } = render( - + const { getByTestId } = render( + + + + ) + expect(getByTestId('filter-badge-button')).toHaveTextContent( + 'Ponies: 2 selected' + ) +}) + +test('Displays badge with filter item name when only one filter item is present', () => { + const filter = { + id: 'ponies', + name: 'Ponies', + values: [{ name: 'Twilight Sparkle' }], + } + const { getByTestId } = render( + { /> ) - expect(container).toMatchSnapshot() + expect(getByTestId('filter-badge-button')).toHaveTextContent( + 'Ponies: Twilight Sparkle' + ) }) -test('FilterBadge displays badge with filter item name when only one filter item', () => { +test('Has enabled buttons when online', () => { const filter = { id: 'ponies', name: 'Ponies', values: [{ name: 'Twilight Sparkle' }], } + const { getByTestId } = render( + + + + ) + expect(getByTestId('filter-badge-button')).toBeEnabled() + expect(getByTestId('filter-badge-clear-button')).toBeEnabled() +}) - const { container } = render( - +test('Has disabled buttons when offline', () => { + useDhis2ConnectionStatus.mockImplementation(() => ({ isConnected: false })) + const filter = { + id: 'ponies', + name: 'Ponies', + values: [{ name: 'Twilight Sparkle' }], + } + const { getByTestId } = render( + ) - expect(container).toMatchSnapshot() + expect(getByTestId('filter-badge-button')).toBeDisabled() + expect(getByTestId('filter-badge-clear-button')).toBeDisabled() }) diff --git a/src/pages/view/FilterBar/__tests__/__snapshots__/FilterBadge.spec.js.snap b/src/pages/view/FilterBar/__tests__/__snapshots__/FilterBadge.spec.js.snap deleted file mode 100644 index bdd73e689..000000000 --- a/src/pages/view/FilterBar/__tests__/__snapshots__/FilterBadge.spec.js.snap +++ /dev/null @@ -1,59 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Filter Badge displays badge containing number of items in filter 1`] = ` -
-
- - Ponies: 2 selected - - - Ponies: 2 selected - - - - -
-
-`; - -exports[`FilterBadge displays badge with filter item name when only one filter item 1`] = ` -
-
- - Ponies: Twilight Sparkle - - - Ponies: Twilight Sparkle - - - - -
-
-`; diff --git a/src/pages/view/FilterBar/styles/FilterBadge.module.css b/src/pages/view/FilterBar/styles/FilterBadge.module.css index 76e7045fb..97728cfce 100644 --- a/src/pages/view/FilterBar/styles/FilterBadge.module.css +++ b/src/pages/view/FilterBar/styles/FilterBadge.module.css @@ -14,7 +14,11 @@ cursor: pointer; } -.button:hover:not(.notAllowed) { +.button:disabled { + cursor: not-allowed; +} + +.button:hover:not(:disabled) { background-color: var(--colors-grey800); } @@ -29,7 +33,3 @@ border-start-end-radius: 4px; border-end-end-radius: 4px; } - -.removeButton.notAllowed { - cursor: not-allowed; -}