removelevelbutton tests

This commit is contained in:
realaravinth 2021-05-07 18:37:44 +05:30
parent 5b5a995f57
commit d4cf24493a
No known key found for this signature in database
GPG key ID: AD9F0F08E855ED88
5 changed files with 148 additions and 14 deletions

View file

@ -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;

View file

@ -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);

View file

@ -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?');
}
});
};

View file

@ -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)));
});

View file

@ -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}`;
}
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;