如何获取值 Angular 单元测试 CSSStyleDeclaration
How to get value Angular unit test CSSStyleDeclaration
我试试测试Angular材质mat-expansion-panel open.
因此,我使用以下代码进行测试。
describe('Selected first expansion panel', () => {
beforeEach(() => {
const header = fixture.debugElement.query(By.css('#panel1 .mat-expansion-panel-header'))!.nativeElement;
header.click();
fixture.detectChanges();
});
it('should show first expansion panel content', () => {
const first = fixture.debugElement.query(By.css('#panel1 .mat-expansion-panel-content'))!.nativeElement;
console.log(first.style);
expect(first.style.visibility).toEqual('visible');
});
});
低于控制台(console.log(first.style))输出在"it"
CSSStyleDeclaration {alignContent: "", alignItems: "", alignSelf: "", alignmentBaseline: "", all: "", …}
cssText: "visibility: visible;"
length: 1
parentRule: null
cssFloat: ""
0: "visibility"
...
visibility: "visible"
...
但是,expect(first.style.visibility).toEqual('visible') 失败,Expected '' 等于 'visible'.
如何获得
尝试在 window 对象上使用 getComputedStyle
。
it('should show first expansion panel content', () => {
const first = fixture.debugElement.query(By.css('#panel1 .mat-expansion-panel-content'))!.nativeElement;
const styles = getComputedStyle(first);
console.log(styles); // make sure you get an object
expect(styles.visibility).toEqual('visible');
});
我试试测试Angular材质mat-expansion-panel open.
因此,我使用以下代码进行测试。
describe('Selected first expansion panel', () => {
beforeEach(() => {
const header = fixture.debugElement.query(By.css('#panel1 .mat-expansion-panel-header'))!.nativeElement;
header.click();
fixture.detectChanges();
});
it('should show first expansion panel content', () => {
const first = fixture.debugElement.query(By.css('#panel1 .mat-expansion-panel-content'))!.nativeElement;
console.log(first.style);
expect(first.style.visibility).toEqual('visible');
});
});
低于控制台(console.log(first.style))输出在"it"
CSSStyleDeclaration {alignContent: "", alignItems: "", alignSelf: "", alignmentBaseline: "", all: "", …}
cssText: "visibility: visible;"
length: 1
parentRule: null
cssFloat: ""
0: "visibility"
...
visibility: "visible"
...
但是,expect(first.style.visibility).toEqual('visible') 失败,Expected '' 等于 'visible'.
如何获得
尝试在 window 对象上使用 getComputedStyle
。
it('should show first expansion panel content', () => {
const first = fixture.debugElement.query(By.css('#panel1 .mat-expansion-panel-content'))!.nativeElement;
const styles = getComputedStyle(first);
console.log(styles); // make sure you get an object
expect(styles.visibility).toEqual('visible');
});