import { shallow, ShallowWrapper } from 'enzyme'; import { Mock } from 'ts-mockery'; import { Input } from 'reactstrap'; import { RealTimeUpdatesSettings, Settings } from '../../src/settings/reducers/settings'; import RealTimeUpdates from '../../src/settings/RealTimeUpdates'; import ToggleSwitch from '../../src/utils/ToggleSwitch'; describe('', () => { const toggleRealTimeUpdates = jest.fn(); const setRealTimeUpdatesInterval = jest.fn(); let wrapper: ShallowWrapper; const createWrapper = (realTimeUpdates: Partial = {}) => { const settings = Mock.of({ realTimeUpdates }); wrapper = shallow( , ); return wrapper; }; afterEach(jest.clearAllMocks); afterEach(() => wrapper?.unmount()); test('enabled real time updates are rendered as expected', () => { const wrapper = createWrapper({ enabled: true }); const toggle = wrapper.find(ToggleSwitch); const label = wrapper.find('label'); const input = wrapper.find(Input); const small = wrapper.find('small'); expect(toggle.prop('checked')).toEqual(true); expect(toggle.html()).toContain('processed'); expect(toggle.html()).not.toContain('ignored'); expect(label.prop('className')).toEqual(''); expect(input.prop('disabled')).toEqual(false); expect(small).toHaveLength(2); }); test('disabled real time updates are rendered as expected', () => { const wrapper = createWrapper({ enabled: false }); const toggle = wrapper.find(ToggleSwitch); const label = wrapper.find('label'); const input = wrapper.find(Input); const small = wrapper.find('small'); expect(toggle.prop('checked')).toEqual(false); expect(toggle.html()).not.toContain('processed'); expect(toggle.html()).toContain('ignored'); expect(label.prop('className')).toEqual('text-muted'); expect(input.prop('disabled')).toEqual(true); expect(small).toHaveLength(1); }); test.each([ [ 1, 'minute' ], [ 2, 'minutes' ], [ 10, 'minutes' ], [ 100, 'minutes' ], ])('expected children are shown when interval is greater than 0', (interval, minutesWord) => { const wrapper = createWrapper({ enabled: true, interval }); const span = wrapper.find('span'); const input = wrapper.find(Input); expect(span).toHaveLength(1); expect(span.html()).toEqual( `Updates will be reflected in the UI every ${interval} ${minutesWord}.`, ); expect(input.prop('value')).toEqual(`${interval}`); }); test.each([[ undefined ], [ 0 ]])('expected children are shown when interval is 0 or undefined', (interval) => { const wrapper = createWrapper({ enabled: true, interval }); const span = wrapper.find('span'); const small = wrapper.find('small').at(1); const input = wrapper.find(Input); expect(span).toHaveLength(0); expect(small.html()).toContain('Updates will be reflected in the UI as soon as they happen.'); expect(input.prop('value')).toEqual(''); }); test('real time updates are updated on input change', () => { const wrapper = createWrapper(); const input = wrapper.find(Input); expect(setRealTimeUpdatesInterval).not.toHaveBeenCalled(); input.simulate('change', { target: { value: '10' } }); expect(setRealTimeUpdatesInterval).toHaveBeenCalledWith(10); }); test('real time updates are toggled on switch change', () => { const wrapper = createWrapper(); const toggle = wrapper.find(ToggleSwitch); expect(toggleRealTimeUpdates).not.toHaveBeenCalled(); toggle.simulate('change'); expect(toggleRealTimeUpdates).toHaveBeenCalled(); }); });