Как получить значение Angular модульного теста CSSStyleDeclaration - PullRequest
Новая
       40

Как получить значение Angular модульного теста CSSStyleDeclaration

0 голосов
/ 12 марта 2020

Я пытаюсь проверить Angular материал мат-панель расширения открыта.

Итак, я тестирую с кодом ниже. 

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"
...

Но ожидаемое сбой (first.style.visibility) .toEqual ('visible') с Expected '' равно 'visible'.

Как достать

1 Ответ

1 голос
/ 12 марта 2020

Попробуйте использовать 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');
    });
...