Merge remote-tracking branch 'upstream/master'

assets/js/__tests__/upload.spec.ts

@@ -25,6 +25,9 @@ const errorResponse = {
 };
 /* eslint-enable camelcase */
 
+const tagSets = ['', 'a tag', 'safe', 'one, two, three', 'safe, explicit', 'safe, explicit, three', 'safe, two, three'];
+const tagErrorCounts = [1, 2, 1, 1, 2, 1, 0];
+
 describe('Image upload form', () => {
   let mockPng: File;
   let mockWebm: File;
@@ -58,13 +61,23 @@ describe('Image upload form', () => {
   let scraperError: HTMLDivElement;
   let fetchButton: HTMLButtonElement;
   let tagsEl: HTMLTextAreaElement;
+  let taginputEl: HTMLDivElement;
   let sourceEl: HTMLInputElement;
   let descrEl: HTMLTextAreaElement;
+  let submitButton: HTMLButtonElement;
 
   const assertFetchButtonIsDisabled = () => {
     if (!fetchButton.hasAttribute('disabled')) throw new Error('fetchButton is not disabled');
   };
 
+  const assertSubmitButtonIsDisabled = () => {
+    if (!submitButton.hasAttribute('disabled')) throw new Error('submitButton is not disabled');
+  };
+
+  const assertSubmitButtonIsEnabled = () => {
+    if (submitButton.hasAttribute('disabled')) throw new Error('submitButton is disabled');
+  };
+
   beforeEach(() => {
     document.documentElement.insertAdjacentHTML(
       'beforeend',
@@ -77,7 +90,12 @@ describe('Image upload form', () => {
 
         <input id="image_sources_0_source" name="image[sources][0][source]" type="text" class="js-source-url" />
         <textarea id="image_tag_input" name="image[tag_input]" class="js-image-tags-input"></textarea>
+        <div class="js-taginput"></div>
+        <button id="tagsinput-save" type="button" class="button">Save</button>
         <textarea id="image_description" name="image[description]" class="js-image-descr-input"></textarea>
+        <div class="actions">
+          <button class="button input--separate-top" type="submit">Upload</button>
+        </div>
        </form>`,
     );
 
@@ -87,9 +105,11 @@ describe('Image upload form', () => {
     remoteUrl = assertNotUndefined($$<HTMLInputElement>('.js-scraper')[1]);
     scraperError = assertNotUndefined($$<HTMLInputElement>('.js-scraper')[2]);
     tagsEl = assertNotNull($<HTMLTextAreaElement>('.js-image-tags-input'));
+    taginputEl = assertNotNull($<HTMLDivElement>('.js-taginput'));
     sourceEl = assertNotNull($<HTMLInputElement>('.js-source-url'));
     descrEl = assertNotNull($<HTMLTextAreaElement>('.js-image-descr-input'));
     fetchButton = assertNotNull($<HTMLButtonElement>('#js-scraper-preview'));
+    submitButton = assertNotNull($<HTMLButtonElement>('.actions > .button'));
 
     setupImageUpload();
     fetchMock.resetMocks();
@@ -193,4 +213,42 @@ describe('Image upload form', () => {
       expect(scraperError.innerText).toEqual('Error 1 Error 2');
     });
   });
+
+  async function submitForm(frm): Promise<boolean> {
+    return new Promise(resolve => {
+      function onSubmit() {
+        frm.removeEventListener('submit', onSubmit);
+        resolve(true);
+      }
+
+      frm.addEventListener('submit', onSubmit);
+
+      if (!fireEvent.submit(frm)) {
+        frm.removeEventListener('submit', onSubmit);
+        resolve(false);
+      }
+    });
+  }
+
+  it('should prevent form submission if tag checks fail', async () => {
+    for (let i = 0; i < tagSets.length; i += 1) {
+      taginputEl.value = tagSets[i];
+
+      if (await submitForm(form)) {
+        // form submit succeeded
+        await waitFor(() => {
+          assertSubmitButtonIsDisabled();
+          const succeededUnloadEvent = new Event('beforeunload', { cancelable: true });
+          expect(fireEvent(window, succeededUnloadEvent)).toBe(true);
+        });
+      } else {
+        // form submit prevented
+        frm = form;
+        await waitFor(() => {
+          assertSubmitButtonIsEnabled();
+          expect(frm.querySelectorAll('.help-block')).toHaveLength(tagErrorCounts[i]);
+        });
+      }
+    }
+  });
 });