Я пытаюсь проверить стили, примененные к элементу хоста компонента, но похоже, что примененные стили не будут отображаться в 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 единственным способом проверки стилей, примененных к элементу хоста?