diff --git a/src/short-urls/helpers/EditTagsModal.js b/src/short-urls/helpers/EditTagsModal.js
index d98214ec..f5d34dd2 100644
--- a/src/short-urls/helpers/EditTagsModal.js
+++ b/src/short-urls/helpers/EditTagsModal.js
@@ -1,8 +1,8 @@
import React from 'react';
import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
import PropTypes from 'prop-types';
-import { shortUrlTagsType } from '../reducers/shortUrlTags';
import ExternalLink from '../../utils/ExternalLink';
+import { shortUrlTagsType } from '../reducers/shortUrlTags';
import { shortUrlType } from '../reducers/shortUrlsList';
const EditTagsModal = (TagsSelector) => class EditTagsModal extends React.Component {
diff --git a/test/short-urls/helpers/EditTagsModal.test.js b/test/short-urls/helpers/EditTagsModal.test.js
new file mode 100644
index 00000000..3c307eba
--- /dev/null
+++ b/test/short-urls/helpers/EditTagsModal.test.js
@@ -0,0 +1,151 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import * as sinon from 'sinon';
+import { Modal } from 'reactstrap';
+import createEditTagsModal from '../../../src/short-urls/helpers/EditTagsModal';
+
+describe('', () => {
+ let wrapper;
+ const shortCode = 'abc123';
+ const TagsSelector = () => '';
+ const editShortUrlTags = sinon.fake.resolves();
+ const shortUrlTagsEdited = sinon.fake();
+ const resetShortUrlsTags = sinon.fake();
+ const toggle = sinon.fake();
+ const createWrapper = (shortUrlTags) => {
+ const EditTagsModal = createEditTagsModal(TagsSelector);
+
+ wrapper = shallow(
+
+ );
+
+ return wrapper;
+ };
+
+ afterEach(() => {
+ wrapper && wrapper.unmount();
+ editShortUrlTags.resetHistory();
+ shortUrlTagsEdited.resetHistory();
+ resetShortUrlsTags.resetHistory();
+ toggle.resetHistory();
+ });
+
+ it('resets tags when component is mounted', () => {
+ createWrapper({
+ shortCode,
+ tags: [],
+ saving: false,
+ error: false,
+ });
+
+ expect(resetShortUrlsTags.callCount).toEqual(1);
+ });
+
+ it('renders tags selector and save button when loaded', () => {
+ const wrapper = createWrapper({
+ shortCode,
+ tags: [],
+ saving: false,
+ error: false,
+ });
+ const saveBtn = wrapper.find('.btn-primary');
+
+ expect(wrapper.find(TagsSelector)).toHaveLength(1);
+ expect(saveBtn.prop('disabled')).toBe(false);
+ expect(saveBtn.text()).toEqual('Save tags');
+ });
+
+ it('disables save button when saving is in progress', () => {
+ const wrapper = createWrapper({
+ shortCode,
+ tags: [],
+ saving: true,
+ error: false,
+ });
+ const saveBtn = wrapper.find('.btn-primary');
+
+ expect(saveBtn.prop('disabled')).toBe(true);
+ expect(saveBtn.text()).toEqual('Saving tags...');
+ });
+
+ it('saves tags when save button is clicked', (done) => {
+ const wrapper = createWrapper({
+ shortCode,
+ tags: [],
+ saving: true,
+ error: false,
+ });
+ const saveBtn = wrapper.find('.btn-primary');
+
+ saveBtn.simulate('click');
+
+ expect(editShortUrlTags.callCount).toEqual(1);
+ expect(editShortUrlTags.getCall(0).args).toEqual([ shortCode, []]);
+
+ // Wrap this expect in a setImmediate since it is called as a result of an inner promise
+ setImmediate(() => {
+ expect(toggle.callCount).toEqual(1);
+ done();
+ });
+ });
+
+ it('does not notify tags have been edited when window is closed without saving', () => {
+ const wrapper = createWrapper({
+ shortCode,
+ tags: [],
+ saving: false,
+ error: false,
+ });
+ const modal = wrapper.find(Modal);
+
+ modal.simulate('closed');
+ expect(shortUrlTagsEdited.callCount).toEqual(0);
+ });
+
+ it('notifies tags have been edited when window is closed after saving', (done) => {
+ const wrapper = createWrapper({
+ shortCode,
+ tags: [],
+ saving: true,
+ error: false,
+ });
+ const saveBtn = wrapper.find('.btn-primary');
+ const modal = wrapper.find(Modal);
+
+ saveBtn.simulate('click');
+
+ // Wrap this expect in a setImmediate since it is called as a result of an inner promise
+ setImmediate(() => {
+ modal.simulate('closed');
+ expect(shortUrlTagsEdited.callCount).toEqual(1);
+ expect(shortUrlTagsEdited.getCall(0).args).toEqual([ shortCode, []]);
+ done();
+ });
+ });
+
+ it('toggles modal when cancel button is clicked', () => {
+ const wrapper = createWrapper({
+ shortCode,
+ tags: [],
+ saving: true,
+ error: false,
+ });
+ const cancelBtn = wrapper.find('.btn-link');
+
+ cancelBtn.simulate('click');
+ expect(toggle.callCount).toEqual(1);
+ });
+});