open-wc / testing测试CSS属性

问题描述

我正在尝试测试我的Web组件的CSS属性：

import {SdkIconButton} from '../';
import {expect,fixture,html} from '@open-wc/testing';

const assert = chai.assert;

suite('sdk-icon-button',() => {
  test('css color property',async () =>{
    const el = await fixture(html`<sdk-icon-button text="Test" icon="plus"></sdk-icon-button>`);
    expect(el.firstChild().css('color')).to.eq('red');
  });
});

这是sdk-icon-按钮：

import {html,customElement,property,css} from 'lit-element';
import {SdkButton} from '../sdk-button';

@customElement('sdk-icon-button')
export class SdkIconButton extends SdkButton {
  static styles = css`
    .iconBtn {
      display: block;
      color: red;
    }
  `;

  @property()
  icon: string;

  constructor() {
    super();
    this.icon = 'default';
  }

  public render() {
    return html`
            <button type="button" class="iconBtn" ${this.text} with icon ${this.icon}</button>
        `;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'sdk-icon-button': SdkIconButton;
  }
}

但是当我尝试运行测试时，出现以下错误：

src / test / sdk-icon-button_test.ts：34：12-错误TS2721：无法调用 一个可能为“ null”的对象。

expect（el.firstChild（）。css（'color'））。to.eq（'red'）; ~~~~~~~~~~~~~

src / test / sdk-icon-button_test.ts：34：15-错误TS2349：此表达式 不可通话。类型“ ChildNode”没有呼叫签名。

expect（el.firstChild（）。css（'color'））。to.eq（'red'）;

那我如何测试CSS属性？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）