diff --git a/src/tags/helpers/DeleteTagConfirmModal.js b/src/tags/helpers/DeleteTagConfirmModal.js index 4c5dadf8..460db160 100644 --- a/src/tags/helpers/DeleteTagConfirmModal.js +++ b/src/tags/helpers/DeleteTagConfirmModal.js @@ -13,13 +13,12 @@ export default class DeleteTagConfirmModal extends React.Component { tagDeleted: PropTypes.func, }; - doDelete = () => { + doDelete = async () => { const { tag, toggle, deleteTag } = this.props; - return deleteTag(tag).then(() => { - this.tagWasDeleted = true; - toggle(); - }); + await deleteTag(tag); + this.tagWasDeleted = true; + toggle(); }; handleOnClosed = () => { if (!this.tagWasDeleted) { diff --git a/test/short-urls/CreateShortUrl.test.js b/test/short-urls/CreateShortUrl.test.js index 0443369d..507e0f85 100644 --- a/test/short-urls/CreateShortUrl.test.js +++ b/test/short-urls/CreateShortUrl.test.js @@ -15,7 +15,7 @@ describe('', () => { const createShortUrl = sinon.spy(); beforeEach(() => { - const CreateShortUrl = createShortUrlsCreator(TagsSelector); + const CreateShortUrl = createShortUrlsCreator(TagsSelector, () => ''); wrapper = shallow( diff --git a/test/tags/helpers/DeleteTagConfirmModal.test.js b/test/tags/helpers/DeleteTagConfirmModal.test.js new file mode 100644 index 00000000..3c1edc88 --- /dev/null +++ b/test/tags/helpers/DeleteTagConfirmModal.test.js @@ -0,0 +1,87 @@ +import React from 'react'; +import { shallow } from 'enzyme'; +import * as sinon from 'sinon'; +import { Modal, ModalBody, ModalFooter } from 'reactstrap'; +import DeleteTagConfirmModal from '../../../src/tags/helpers/DeleteTagConfirmModal'; + +describe('', () => { + let wrapper; + const tag = 'nodejs'; + const deleteTag = sinon.spy(); + const tagDeleted = sinon.spy(); + const createWrapper = (tagDelete) => { + wrapper = shallow( + ''} + isOpen + deleteTag={deleteTag} + tagDeleted={tagDeleted} + tagDelete={tagDelete} + /> + ); + + return wrapper; + }; + + afterEach(() => { + wrapper && wrapper.unmount(); + deleteTag.resetHistory(); + tagDeleted.resetHistory(); + }); + + it('asks confirmation for provided tag to be deleted', () => { + wrapper = createWrapper({ error: false, deleting: false }); + const body = wrapper.find(ModalBody); + const footer = wrapper.find(ModalFooter); + const delBtn = footer.find('.btn-danger'); + + expect(body.html()).toContain(`Are you sure you want to delete tag ${tag}?`); + expect(delBtn.prop('disabled')).toEqual(false); + expect(delBtn.text()).toEqual('Delete tag'); + }); + + it('shows error message when deletion failed', () => { + wrapper = createWrapper({ error: true, deleting: false }); + const body = wrapper.find(ModalBody); + + expect(body.html()).toContain('Something went wrong while deleting the tag :('); + }); + + it('shows loading status while deleting', () => { + wrapper = createWrapper({ error: false, deleting: true }); + const footer = wrapper.find(ModalFooter); + const delBtn = footer.find('.btn-danger'); + + expect(delBtn.prop('disabled')).toEqual(true); + expect(delBtn.text()).toEqual('Deleting tag...'); + }); + + it('deletes tag modal when btn is clicked', () => { + wrapper = createWrapper({ error: false, deleting: true }); + const footer = wrapper.find(ModalFooter); + const delBtn = footer.find('.btn-danger'); + + delBtn.simulate('click'); + expect(deleteTag.calledOnce).toEqual(true); + expect(deleteTag.calledWith(tag)).toEqual(true); + }); + + it('does no further actions when modal is closed without deleting tag', () => { + wrapper = createWrapper({ error: false, deleting: false }); + const modal = wrapper.find(Modal); + + modal.simulate('closed'); + expect(tagDeleted.called).toEqual(false); + }); + + it('notifies tag to be deleted when modal is closed after deleting tag', () => { + wrapper = createWrapper({ error: false, deleting: false }); + const modal = wrapper.find(Modal); + + wrapper.instance().tagWasDeleted = true; + modal.simulate('closed'); + expect(tagDeleted.calledOnce).toEqual(true); + expect(tagDeleted.calledWith(tag)).toEqual(true); + }); +});