How unit test a code withthe promise window.customElements.whenDefined

[Jim C]

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');

            //const url = "http://localhost:8080/getsessionkey";

            const url = 'https://rapid-api-to-learn.herokuapp.com/getsessionkey';

            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

https://github.com/jimisdrpc/skyscanner-openwc-graphql