From d4cf24493afc7cc3ff99337e973306c314f922b2 Mon Sep 17 00:00:00 2001 From: realaravinth Date: Fri, 7 May 2021 18:37:44 +0530 Subject: [PATCH] removelevelbutton tests --- templates/panel/sitekey/add/ts/const.ts | 6 +- .../ts/removeLevelButton/updateDom/index.ts | 4 +- .../updateDom/updateInputs.ts | 6 +- .../updateDom/updateLabel.test.ts | 123 ++++++++++++++++++ .../updateDom/updateLabel.ts | 23 +++- 5 files changed, 148 insertions(+), 14 deletions(-) create mode 100644 templates/panel/sitekey/add/ts/removeLevelButton/updateDom/updateLabel.test.ts diff --git a/templates/panel/sitekey/add/ts/const.ts b/templates/panel/sitekey/add/ts/const.ts index 726fb834..d85c5b17 100644 --- a/templates/panel/sitekey/add/ts/const.ts +++ b/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; diff --git a/templates/panel/sitekey/add/ts/removeLevelButton/updateDom/index.ts b/templates/panel/sitekey/add/ts/removeLevelButton/updateDom/index.ts index 1d263a4d..89193675 100644 --- a/templates/panel/sitekey/add/ts/removeLevelButton/updateDom/index.ts +++ b/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); diff --git a/templates/panel/sitekey/add/ts/removeLevelButton/updateDom/updateInputs.ts b/templates/panel/sitekey/add/ts/removeLevelButton/updateDom/updateInputs.ts index bf79bd9e..fe91e744 100644 --- a/templates/panel/sitekey/add/ts/removeLevelButton/updateDom/updateInputs.ts +++ b/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; - } - - if (input.id.includes(CONST.DIFFICULTY_WITHOUT_LEVEL)) { + } else 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?'); } }); }; diff --git a/templates/panel/sitekey/add/ts/removeLevelButton/updateDom/updateLabel.test.ts b/templates/panel/sitekey/add/ts/removeLevelButton/updateDom/updateLabel.test.ts new file mode 100644 index 00000000..226d858c --- /dev/null +++ b/templates/panel/sitekey/add/ts/removeLevelButton/updateDom/updateLabel.test.ts @@ -0,0 +1,123 @@ +/* + * Copyright (C) 221 Aravinth Manivannan + * + * 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 . + */ + +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 ` +
+
+ + Level 2 + + + + + + + + +
+
+`; +}; + +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 = >( + 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))); +}); diff --git a/templates/panel/sitekey/add/ts/removeLevelButton/updateDom/updateLabel.ts b/templates/panel/sitekey/add/ts/removeLevelButton/updateDom/updateLabel.ts index f0bfa90b..486a1e69 100644 --- a/templates/panel/sitekey/add/ts/removeLevelButton/updateDom/updateLabel.ts +++ b/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 = >( - 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}`; - } - - if (label.htmlFor.includes(CONST.DIFFICULTY_WITHOUT_LEVEL)) { + } else if (currentFor.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;