removelevelbutton tests

This commit is contained in:
realaravinth 2021-05-07 21:14:15 +05:30
parent d42a9c6bb8
commit 7e0670d1d8
No known key found for this signature in database
GPG key ID: AD9F0F08E855ED88
11 changed files with 290 additions and 45 deletions

View file

@ -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: [
// "/node_modules/"
// ],
coveragePathIgnorePatterns: ['/node_modules/', 'setupTests.ts', 'setUpTests.ts'],
// Indicates which provider should be used to instrument code for coverage
coverageProvider: 'v8',

View file

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

View file

@ -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}"

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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