This was originally asked in
https://stackoverflow.com/questions/57502410/window-customelements-whendefined-never-been-resolved-when-testing-with-karma. Basically, I have a very simple native webcomponent splitted in two files (one for javascript and another for html). I am struggling someway to unit test it but either I am in wrong direction or I am missing some basic concept. My question could also be written as how can write async/await (as described in
https://stackoverflow.com/questions/57502410/window-customelements-whendefined-never-been-resolved-when-testing-with-karma) which I have to wait for the promisse window.customElements.whenDefined be resolved? Kindly, see my webcomponent and its test. No matter which assertion I tried I am always getting PASSES test when tensting with Karma.
My javascript webcomponent
(async() => {
//const res = await fetch('../src/skyscanner-flight-search/skyscanner-flight-search.html');
const htmlPath = new URL(
'./skyscanner-flight-search.html',
import.meta.url,
);
const res = await fetch(htmlPath);
const textTemplate = await res.text();
const HTMLTemplate = new DOMParser()
.parseFromString(textTemplate, 'text/html')
.querySelector('template');
class skyscannerFlightSearch extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.appendChild(HTMLTemplate.content.cloneNode(true));
const inputSessionKey = this.shadowRoot.getElementById('inputSessionKey');
fetch(url)
.then(function(body) {
return body.text();
})
.then(function(data) {
inputSessionKey.value = data;
console.log(data);
});
}
}
window.customElements.define('skyscanner-flight-search', skyscannerFlightSearch);
})();
My webcomponent, html part
<template id="skyscanner-flight-search-template"
><div id="firstdiv"><input id="inputSessionKey" /></div
></template>
My Karma/Mocha unit test
import { html, fixture, expect } from '@open-wc/testing';
import '../src/skyscanner-flight-search/skyscanner-flight-search.js';
describe('skyscanner flight search', () => {
it('show div', async() => {
const el = await fixture(html `
<skyscanner-flight-search></skyscanner-flight-search>
`);
console.debug('before promisse');
window.customElements.whenDefined('skyscanner-flight-search').then(() => {
el.shadowRoot.querySelector('#firstdiv2');
console.debug('after promisse');
expect(el).to.exist;
});
});
});
In other words, console.debug('after promisse'); is never executed.
I don't think it is necessary but anyway the whole code can be cloned from