如何测试按钮的disabled属性？

Question

我有一个简单的 stencil 组件，如下所示：

@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>
    );
  }
}

在运行时，这工作得很好。 但我想测试当组件的 prop 设置为 true 时

button

是否被有效禁用：

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

使用调试器，我注意到 prop 被有效设置为

true

，但 HTML 属性为

undefined

。我如何检查该属性？

Answer 1

规范单元测试中的

SpecPage

将您限制在 HTML 界面。您只能测试呈现的 DOM 中存在的内容，而不能测试组件的任何其他属性。因此，如果组件的

Prop

未反映为属性，则无法使用

SpecPage

访问它。您可以使用

Prop

强制反映

@Prop({ reflect: true })

- 如果它是字符串、数字或布尔值。但你可能不想这样做 - 特别是像

disabled

这样的布尔值，然后会显示为

disabled="false"

等。这不是你应该做的事情，这样你就可以通过

SpecPage

测试它 - 你应该只有在你的组件时才这样做就是为了做到这一点。

在 e2e 测试中，您可以使用 E2EPage，它使您可以访问组件的属性和属性。例如：

const page = await newE2EPage({ ... });
const component = await page.find('app-filled-button');
const disabled = await component.getProperty('disabled');