How do you test an inner function that is been looped over in jest?
Example I have:
index.js
const innerFunc = (type) => document.querySelector(`input[name="${type}"]`).value;
const anotherInnerFunc = (type) => document.querySelector(`input[name="${type}"]`).value = '';
const mainFunc = () => {
const resultArray = [];
// the document.querySelector('input[type="1 of those arrayTypes"]') on those inside functions
const arrayTypes = ['name', 'email', 'card']
for (const type of arrayTypes) {
// innerFunc
resultArray.push(innerFunc(type))
// clearing the input fields
anotherInnerFunc(type)
}
return resultArray;
}
module.exports = {
mainFunc,
innerFunc,
anotherInnerFunc
}
and for index.test.js
/**
* @jest-environment jsdom
*/
const indexFile = require('./index');
const { JSDOM } = require('jsdom');
const html = require('./duphtml.js');
let dom, window, document, inputName, inputEmail, inputCard;
describe('Testing the HTML FORM from index.html using JSDOM', () => {
beforeAll(() => {
dom = new JSDOM(html);
window = dom.window;
document= window.document;
inputName = document.querySelector(`input[name="name"]`);
inputName.value = 'FakeCC';
inputEmail = document.querySelector(`input[name="email"]`);
inputEmail.value = '[email protected]';
inputCard = document.querySelector(`input[name="card"]`);
inputCard.value = '5457623898234113';
// console.log(document.querySelector(`input[name="name"]`).value)
});
it('how do I test those inner functions?', () => {
// Im a bit lost here searched around cant find anything to help me find the solution and I am out of ideas
const inputArray = [inputName, inputEmail, inputCard];
// how can I reach this end goal so those inside functions do working
expect(indexFile.mainFunc()).toEqual(inputArray)
})
})
How can I reach the final expect? And how would I pass in the three values of inputs I have defined inside the beforeAll block to perhaps those inside functions?
As the inside functions are returning null:
TypeError: Cannot read property 'value' of null
110 | // Tested WORKS! check index.test.js
111 | /* ----------------------------------- FORM SUBMISSION -------------------------------------- */
> 112 | const newValue = (type) => document.querySelector(`input[name="${type}"]`).value;
this line:
dom = new JSDOM(html);
html is from another file I pasted the index.html into it as a string to have access to it inside the test file
duphtml.js
const html = `
<!doctype html>
<main class="flex">
<h1>Form</h1>
<section class="modal-dialog">
<form method="POST" onsubmit="mainFunc().bind(this); return false" class="flow" action="">
<div class="flex">
<label for="name">Name:</label>
<!-- First and Surname (should have been specified on the user stories) -->
<input type="text" name="name" id="name" placeholder="Enter Your Name"/>
<!-- <p>Enter a correct name</p> -->
</div>
<div class="flex">
<label for="email">Email:</label>
<input pattern="[a-zA-Z0-9._%+-]+@[a-z0-9.-]+\.[a-zA-Z]{2,4}" type="email" name="email" id="email" placeholder="Enter Your Email"/>
</div>
<div class="flex">
<label for="card">Card:</label>
<input type="text" name="card" onkeyup="luhnAlgorithm(this)" id="card" placeholder="Enter a Proxy Credit Card Number"/>
<img hidden src="./assets/other.png" id="imgCard" style="padding:5px;" />
</div>
<div>
<input id="submit" type="submit" value="Submit" />
</div>
</form>
</section>
</main>
`
module.exports = html;
SOLUTION
I have solved the problem if anyone has anything similar do look at this answer
Inside the beforeAll() After making the document and window variable from JSDOM I had to set them as a global var like this
Moreover I had to delete this config jsdocs
As it was making my code not work.
I changed beforeAll() to beforeEach() but that is not that serious.
So this fixed it