Fixed tests after bootstrap 5 update

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': '<rootDir>/node_modules/reactstrap/dist/reactstrap.umd.js',
   },
   moduleFileExtensions: [ 'js', 'ts', 'tsx', 'json' ],
 };

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('<EditDomainRedirectsModal />', () => {
   });
 
   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('<EditDomainRedirectsModal />', () => {
   });
 
   it('saves expected values when form is submitted', () => {
-    const formGroups = wrapper.find(FormGroup);
+    const formGroups = wrapper.find('FormGroup');
 
     expect(editDomainRedirects).not.toHaveBeenCalled();
 

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('<ServerForm />', () => {
   let wrapper: ShallowWrapper;
@@ -14,7 +14,7 @@ describe('<ServerForm />', () => {
   afterEach(jest.resetAllMocks);
 
   it('renders components', () => {
-    expect(wrapper.find(FormGroup)).toHaveLength(3);
+    expect(wrapper.find(InputFormGroup)).toHaveLength(3);
     expect(wrapper.find('span')).toHaveLength(1);
   });
 

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('<RealTimeUpdatesSettings />', () => {
   const toggleRealTimeUpdates = jest.fn();
@@ -32,31 +34,31 @@ describe('<RealTimeUpdatesSettings />', () => {
   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('<RealTimeUpdatesSettings />', () => {
   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('');
   });
 

test/settings/ShortUrlCreationSettings.test.tsx

@@ -47,9 +47,9 @@ describe('<ShortUrlCreationSettings />', () => {
   });
 
   it.each([
-    [{ validateUrls: true }, 'Validate URL checkbox will be checked' ],
+    [{ validateUrls: true }, '<b>Validate URL</b> checkbox will be <b>checked</b>' ],
-    [{ validateUrls: false }, 'Validate URL checkbox will be unchecked' ],
+    [{ validateUrls: false }, '<b>Validate URL</b> checkbox will be <b>unchecked</b>' ],
-    [ undefined, 'Validate URL checkbox will be unchecked' ],
+    [ undefined, '<b>Validate URL</b> checkbox will be <b>unchecked</b>' ],
   ])('shows expected helper text for URL validation', (shortUrlCreation, expectedText) => {
     const wrapper = createWrapper(shortUrlCreation);
     const validateUrlText = wrapper.find(FormText).first();
@@ -58,9 +58,9 @@ describe('<ShortUrlCreationSettings />', () => {
   });
 
   it.each([
-    [{ forwardQuery: true }, 'Forward query params on redirect checkbox will be checked' ],
+    [{ forwardQuery: true }, '<b>Forward query params on redirect</b> checkbox will be <b>checked</b>' ],
-    [{ forwardQuery: false }, 'Forward query params on redirect checkbox will be unchecked' ],
+    [{ forwardQuery: false }, '<b>Forward query params on redirect</b> checkbox will be <b>unchecked</b>' ],
-    [{}, 'Forward query params on redirect checkbox will be checked' ],
+    [{}, '<b>Forward query params on redirect</b> checkbox will be <b>checked</b>' ],
   ])('shows expected helper text for query forwarding', (shortUrlCreation, expectedText) => {
     const wrapper = createWrapper({ validateUrls: true, ...shortUrlCreation });
     const forwardQueryText = wrapper.find(FormText).at(1);

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('<TagsSettings />', () => {
   let wrapper: ShallowWrapper;
@@ -21,7 +22,7 @@ describe('<TagsSettings />', () => {
 
   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('<TagsSettings />', () => {
   ])('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 <b>${expectedMode}</b>.`);
+    expect(formText.html()).toContain(`Tags will be displayed as <b>${expectedMode}</b>.`);
   });
 
   it.each([

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('<VisitsSettings />', () => {
   let wrapper: ShallowWrapper;
@@ -21,7 +22,7 @@ describe('<VisitsSettings />', () => {
     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);
   });
 

test/short-urls/helpers/QrCodeModal.test.tsx

@@ -95,7 +95,7 @@ describe('<QrCodeModal />', () => {
     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', () => {

test/tags/helpers/EditTagModal.test.tsx

@@ -103,7 +103,7 @@ describe('<EditTagModal />', () => {
     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);
   });
 });

test/visits/helpers/MapModal.test.tsx

@@ -38,7 +38,7 @@ describe('<MapModal />', () => {
 
     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);
   });