Как проверить, отображался ли компонент (* ngIf) в Angular 6 UI Tests - PullRequest
Новая
       12

Как проверить, отображался ли компонент (* ngIf) в Angular 6 UI Tests

0 голосов
/ 17 сентября 2018

Я пытаюсь написать тесты пользовательского интерфейса для моего компонента в Angular 6, и я хочу проверить, был ли мой компонент отображен. Этот компонент отображается условно * ngIf. 

<tbody>
    <ng-container *ngFor="let data of summaryData">
        <tr>
            <td>
                <app-icon *ngIf="data.isFlagSelected"></app-icon>
                {{data.description}}
            </td>
[...]

Вот что я сделал: 

describe("MyComponent", () => {
    let component: MyComponent;
    let fixture: ComponentFixture<MyComponent>;
    let de: DebugElement[];
    let elRows: HTMLElement[];

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [MyComponent]
        }).compileComponents().then(() => {
            fixture = TestBed.createComponent(MyComponent);
            component = fixture.componentInstance;

            de = fixture.debugElement.queryAll(By.css("table tbody tr"));
            elRows = de.reduce((acc, curr) => acc.concat(curr.nativeElement), []);
        });
    }));

    it("should display icon when flag === true", () => {

        // data1 has Description SomeRecord_1 and data.isFlagSelected=true
        const data1 = elRows.find(e => e.innerText.includes("SomeRecord_1")).getElementsByTagName("td")[0];

        // data2 has Description SomeRecord_2 and data.isFlagSelected=false
        const data2 = elRows.find(e => e.innerText.includes("SomeRecord_2")).getElementsByTagName("td")[0];

        expect(data1.getElementsByTagName("app-icon").length).toBeTruthy();
        expect(data2.getElementsByTagName("app-icon").length).toBeFalsy();
    });
});

И это хорошо работает! Однако мне интересно, правильно ли я это сделал или как-то лучше.

...