Jest test not updating the DOM when testing out a function
Question
In my test, I have create a function called postData that returns mock json data via a Promise. I use this to test out the urlValidation function which uses postData function to add the json data into the DOM. I also added the DOM inside the test as well.
testUrl.spec.js
import { urlValidation } from '../client/js/urlValidation';
import { printData } from '../client/js/checkStatement';
test('Testing url Validation', () => {
document.body.innerHTML = `
<body>
<header>
<div class="logo">
Logo
</div>
<div class="title">
Title
</div>
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Contact</a></li>
<li> <a href="#">Body</a></li>
<li><a href="#">Footer</a></li>
</ul>
</div>
</header>
<main>
<section class="form-section">
<form class="blog-entry-text" onsubmit="return Client.checkStatement(event)">
<input id="text-input" type="text" name="input" value="" placeholder="Enter Text">
<button onclick="return Client.checkInput(event)">SubmitInput</button>
</form>
<form class="blog-entry-url">
<input id="text-url" type="text" name="input" value="" placeholder="Enter Text">
<button onclick="return Client.checkUrl(event)">SubmitURL</button>
</form>
<section>
<section class="form-results">
<strong>Form Results:</strong>
<div id="results"></div>
</section>
</main>
<footer>
<p>This is a footer</p>
</footer>
</body>`
const postData = (input1, input2) => { return Promise.resolve({
text: 'Hello',
language: 'en',
categories: [
{
label: 'religious festival or holiday - easter',
code: '12014002',
confidence: 0.54
}
]
})
};
urlValidation('What is going on', postData);
expect(document.querySelector('#results').innerHTML).toEqual(`<p>Text Data: Testing Input</p><p>Label: religious festival or holiday - easter</p>`)
});
The urlValidation function takes in a function as a parameter and then from the json data that is return from the promise adds the values to the DOM.
urlValidations.js
const urlValidation = (inputText, callback) => {
const inputData = {input: inputText};
callback("http://localhost:8080/classify-url", inputData).then(data =>{
console.log(data);
printData(inputData, data);
});
};
The print Data function manipulates the DOM and add the data to the webpage.
printData.js
function printData(dataObj, data) {
console.log(`Data: ${data} DataObj: ${dataObj}`);
const results = document.getElementById('results');
const languageSystem = document.createDocumentFragment();
const p = document.createElement('p');
p.innerHTML = `Text Data: ${dataObj.input}`;
languageSystem.appendChild(p);
if (data.categories.length == 0) {
const label = document.createElement('p');
label.innerHTML = `Label: None`;
languageSystem.appendChild(label);
} else {
data.categories.forEach(element => {
console.log(element);
const label = document.createElement('p');
label.innerHTML = `Label: ${element.label}`;
languageSystem.appendChild(label);
console.log(`Label: ${languageSystem.innerHTML}`);
});
}
console.log(data);
console.log(`Results: ${languageSystem.innerHTML}`);
results.appendChild(languageSystem);
}
When I run the test I'm getting this result back:
Expected: "<p>Text Data: Testing Input</p><p>Label: religious festival or holiday - easter</p>"
Received: ""
68 |
69 | urlValidation('What is going on', postData);
> 70 | expect(document.querySelector('#results').innerHTML).toEqual(`<p>Text Data: Testing Input</p><p>Label: religious festival or holiday - easter</p>`)
| ^
71 | });
at Object.toEqual (src/__tests__/testUrl.spec.js:70:58)
Test Suites: 1 failed, 1 passed, 2 total
Tests: 1 failed, 1 passed, 2 total
Snapshots: 0 total
Time: 4.036 s
Ran all test suites.
npm ERR! Test failed. See above for more details.
Which is strange since I had a test were I was able to add the json data directly to the printData function and that test is working fine.
I also did a bunch of console.log to see if the json data was being passed in correctly to the printData function, and it seemed like it was this is the result.
console.log
Label: religious festival or holiday - easter
at log (src/client/js/checkStatement.js:45:21)
at Array.forEach (<anonymous>)
console.log
{
text: 'Hello',
language: 'en',
categories: [
{
label: 'religious festival or holiday - easter',
code: '12014002',
confidence: 0.54
}
]
}
at log (src/client/js/checkStatement.js:49:13)
I'm pretty sure doing something wrong, but I just can't figure out what.
2 answers
solution1
0 ACCPTED 2020-08-27 13:38:59
There is race condition caused by that there are promises that aren't chained.
urlValidation should return a promise:
return callback("http://localhost:8080/classify-url", inputData).then(...);
Then it can be awaited in a test or any other place that needs to sequentially execute it:
await urlValidation('What is going on', postData);
expect(...)
solution2
0 2020-08-27 22:16:58
Credit goes to Estus Flask since he was the one that helped me understand that it was a race condition.
So what I had to do change the test to an async test.
test('Testing url Validation', async () => {
....
and add an await to wait on the results before running the expected test
await urlValidation('What is going on', postData);
expect(document.querySelector('#results').innerHTML).toEqual(`<p>Text Data: What is going on</p><p>Label: religious festival or holiday - easter</p>`)
again credit goes to Estus Flask, thanks for your Help!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.