For my current project, I am working on writing a functional spec that involves using Mocha/JSDOM and making assertions with 'chai'.
The specific use case I am tackling is related to the function called updateContent:
- When this function is executed, it internally triggers another function to fetch HTML content.
- After retrieving the HTML content, it needs to be processed and added to the existing DOM elements.
While the functionality works smoothly when run on the server, I encounter an issue when attempting to write a test specification. The problem arises where the updated DOM is not visible during the testing phase. Upon inspecting the updateContent function by inserting console statements, I indeed witness the updated content. However, once control is passed to the spec function, only the original DOM added to JSDOM is displayed.
The implementation involves TypeScript, JavaScript combination, and the utilization of jQuery for DOM operations.
I would greatly appreciate it if you could offer any insights or suggestions on what might be missing in this scenario. I have already tried utilizing globals while accessing the necessary components.
The updateContent function can be found in the helper.js file
function updateContent(year, fetchAge) {
Promise.all([fetchAge("age")]).then((data) => {
console.log("DOM before update ="+$('html').html());
data = data[0].replace(/{{age}}/g, year);
$('.mybenifits .content').html(data);
console.log("DOM after update ="+$('html').html());//Able to see the updated DOM
console.log("$('.mybenifits .content').html="+global.$('.mybenifits .content').html());
}).catch((error) => {
console.log(" ******* Error while fetching age info");
});
}
The code snippet for the Spec: helper.test.js
const expect = require('chai').expect;
const assert = require('chai').assert;
const sinon = require('sinon');
const { JSDOM } = require('jsdom');
const { updateContent } = require('../../main/webpack/common/helper.js');
describe('Helper - Example', () => {
it('should update the content', () => {
let htmlStr = '<!doctype html><html><body><div class="mybenifits"><div class="content"></div></div></body></html>';
const jsdom = new JSDOM(htmlStr, {
url: 'http://localhost/',
});
//Setting Global variables - start
global.window = jsdom.window;
global.document = jsdom.window.document;
global.$ = require('jquery');
//Setting GLobal variables - end
//Mocking fetchAge function
function fetchAge(featurename) {
return '<p id="fcontent">Current Age is {{age}}</p>';
}
updateContent("2020",fetchAge);
console.log("Total html file ="+$('html').html());
//expect($('.mybenifits .content').html()).to.be.equal('<p id="fcontent">Current Age is 2020</p>');
//expect(global.$('.mybenifits .content').html()).to.be.equal('<p id="fcontent">Current Age is 2020</p>');//Not working even if I use global
});
});