Created ShortUrlsRowMenu test

src/short-urls/helpers/ShortUrlsRowMenu.js

@@ -28,19 +28,18 @@ const ShortUrlsRowMenu = (DeleteShortUrlModal, EditTagsModal) => class ShortUrls
   state = {
     isOpen: false,
     isQrModalOpen: false,
-    isPreviewOpen: false,
+    isPreviewModalOpen: false,
     isTagsModalOpen: false,
     isDeleteModalOpen: false,
   };
   toggle = () => this.setState(({ isOpen }) => ({ isOpen: !isOpen }));
 
   render() {
-    const { onCopyToClipboard, selectedServer, shortUrl } = this.props;
+    const { onCopyToClipboard, shortUrl, selectedServer: { id } } = this.props;
     const completeShortUrl = shortUrl && shortUrl.shortUrl ? shortUrl.shortUrl : '';
-    const serverId = selectedServer ? selectedServer.id : '';
     const toggleModal = (prop) => () => this.setState((prevState) => ({ [prop]: !prevState[prop] }));
     const toggleQrCode = toggleModal('isQrModalOpen');
-    const togglePreview = toggleModal('isPreviewOpen');
+    const togglePreview = toggleModal('isPreviewModalOpen');
     const toggleTags = toggleModal('isTagsModalOpen');
     const toggleDelete = toggleModal('isDeleteModalOpen');
 
@@ -50,7 +49,7 @@ const ShortUrlsRowMenu = (DeleteShortUrlModal, EditTagsModal) => class ShortUrls
           &nbsp;<FontAwesomeIcon icon={menuIcon} />&nbsp;
         </DropdownToggle>
         <DropdownMenu right>
-          <DropdownItem tag={Link} to={`/server/${serverId}/short-code/${shortUrl.shortCode}/visits`}>
+          <DropdownItem tag={Link} to={`/server/${id}/short-code/${shortUrl.shortCode}/visits`}>
             <FontAwesomeIcon icon={pieChartIcon} /> &nbsp;Visit stats
           </DropdownItem>
 
@@ -67,31 +66,19 @@ const ShortUrlsRowMenu = (DeleteShortUrlModal, EditTagsModal) => class ShortUrls
           <DropdownItem className="short-urls-row-menu__dropdown-item--danger" onClick={toggleDelete}>
             <FontAwesomeIcon icon={deleteIcon} /> &nbsp;Delete short URL
           </DropdownItem>
-          <DeleteShortUrlModal
+          <DeleteShortUrlModal shortUrl={shortUrl} isOpen={this.state.isDeleteModalOpen} toggle={toggleDelete} />
-            shortUrl={shortUrl}
-            isOpen={this.state.isDeleteModalOpen}
-            toggle={toggleDelete}
-          />
 
           <DropdownItem divider />
 
           <DropdownItem onClick={togglePreview}>
             <FontAwesomeIcon icon={pictureIcon} /> &nbsp;Preview
           </DropdownItem>
-          <PreviewModal
+          <PreviewModal url={completeShortUrl} isOpen={this.state.isPreviewModalOpen} toggle={togglePreview} />
-            url={completeShortUrl}
-            isOpen={this.state.isPreviewOpen}
-            toggle={togglePreview}
-          />
 
           <DropdownItem onClick={toggleQrCode}>
             <FontAwesomeIcon icon={qrIcon} /> &nbsp;QR code
           </DropdownItem>
-          <QrCodeModal
+          <QrCodeModal url={completeShortUrl} isOpen={this.state.isQrModalOpen} toggle={toggleQrCode} />
-            url={completeShortUrl}
-            isOpen={this.state.isQrModalOpen}
-            toggle={toggleQrCode}
-          />
 
           <DropdownItem divider />
 

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

@@ -0,0 +1,79 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import * as sinon from 'sinon';
+import { ButtonDropdown, DropdownItem } from 'reactstrap';
+import createShortUrlsRowMenu from '../../../src/short-urls/helpers/ShortUrlsRowMenu';
+import PreviewModal from '../../../src/short-urls/helpers/PreviewModal';
+import QrCodeModal from '../../../src/short-urls/helpers/QrCodeModal';
+
+describe('<ShortUrlsRowMenu />', () => {
+  let wrapper;
+  const DeleteShortUrlModal = () => '';
+  const EditTagsModal = () => '';
+  const onCopyToClipboard = sinon.spy();
+  const selectedServer = { id: 'abc123' };
+  const shortUrl = {
+    shortCode: 'abc123',
+    shortUrl: 'https://doma.in/abc123',
+  };
+
+  beforeEach(() => {
+    const ShortUrlsRowMenu = createShortUrlsRowMenu(DeleteShortUrlModal, EditTagsModal);
+
+    wrapper = shallow(
+      <ShortUrlsRowMenu selectedServer={selectedServer} shortUrl={shortUrl} onCopyToClipboard={onCopyToClipboard} />
+    );
+  });
+
+  afterEach(() => wrapper.unmount());
+
+  it('renders modal windows', () => {
+    const deleteShortUrlModal = wrapper.find(DeleteShortUrlModal);
+    const editTagsModal = wrapper.find(EditTagsModal);
+    const previewModal = wrapper.find(PreviewModal);
+    const qrCodeModal = wrapper.find(QrCodeModal);
+
+    expect(deleteShortUrlModal).toHaveLength(1);
+    expect(editTagsModal).toHaveLength(1);
+    expect(previewModal).toHaveLength(1);
+    expect(qrCodeModal).toHaveLength(1);
+  });
+
+  it('renders correct amount of menu items', () => {
+    const items = wrapper.find(DropdownItem);
+    const expectedNonDividerItems = 6;
+    const expectedDividerItems = 2;
+
+    expect(items).toHaveLength(expectedNonDividerItems + expectedDividerItems);
+    expect(items.find('[divider]')).toHaveLength(expectedDividerItems);
+  });
+
+  describe('toggles state when toggling modal windows', () => {
+    const assert = (modalComponent, stateProp, done) => {
+      const modal = wrapper.find(modalComponent);
+
+      expect(wrapper.state(stateProp)).toEqual(false);
+      modal.prop('toggle')();
+      setImmediate(() => {
+        expect(wrapper.state(stateProp)).toEqual(true);
+        done();
+      });
+    };
+
+    it('DeleteShortUrlModal', (done) => assert(DeleteShortUrlModal, 'isDeleteModalOpen', done));
+    it('EditTagsModal', (done) => assert(EditTagsModal, 'isTagsModalOpen', done));
+    it('PreviewModal', (done) => assert(PreviewModal, 'isPreviewModalOpen', done));
+    it('QrCodeModal', (done) => assert(QrCodeModal, 'isQrModalOpen', done));
+  });
+
+  it('toggles dropdown state when toggling dropdown', (done) => {
+    const dropdown = wrapper.find(ButtonDropdown);
+
+    expect(wrapper.state('isOpen')).toEqual(false);
+    dropdown.prop('toggle')();
+    setImmediate(() => {
+      expect(wrapper.state('isOpen')).toEqual(true);
+      done();
+    });
+  });
+});