Added proper blurred background for modals

This commit is contained in:
Alejandro Celaya
2021-02-20 13:22:45 +01:00
committed by Alejandro Celaya
parent e7466ced18
commit f97ef8df83
20 changed files with 79 additions and 53 deletions

View File

@@ -71,7 +71,7 @@ describe('<EditMetaModal />', () => {
it.each([
[ '.btn-link', 'onClick' ],
[ 'Modal', 'toggle' ],
[ 'BlurredModal', 'toggle' ],
[ 'ModalHeader', 'toggle' ],
])('resets meta when modal is toggled in any way', (componentToFind, propToCall) => {
const wrapper = createWrapper({ saving: false, error: false });

View File

@@ -67,7 +67,7 @@ describe('<EditShortUrlModal />', () => {
it.each([
[ '[color="link"]', 'onClick' ],
[ 'Modal', 'toggle' ],
[ 'BlurredModal', 'toggle' ],
[ 'ModalHeader', 'toggle' ],
])('toggles modal with different mechanisms', (componentToFind, propToCall) => {
const wrapper = createWrapper({}, { saving: false, error: false });

View File

@@ -1,10 +1,10 @@
import { shallow, ShallowWrapper } from 'enzyme';
import { Modal } from 'reactstrap';
import { Mock } from 'ts-mockery';
import createEditTagsModal from '../../../src/short-urls/helpers/EditTagsModal';
import { ShortUrl } from '../../../src/short-urls/data';
import { ShortUrlTags } from '../../../src/short-urls/reducers/shortUrlTags';
import { OptionalString } from '../../../src/utils/utils';
import { BlurredModal } from '../../../src/utils/BlurredModal';
describe('<EditTagsModal />', () => {
let wrapper: ShallowWrapper;
@@ -98,7 +98,7 @@ describe('<EditTagsModal />', () => {
saving: false,
error: false,
});
const modal = wrapper.find(Modal);
const modal = wrapper.find(BlurredModal);
modal.simulate('closed');
expect(editShortUrlTags).not.toHaveBeenCalled();

View File

@@ -1,12 +1,13 @@
import { shallow, ShallowWrapper } from 'enzyme';
import { ExternalLink } from 'react-external-link';
import { Modal, ModalBody, ModalHeader, Row } from 'reactstrap';
import { ModalBody, ModalHeader, Row } from 'reactstrap';
import { Mock } from 'ts-mockery';
import QrCodeModal from '../../../src/short-urls/helpers/QrCodeModal';
import { ShortUrl } from '../../../src/short-urls/data';
import { ReachableServer } from '../../../src/servers/data';
import { CopyToClipboardIcon } from '../../../src/utils/CopyToClipboardIcon';
import { DropdownBtn } from '../../../src/utils/DropdownBtn';
import { BlurredModal } from '../../../src/utils/BlurredModal';
describe('<QrCodeModal />', () => {
let wrapper: ShallowWrapper;
@@ -80,7 +81,7 @@ describe('<QrCodeModal />', () => {
expect(wrapper.find('.mt-2').text()).toEqual(`${size}x${size}`);
expect(wrapper.find('label').at(0).text()).toEqual(`Size: ${size}px`);
expect(wrapper.find('label').at(1).text()).toEqual(`Margin: ${margin}px`);
expect(wrapper.find(Modal).prop('size')).toEqual(modalSize);
expect(wrapper.find(BlurredModal).prop('size')).toEqual(modalSize);
});
it.each([