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); + }); +});