Cfrgtkky

I have a large reusable component that wraps up the material data table. My problem is that my unit tests need to check the logic that allows the wrapper to set the initial state of each expansion row(open / closed) and I cannot tell if the click event is running or if fixture.whenRenderingDone is not actually waiting for aniamtions to finish as the height of the clicked row always has a height of 0px, its initial height.

My @component annotation looks like this:

@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)')),

        ]),

    ],

})

This is standard lifted from the angular docs (removed some file names).

My HTML matching this to produce the data table is:

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

The test:

   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);



                });

            });

        });

Some supporting code the test uses:

/**

 * 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'));

}