diff --git a/jest.config.js b/jest.config.js index 0a544cb1..fe0bbddf 100644 --- a/jest.config.js +++ b/jest.config.js @@ -30,6 +30,8 @@ module.exports = { ], moduleNameMapper: { '^.+\\.module\\.scss$': 'identity-obj-proxy', + // Reactstrap module resolution does not work in jest for some reason. Manually mapping it solves the problem + 'reactstrap': '/node_modules/reactstrap/dist/reactstrap.umd.js', }, moduleFileExtensions: [ 'js', 'ts', 'tsx', 'json' ], }; diff --git a/test/domains/helpers/EditDomainRedirectsModal.test.tsx b/test/domains/helpers/EditDomainRedirectsModal.test.tsx index 8cf49b17..067f5f3b 100644 --- a/test/domains/helpers/EditDomainRedirectsModal.test.tsx +++ b/test/domains/helpers/EditDomainRedirectsModal.test.tsx @@ -1,6 +1,6 @@ import { shallow, ShallowWrapper } from 'enzyme'; import { Mock } from 'ts-mockery'; -import { Button, FormGroup, ModalHeader } from 'reactstrap'; +import { Button, ModalHeader } from 'reactstrap'; import { ShlinkDomain } from '../../../src/api/types'; import { EditDomainRedirectsModal } from '../../../src/domains/helpers/EditDomainRedirectsModal'; import { InfoTooltip } from '../../../src/utils/InfoTooltip'; @@ -32,7 +32,7 @@ describe('', () => { }); it('expected amount of form groups and tooltips', () => { - const formGroups = wrapper.find(FormGroup); + const formGroups = wrapper.find('FormGroup'); const tooltips = wrapper.find(InfoTooltip); expect(formGroups).toHaveLength(3); @@ -50,7 +50,7 @@ describe('', () => { }); it('saves expected values when form is submitted', () => { - const formGroups = wrapper.find(FormGroup); + const formGroups = wrapper.find('FormGroup'); expect(editDomainRedirects).not.toHaveBeenCalled(); diff --git a/test/servers/helpers/ServerForm.test.tsx b/test/servers/helpers/ServerForm.test.tsx index 3092789a..e15318e9 100644 --- a/test/servers/helpers/ServerForm.test.tsx +++ b/test/servers/helpers/ServerForm.test.tsx @@ -1,6 +1,6 @@ import { shallow, ShallowWrapper } from 'enzyme'; -import { FormGroup } from 'reactstrap'; import { ServerForm } from '../../../src/servers/helpers/ServerForm'; +import { InputFormGroup } from '../../../src/utils/forms/InputFormGroup'; describe('', () => { let wrapper: ShallowWrapper; @@ -14,7 +14,7 @@ describe('', () => { afterEach(jest.resetAllMocks); it('renders components', () => { - expect(wrapper.find(FormGroup)).toHaveLength(3); + expect(wrapper.find(InputFormGroup)).toHaveLength(3); expect(wrapper.find('span')).toHaveLength(1); }); diff --git a/test/settings/RealTimeUpdatesSettings.test.tsx b/test/settings/RealTimeUpdatesSettings.test.tsx index 17ea87f4..dd65c283 100644 --- a/test/settings/RealTimeUpdatesSettings.test.tsx +++ b/test/settings/RealTimeUpdatesSettings.test.tsx @@ -1,12 +1,14 @@ import { shallow, ShallowWrapper } from 'enzyme'; import { Mock } from 'ts-mockery'; import { Input } from 'reactstrap'; +import { FormText } from '../../src/utils/forms/FormText'; import { RealTimeUpdatesSettings as RealTimeUpdatesSettingsOptions, Settings, } from '../../src/settings/reducers/settings'; import RealTimeUpdatesSettings from '../../src/settings/RealTimeUpdatesSettings'; import ToggleSwitch from '../../src/utils/ToggleSwitch'; +import { LabeledFormGroup } from '../../src/utils/forms/LabeledFormGroup'; describe('', () => { const toggleRealTimeUpdates = jest.fn(); @@ -32,31 +34,31 @@ describe('', () => { it('renders enabled real time updates as expected', () => { const wrapper = createWrapper({ enabled: true }); const toggle = wrapper.find(ToggleSwitch); - const label = wrapper.find('label'); + const label = wrapper.find(LabeledFormGroup); const input = wrapper.find(Input); - const small = wrapper.find('small'); + const formText = wrapper.find(FormText); expect(toggle.prop('checked')).toEqual(true); expect(toggle.html()).toContain('processed'); expect(toggle.html()).not.toContain('ignored'); - expect(label.prop('className')).toEqual(''); + expect(label.prop('labelClassName')).not.toContain('text-muted'); expect(input.prop('disabled')).toEqual(false); - expect(small).toHaveLength(2); + expect(formText).toHaveLength(2); }); it('renders disabled real time updates as expected', () => { const wrapper = createWrapper({ enabled: false }); const toggle = wrapper.find(ToggleSwitch); - const label = wrapper.find('label'); + const label = wrapper.find(LabeledFormGroup); const input = wrapper.find(Input); - const small = wrapper.find('small'); + const formText = wrapper.find(FormText); 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(label.prop('labelClassName')).toContain('text-muted'); expect(input.prop('disabled')).toEqual(true); - expect(small).toHaveLength(1); + expect(formText).toHaveLength(1); }); it.each([ @@ -79,11 +81,11 @@ describe('', () => { it.each([[ undefined ], [ 0 ]])('shows expected children 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 formText = wrapper.find(FormText).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(formText.html()).toContain('Updates will be reflected in the UI as soon as they happen.'); expect(input.prop('value')).toEqual(''); }); diff --git a/test/settings/ShortUrlCreationSettings.test.tsx b/test/settings/ShortUrlCreationSettings.test.tsx index cbc57cd6..3f8bff7a 100644 --- a/test/settings/ShortUrlCreationSettings.test.tsx +++ b/test/settings/ShortUrlCreationSettings.test.tsx @@ -47,9 +47,9 @@ describe('', () => { }); it.each([ - [{ validateUrls: true }, 'Validate URL checkbox will be checked' ], - [{ validateUrls: false }, 'Validate URL checkbox will be unchecked' ], - [ undefined, 'Validate URL checkbox will be unchecked' ], + [{ validateUrls: true }, 'Validate URL checkbox will be checked' ], + [{ validateUrls: false }, 'Validate URL checkbox will be unchecked' ], + [ undefined, 'Validate URL checkbox will be unchecked' ], ])('shows expected helper text for URL validation', (shortUrlCreation, expectedText) => { const wrapper = createWrapper(shortUrlCreation); const validateUrlText = wrapper.find(FormText).first(); @@ -58,9 +58,9 @@ describe('', () => { }); it.each([ - [{ forwardQuery: true }, 'Forward query params on redirect checkbox will be checked' ], - [{ forwardQuery: false }, 'Forward query params on redirect checkbox will be unchecked' ], - [{}, 'Forward query params on redirect checkbox will be checked' ], + [{ forwardQuery: true }, 'Forward query params on redirect checkbox will be checked' ], + [{ forwardQuery: false }, 'Forward query params on redirect checkbox will be unchecked' ], + [{}, 'Forward query params on redirect checkbox will be checked' ], ])('shows expected helper text for query forwarding', (shortUrlCreation, expectedText) => { const wrapper = createWrapper({ validateUrls: true, ...shortUrlCreation }); const forwardQueryText = wrapper.find(FormText).at(1); diff --git a/test/settings/TagsSettings.test.tsx b/test/settings/TagsSettings.test.tsx index d6ae737b..574361e5 100644 --- a/test/settings/TagsSettings.test.tsx +++ b/test/settings/TagsSettings.test.tsx @@ -1,11 +1,12 @@ import { shallow, ShallowWrapper } from 'enzyme'; import { Mock } from 'ts-mockery'; -import { FormGroup } from 'reactstrap'; import { Settings, TagsMode, TagsSettings as TagsSettingsOptions } from '../../src/settings/reducers/settings'; import { TagsModeDropdown } from '../../src/tags/TagsModeDropdown'; import { TagsSettings } from '../../src/settings/TagsSettings'; import { OrderingDropdown } from '../../src/utils/OrderingDropdown'; import { TagsOrder } from '../../src/tags/data/TagsListChildrenProps'; +import { LabeledFormGroup } from '../../src/utils/forms/LabeledFormGroup'; +import { FormText } from '../../src/utils/forms/FormText'; describe('', () => { let wrapper: ShallowWrapper; @@ -21,7 +22,7 @@ describe('', () => { it('renders expected amount of groups', () => { const wrapper = createWrapper(); - const groups = wrapper.find(FormGroup); + const groups = wrapper.find(LabeledFormGroup); expect(groups).toHaveLength(2); }); @@ -34,10 +35,10 @@ describe('', () => { ])('shows expected tags displaying mode', (tags, expectedMode) => { const wrapper = createWrapper(tags); const dropdown = wrapper.find(TagsModeDropdown); - const small = wrapper.find('small'); + const formText = wrapper.find(FormText); expect(dropdown.prop('mode')).toEqual(expectedMode); - expect(small.html()).toContain(`Tags will be displayed as ${expectedMode}.`); + expect(formText.html()).toContain(`Tags will be displayed as ${expectedMode}.`); }); it.each([ diff --git a/test/settings/VisitsSettings.test.tsx b/test/settings/VisitsSettings.test.tsx index 243fe3b6..cc65dfde 100644 --- a/test/settings/VisitsSettings.test.tsx +++ b/test/settings/VisitsSettings.test.tsx @@ -4,6 +4,7 @@ import { Settings } from '../../src/settings/reducers/settings'; import { VisitsSettings } from '../../src/settings/VisitsSettings'; import { SimpleCard } from '../../src/utils/SimpleCard'; import { DateIntervalSelector } from '../../src/utils/dates/DateIntervalSelector'; +import { LabeledFormGroup } from '../../src/utils/forms/LabeledFormGroup'; describe('', () => { let wrapper: ShallowWrapper; @@ -21,7 +22,7 @@ describe('', () => { 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(LabeledFormGroup).prop('label')).toEqual('Default interval to load on visits sections:'); expect(wrapper.find(DateIntervalSelector)).toHaveLength(1); }); diff --git a/test/short-urls/helpers/QrCodeModal.test.tsx b/test/short-urls/helpers/QrCodeModal.test.tsx index 900e90e2..2b2a61f8 100644 --- a/test/short-urls/helpers/QrCodeModal.test.tsx +++ b/test/short-urls/helpers/QrCodeModal.test.tsx @@ -95,7 +95,7 @@ describe('', () => { const firstCol = wrapper.find(Row).find(FormGroup).first(); expect(dropdownsLength).toEqual(expectedAmountOfDropdowns); - expect(firstCol.prop('className')).toEqual(expectedRangeClass); + expect(firstCol.prop('className')).toEqual(`d-grid ${expectedRangeClass}`); }); it('saves the QR code image when clicking the Download button', () => { diff --git a/test/tags/helpers/EditTagModal.test.tsx b/test/tags/helpers/EditTagModal.test.tsx index 790e7284..85ddcf50 100644 --- a/test/tags/helpers/EditTagModal.test.tsx +++ b/test/tags/helpers/EditTagModal.test.tsx @@ -103,7 +103,7 @@ describe('', () => { expect(wrapper.find(Popover).prop('isOpen')).toEqual(false); (wrapper.find(Popover).prop('toggle') as Function)(); expect(wrapper.find(Popover).prop('isOpen')).toEqual(true); - wrapper.find('.input-group-prepend').simulate('click'); + wrapper.find('div').simulate('click'); expect(wrapper.find(Popover).prop('isOpen')).toEqual(false); }); }); diff --git a/test/visits/helpers/MapModal.test.tsx b/test/visits/helpers/MapModal.test.tsx index 8bab0a3a..99f3ae0e 100644 --- a/test/visits/helpers/MapModal.test.tsx +++ b/test/visits/helpers/MapModal.test.tsx @@ -38,7 +38,7 @@ describe('', () => { expect(modal.prop('toggle')).toEqual(toggle); expect(modal.prop('isOpen')).toEqual(isOpen); - expect(header.find('.close').prop('onClick')).toEqual(toggle); + expect(header.find('.btn-close').prop('onClick')).toEqual(toggle); expect(header.text()).toContain(title); });