Created DeleteShortUrlModal test

src/short-urls/helpers/DeleteShortUrlModal.js

@@ -47,6 +47,8 @@ export class DeleteShortUrlModalComponent extends Component {
   render() {
     const { shortUrl, toggle, isOpen, shortUrlDeletion } = this.props;
     const THRESHOLD_REACHED = 'INVALID_SHORTCODE_DELETION';
+    const hasThresholdError = shortUrlDeletion.error && shortUrlDeletion.errorData.error === THRESHOLD_REACHED;
+    const hasErrorOtherThanThreshold = shortUrlDeletion.error && shortUrlDeletion.errorData.error !== THRESHOLD_REACHED;
 
     return (
       <Modal isOpen={isOpen} toggle={toggle} centered>
@@ -66,12 +68,12 @@ export class DeleteShortUrlModalComponent extends Component {
               onChange={(e) => this.setState({ inputValue: e.target.value })}
             />
 
-            {shortUrlDeletion.error && shortUrlDeletion.errorData.error === THRESHOLD_REACHED && (
+            {hasThresholdError && (
               <div className="p-2 mt-2 bg-warning text-center">
                 This short URL has received too many visits and therefore, it cannot be deleted
               </div>
             )}
-            {shortUrlDeletion.error && shortUrlDeletion.errorData.error !== THRESHOLD_REACHED && (
+            {hasErrorOtherThanThreshold && (
               <div className="p-2 mt-2 bg-danger text-white text-center">
                 Something went wrong while deleting the URL :(
               </div>

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

@@ -0,0 +1,115 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { identity } from 'ramda';
+import * as sinon from 'sinon';
+import { DeleteShortUrlModalComponent as DeleteShortUrlModal } from '../../../src/short-urls/helpers/DeleteShortUrlModal';
+
+describe('<DeleteShortUrlModal />', () => {
+  let wrapper;
+  const shortUrl = {
+    tags: [],
+    shortCode: 'abc123',
+    originalUrl: 'https://long-domain.com/foo/bar',
+  };
+  const deleteShortUrl = sinon.fake.returns(Promise.resolve());
+  const createWrapper = (shortUrlDeletion) => {
+    wrapper = shallow(
+      <DeleteShortUrlModal
+        isOpen
+        shortUrl={shortUrl}
+        shortUrlDeletion={shortUrlDeletion}
+        toggle={identity}
+        deleteShortUrl={deleteShortUrl}
+        resetDeleteShortUrl={identity}
+        shortUrlDeleted={identity}
+      />
+    );
+
+    return wrapper;
+  };
+
+  afterEach(() => {
+    wrapper && wrapper.unmount();
+    deleteShortUrl.resetHistory();
+  });
+
+  it('shows threshold error message when threshold error occurs', () => {
+    const wrapper = createWrapper({
+      loading: false,
+      error: true,
+      shortCode: 'abc123',
+      errorData: { error: 'INVALID_SHORTCODE_DELETION' },
+    });
+    const warning = wrapper.find('.bg-warning');
+
+    expect(warning).toHaveLength(1);
+    expect(warning.html()).toContain('This short URL has received too many visits and therefore, it cannot be deleted');
+  });
+
+  it('shows generic error when non-threshold error occurs', () => {
+    const wrapper = createWrapper({
+      loading: false,
+      error: true,
+      shortCode: 'abc123',
+      errorData: { error: 'OTHER_ERROR' },
+    });
+    const error = wrapper.find('.bg-danger');
+
+    expect(error).toHaveLength(1);
+    expect(error.html()).toContain('Something went wrong while deleting the URL :(');
+  });
+
+  it('disables submit button when loading', () => {
+    const wrapper = createWrapper({
+      loading: true,
+      error: false,
+      shortCode: 'abc123',
+      errorData: {},
+    });
+    const submit = wrapper.find('.btn-danger');
+
+    expect(submit).toHaveLength(1);
+    expect(submit.prop('disabled')).toEqual(true);
+    expect(submit.html()).toContain('Deleting...');
+  });
+
+  it('enables submit button when proper short code is provided', (done) => {
+    const shortCode = 'abc123';
+    const wrapper = createWrapper({
+      loading: false,
+      error: false,
+      shortCode,
+      errorData: {},
+    });
+    const input = wrapper.find('.form-control');
+
+    input.simulate('change', { target: { value: shortCode } });
+    setImmediate(() => {
+      const submit = wrapper.find('.btn-danger');
+
+      expect(submit.prop('disabled')).toEqual(false);
+      done();
+    });
+  });
+
+  it('tries to delete short URL when form is submit', (done) => {
+    const shortCode = 'abc123';
+    const wrapper = createWrapper({
+      loading: false,
+      error: false,
+      shortCode,
+      errorData: {},
+    });
+    const input = wrapper.find('.form-control');
+
+    input.simulate('change', { target: { value: shortCode } });
+    setImmediate(() => {
+      const form = wrapper.find('form');
+
+      expect(deleteShortUrl.callCount).toEqual(0);
+      form.simulate('submit', { preventDefault: identity });
+      expect(deleteShortUrl.callCount).toEqual(1);
+      done();
+    });
+  });
+});