forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-03-01 21:26:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added proper blurred background for modals

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

5
test/servers/DeleteServerModal.test.tsx
View File

@@ -1,9 +1,10 @@
import { shallow, ShallowWrapper } from 'enzyme';
import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
import { ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
import { History } from 'history';
import { Mock } from 'ts-mockery';
import DeleteServerModal from '../../src/servers/DeleteServerModal';
import { ServerWithId } from '../../src/servers/data';
import { BlurredModal } from '../../src/utils/BlurredModal';
describe('<DeleteServerModal />', () => {
let wrapper: ShallowWrapper;
@@ -27,7 +28,7 @@ describe('<DeleteServerModal />', () => {
afterEach(jest.clearAllMocks);
it('renders a modal window', () => {
expect(wrapper.find(Modal)).toHaveLength(1);
expect(wrapper.find(BlurredModal)).toHaveLength(1);
expect(wrapper.find(ModalHeader)).toHaveLength(1);
expect(wrapper.find(ModalBody)).toHaveLength(1);
expect(wrapper.find(ModalFooter)).toHaveLength(1);

2
test/short-urls/helpers/EditMetaModal.test.tsx
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 });

2
test/short-urls/helpers/EditShortUrlModal.test.tsx
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 });

4
test/short-urls/helpers/EditTagsModal.test.tsx
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();

5
test/short-urls/helpers/QrCodeModal.test.tsx
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([

5
test/tags/helpers/DeleteTagConfirmModal.test.tsx
View File

@@ -1,7 +1,8 @@
import { shallow, ShallowWrapper } from 'enzyme';
import { Modal, ModalBody, ModalFooter } from 'reactstrap';
import { ModalBody, ModalFooter } from 'reactstrap';
import DeleteTagConfirmModal from '../../../src/tags/helpers/DeleteTagConfirmModal';
import { TagDeletion } from '../../../src/tags/reducers/tagDelete';
import { BlurredModal } from '../../../src/utils/BlurredModal';
describe('<DeleteTagConfirmModal />', () => {
let wrapper: ShallowWrapper;
@@ -68,7 +69,7 @@ describe('<DeleteTagConfirmModal />', () => {
it('does no further actions when modal is closed without deleting tag', () => {
wrapper = createWrapper({ error: false, deleting: false });
const modal = wrapper.find(Modal);
const modal = wrapper.find(BlurredModal);
modal.simulate('closed');
expect(deleteTag).not.toHaveBeenCalled();

4
test/visits/helpers/MapModal.test.tsx
View File

@@ -1,8 +1,8 @@
import { shallow, ShallowWrapper } from 'enzyme';
import { Modal } from 'reactstrap';
import { Marker, Popup } from 'react-leaflet';
import MapModal from '../../../src/visits/helpers/MapModal';
import { CityStats } from '../../../src/visits/types';
import { BlurredModal } from '../../../src/utils/BlurredModal';
describe('<MapModal />', () => {
let wrapper: ShallowWrapper;
@@ -33,7 +33,7 @@ describe('<MapModal />', () => {
afterEach(() => wrapper.unmount());
it('renders modal with provided props', () => {
const modal = wrapper.find(Modal);
const modal = wrapper.find(BlurredModal);
const header = wrapper.find('.map-modal__modal-title');
expect(modal.prop('toggle')).toEqual(toggle);