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

Skip to first unread message

Jim C

Aug 15, 2019, 1:00:41 PM8/15/19
to Mocha
This was originally asked in 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 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(
    const res = await fetch(htmlPath);

    const textTemplate = await res.text();

    const HTMLTemplate = new DOMParser()
        .parseFromString(textTemplate, 'text/html')

    class skyscannerFlightSearch extends HTMLElement {
        constructor() {

        connectedCallback() {
            this.attachShadow({ mode: 'open' });

            const inputSessionKey = this.shadowRoot.getElementById('inputSessionKey');
            //const url = "http://localhost:8080/getsessionkey";

                .then(function(body) {
                    return body.text();
                .then(function(data) {
                    inputSessionKey.value = 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

 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 `
console.debug('before promisse');
window.customElements.whenDefined('skyscanner-flight-search').then(() => {
console.debug('after promisse');


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
0 new messages