For some reason DOM is not cleared between lwc jest tests (I think).
What I want to test that page renders with lightning-input disabled by default and after button click it's enabled.
Test pass perfect if they are ran individually, but not when in same file.
Template:
<template>
<lightning-button onclick={enable} label="Enable"></lightning-button>
<lightning-input label="foo" disabled={isDisabled}></lightning-input>
</template>
Controller: import {LightningElement} from 'lwc';
export default class ButtonPress extends LightningElement {
isDisabled = true
enable(){
this.isDisabled = false
}
}
Test:
import {createElement} from 'lwc';
import buttonPress from 'c/buttonPress';
const flushPromises = () => new Promise(resolve => setImmediate(resolve))
describe('c-button-press', () => {
afterEach(() => {
while (document.body.firstChild) {
document.body.removeChild(document.body.firstChild);
}
});
describe('when setup is complete', () => {
const element = createElement('c-button-press', {
is: buttonPress
});
document.body.appendChild(element);
describe('when rendered', () => {
let elements
beforeEach(async () => {
await flushPromises()
elements = Array.from(element.shadowRoot.querySelectorAll('lightning-input'))
})
it('displays disabled input field', () => {
expect(elements).toHaveLength(1)
expect(elements.filter(i => i.disabled)).toHaveLength(1)
})
})
})
});
describe('c-button-press', () => {
afterEach(() => {
while (document.body.firstChild) {
document.body.removeChild(document.body.firstChild);
}
});
describe('when setup is complete', () => {
const element = createElement('c-button-press', {
is: buttonPress
});
document.body.appendChild(element);
describe('when clicking edit', () => {
let elements
beforeEach(async () => {
await new Promise(r => setTimeout(r, 10));
const buttons = element.shadowRoot.querySelectorAll('lightning-button');
buttons[0].click();
await flushPromises()
elements = element.shadowRoot.querySelectorAll('lightning-input')
})
it('enables field editing', async () => {
expect(Array.from(elements).filter(i => i.disabled)).toHaveLength(0)
})
})
})
})