mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-23 09:30:31 +03:00
Code Issues Projects Releases Packages Wiki Activity

Fixed tests after bootstrap 5 update

Browse source
This commit is contained in:
Alejandro Celaya 2022-03-07 16:27:25 +01:00
parent 6346f82a0a
commit dcfb5ab054
10 changed files with 35 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
jest.config.js
View file

@ -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' ],
};

6
test/domains/helpers/EditDomainRedirectsModal.test.tsx
View file

@ -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();

4
test/servers/helpers/ServerForm.test.tsx
View file

@ -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);
});

22
test/settings/RealTimeUpdatesSettings.test.tsx
View file

@ -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('');
});

12
test/settings/ShortUrlCreationSettings.test.tsx
View file

@ -47,9 +47,9 @@ describe('<ShortUrlCreationSettings />', () => {
});
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 }, '<b>Validate URL</b> checkbox will be <b>checked</b>' ],
[{ validateUrls: false }, '<b>Validate URL</b> checkbox will be <b>unchecked</b>' ],
[ 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: false }, 'Forward query params on redirect checkbox will be unchecked' ],
[{}, '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 }, '<b>Forward query params on redirect</b> checkbox will be <b>unchecked</b>' ],
[{}, '<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);

9
test/settings/TagsSettings.test.tsx
View file

@ -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([

3
test/settings/VisitsSettings.test.tsx
View file

@ -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);
});

2
test/short-urls/helpers/QrCodeModal.test.tsx
View file

@ -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', () => {

2
test/tags/helpers/EditTagModal.test.tsx
View file

@ -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);
});
});

2
test/visits/helpers/MapModal.test.tsx
View file

@ -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);
});