removelevelbutton tests

This commit is contained in:
realaravinth
2021-05-07 17:55:42 +05:30
parent 7b3f910da7
commit 5b5a995f57
19 changed files with 1100 additions and 204 deletions

View File

@@ -0,0 +1,79 @@
/*
* 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 getNumLevels from '../../levels/getNumLevels';
import CONST from '../../const';
import log from '../../../../../../logger';
import updateLabel from './updateLabel';
import updateInputs from './updateInputs';
/**
* update level number on fieldset legends and their ids too
* @param {number} id - level number that was ordered to remove.
* All updates are made relative to id
* */
const updateLevelNumbersOnDOM = (id: number) => {
const numLevels = getNumLevels();
if (id == numLevels) {
throw new Error(
"Can't remove the very fist element, it has to be first added to DOM",
);
}
// since I'm doing id+1, I have to remove id after I'm done
// with inclreasing level numbers
for (let i = id + 1; i <= numLevels; i++) {
const newLevel = i - 1;
const levelGroup = document.querySelector(
`#${CONST.LEVEL_FIELDSET_ID_WITHOUT_LEVEL}${i}`,
);
if (levelGroup === null) {
const msg = `[removeLevelButton.ts]:
error when trying to fetch level group field set ${i}. got null`;
log.error(msg);
throw new Error(msg);
}
// rename legend
levelGroup.getElementsByTagName(
'legend',
)[0].innerText = `Level ${newLevel}`;
// rename labels
updateLabel(levelGroup, newLevel);
// rename inputs
updateInputs(levelGroup, newLevel);
// TODO change remove button ID as well
levelGroup.id = `${CONST.LEVEL_FIELDSET_ID_WITHOUT_LEVEL}${newLevel}`;
/* TODO
* change field set ID
* change legend inner Text
* change visitor lable for value
* change visitor input id
* change difficulty for value
* change difficulty input id
*/
}
};
export default updateLevelNumbersOnDOM;

View File

@@ -0,0 +1,36 @@
/*
* 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 getNumLevels from '../../levels/getNumLevels';
import {getAddForm, addLevel} from '../../setupTests';
document.body.innerHTML = getAddForm();
export const setupAddlevels = () => {
expect(getNumLevels()).toBe(1);
// add a level
addLevel(2, 2);
expect(getNumLevels()).toBe(2);
// add second level
addLevel(4, 4);
expect(getNumLevels()).toBe(3);
// add thrid level
addLevel(5, 5);
expect(getNumLevels()).toBe(4);
};

View File

@@ -0,0 +1,242 @@
/*
* 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 getNumLevels from '../../levels/getNumLevels';
import {getAddForm, trim} from '../../setupTests';
import updateInputs from './updateInputs';
import CONST from '../../const';
import log from '../../../../../../logger';
import {MODE} from '../../../../../../logger';
import {setupAddlevels} from './setupTests';
document.body.innerHTML = getAddForm();
log.setMode(MODE.none);
it('addLevelButton works', () => {
setupAddlevels();
// removing level 2
const level = 2;
const levelGroup = document.querySelector(
`#${CONST.LEVEL_FIELDSET_ID_WITHOUT_LEVEL}${level}`,
);
const newLevel = 20;
updateInputs(levelGroup, newLevel);
const inputs = <NodeListOf<HTMLInputElement>>(
levelGroup.querySelectorAll(`.${CONST.LEVEL_INPUT_CLASS}`)
);
inputs.forEach(input => {
if (input.id.includes(CONST.VISITOR_WITHOUT_LEVEL)) {
expect(input.id).toBe(`${CONST.VISITOR_WITHOUT_LEVEL}${newLevel}`);
console.log("checking visitor");
} else {
// if (input.id.includes(CONST.DIFFICULTY_WITHOUT_LEVEL)) {
console.log("checking difficulty");
expect(input.id).toBe(`${CONST.DIFFICULTY_WITHOUT_LEVEL}${newLevel}`);
}
});
expect(trim(document.body.innerHTML)).toBe(trim(update()));
});
/** get initial form to test remove button functionality */
export const update = () => {
return `
<form class="sitekey-form" action="/api/v1/mcaptcha/levels/add" method="post">
<h1 class="form__title">
Add Sitekey
</h1>
<label class="sitekey-form__label" for="description">
Description
<input
class="sitekey-form__input"
type="text"
name="description"
id="description"
required=""
>
</label>
<label class="sitekey-form__label" for="duration">
Cooldown Duratoin(in seconds)
<input
class="sitekey-form__input"
type="number"
name="duration"
id="duration"
min="0"
required=""
value="30"
>
</label>
<fieldset class="sitekey__level-container" id="level-group-1">
<legend class="sitekey__level-title">
Level 1
</legend>
<label class="sitekey-form__level-label" for="visitor1"
>Visitor
<input
class="sitekey-form__level-input"
type="number"
name="visitor1"
id="visitor1"
>
</label>
<label class="sitekey-form__level-label" for="difficulty1">
Difficulty
<input
type="number"
name="difficulty1"
class="sitekey-form__level-input"
id="difficulty1"
>
</label>
<label class="sitekey-form__level-label--hidden" for="remove-level1">
Remove Level
<input
class="sitekey-form__level-remove-level-button"
type="button"
name="remove-level1"
id="remove-level1"
value="x"
>
</label>
</fieldset>
<fieldset class="sitekey__level-container" id="level-group-2">
<legend class="sitekey__level-title">
Level 2
</legend>
<label class="sitekey-form__level-label" for="visitor2"
>Visitor
<input
class="sitekey-form__level-input"
type="number"
name="visitor20"
id="visitor20"
>
</label>
<label class="sitekey-form__level-label" for="difficulty2">
Difficulty
<input
type="number"
name="difficulty20"
class="sitekey-form__level-input"
id="difficulty20"
>
</label>
<label class="sitekey-form__level-label--hidden" for="remove-level2">
Remove Level
<input
class="sitekey-form__level-remove-level-button"
type="button"
name="remove-level2"
id="remove-level2"
value="x"
>
</label>
</fieldset>
<fieldset class="sitekey__level-container" id="level-group-3">
<legend class="sitekey__level-title">
Level 3
</legend>
<label class="sitekey-form__level-label" for="visitor3"
>Visitor
<input
class="sitekey-form__level-input"
type="number"
name="visitor3"
id="visitor3"
>
</label>
<label class="sitekey-form__level-label" for="difficulty3">
Difficulty
<input
type="number"
name="difficulty3"
class="sitekey-form__level-input"
id="difficulty3"
>
</label>
<label class="sitekey-form__level-label--hidden" for="remove-level3">
Remove Level
<input
class="sitekey-form__level-remove-level-button"
type="button"
name="remove-level3"
id="remove-level3"
value="x"
>
</label>
</fieldset>
<fieldset class="sitekey__level-container" id="level-group-4">
<legend class="sitekey__level-title">
Level 4
</legend>
<label class="sitekey-form__level-label" for="visitor4"
>Visitor
<input
class="sitekey-form__level-input"
type="number"
name="visitor4"
id="visitor4"
>
</label>
<label class="sitekey-form__level-label" for="difficulty4">
Difficulty
<input
type="number"
name="difficulty4"
class="sitekey-form__level-input"
id="difficulty4"
>
</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>
<button class="sitekey-form__submit" type="submit">Submit</button>
</form>
`;
};

View File

@@ -0,0 +1,43 @@
/*
* 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';
import log from '../../../../../../logger';
const updateInput = (levelGroup: Element, newLevel: number) => {
const inputs = <NodeListOf<HTMLInputElement>>(
levelGroup.querySelectorAll(`.${CONST.LEVEL_INPUT_CLASS}`)
);
log.log(inputs);
inputs.forEach(input => {
if (input.id.includes(CONST.VISITOR_WITHOUT_LEVEL)) {
log.log(`${input.id}`);
log.log('changing visitor_threshold input');
const id = `${CONST.VISITOR_WITHOUT_LEVEL}${newLevel}`;
input.id = id;
input.name = id;
}
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;
}
});
};
export default updateInput;

View File

@@ -0,0 +1,38 @@
/*
* 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';
import log from '../../../../../../logger';
const updateLabel = (levelGroup: Element, newLevel: number) => {
// rename labels
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)) {
label.htmlFor = `${CONST.VISITOR_WITHOUT_LEVEL}${newLevel}`;
}
if (label.htmlFor.includes(CONST.DIFFICULTY_WITHOUT_LEVEL)) {
label.htmlFor = `${CONST.DIFFICULTY_WITHOUT_LEVEL}${newLevel}`;
}
});
};
export default updateLabel;