угловой стенд, запрос по css, поиск псевдоэлемента - PullRequest
Новая
       7

угловой стенд, запрос по css, поиск псевдоэлемента

0 голосов
/ 27 августа 2018

Я пишу угловой тест 2+ с TestBed. Сценарий, я хочу проверить свой компонент, что цвет псевдоэлемента.

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

поэтому, когда я пишу модульный тест, я хочу проверить цвет фона псевдоэлемента 

  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('....');
});

1 Ответ

0 голосов
/ 28 августа 2018

Я бы предложил написать свой тест по-другому.

Устройство имеет тип ComponentFixture<T>, где T - это компонент, к которому вы пытаетесь получить доступ. Свойство debugElement имеет два свойства, которые вы обычно интересуете при написании теста componentInstance и nativeElement

ComponentInstance - это ваш компонент ts файл. В каком-то смысле это объявление вашего класса.

NativeElement, как следует из названия, это наценка или ваш template

Я не думаю, что это возможно сделать так, как вы предлагали.

Однако вы можете попробовать 

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

Это даст вам результат RGB, поэтому для красного это будет rgb(255,0,0)

Я получил это от: Как получить псевдоэлемент?

Попробуйте и посмотрите, работает ли это. Нехорошо, что нам пришлось получить доступ к элементу окна внутри нашего теста, но это может решить вашу проблему. Возможно, создайте лучший тест без необходимости доступа к API окна, который я бы предложил.

...