css - angular testbed，css查询，找到伪元素

Question

我正在使用 TestBed 进行 Angular 2+ 单元测试。场景，我想验证我的组件，即伪元素的颜色。

组件.ts

label::before {
        right: 0;
        background-color: red;
      }

@Component({
  selector: 'app-test',
  template: `
    <div><label>a label</label></div>
  `,
  styleUrls: ['./test.component.scss'],
})
export class TestComponent {
  
}

所以我写单元测试的时候，想验证一下伪元素背景色

  beforeEach(() => {
     fixture = TestBed.createComponent(TestComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

it('should set background color', () => {
  const ele = fixture.debugElement.query(By.css('label::before')).nativeElement; // error here
  // not sure how to use by.css to locate on the pseudo element
  expect(ele.backgroundColor).toBe('....');
});

Answer 1

我建议您以不同的方式编写测试。

夹具类型为 ComponentFixture<T>其中 T是您要访问的组件。 debugElement property 有两个您在编写测试时通常感兴趣的属性 componentInstance和 nativeElement

ComponentInstance是你的组件ts文件。从某种意义上说，这是您的类(class)声明。

NativeElement顾名思义就是加价或者你的template

我认为不可能按照您建议的方式进行。

你可以试试

  const color =  window.getComputedStyle(fixture.debugElement.nativeElement.querySelector('label'), ':after').getPropertyValue('background-color');

这将为您提供 rgb 结果，因此对于红色，它将是 rgb(255,0,0)

我从:How to get pseudo element? 得到这个

试试这个，看看它是否有效。我们必须在测试中访问 window 元素并不是很好，但它可能会解决您的问题。可能无需访问我建议的窗口 api 就可以创建更好的测试。