linting, js test troubleshooting

assets/js/__tests__/upload.spec.ts

@@ -58,6 +58,8 @@ describe('Image upload form', () => {
   let scraperError: HTMLDivElement;
   let fetchButton: HTMLButtonElement;
   let tagsEl: HTMLTextAreaElement;
+  let tagsinputEl: HTMLDivElement;
+  let tagEl: HTMLSpanElement;
   let sourceEl: HTMLInputElement;
   let descrEl: HTMLTextAreaElement;
 
@@ -77,6 +79,18 @@ 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">
+            <span class="tag">
+              "safe x"
+            </span>
+            <span class="tag">
+              "pony x"
+            </span>
+            <span class="tag">
+              "tag3 x"
+            </span>
+          </div>
+        <button id="tagsinput-save" type="button" class="button"/>
         <textarea id="image_description" name="image[description]" class="js-image-descr-input"></textarea>
        </form>`,
     );
@@ -87,6 +101,8 @@ describe('Image upload form', () => {
     remoteUrl = assertNotUndefined($$<HTMLInputElement>('.js-scraper')[1]);
     scraperError = assertNotUndefined($$<HTMLInputElement>('.js-scraper')[2]);
     tagsEl = assertNotNull($<HTMLTextAreaElement>('.js-image-tags-input'));
+    tagsinputEl = assertNotNull($<HTMLDivElement>('.js-taginput'));
+    tagEl = assertNotNull($<HTMLSpanElement>('.tag')); // ensure at least one exists
     sourceEl = assertNotNull($<HTMLInputElement>('.js-source-url'));
     descrEl = assertNotNull($<HTMLTextAreaElement>('.js-image-descr-input'));
     fetchButton = assertNotNull($<HTMLButtonElement>('#js-scraper-preview'));

assets/js/upload.js

@@ -174,12 +174,13 @@ function setupImageUpload() {
   function createTagError(message) {
     const buttonAfter = $('#tagsinput-save');
     const errorElement = makeEl('span', { className: 'help-block tag-error' });
+
     errorElement.innerText = message;
     buttonAfter.parentElement.insertBefore(errorElement, buttonAfter);
   }
 
   function clearTagErrors() {
-    const tagErrorElements = document.getElementsByClassName('tag-error');
+    const tagErrorElements = $$('.tag-error');
 
     // remove() causes the length to decrease
     while (tagErrorElements.length > 0) {
@@ -192,14 +193,17 @@ function setupImageUpload() {
   // return false if any check fails
   function validateTags() {
     const tags = $$('.tag');
+
     if (tags.length === 0) {
       createTagError('Tag input must contain at least 3 tags');
       return false;
     }
 
     const tagsArr = [];
+
     for (const i in tags) {
       let tag = tags[i].innerText;
+
       tag = tag.substring(0, tag.length - 2); // remove " x" from the end
       tagsArr.push(tag);
     }
@@ -211,6 +215,7 @@ function setupImageUpload() {
     let hasRating = false;
     let hasSafe = false;
     let hasOtherRating = false;
+
     tagsArr.forEach(tag => {
       if (ratingsTags.includes(tag)) {
         hasRating = true;