модульное тестирование моей таблицы данных угловых материалов с панелью расширения или не запускается, или не обнаруживает завершение анимации? - PullRequest
Новая
       18

модульное тестирование моей таблицы данных угловых материалов с панелью расширения или не запускается, или не обнаруживает завершение анимации?

0 голосов
/ 21 ноября 2018

У меня есть большой компонент многократного использования, который оборачивает таблицу данных материала.Моя проблема заключается в том, что мои модульные тесты должны проверять логику, которая позволяет оболочке устанавливать начальное состояние каждой строки расширения (открыто / закрыто), и я не могу сказать, выполняется событие click или если fixture.whenRenderingDone фактически не ожидаетанимации заканчиваются, так как высота строки, по которой щелкают, всегда имеет высоту 0px, ее начальную высоту.

Моя аннотация @component выглядит следующим образом: 

@Component({
    selector: '',
    templateUrl: './.html',
    styleUrls: ['./scss'],
    animations: [
        trigger('detailExpand', [
            state('collapsed', style({ height: '0px', minHeight: '0', display: 'none' })),
            state('expanded', style({ height: '*' })),
            transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
        ]),
    ],
})

Это стандартное поднятие изугловые документы (удалены некоторые имена файлов).

Мой HTML, соответствующий этому для создания таблицы данных: 

<ng-container *ngIf="hasExpansionPanel">
   <mat-row *matRowDef="let row; columns: ['expandedDetail']" class="expansion-row no-padding" [@detailExpand]="row == expandedRow || expandAllPanels ? 'expanded' : 'collapsed'"></mat-row>
</ng-container>

Тест: 

   it('should be able to display a nested table', () => {
            fixture.whenStable().then(() => {
                const standardRows: NodeListOf<HTMLElement> = fixture.nativeElement.querySelectorAll('.standard-row');
                const firstRow: HTMLElement = standardRows[0];

                const expansionRows: NodeListOf<HTMLElement> = fixture.nativeElement.querySelectorAll('.expansion-row');
                const firstExpansionRow: HTMLElement = expansionRows[1];
                const originalPanelRowHeight = firstExpansionRow.clientHeight;

                clickEvent(firstRow);
                fixture.detectChanges();

                fixture.whenRenderingDone().then(() => {
                    // animation
                    expect(originalPanelRowHeight).toBe(0);
                    expect(firstExpansionRow.clientHeight).toBeGreaterThan(0);

                });
            });
        });

Некоторый поддерживающий кодтест использует: 

/**
 * Create custom DOM event the old fashioned way
 *
 * https://developer.mozilla.org/en-US/docs/Web/API/Event/initEvent
 * Although officially deprecated, some browsers (phantom) don't accept the preferred "new Event(eventName)"
 */
export function newEvent(eventName: string, bubbles = false, cancelable = false) {
    const evt = document.createEvent('CustomEvent');  // MUST be 'CustomEvent'
    evt.initCustomEvent(eventName, bubbles, cancelable, null);
    return evt;
}

export function clickEvent(ele: Element): void {
    ele.dispatchEvent(newEvent('click'));
}
...