mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2024-12-23 09:30:31 +03:00
Ensured preview menu item is hidden when consuming Shlink 2
This commit is contained in:
parent
0f51bf95e3
commit
de41f50945
2 changed files with 36 additions and 13 deletions
|
@ -12,7 +12,9 @@ import { CopyToClipboard } from 'react-copy-to-clipboard';
|
|||
import { Link } from 'react-router-dom';
|
||||
import { ButtonDropdown, DropdownItem, DropdownMenu, DropdownToggle } from 'reactstrap';
|
||||
import PropTypes from 'prop-types';
|
||||
import { isEmpty } from 'ramda';
|
||||
import { serverType } from '../../servers/prop-types';
|
||||
import { compareVersions } from '../../utils/utils';
|
||||
import { shortUrlType } from '../reducers/shortUrlsList';
|
||||
import PreviewModal from './PreviewModal';
|
||||
import QrCodeModal from './QrCodeModal';
|
||||
|
@ -37,6 +39,8 @@ const ShortUrlsRowMenu = (DeleteShortUrlModal, EditTagsModal) => class ShortUrls
|
|||
render() {
|
||||
const { onCopyToClipboard, shortUrl, selectedServer } = this.props;
|
||||
const completeShortUrl = shortUrl && shortUrl.shortUrl ? shortUrl.shortUrl : '';
|
||||
const currentServerVersion = this.props.selectedServer ? this.props.selectedServer.version : '';
|
||||
const showPreviewBtn = !isEmpty(currentServerVersion) && compareVersions(currentServerVersion, '<', '2.0.0');
|
||||
const toggleModal = (prop) => () => this.setState((prevState) => ({ [prop]: !prevState[prop] }));
|
||||
const toggleQrCode = toggleModal('isQrModalOpen');
|
||||
const togglePreview = toggleModal('isPreviewModalOpen');
|
||||
|
@ -70,17 +74,21 @@ const ShortUrlsRowMenu = (DeleteShortUrlModal, EditTagsModal) => class ShortUrls
|
|||
|
||||
<DropdownItem divider />
|
||||
|
||||
{showPreviewBtn && (
|
||||
<React.Fragment>
|
||||
<DropdownItem onClick={togglePreview}>
|
||||
<FontAwesomeIcon icon={pictureIcon} /> Preview
|
||||
</DropdownItem>
|
||||
<PreviewModal url={completeShortUrl} isOpen={this.state.isPreviewModalOpen} toggle={togglePreview} />
|
||||
</React.Fragment>
|
||||
)}
|
||||
|
||||
<DropdownItem onClick={toggleQrCode}>
|
||||
<FontAwesomeIcon icon={qrIcon} /> QR code
|
||||
</DropdownItem>
|
||||
<QrCodeModal url={completeShortUrl} isOpen={this.state.isQrModalOpen} toggle={toggleQrCode} />
|
||||
|
||||
<DropdownItem divider />
|
||||
{showPreviewBtn && <DropdownItem divider />}
|
||||
|
||||
<CopyToClipboard text={completeShortUrl} onCopy={onCopyToClipboard}>
|
||||
<DropdownItem>
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
import { ButtonDropdown, DropdownItem } from 'reactstrap';
|
||||
import each from 'jest-each';
|
||||
import createShortUrlsRowMenu from '../../../src/short-urls/helpers/ShortUrlsRowMenu';
|
||||
import PreviewModal from '../../../src/short-urls/helpers/PreviewModal';
|
||||
import QrCodeModal from '../../../src/short-urls/helpers/QrCodeModal';
|
||||
|
@ -15,18 +16,24 @@ describe('<ShortUrlsRowMenu />', () => {
|
|||
shortCode: 'abc123',
|
||||
shortUrl: 'https://doma.in/abc123',
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
const createWrapper = (serverVersion = '1.21.1') => {
|
||||
const ShortUrlsRowMenu = createShortUrlsRowMenu(DeleteShortUrlModal, EditTagsModal);
|
||||
|
||||
wrapper = shallow(
|
||||
<ShortUrlsRowMenu selectedServer={selectedServer} shortUrl={shortUrl} onCopyToClipboard={onCopyToClipboard} />
|
||||
<ShortUrlsRowMenu
|
||||
selectedServer={{ ...selectedServer, version: serverVersion }}
|
||||
shortUrl={shortUrl}
|
||||
onCopyToClipboard={onCopyToClipboard}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
afterEach(() => wrapper.unmount());
|
||||
return wrapper;
|
||||
};
|
||||
|
||||
afterEach(() => wrapper && wrapper.unmount());
|
||||
|
||||
it('renders modal windows', () => {
|
||||
const wrapper = createWrapper();
|
||||
const deleteShortUrlModal = wrapper.find(DeleteShortUrlModal);
|
||||
const editTagsModal = wrapper.find(EditTagsModal);
|
||||
const previewModal = wrapper.find(PreviewModal);
|
||||
|
@ -38,10 +45,16 @@ describe('<ShortUrlsRowMenu />', () => {
|
|||
expect(qrCodeModal).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('renders correct amount of menu items', () => {
|
||||
each([
|
||||
[ '1.20.3', 6, 2 ],
|
||||
[ '1.21.0', 6, 2 ],
|
||||
[ '1.21.1', 6, 2 ],
|
||||
[ '2.0.0', 5, 1 ],
|
||||
[ '2.0.1', 5, 1 ],
|
||||
[ '2.1.0', 5, 1 ],
|
||||
]).it('renders correct amount of menu items depending on the version', (version, expectedNonDividerItems, expectedDividerItems) => {
|
||||
const wrapper = createWrapper(version);
|
||||
const items = wrapper.find(DropdownItem);
|
||||
const expectedNonDividerItems = 6;
|
||||
const expectedDividerItems = 2;
|
||||
|
||||
expect(items).toHaveLength(expectedNonDividerItems + expectedDividerItems);
|
||||
expect(items.find('[divider]')).toHaveLength(expectedDividerItems);
|
||||
|
@ -49,6 +62,7 @@ describe('<ShortUrlsRowMenu />', () => {
|
|||
|
||||
describe('toggles state when toggling modal windows', () => {
|
||||
const assert = (modalComponent, stateProp, done) => {
|
||||
const wrapper = createWrapper();
|
||||
const modal = wrapper.find(modalComponent);
|
||||
|
||||
expect(wrapper.state(stateProp)).toEqual(false);
|
||||
|
@ -66,6 +80,7 @@ describe('<ShortUrlsRowMenu />', () => {
|
|||
});
|
||||
|
||||
it('toggles dropdown state when toggling dropdown', (done) => {
|
||||
const wrapper = createWrapper();
|
||||
const dropdown = wrapper.find(ButtonDropdown);
|
||||
|
||||
expect(wrapper.state('isOpen')).toEqual(false);
|
||||
|
|
Loading…
Reference in a new issue