diff --git a/src/short-urls/helpers/ShortUrlsRowMenu.js b/src/short-urls/helpers/ShortUrlsRowMenu.js index 19c7fea0..7dd6e07d 100644 --- a/src/short-urls/helpers/ShortUrlsRowMenu.js +++ b/src/short-urls/helpers/ShortUrlsRowMenu.js @@ -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 - -  Preview - - + {showPreviewBtn && ( + + +  Preview + + + + )}  QR code - + {showPreviewBtn && } diff --git a/test/short-urls/helpers/ShortUrlsRowMenu.test.js b/test/short-urls/helpers/ShortUrlsRowMenu.test.js index a17744d2..59900bfb 100644 --- a/test/short-urls/helpers/ShortUrlsRowMenu.test.js +++ b/test/short-urls/helpers/ShortUrlsRowMenu.test.js @@ -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('', () => { shortCode: 'abc123', shortUrl: 'https://doma.in/abc123', }; - - beforeEach(() => { + const createWrapper = (serverVersion = '1.21.1') => { const ShortUrlsRowMenu = createShortUrlsRowMenu(DeleteShortUrlModal, EditTagsModal); wrapper = shallow( - + ); - }); - 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('', () => { 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('', () => { 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('', () => { }); it('toggles dropdown state when toggling dropdown', (done) => { + const wrapper = createWrapper(); const dropdown = wrapper.find(ButtonDropdown); expect(wrapper.state('isOpen')).toEqual(false);