I have a simple stencil component like this:
@Component({
tag: 'app-filled-button',
styleUrl: 'filled-button.css',
shadow: true,
})
export class FilledButton {
@Prop() disabled: boolean;
render() {
return (
<button disabled={this.disabled}>
<slot></slot>
</button>
);
}
}
In runtime, this works fine.
But I want to test if the button
is effectively disabled when the component's prop is set to true:
describe('testing filled button component', () => {
let page: SpecPage;
let host: HTMLElement;
beforeEach(async () => {
page = await newSpecPage({
components: [FilledButton],
html: '<app-filled-button disabled="true"></app-filled-button>'
});
host = page.body.querySelector('app-filled-button');
});
it('should be disabled', async () => {
const button = host.shadowRoot.querySelector('button');
expect(button.disabled).toBe(true);
});
});
With the debugger, I notice that the prop is effectively set to true
but the HTML attribute is undefined
. How can I check that attribute?
SpecPage
in spec unit tests limits you to the HTML interface. You can only test what exists in the rendered DOM, not any other properties of a component. So if the component's Prop
is not reflected as an attribute, you can't access it using SpecPage
. You can force a Prop
to be reflected - if it is a string, number, or boolean - using @Prop({ reflect: true })
. But you may not want to do that - particularly booleans like disabled
which would then appear as disabled="false"
etc. It's not something you should do just so you can test it via SpecPage
- you should do it only if your component is intended to do that.
In e2e tests you can use E2EPage which gives you access to the component's properties as well as attributes. For example:
const page = await newE2EPage({ ... });
const component = await page.find('app-filled-button');
const disabled = await component.getProperty('disabled');