Angular 2+: Как проверить стили элементов хоста, которые применяются с помощью: селектора хоста? - PullRequest
0 голосов
/ 29 мая 2019

Я пытаюсь проверить стили, примененные к элементу хоста компонента, но похоже, что примененные стили не будут отображаться в fixture.debugElement.nativeElement.style, если они применяются с помощью селектора :host в таблице стилей.

Допустим, у нас есть компонент кнопки:

@Component({
  selector: 'test-button',
  templateUrl: './button.component.html',
  styleUrls: ['./button.component.scss'],
})
export class ButtonComponent implements OnInit {
  constructor() {}

  ngOnInit() {}
}

, а button.component.scss содержит:

:host {
  border-radius: 4px;
}

и в нашем файле спецификаций:

describe('ButtonComponent', () => {
  let fixture: ComponentFixture<TestApp>;
  let buttonDebugElement: DebugElement;
  let testComponent: TestApp;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [ButtonModule],
      declarations: [TestApp],
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(TestApp);
    testComponent = fixture.componentInstance;
    buttonDebugElement = fixture.debugElement.query(By.css('test-button'));
  });

  describe('styles', () => {
    let hostElement: HTMLElement;

    beforeEach(() => {
      hostElement = buttonDebugElement.nativeElement;
    });

    it('should have border-radius of 4px', () => {
      // hostElement.style.borderRadius is "" instead of "4px"
      expect(hostElement.style.borderRadius).toBe('4px');
    });
  });
});

/** Test App. */
@Component({
  selector: 'test-app',
  template: `
    <test-button>
      {{ textContent }}
    </test-button>
  `,
})
class TestApp {
  textContent: string = 'Hi test-button!';
}

Но если я использую HostBinding('style.borderRadius'), он работает как положено.

Есть ли способ проверить стили, применяемые через: host selector?Если нет, является ли @HostBinding единственным способом проверки стилей, примененных к элементу хоста?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...