removelevelbutton tests

templates/panel/sitekey/add/ts/const.ts

@@ -29,7 +29,8 @@ const LEVEL_FIELDSET_ID_WITHOUT_LEVEL = 'level-group-';
 const LEGEND_CLASS = 'sitekey__level-title';
 
 const REMOVE_LEVEL_BUTTON_ID_WITHOUT_LEVEL = 'remove-level';
-const REMOVE_LEVEL_LABEL_TEXT = "Remove Level";
+const REMOVE_LEVEL_LABEL_TEXT = 'Remove Level';
+const REMOVE_LEVEL_LABEL_CLASS = 'sitekey-form__level-label--hidden';
 
 const ADD_LEVEL_BUTTON = 'sitekey-form__level-add-level-button';
 
@@ -43,9 +44,10 @@ const CONST = {
   LEVEL_CONTAINER_CLASS,
   LEVEL_FIELDSET_ID_WITHOUT_LEVEL,
   LEGEND_CLASS,
+  ADD_LEVEL_BUTTON,
+  REMOVE_LEVEL_LABEL_CLASS,
   REMOVE_LEVEL_BUTTON_ID_WITHOUT_LEVEL,
   REMOVE_LEVEL_LABEL_TEXT,
-  ADD_LEVEL_BUTTON,
 };
 
 export default CONST;

templates/panel/sitekey/add/ts/removeLevelButton/updateDom/index.ts

@@ -18,7 +18,7 @@ import getNumLevels from '../../levels/getNumLevels';
 import CONST from '../../const';
 import log from '../../../../../../logger';
 
-import updateLabel from './updateLabel';
+import updateLabels from './updateLabel';
 import updateInputs from './updateInputs';
 
 /**
@@ -56,7 +56,7 @@ const updateLevelNumbersOnDOM = (id: number) => {
     )[0].innerText = `Level ${newLevel}`;
 
     // rename labels
-    updateLabel(levelGroup, newLevel);
+    updateLabels(levelGroup, newLevel);
 
     // rename inputs
     updateInputs(levelGroup, newLevel);

templates/panel/sitekey/add/ts/removeLevelButton/updateDom/updateInputs.ts

@@ -29,13 +29,13 @@ const updateInput = (levelGroup: Element, newLevel: number) => {
       const id = `${CONST.VISITOR_WITHOUT_LEVEL}${newLevel}`;
       input.id = id;
       input.name = id;
-    }
+    } else if (input.id.includes(CONST.DIFFICULTY_WITHOUT_LEVEL)) {
-
-    if (input.id.includes(CONST.DIFFICULTY_WITHOUT_LEVEL)) {
       log.log('changing difficulty input');
       const id = `${CONST.DIFFICULTY_WITHOUT_LEVEL}${newLevel}`;
       input.id = id;
       input.name = id;
+    } else {
+      throw new Error('Did you add an extra input to DOM?');
     }
   });
 };

templates/panel/sitekey/add/ts/removeLevelButton/updateDom/updateLabel.test.ts

@@ -0,0 +1,123 @@
+/*
+ * Copyright (C) 221  Aravinth Manivannan <realaravinth@batsense.net>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import getNumLevels from '../../levels/getNumLevels';
+import {getAddForm, trim} from '../../setupTests';
+import updateLabels from './updateLabel';
+import CONST from '../../const';
+
+import log from '../../../../../../logger';
+import {MODE} from '../../../../../../logger';
+
+import {setupAddlevels} from './setupTests';
+
+/** get initial form to test remove button functionality */
+export const labelLevel = (level: number) => {
+  return `
+<form class="sitekey-form" action="/api/v1/mcaptcha/levels/add" method="post">
+  <fieldset class="sitekey__level-container" id="level-group-2">
+    <legend class="sitekey__level-title">
+      Level 2
+    </legend>
+    <label class="sitekey-form__level-label" for="visitor${level}"
+      >Visitor
+      <input
+        class="sitekey-form__level-input"
+        type="number"
+        name="visitor2"
+        
+        id="visitor2"
+      >
+    </label>
+
+    <label class="sitekey-form__level-label" for="difficulty${level}">
+      Difficulty
+      <input
+        type="number"
+        name="difficulty2"
+        class="sitekey-form__level-input"
+        
+        id="difficulty2"
+      >
+    </label>
+    <label class="sitekey-form__level-label--hidden" for="remove-level${level}">
+      Remove Level
+      <input
+        class="sitekey-form__level-remove-level-button"
+        type="button"
+        name="remove-level2"
+        id="remove-level2"
+        value="x"
+      >
+    </label>
+
+<label class="sitekey-form__level-label--hidden" for="add">
+	  Add level
+  <input
+    class="sitekey-form__level-add-level-button"
+    type="button"
+    name="add"
+    id="add"
+    value="Add"
+  >
+  </label>
+
+  </fieldset>
+</form>
+`;
+};
+
+document.body.innerHTML = labelLevel(2);
+
+log.setMode(MODE.none);
+
+it('addLevelButton works', () => {
+  // removing level  2
+  const level = 2;
+  const levelGroup = document.querySelector(
+    `#${CONST.LEVEL_FIELDSET_ID_WITHOUT_LEVEL}${level}`,
+  );
+
+  const newLevel = 20;
+
+  updateLabels(levelGroup, newLevel);
+
+  const labels = <NodeListOf<HTMLLabelElement>>(
+    levelGroup.querySelectorAll(`.${CONST.LABEL_CLASS}`)
+  );
+  log.log(labels);
+  labels.forEach(label => {
+    log.log(`${label.htmlFor}`);
+    if (label.htmlFor.includes(CONST.VISITOR_WITHOUT_LEVEL)) {
+      expect(label.htmlFor).toBe(`${CONST.VISITOR_WITHOUT_LEVEL}${newLevel}`);
+    } else if (label.htmlFor.includes(CONST.DIFFICULTY_WITHOUT_LEVEL)) {
+      expect(label.htmlFor).toBe(
+        `${CONST.DIFFICULTY_WITHOUT_LEVEL}${newLevel}`,
+      );
+    } else if (
+      label.htmlFor.includes(CONST.REMOVE_LEVEL_BUTTON_ID_WITHOUT_LEVEL)
+    ) {
+      expect(label.htmlFor).toBe(
+        `${CONST.REMOVE_LEVEL_BUTTON_ID_WITHOUT_LEVEL}${newLevel}`,
+      );
+    } else {
+      throw new Error('Did you add an extra label to DOM?');
+    }
+  });
+
+  expect(trim(document.body.innerHTML)).toBe(trim(labelLevel(newLevel)));
+});

templates/panel/sitekey/add/ts/removeLevelButton/updateDom/updateLabel.ts

@@ -17,22 +17,31 @@
 import CONST from '../../const';
 import log from '../../../../../../logger';
 
-const updateLabel = (levelGroup: Element, newLevel: number) => {
+const updateLabels = (levelGroup: Element, newLevel: number) => {
   // rename labels
   const labels = <NodeListOf<HTMLLabelElement>>(
-    levelGroup.querySelectorAll(`.${CONST.LABEL_CLASS}`)
+    levelGroup.querySelectorAll(`label`)
   );
   log.log(labels);
   labels.forEach(label => {
     log.log(`${label.htmlFor}`);
-    if (label.htmlFor.includes(CONST.VISITOR_WITHOUT_LEVEL)) {
+    const currentFor = label.htmlFor;
+    if (currentFor.includes(CONST.VISITOR_WITHOUT_LEVEL)) {
       label.htmlFor = `${CONST.VISITOR_WITHOUT_LEVEL}${newLevel}`;
-    }
+    } else if (currentFor.includes(CONST.DIFFICULTY_WITHOUT_LEVEL)) {
-
-    if (label.htmlFor.includes(CONST.DIFFICULTY_WITHOUT_LEVEL)) {
       label.htmlFor = `${CONST.DIFFICULTY_WITHOUT_LEVEL}${newLevel}`;
+    } else if (
+      currentFor.includes(CONST.REMOVE_LEVEL_BUTTON_ID_WITHOUT_LEVEL)
+    ) {
+      label.htmlFor = `${CONST.REMOVE_LEVEL_BUTTON_ID_WITHOUT_LEVEL}${newLevel}`;
+    } else {
+      if (currentFor != 'add') {
+        throw new Error(
+          `Did you add an extra label to DOM? Found label with for: ${currentFor}`,
+        );
+      }
     }
   });
 };
 
-export default updateLabel;
+export default updateLabels;