removelevelbutton tests

jest.config.ts

@@ -17,7 +17,7 @@ export default {
   clearMocks: true,
 
   // Indicates whether the coverage information should be collected while executing the test
-   collectCoverage: true,
+  collectCoverage: true,
 
   // An array of glob patterns indicating a set of files for which coverage information should be collected
   // collectCoverageFrom: undefined,
@@ -26,9 +26,7 @@ export default {
   coverageDirectory: 'coverage',
 
   // An array of regexp pattern strings used to skip coverage collection
-  // coveragePathIgnorePatterns: [
+  coveragePathIgnorePatterns: ['/node_modules/', 'setupTests.ts', 'setUpTests.ts'],
-  //   "/node_modules/"
-  // ],
 
   // Indicates which provider should be used to instrument code for coverage
   coverageProvider: 'v8',

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

@@ -29,6 +29,7 @@ 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_BUTTON_CLASS = 'sitekey-form__level-remove-level-button';
 const REMOVE_LEVEL_LABEL_TEXT = 'Remove Level';
 const REMOVE_LEVEL_LABEL_CLASS = 'sitekey-form__level-label--hidden';
 
@@ -48,6 +49,7 @@ const CONST = {
   REMOVE_LEVEL_LABEL_CLASS,
   REMOVE_LEVEL_BUTTON_ID_WITHOUT_LEVEL,
   REMOVE_LEVEL_LABEL_TEXT,
+  REMOVE_LEVEL_BUTTON_CLASS,
 };
 
 export default CONST;

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

@@ -72,7 +72,7 @@ export const getRemoveButtonHTML = (level: number) => {
   const HTML = `
   ${CONST.REMOVE_LEVEL_LABEL_TEXT}
   <input
-    class="sitekey-form__level-remove-level-button"
+    class="${CONST.REMOVE_LEVEL_BUTTON_CLASS}"
     type="button"
     name="${CONST.REMOVE_LEVEL_BUTTON_ID_WITHOUT_LEVEL}${level}"
     id="${CONST.REMOVE_LEVEL_BUTTON_ID_WITHOUT_LEVEL}${level}"

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

@@ -49,44 +49,17 @@ log.setMode(MODE.none);
 it('addLevelButton works', () => {
   setUp();
 
-  //  for (let i = 1; i < 4; i++) {
+  for (let i = 1; i < 4; i++) {
-  //    const l1 = <HTMLButtonElement>(
+    const l1 = <HTMLButtonElement>(
-  //      document.getElementById(
+      document.getElementById(
-  //        `${CONST.REMOVE_LEVEL_BUTTON_ID_WITHOUT_LEVEL}${1}`,
+        `${CONST.REMOVE_LEVEL_BUTTON_ID_WITHOUT_LEVEL}${1}`,
-  //      )
+      )
-  //    );
+    );
-  //
-  //    const expecting = 4 - i;
-  //    const currentLevels = getNumLevels();
-  //    log.log(
-  //      `current iteration: ${i}. expecting val: ${expecting} got: ${currentLevels}`,
-  //    );
-  //
-  //    l1.click();
-  //    expect(currentLevels).toBe(expecting);
-  //
-  //
-  //  }
 
-  let a = document.body.innerHTML;
+    const expecting = 4 - i;
-  expect(trim(a)).toBe(trim(getRemoveButtonHTMLForm()));
 
-  const l1 = <HTMLButtonElement>(
+    l1.click();
-    document.getElementById(`${CONST.REMOVE_LEVEL_BUTTON_ID_WITHOUT_LEVEL}${1}`)
+    const currentLevels = getNumLevels();
-  );
+    expect(currentLevels).toBe(expecting);
-
+  }
-  const expecting = 4 - 1;
-  const currentLevels = getNumLevels();
-  log.log(
-    `current iteration: ${1}. expecting val: ${expecting} got: ${currentLevels}`,
-  );
-
-  l1.click();
-
-  a = document.body.innerHTML;
-  //console.log(a);
-  //  expect(currentLevels).toBe(expecting);
-  //document.body.innerHTML;
-  //  expect(trim(a)).toBe(trim(getRemoveButtonHTMLForm()));
-  //
 });

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

@@ -20,6 +20,8 @@ import log from '../../../../../../logger';
 
 import updateLabels from './updateLabel';
 import updateInputs from './updateInputs';
+import updateRemoveButton from './updateRemoveButton';
+import updateLevelGroup from './updateLevelGroup';
 
 /**
  * update level number on fieldset legends and their ids too
@@ -61,9 +63,14 @@ const updateLevelNumbersOnDOM = (id: number) => {
     // rename inputs
     updateInputs(levelGroup, newLevel);
 
-    // TODO change remove button ID as well
+    if (i != numLevels) {
+      // update remove button
+      updateRemoveButton(levelGroup, newLevel);
+    }
 
-    levelGroup.id = `${CONST.LEVEL_FIELDSET_ID_WITHOUT_LEVEL}${newLevel}`;
+    // update levelGroup's ID
+    updateLevelGroup(levelGroup, newLevel);
+    // TODO change remove button ID as well
 
     /* TODO
      * change field set ID

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

@@ -17,6 +17,7 @@
 import CONST from '../../const';
 import log from '../../../../../../logger';
 
+/** update input IDs with new level */
 const updateInput = (levelGroup: Element, newLevel: number) => {
   const inputs = <NodeListOf<HTMLInputElement>>(
     levelGroup.querySelectorAll(`.${CONST.LEVEL_INPUT_CLASS}`)

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

@@ -17,6 +17,7 @@
 import CONST from '../../const';
 import log from '../../../../../../logger';
 
+/** update level lables to match new level */
 const updateLabels = (levelGroup: Element, newLevel: number) => {
   // rename labels
   const labels = <NodeListOf<HTMLLabelElement>>(

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

@@ -0,0 +1,103 @@
+/*
+ * 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 updateLevelGroup from './updateLevelGroup';
+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-${level}">
+    <legend class="sitekey__level-title">
+      Level 2
+    </legend>
+    <label class="sitekey-form__level-label" for="visitor"
+      >Visitor
+      <input
+        class="sitekey-form__level-input"
+        type="number"
+        name="visitor2"
+        
+        id="visitor2"
+      >
+    </label>
+
+    <label class="sitekey-form__level-label" for="difficulty">
+      Difficulty
+      <input
+        type="number"
+        name="difficulty2"
+        class="sitekey-form__level-input"
+        
+        id="difficulty2"
+      >
+    </label>
+    <label class="sitekey-form__level-label--hidden" for="remove-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('update levelGroup works', () => {
+  // removing level  2
+  const level = 2;
+  const levelGroup = document.querySelector(
+    `#${CONST.LEVEL_FIELDSET_ID_WITHOUT_LEVEL}${level}`,
+  );
+
+  const newLevel = 20;
+
+  updateLevelGroup(levelGroup, newLevel);
+  expect(levelGroup.id).toBe(
+    `${CONST.LEVEL_FIELDSET_ID_WITHOUT_LEVEL}${newLevel}`,
+  );
+
+  expect(trim(document.body.innerHTML)).toBe(trim(labelLevel(newLevel)));
+});

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

@@ -0,0 +1,23 @@
+/*
+ * Copyright (C) 2021  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 CONST from '../../const';
+
+/** update level grup to match new level */
+const updateLevelGroup = (levelGroup: Element, newLevel: number) =>
+  (levelGroup.id = `${CONST.LEVEL_FIELDSET_ID_WITHOUT_LEVEL}${newLevel}`);
+
+export default updateLevelGroup;

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

@@ -0,0 +1,107 @@
+/*
+ * 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 {trim} from '../../setupTests';
+import updateRemoveButton from './updateRemoveButton';
+import CONST from '../../const';
+
+import log from '../../../../../../logger';
+import {MODE} from '../../../../../../logger';
+
+/** 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-">
+    <legend class="sitekey__level-title">
+      Level 2
+    </legend>
+    <label class="sitekey-form__level-label" for="visitor"
+      >Visitor
+      <input
+        class="sitekey-form__level-input"
+        type="number"
+        name="visitor2"
+        
+        id="visitor2"
+      >
+    </label>
+
+    <label class="sitekey-form__level-label" for="difficulty">
+      Difficulty
+      <input
+        type="number"
+        name="difficulty2"
+        class="sitekey-form__level-input"
+        
+        id="difficulty2"
+      >
+    </label>
+    <label class="sitekey-form__level-label--hidden" for="remove-level">
+      Remove Level
+      <input
+        class="sitekey-form__level-remove-level-button"
+        type="button"
+        name="remove-level${level}"
+        id="remove-level${level}"
+        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>
+`;
+};
+
+const level = 2;
+document.body.innerHTML = labelLevel(level);
+
+log.setMode(MODE.none);
+
+it('update remove button works', () => {
+  // removing level  2
+
+  const levelGroup = document.getElementById(
+    `${CONST.LEVEL_FIELDSET_ID_WITHOUT_LEVEL}`,
+  );
+
+  const newLevel = 20;
+  updateRemoveButton(levelGroup, newLevel);
+
+  const button = <HTMLInputElement>(
+    levelGroup.querySelector(`.${CONST.REMOVE_LEVEL_BUTTON_CLASS}`)
+  );
+  expect(button.id).toBe(
+    `${CONST.REMOVE_LEVEL_BUTTON_ID_WITHOUT_LEVEL}${newLevel}`,
+  );
+  expect(button.name).toBe(
+    `${CONST.REMOVE_LEVEL_BUTTON_ID_WITHOUT_LEVEL}${newLevel}`,
+  );
+
+  expect(trim(document.body.innerHTML)).toBe(trim(labelLevel(newLevel)));
+});

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

@@ -0,0 +1,30 @@
+/*
+ * Copyright (C) 2021  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 CONST from '../../const';
+
+/** update remove level button's ID */
+const updateRemoveButton = (levelGroup: Element, newLevel: number) => {
+  // rename button
+  const button = <HTMLInputElement>(
+    levelGroup.querySelector(`.${CONST.REMOVE_LEVEL_BUTTON_CLASS}`)
+  );
+  const id = `${CONST.REMOVE_LEVEL_BUTTON_ID_WITHOUT_LEVEL}${newLevel}`;
+  button.id = id;
+  button.name = id;
+};
+
+export default updateRemoveButton;