Тестирование * ngIf показывает / скрывает компонент в зависимости от данных - PullRequest
Новая
       22

Тестирование * ngIf показывает / скрывает компонент в зависимости от данных

0 голосов
/ 25 мая 2018

Я пытаюсь протестировать компонент отображения / скрытия данных.Без его данных (в настоящее время неопределенных) отображается простой блок текста.

Однако когда я затем подаю компоненту данные, первый блок должен стать скрытым, а второй блок, который состоит из списка данных в таблице , должен стать видимым, как бы ноль ни показывалосьвернулся (с DataBlock).

Поэтому проверяет ошибки на последнем ожидании теста, хотя я заранее добавляю метод fixture.detectChanges().

компонент: 

 import { Component, OnInit, OnChanges, Input, SimpleChanges, OnDestroy, ViewChildren, QueryList } from '@angular/core';
import { Response } from '@angular/http';
import { AccountSearchService } from './../../services/account-search.service';
import { ISearchResult, ISearchResultContentItem, IContentItemStatus } from './../../entities/search.entity';
import { SortByPipe } from './../../pipes/sort.pipe';
import { FilterPipe } from './../../pipes/filter.pipe';
import { CapitalisePipe } from './../../pipes/capitalise.pipe';
import { Subject, Subscription } from 'rxjs';

@Component({
    selector: 'app-account-list',
    templateUrl: './account-list.component.html',
    styleUrls: ['./account-list.component.scss'],
    inputs: ['inputSearchTerm']
})
export class AccountListComponent implements OnInit, OnChanges, OnDestroy {
    private searchTerm: string = undefined;
    private sortByParam: string = "name";
    private initialText = "Perform search above to view results below.";
    private subs: Subscription = undefined;
    private searchResults: ISearchResult = undefined;
    private accountsCollection: Array<ISearchResultContentItem> = undefined;

    @Input() public set inputSearchTerm(value: string) {
        this.searchTerm = value;
    }

    constructor(
        private _accountSearchService: AccountSearchService
    ) {

    }

    ngOnInit() {

    }

    ngOnChanges(changes: SimpleChanges) {
        if (!changes.inputSearchTerm.firstChange) {

            let curValue = changes.inputSearchTerm.currentValue;

            this.subs = this._accountSearchService.SearchAccounts()
                .subscribe((response: Response) => {

                    if (response.status == 200) {
                        this.searchResults = <ISearchResult>response.json();
                        this.accountsCollection = <Array<ISearchResultContentItem>>this.searchResults.content;
                    }
                }
            )
        }
    }

    ngOnDestroy() {
        if (this.subs)
            this.subs.unsubscribe();
    }

}

HTML: 

<section>
    <div id="accounts-list" class="accounts-list">
        <div id="accountsListNoData" class="row" *ngIf="!accountsCollection">
            <div class="col-12">
                <p>{{ initialText }}</p>
            </div>
        </div>
        <div id="accountsListWithData" class="row accountsListWithData" *ngIf="accountsCollection">
            <div class="col-12">

                <div class="row" *ngIf="searchTerm">
                    <div class="col-6">
                        <p>You searched for: "{{ searchTerm }}"</p>
                    </div>
                    <div class="col-6 text-right" *ngIf="searchResults">
                        <p>{{ 'Page: ' + (searchResults.page+1) + ' of ' + searchResults.totalPages }}</p>
                    </div>
                </div>

                <div class="row" *ngIf="(accountsCollection | filter: searchTerm).length === 0">
                    <div class="col-12">
                        <p>No results found</p>
                    </div>
                </div>

                <div class="row">
                    <div class="col-12" *ngIf="(accountsCollection | filter: searchTerm).length > 0">
                        <div class="table-responsive">

                            <table id="accountsListTable" class="table">
                                <thead class="thead-brand">
                                    <tr>
                                        <th scope="col">
                                            <a (click)="sortByParam='id'" title="Sort by Account ID">Account ID</a>
                                        </th>
                                        <th scope="col">
                                            <a (click)="sortByParam='name'" title="Sort by Account Name">Account name</a>
                                        </th>
                                        <th scope="col">
                                            <a href="#" title="Sort by account number">Account number</a>
                                        </th>
                                        <th scope="col">
                                            <a href="#" title="Sort by account sort code">Sort code</a>
                                        </th>
                                        <th scope="col">
                                            <a (click)="sortByParam='balance'" title="Sort by balance">Balance</a>
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr *ngFor="let account of accountsCollection | filter: searchTerm | sortBy: sortByParam">
                                        <td scope="row">{{ account.id }}</td>
                                        <td>
                                            <strong>{{ account.name | capitalise }}</strong>
                                        </td>
                                        <td [innerHTML]="account.identifiers[0].accountNumber"></td>
                                        <td [innerHTML]="account.identifiers[0].sortCode"></td>
                                        <td [innerHTML]="'&pound;' + account.balance"></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Тест: 

import { async, ComponentFixture, TestBed, tick } from '@angular/core/testing';
import { AccountListComponent } from './account-list.component';
import { DebugElement } from '@angular/core';
import { By } from '@angular/platform-browser';
import { SortByPipe } from './../../pipes/sort.pipe';
import { FilterPipe } from './../../pipes/filter.pipe';
import { CapitalisePipe } from './../../pipes/capitalise.pipe';
import { Http, HttpModule } from '@angular/http';
import { AccountSearchService } from '../../services/account-search.service';
import { ISearchResult, IContentItemStatus, IIdentifiers, ISearchResultContentItem } from './../../entities/search.entity';

describe("AccountListComponent", () => {
    let component: AccountListComponent;
    let fixture: ComponentFixture<AccountListComponent>;
    let debEl: DebugElement;

    beforeEach(async () => {
        TestBed.configureTestingModule({
            declarations: [
                AccountListComponent, CapitalisePipe, SortByPipe, FilterPipe
            ],
            imports: [HttpModule],
            providers: [AccountSearchService]
        }).compileComponents()
    })

    beforeEach(() => {
        fixture = TestBed.createComponent(AccountListComponent);
        component = fixture.componentInstance;
        debEl = fixture.debugElement;
    })


    it("should initialise the component", () => {
        fixture.detectChanges();
        fixture.whenStable().then(() => {
            expect(component).toBeTruthy();
        });
    })

    it("should show accounts-list__noData block without data", () => {

        expect((<any>component).searchResults).toBeUndefined;

        fixture.detectChanges();

        //test initial instruction text
        let alEl = debEl.query(By.css(".accounts-list"));
        let withoutDataBlock = <HTMLDivElement>alEl.nativeElement.querySelector("p");
        expect(withoutDataBlock.textContent).toEqual((<any>component).initialText);
    })

    it("Show accounts-list__withData block with passed in data", fakeAsync((done) => {

    let alEl = debEl.query(By.css(".accounts-list"));
    let withDataBlock = <HTMLDivElement>alEl.nativeElement.querySelector("#accountsListWithData");

    expect((<any>component).searchTerm).toBeUndefined;
    expect(withDataBlock).toBeUndefined;

    const testAccounts = <ISearchResult>{
        content: <Array<ISearchResultContentItem>>[
            {
                id: "A02017NU",
                name: "1010 SOFTWARE LTD",
                balance: "46.91",
                currency: "GBP",
                status: IContentItemStatus.ACTIVE,
                identifiers: <Array<IIdentifiers>>[
                    {
                        type: "SCAN",
                        accountNumber: "00001232",
                        sortCode: "000000"
                    }
                ],
                customerId: "C0200098",
                externalReference: "Account 1"
            }
        ],
        page: 0,
        size: 15,
        totalPages: 407,
        totalSize: 60960944
    };

    component.inputSearchTerm = "software";

    const inputSearchTerm = <SimpleChange> {
        currentValue: "software",
        firstChange: false,
        previousValue: undefined
    }

    component.ngOnChanges({ inputSearchTerm });
    fixture.checkNoChanges();
    fixture.detectChanges();
    done();
    expect((<any>component).searchTerm).toBeDefined;


}))

})

Ошибка: 

ERROR: 'Unhandled Promise rejection:', 'Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'ng:///DynamicTestModule/AccountListComponent.ngfactory.js'.', '; Zone:', '<root>', '; Task:', 'Promise.then', '; Value:', DOMException{stack: 'Error: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'ng:///DynamicTestModule/AccountListComponent.ngfactory.js'.
    at http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:2990:1
    at XMLHttpRequest.proto.(anonymous function) [as send] (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:1394:1)
    at Array.<anonymous> (http://localhost:9876/absolute/Users/victoroyea/Documents/Sites/modulr/modulr/node_modules/source-map-support/browser-source-map-support.js?f894bb45358bceea281c12011b12863c67d3942c:111:263)
...