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

45 views
Skip to first unread message

Jim C

unread,
Aug 15, 2019, 1:00:41 PM8/15/19
to Mocha
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";

            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


Reply all
Reply to author
Forward
0 new messages