Trying to perform unit tests on LitElement components has been quite a challenge for me. I found myself stuck when attempting to isolate components, particularly in figuring out how to stub elements effectively. The Polymer project provides some information regarding unit testing but the solution I needed, replacing a valid element with a dummy one, remained elusive.
In my exploration of the replace() function mentioned by the polymer project here, I failed to locate its definition or implementation details. What truly caught my attention was the section titled "Create Stub Elements," as it seemed to hold the key to what I was looking for.
The code snippet showcasing the element's definition:
export class AppElement extends LitElement {
render() {
return html`
<header-element class="header"></header-element>
<div class="body">
<menu-element></menu-element>
<social-media-element></social-media-element>
<contacts-element></contacts-element>
<tap-list-element name="Fridge List" display="fridge"></tap-list-element>
<tap-list-element route="tap" name="Tap List" display="tap" ></tap-list-element>
<home-element></home-element>
<about-us-element></about-us-element>
<not-found-element></not-found-element>
</div>
`;
}
}
The element test setup:
describe("Test Case for the AppElement Component", function() {
beforeEach(() => {
app = new AppElement();
document.body.appendChild(app);
shadow = app.shadowRoot;
app.updateComplete.then(() => {
const tapListStub = new TapListElementStub();
const tapListNodes = shadow.querySelectorAll('tap-list-element');
console.log(app);
const tapListLength = tapListNodes.length;
const tapListNode = tapListLength === 1 ? tapListNodes[0] : null;
tapListNode.replaceWith(tapListStub);
});
});
it("should have the node for tap-list replaced with a stub", function(done) {
app.updateComplete.then(() => {
const newTap: TapListElement = shadow.querySelector('tap-list-element');
console.log(shadow);
assert.strictEqual('Tap List Stub', newTap.name);
done();
})
});
The original TapListElement code:
@customElement('tap-list-element')
export class TapListElement extends LitElement {
private _menu: Menu;
private _tapList: Section;
private _bottleList: Section;
@property()
name: string = 'Tap List';
@property({type: String, attribute: true})
display: string;
constructor() {
super();
super.connectedCallback();
}
}
And here is the stub version:
@customElement('tap-list-element')
export class TapListElementStub extends LitElement {
@property()
name: string = 'Tap List Stub';
@property({type: String, attribute: true})
display: string;
constructor() {
super();
super.connectedCallback();
}
}
Please excuse any formatting errors or inconsistencies.
I encountered an issue while implementing the above code, receiving an error stating that the web component named "tap-list-element" had already been registered. I attempted removing the @customElement decorator from the TapListElementStub, only to face another error indicating an Illegal Constructor had been invoked. Has anyone successfully managed to stub LitElement components before? My background lies in Angular development, where TestBed assists in setting up modules and allows easy substitution of components as long as attributes match and the component's name in the decorator remains consistent.