diff --git a/test/settings/Visits.test.tsx b/test/settings/Visits.test.tsx new file mode 100644 index 00000000..cfbaf833 --- /dev/null +++ b/test/settings/Visits.test.tsx @@ -0,0 +1,66 @@ +import { shallow, ShallowWrapper } from 'enzyme'; +import { Mock } from 'ts-mockery'; +import { Settings } from '../../src/settings/reducers/settings'; +import { Visits } from '../../src/settings/Visits'; +import { SimpleCard } from '../../src/utils/SimpleCard'; +import { DateIntervalSelector } from '../../src/utils/dates/DateIntervalSelector'; + +describe('<Visits />', () => { + let wrapper: ShallowWrapper; + const setVisitsSettings = jest.fn(); + const createWrapper = (settings: Partial<Settings> = {}) => { + wrapper = shallow(<Visits settings={Mock.of<Settings>(settings)} setVisitsSettings={setVisitsSettings} />); + + return wrapper; + }; + + afterEach(jest.clearAllMocks); + afterEach(() => wrapper?.unmount()); + + it('renders expected components', () => { + const wrapper = createWrapper(); + + expect(wrapper.find(SimpleCard).prop('title')).toEqual('Visits'); + expect(wrapper.find('label').prop('children')).toEqual('Default interval to load on visits sections:'); + expect(wrapper.find(DateIntervalSelector)).toHaveLength(1); + }); + + it.each([ + [ Mock.all<Settings>(), 'last30Days' ], + [ Mock.of<Settings>({ visits: {} }), 'last30Days' ], + [ + Mock.of<Settings>({ + visits: { + defaultInterval: 'last7Days', + }, + }), + 'last7Days', + ], + [ + Mock.of<Settings>({ + visits: { + defaultInterval: 'today', + }, + }), + 'today', + ], + ])('sets expected interval as active', (settings, expectedInterval) => { + const wrapper = createWrapper(settings); + + expect(wrapper.find(DateIntervalSelector).prop('active')).toEqual(expectedInterval); + }); + + it('invokes setVisitsSettings when interval changes', () => { + const wrapper = createWrapper(); + const selector = wrapper.find(DateIntervalSelector); + + selector.simulate('change', 'last7Days'); + selector.simulate('change', 'last180days'); + selector.simulate('change', 'yesterday'); + + expect(setVisitsSettings).toHaveBeenCalledTimes(3); + expect(setVisitsSettings).toHaveBeenNthCalledWith(1, { defaultInterval: 'last7Days' }); + expect(setVisitsSettings).toHaveBeenNthCalledWith(2, { defaultInterval: 'last180days' }); + expect(setVisitsSettings).toHaveBeenNthCalledWith(3, { defaultInterval: 'yesterday' }); + }); +}); diff --git a/test/utils/dates/DateIntervalSelector.test.tsx b/test/utils/dates/DateIntervalSelector.test.tsx new file mode 100644 index 00000000..51a24f88 --- /dev/null +++ b/test/utils/dates/DateIntervalSelector.test.tsx @@ -0,0 +1,26 @@ +import { shallow, ShallowWrapper } from 'enzyme'; +import { DateInterval, rangeOrIntervalToString } from '../../../src/utils/dates/types'; +import { DateIntervalSelector } from '../../../src/utils/dates/DateIntervalSelector'; +import { DateIntervalDropdownItems } from '../../../src/utils/dates/DateIntervalDropdownItems'; +import { DropdownBtn } from '../../../src/utils/DropdownBtn'; + +describe('<DateIntervalSelector />', () => { + let wrapper: ShallowWrapper; + const activeInterval: DateInterval = 'last7Days'; + const onChange = jest.fn(); + + beforeEach(() => { + wrapper = shallow(<DateIntervalSelector active={activeInterval} onChange={onChange} />); + }); + afterEach(() => wrapper?.unmount()); + + test('props are passed down to nested DateIntervalDropdownItems', () => { + const items = wrapper.find(DateIntervalDropdownItems); + const dropdown = wrapper.find(DropdownBtn); + + expect(dropdown.prop('text')).toEqual(rangeOrIntervalToString(activeInterval)); + expect(items).toHaveLength(1); + expect(items.prop('onChange')).toEqual(onChange); + expect(items.prop('active')).toEqual(activeInterval); + }); +});