Unit testing LitElement events in firstUpdated - unit-testing

Question

I have a simple mixin:
export const mixin = superclass => class extends superclass {
firstUpdated() {
super.firstUpdated();
this.dispatchEvent(new CustomEvent('my-event', {
bubbles: true,
composed: true,
detail: {
myEventTriggered: true,
},
}));
}
};
I want to test if my-event is fired. This is my test:
it('dispatches the custom event', async () => {
const tag = class extends mixin(LitElement) {};
const el = await fixture(`<${tag}></${tag}>`);
setTimeout(() => el.firstUpdated());
const { detail } = await oneEvent(el, 'my-event');
expect(detail.myEventTriggered).to.be.true;
});
This works as expected but I'm not sure about the setTimeout(() => el.firstUpdated()); line. Shouldn't firstUpdated be called after await fixture? I'm just following open-wc's testing guide.

Answer 1

Got an answer from #daKMor:
testing firstUpdated is a little tricky as as soon as you add it to the dom it's executed (with an arbitrary delay depending on the work your element is doing) https://lit-element.polymer-project.org/guide/lifecycle#firstupdated
what you can do is:
it('dispatches a custom event on firstUpdated', async () => {
const tag = class extends mixin(LitElement) {};
const el = fixtureSync(`<${tag}></${tag}>`);
const ev = await oneEvent(el, 'my-event');
expect(ev).to.exist;
});
it('dispatches a custom event on connectedCallback', async () => {
class Foo extends mixin(class {}) {};
const el = new Foo();
setTimeout(() => el.connectedCallback());
const ev = await oneEvent(el, 'my-event');
expect(ev).to.exist;
});
Note: this is untested code - if it works pls let me know and we could add that info and a little description to the faq. Maybe you could do a Pull Request?
For connectedCallback, since this callback is fired immediately after calling fixture, you can't catch it anymore. What you can do is define a new component and test its callback function in a setTimeout. An HTMLElement or LitElement is needed since oneEvent adds an Event Listener to the element.
it('dispatches a custom event on connectedCallback', () => {
const tag = defineCE(class extends mixin(LitElement) {});
const foo = document.createElement(`${tag}`);
setTimeout(() => foo.connectedCallback());
const ev = await oneEvent(foo, 'connected-callback');
expect(ev).to.exist;
});