1

I am writhing Angular 2+ unit test with TestBed. Scenario, I want to verify my component, that the color of a pseudo element.

component.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 {
  
}

so when I write unit test, I want to verify the pseudo element background color

  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('....');
});
R. Richards
  • 24,603
  • 10
  • 64
  • 64
Huantao
  • 847
  • 1
  • 11
  • 18

1 Answers1

1

I would suggest writing your test in a different manner.

Fixture is of type ComponentFixture<T> where T is the component you are trying to access. The debugElement property has two properties that you are normally interested In when writing a test componentInstance and nativeElement

ComponentInstance is your component ts file. It's your class declaration in a sense.

NativeElement as the name suggests is the mark-up or your template

I don't think it's possible to do it the way you suggested.

However you could try

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

This will give you a rgb result so for red it would be rgb(255,0,0)

I got this from: How to get pseudo element?

Try this and see if it works. It's not great that we had to access the window element inside of our test but it might solve your issue. Possibly create a better test without having to access the window api i would suggest.

Nico
  • 1,961
  • 17
  • 20