How to test disabled attribute of a button?

Question

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?

Answer 1

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');