From 877b3a002e357a425911d5498691cf594d3f8bc4 Mon Sep 17 00:00:00 2001
From: wrenny-ko <wrenny.ko@gmail.com>
Date: Tue, 27 Aug 2024 18:24:03 -0400
Subject: [PATCH] suggested review changes; working on fixing the test file

---
 assets/js/__tests__/upload.spec.ts | 23 ++++++++---------------
 assets/js/upload.js                | 26 ++++++--------------------
 2 files changed, 14 insertions(+), 35 deletions(-)

diff --git a/assets/js/__tests__/upload.spec.ts b/assets/js/__tests__/upload.spec.ts
index 4647fbb4..aa7a6ef5 100644
--- a/assets/js/__tests__/upload.spec.ts
+++ b/assets/js/__tests__/upload.spec.ts
@@ -58,10 +58,10 @@ describe('Image upload form', () => {
   let scraperError: HTMLDivElement;
   let fetchButton: HTMLButtonElement;
   let tagsEl: HTMLTextAreaElement;
-  let tagsinputEl: HTMLDivElement;
-  let tagEl: HTMLSpanElement;
+  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');
@@ -79,19 +79,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">
-            <span class="tag">
-              "safe x"
-            </span>
-            <span class="tag">
-              "pony x"
-            </span>
-            <span class="tag">
-              "tag3 x"
-            </span>
-          </div>
+          <div class="js-taginput" value="safe, pony, third tag"/>
         <button id="tagsinput-save" type="button" class="button"/>
         <textarea id="image_description" name="image[description]" class="js-image-descr-input"></textarea>
+        <div class="actions">
+          <button class="button" type="submit"/>
+        </div>
        </form>`,
     );
 
@@ -101,11 +94,11 @@ 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
+    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();
diff --git a/assets/js/upload.js b/assets/js/upload.js
index b9d2b3fa..3380e4bd 100644
--- a/assets/js/upload.js
+++ b/assets/js/upload.js
@@ -176,40 +176,26 @@ function setupImageUpload() {
     const errorElement = makeEl('span', { className: 'help-block tag-error' });
 
     errorElement.innerText = message;
-    buttonAfter.parentElement.insertBefore(errorElement, buttonAfter);
+    buttonAfter.insertAdjacentElement('beforebegin', errorElement);
   }
 
   function clearTagErrors() {
-    const tagErrorElements = $$('.tag-error');
-
-    // remove() causes the length to decrease
-    while (tagErrorElements.length > 0) {
-      tagErrorElements[0].remove();
-    }
+    $$('.tag-error').forEach(el => el.remove());
   }
 
   // populate tag error helper bars as necessary
   // return true if all checks pass
   // return false if any check fails
   function validateTags() {
-    const tags = $$('.tag');
+    const tagInput = $('textarea.js-taginput');
 
-    if (tags.length === 0) {
-      createTagError('Tag input must contain at least 3 tags');
-      return false;
+    if (!tagInput) {
+      return true;
     }
 
-    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);
-    }
+    const tagsArr = tagInput.value.split(',').map(t => t.trim());
 
     const ratingsTags = ['safe', 'suggestive', 'questionable', 'explicit', 'semi-grimdark', 'grimdark', 'grotesque'];
-
     const errors = [];
 
     let hasRating = false;