Improved QR code modal, to allow selecting size, format and copy URL

test/short-urls/helpers/QrCodeModal.test.tsx

@@ -1,10 +1,12 @@
 import { shallow, ShallowWrapper } from 'enzyme';
 import { ExternalLink } from 'react-external-link';
-import { ModalHeader } from 'reactstrap';
+import { Modal, 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';
 
 describe('<QrCodeModal />', () => {
   let wrapper: ShallowWrapper;
@@ -34,11 +36,46 @@ describe('<QrCodeModal />', () => {
     expect(externalLink.prop('href')).toEqual(shortUrl);
   });
 
-  it('displays an image with the QR code of the URL', () => {
-    const wrapper = createWrapper();
-    const img = wrapper.find('img');
+  it.each([
+    [ '2.3.0', '/qr-code/300' ],
+    [ '2.4.0', '/qr-code/300?format=png' ],
+    [ '2.5.0', '/qr-code?size=300&format=png' ],
+  ])('displays an image with the QR code of the URL', (version, expectedUrl) => {
+    const wrapper = createWrapper(version);
+    const modalBody = wrapper.find(ModalBody);
+    const img = modalBody.find('img');
+    const linkInBody = modalBody.find(ExternalLink);
+    const copyToClipboard = modalBody.find(CopyToClipboardIcon);
 
-    expect(img).toHaveLength(1);
-    expect(img.prop('src')).toEqual(`${shortUrl}/qr-code`);
+    expect(img.prop('src')).toEqual(`${shortUrl}${expectedUrl}`);
+    expect(linkInBody.prop('href')).toEqual(`${shortUrl}${expectedUrl}`);
+    expect(copyToClipboard.prop('text')).toEqual(`${shortUrl}${expectedUrl}`);
+  });
+
+  it.each([
+    [ 530, 'lg' ],
+    [ 200, undefined ],
+    [ 830, 'xl' ],
+  ])('renders expected size', (size, modalSize) => {
+    const wrapper = createWrapper();
+    const sizeInput = wrapper.find('.form-control-range');
+
+    sizeInput.simulate('change', { target: { value: `${size}` } });
+
+    expect(wrapper.find('.mt-2').text()).toEqual(`${size}x${size}`);
+    expect(wrapper.find('label').text()).toEqual(`Size: ${size}px`);
+    expect(wrapper.find(Modal).prop('size')).toEqual(modalSize);
+  });
+
+  it.each([
+    [ '2.3.0', 0, 'col-12' ],
+    [ '2.4.0', 1, 'col-md-6' ],
+  ])('shows expected components based on server version', (version, expectedAmountOfDropdowns, expectedRangeClass) => {
+    const wrapper = createWrapper(version);
+    const dropdown = wrapper.find(DropdownBtn);
+    const firstCol = wrapper.find(Row).find('div').first();
+
+    expect(dropdown).toHaveLength(expectedAmountOfDropdowns);
+    expect(firstCol.prop('className')).toEqual(expectedRangeClass);
   });
 });

test/short-urls/helpers/ShortUrlsRow.test.tsx

@@ -4,13 +4,13 @@ import Moment from 'react-moment';
 import { assoc, toString } from 'ramda';
 import { Mock } from 'ts-mockery';
 import { ExternalLink } from 'react-external-link';
-import CopyToClipboard from 'react-copy-to-clipboard';
 import createShortUrlsRow from '../../../src/short-urls/helpers/ShortUrlsRow';
 import Tag from '../../../src/tags/helpers/Tag';
 import ColorGenerator from '../../../src/utils/services/ColorGenerator';
 import { StateFlagTimeout } from '../../../src/utils/helpers/hooks';
 import { ShortUrl } from '../../../src/short-urls/data';
 import { ReachableServer } from '../../../src/servers/data';
+import { CopyToClipboardIcon } from '../../../src/utils/CopyToClipboardIcon';
 
 describe('<ShortUrlsRow />', () => {
   let wrapper: ShallowWrapper;
@@ -98,7 +98,7 @@ describe('<ShortUrlsRow />', () => {
 
   it('updates state when copied to clipboard', () => {
     const col = wrapper.find('td').at(1);
-    const menu = col.find(CopyToClipboard);
+    const menu = col.find(CopyToClipboardIcon);
 
     expect(menu).toHaveLength(1);
     expect(stateFlagTimeout).not.toHaveBeenCalled();

test/short-urls/helpers/ShortUrlsRowMenu.test.tsx

@@ -2,7 +2,6 @@ import { shallow, ShallowWrapper } from 'enzyme';
 import { ButtonDropdown, DropdownItem } from 'reactstrap';
 import { Mock } from 'ts-mockery';
 import createShortUrlsRowMenu from '../../../src/short-urls/helpers/ShortUrlsRowMenu';
-import QrCodeModal from '../../../src/short-urls/helpers/QrCodeModal';
 import { ReachableServer } from '../../../src/servers/data';
 import { ShortUrl } from '../../../src/short-urls/data';
 
@@ -12,6 +11,7 @@ describe('<ShortUrlsRowMenu />', () => {
   const EditTagsModal = () => null;
   const EditMetaModal = () => null;
   const EditShortUrlModal = () => null;
+  const QrCodeModal = () => null;
   const selectedServer = Mock.of<ReachableServer>({ id: 'abc123' });
   const shortUrl = Mock.of<ShortUrl>({
     shortCode: 'abc123',
@@ -23,6 +23,7 @@ describe('<ShortUrlsRowMenu />', () => {
       EditTagsModal,
       EditMetaModal,
       EditShortUrlModal,
+      QrCodeModal,
       () => null,
     );