diff --git a/src/short-urls/helpers/ShortUrlsRowMenu.js b/src/short-urls/helpers/ShortUrlsRowMenu.js
index 7efc8ae2..dc5a3e50 100644
--- a/src/short-urls/helpers/ShortUrlsRowMenu.js
+++ b/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
-
+
Visit stats
@@ -67,31 +66,19 @@ const ShortUrlsRowMenu = (DeleteShortUrlModal, EditTagsModal) => class ShortUrls
Delete short URL
-
+
Preview
-
+
QR code
-
+
diff --git a/test/short-urls/helpers/ShortUrlsRowMenu.test.js b/test/short-urls/helpers/ShortUrlsRowMenu.test.js
new file mode 100644
index 00000000..6e73da0f
--- /dev/null
+++ b/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('', () => {
+ 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(
+
+ );
+ });
+
+ 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();
+ });
+ });
+});