({
@@ -90,4 +102,4 @@ const mapDispatchToProps = {
clearDashboardsFilter: acClearDashboardsFilter,
}
-export default connect(mapStateToProps, mapDispatchToProps)(Filter)
+export default connect(mapStateToProps, mapDispatchToProps)(FilterUnconnected)
diff --git a/src/components/ControlBar/ShowMoreButton.js b/src/components/ControlBar/ShowMoreButton.js
index ee0bea915..672cddf4a 100644
--- a/src/components/ControlBar/ShowMoreButton.js
+++ b/src/components/ControlBar/ShowMoreButton.js
@@ -1,24 +1,34 @@
import React from 'react'
import PropTypes from 'prop-types'
import i18n from '@dhis2/d2-i18n'
+import { Tooltip } from '@dhis2/ui'
+import { ChevronDown, ChevronUp } from './assets/icons'
import classes from './styles/ShowMoreButton.module.css'
export const SHOWMORE_BAR_HEIGHT = 16
-export const ShowMoreButton = ({ onClick, isMaxHeight, disabled }) => {
+const ShowMoreButton = ({ onClick, isMaxHeight, disabled }) => {
+ const buttonLabel = isMaxHeight
+ ? i18n.t('Show fewer dashboards')
+ : i18n.t('Show more dashboards')
return (
{disabled ? (
-
{i18n.t('Show more')}
- ) : (
-
- {isMaxHeight ? i18n.t('Show less') : i18n.t('Show more')}
+
+
+ ) : (
+
+
+ {isMaxHeight ?
+
)}
)
diff --git a/src/components/ControlBar/__tests__/ControlBar.spec.js b/src/components/ControlBar/__tests__/ControlBar.spec.js
index 4d00310f2..5b338f19b 100644
--- a/src/components/ControlBar/__tests__/ControlBar.spec.js
+++ b/src/components/ControlBar/__tests__/ControlBar.spec.js
@@ -3,12 +3,6 @@ import { shallow } from 'enzyme'
import ControlBar from '../ControlBar'
-jest.mock('@dhis2/ui', () => {
- return {
- colors: { white: 'white', yellow050: 'yellow' },
- }
-})
-
describe('ControlBar', () => {
let props
const children = (
@@ -50,14 +44,6 @@ describe('ControlBar', () => {
expect(renderControlBar().children().length).toBe(1)
})
- it('should change the background color in edit mode', () => {
- props.editMode = true
-
- expect(renderControlBar().props().style.backgroundColor).not.toBe(
- 'white'
- )
- })
-
it('should call the onChangeHeight callback when the drag handle is dragged', () => {
// Replace the async DOM function with a sync function that immediately executes the callback
window.requestAnimationFrame = requestAnimationFrame
@@ -105,13 +91,13 @@ describe('ControlBar', () => {
const controlBar = renderControlBar()
const dragFlap = controlBar.childAt(1)
- expect(controlBar.props().style.transition).not.toBe('none')
+ expect(controlBar.props().className).not.toMatch(/dragging/)
dragFlap.simulate('mousedown')
- expect(controlBar.props().style.transition).toBe('none')
+ expect(controlBar.props().className).toMatch(/dragging/)
window.dispatchEvent(new MouseEvent('mouseup'))
controlBar.update()
- expect(controlBar.props().style.transition).not.toBe('none')
+ expect(controlBar.props().className).not.toMatch(/dragging/)
})
it('should start listening for mousemove and mouseup events when the drag flap is clicked', () => {
diff --git a/src/components/ControlBar/__tests__/DashboardsBar.spec.js b/src/components/ControlBar/__tests__/DashboardsBar.spec.js
index 1aeb72310..4b4efe52b 100644
--- a/src/components/ControlBar/__tests__/DashboardsBar.spec.js
+++ b/src/components/ControlBar/__tests__/DashboardsBar.spec.js
@@ -4,6 +4,7 @@ import { fireEvent } from '@testing-library/dom'
import { Provider } from 'react-redux'
import configureMockStore from 'redux-mock-store'
import { Router } from 'react-router-dom'
+import WindowDimensionsProvider from '../../WindowDimensionsProvider'
import { createMemoryHistory } from 'history'
import DashboardsBar, { MAX_ROW_COUNT } from '../DashboardsBar'
import { MIN_ROW_COUNT } from '../controlBarDimensions'
@@ -36,11 +37,13 @@ test('renders a DashboardsBar with minimum height', () => {
selected: { id: 'rainbow123' },
}
const { container } = render(
-
-
-
-
+
+
+
+
+
+
)
expect(container).toMatchSnapshot()
})
@@ -53,11 +56,13 @@ test('renders a DashboardsBar with maximum height', () => {
selected: { id: 'rainbow123' },
}
const { container } = render(
-
-
-
-
+
+
+
+
+
+
)
expect(container).toMatchSnapshot()
})
@@ -71,11 +76,13 @@ test('renders a DashboardsBar with selected item', () => {
}
const { container } = render(
-
-
-
-
+
+
+
+
+
+
)
expect(container).toMatchSnapshot()
})
@@ -89,11 +96,13 @@ test('renders a DashboardsBar with no items', () => {
}
const { container } = render(
-
-
-
-
+
+
+
+
+
+
)
expect(container).toMatchSnapshot()
})
@@ -105,15 +114,17 @@ test('clicking "Show more" maximizes dashboards bar height', () => {
controlBar: { userRows: MIN_ROW_COUNT },
selected: { id: 'fluttershy123' },
}
- const { getByText, asFragment } = render(
-
-
-
-
+ const { getByLabelText, asFragment } = render(
+
+
+
+
+
+
)
- fireEvent.click(getByText('Show more'))
+ fireEvent.click(getByLabelText('Show more dashboards'))
expect(asFragment()).toMatchSnapshot()
})
@@ -125,11 +136,13 @@ test('triggers onChangeHeight when controlbar height is changed', () => {
selected: { id: 'fluttershy123' },
})
const { getByTestId } = render(
-
-
-
-
+
+
+
+
+
+
)
const spy = jest.spyOn(api, 'apiPostControlBarRows')
@@ -157,11 +170,13 @@ test('does not trigger onChangeHeight when controlbar height is changed to simil
selected: { id: 'fluttershy123' },
})
const { getByTestId } = render(
-
-
-
-
+
+
+
+
+
+
)
const spy = jest.spyOn(api, 'apiPostControlBarRows')
@@ -186,11 +201,13 @@ test('calls the api to post user rows when drag ends', () => {
selected: { id: 'rainbow123' },
}
const { getByTestId } = render(
-
-
-
-
+
+
+
+
+
+
)
const spy = jest.spyOn(api, 'apiPostControlBarRows')
diff --git a/src/components/ControlBar/__tests__/Filter.spec.js b/src/components/ControlBar/__tests__/Filter.spec.js
index 59fedd040..1c56d34fb 100644
--- a/src/components/ControlBar/__tests__/Filter.spec.js
+++ b/src/components/ControlBar/__tests__/Filter.spec.js
@@ -1,52 +1,72 @@
import React from 'react'
-import { shallow } from 'enzyme'
-import toJson from 'enzyme-to-json'
-import { Filter, KEYCODE_ENTER, KEYCODE_ESCAPE } from '../Filter'
+import { mount } from 'enzyme'
+import { render } from '@testing-library/react'
+import { Provider } from 'react-redux'
+import configureMockStore from 'redux-mock-store'
+import Filter, {
+ FilterUnconnected,
+ KEYCODE_ENTER,
+ KEYCODE_ESCAPE,
+} from '../Filter'
+import WindowDimensionsProvider from '../../WindowDimensionsProvider'
-describe('Filter', () => {
- let props
- let shallowFilter
- const filter = () => {
- if (!shallowFilter) {
- shallowFilter = shallow(
)
- }
- return shallowFilter
- }
-
- beforeEach(() => {
- props = {
- filterText: '',
- setDashboardsFilter: jest.fn(),
- clearDashboardsFilter: jest.fn(),
- onKeypressEnter: jest.fn(),
- classes: {},
- }
- shallowFilter = undefined
- })
+const mockStore = configureMockStore()
+describe('Filter', () => {
it('matches the snapshot when filterText property is empty', () => {
- expect(toJson(filter())).toMatchSnapshot()
+ const store = {
+ dashboardsFilter: '',
+ }
+ const props = { classes: {} }
+ const { container } = render(
+
+
+
+
+ )
+ expect(container).toMatchSnapshot()
})
- describe('when updated filterText property is provided', () => {
+ describe('when filterText property is provided', () => {
it('renders an input with correct value property', () => {
- const filterWrapper = filter()
- filterWrapper.setProps({ filterText: 'rainbow' })
+ const store = {
+ dashboardsFilter: 'rainbow',
+ }
+
+ const props = { classes: {} }
+ const { container } = render(
+
+
+
+
+ )
- expect(filterWrapper.find('input').props().value).toEqual('rainbow')
- expect(props.setDashboardsFilter).not.toHaveBeenCalled()
+ expect(container).toMatchSnapshot()
})
})
describe('when input value is changed', () => {
it('triggers setDashboardsFilter property with correct value', () => {
+ const props = {
+ filterText: '',
+ setDashboardsFilter: jest.fn(),
+ clearDashboardsFilter: jest.fn(),
+ onKeypressEnter: jest.fn(),
+ classes: {},
+ }
const newValue = 'fluttershy'
const e = {
target: { value: newValue },
preventDefault: jest.fn(),
}
- const inputField = filter().find('input')
- inputField.simulate('change', e)
+ const filter = mount(
+
+
+ )
+ filter.find('input').simulate('change', e)
expect(e.preventDefault).toHaveBeenCalledTimes(1)
expect(props.setDashboardsFilter).toHaveBeenCalledTimes(1)
expect(props.setDashboardsFilter).toHaveBeenCalledWith(newValue)
@@ -55,19 +75,37 @@ describe('Filter', () => {
describe('when key is pressed', () => {
it('triggers onKeypressEnter when key is ENTER', () => {
- filter().find('input').simulate('keyUp', { keyCode: KEYCODE_ENTER })
+ const props = {
+ filterText: '',
+ clearDashboardsFilter: jest.fn(),
+ onKeypressEnter: jest.fn(),
+ classes: {},
+ }
+ const filter = mount(
+
+
+ )
+ filter.find('input').simulate('keyUp', { keyCode: KEYCODE_ENTER })
expect(props.onKeypressEnter).toHaveBeenCalledTimes(1)
expect(props.clearDashboardsFilter).toHaveBeenCalledTimes(1)
})
it('triggers setDashboardsFilter when key is ESCAPE', () => {
- props.setDashboardsFilter = jest.fn()
- props.onKeypressEnter = jest.fn()
+ const props = {
+ filterText: '',
+ clearDashboardsFilter: jest.fn(),
+ onKeypressEnter: jest.fn(),
+ classes: {},
+ }
+ const filter = mount(
+
+
+ )
- filter()
- .find('input')
- .simulate('keyUp', { keyCode: KEYCODE_ESCAPE })
+ filter.find('input').simulate('keyUp', { keyCode: KEYCODE_ESCAPE })
expect(props.clearDashboardsFilter).toHaveBeenCalledTimes(1)
expect(props.onKeypressEnter).not.toHaveBeenCalled()
diff --git a/src/components/ControlBar/__tests__/ShowMoreButton.spec.js b/src/components/ControlBar/__tests__/ShowMoreButton.spec.js
index 3906e7af9..c396e7fc1 100644
--- a/src/components/ControlBar/__tests__/ShowMoreButton.spec.js
+++ b/src/components/ControlBar/__tests__/ShowMoreButton.spec.js
@@ -1,22 +1,22 @@
import React from 'react'
-import { shallow } from 'enzyme'
-import toJson from 'enzyme-to-json'
-import { ShowMoreButton } from '../ShowMoreButton'
+import { render } from '@testing-library/react'
+import { fireEvent } from '@testing-library/dom'
+import ShowMoreButton from '../ShowMoreButton'
describe('ShowMoreButton', () => {
it('renders correctly when at maxHeight', () => {
- const button = shallow(
+ const { container } = render(
{}}
isMaxHeight={true}
classes={{ showMore: {} }}
/>
)
- expect(toJson(button)).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
it('renders correctly when not at maxHeight', () => {
- const tree = shallow(
+ const { container } = render(
{}}
isMaxHeight={false}
@@ -24,50 +24,19 @@ describe('ShowMoreButton', () => {
/>
)
- expect(toJson(tree)).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
- describe('actions', () => {
- let props
- let shallowShowMoreButton
- const showMoreButton = () => {
- if (!shallowShowMoreButton) {
- shallowShowMoreButton = shallow(
+
`;
@@ -139,17 +158,17 @@ exports[`renders a DashboardsBar with maximum height 1`] = `
@@ -267,6 +296,9 @@ exports[`renders a DashboardsBar with maximum height 1`] = `
style="height: 7px;"
/>
+
`;
@@ -274,17 +306,17 @@ exports[`renders a DashboardsBar with minimum height 1`] = `
`;
@@ -410,17 +461,17 @@ exports[`renders a DashboardsBar with no items 1`] = `
`;
@@ -492,17 +562,17 @@ exports[`renders a DashboardsBar with selected item 1`] = `
`;
diff --git a/src/components/ControlBar/__tests__/__snapshots__/EditBar.spec.js.snap b/src/components/ControlBar/__tests__/__snapshots__/EditBar.spec.js.snap
index 7b90b7671..a11425acc 100644
--- a/src/components/ControlBar/__tests__/__snapshots__/EditBar.spec.js.snap
+++ b/src/components/ControlBar/__tests__/__snapshots__/EditBar.spec.js.snap
@@ -2,145 +2,90 @@
exports[`EditBar renders the EditBar 1`] = `
-
-
-
- Go to dashboards
-
-
+ Go to dashboards
+
-
+
`;
exports[`EditBar when update access is false renders only the Discard button 1`] = `
-
-
-
- Go to dashboards
-
-
+ Go to dashboards
+
-
+
`;
exports[`EditBar when update access is true when dashboard id property provided renders Save, Translate and Discard buttons and the TranslationDialog but not ConfirmDeleteDialog 1`] = `
-
-
-
-
- Save changes
-
-
- Print preview
-
-
- Translate
-
-
-
-
+ Save changes
+
- Exit without saving
+ Print preview
-
+
+ Translate
+
+
+
+ Exit without saving
+
-
+
-
-
-
-
- Save changes
-
-
- Print preview
-
-
- Translate
-
-
-
-
+ Save changes
+
+
+ Print preview
+
- Exit without saving
+ Translate
-
+
+
+ Exit without saving
+
-
+
-
-
-
-
- Save changes
-
-
- Print preview
-
-
- Translate
-
-
-
-
+ Save changes
+
- Exit without saving
+ Print preview
-
+
+ Translate
+
+
+
+ Exit without saving
+
-
+