NoopAnimationsModule not working as expected ?

[Dji75]

Hello !

I'm facing some trouble using .keep(NoopAnimationsModule, { export: true }) in a recently migrated Angular project (from A8 to A14).

I usually disable animations using the previous code but apparently it does not work in this specific project and I wonder why (it worked like a charm in another projects)

Here is the "simplified" template:

      <div @fadeInOutTrans *ngFor="let element of elements; trackBy: trackById"

The transition function:

export function fadeInOutWithTransition(fadeInDuration: string, fadeOutDuration: string): AnimationTriggerMetadata {
  return trigger('fadeInOutTrans', [
    transition(':enter', [style({ opacity: 0 }), animate(`${fadeInDuration} ease-out`, style({ opacity: 1 }))]),
    transition(':leave', [style({ opacity: 1 }), animate(`${fadeOutDuration} ease-out`, style({ opacity: 0 }))]),
  ]);
}

The "simplified" unit test:

  beforeEach(() =>
    MockBuilder(ElementsComponent, ElementsModule)
      .keep(NoopAnimationsModule, { export: true })
      .provide(
        provideMockStore({ -- the elements selectors -- })
     )
...

    it('should not display data', () => {
      // here I'm puting zero length data using selector's setResult
      store.refreshState();
      fixture.detectChanges();
      const sampleArea = ngMocks.find('div --- selector to my data', null);
      expect(sampleArea).toBeNull(); <-- fails there is data
    });

Additional feedbacks:

• The component is not standalone.
• If I add a fakeAsync + tick in my unit test, it works but my purpose is to fully disable the animations in unit tests.
• ng-mocks (14.11.0), node (16.20.0) and Angular (14.3.0)

Thanks for your help or suggestions :)

[Dji75]

Tomorrow morning, I have to check the following topic I opened myself years ago 😁
#589 (comment)

[satanTime]

Hi again,

I think I need to update migration guide.

First thing: could you add configuration from: https://ng-mocks.sudo.eu/extra/install/

// Usually, *ngIf and other declarations from CommonModule aren't expected to be mocked.
// The code below keeps them.
import { CommonModule } from '@angular/common'; // eslint-disable-line import/order
import { ApplicationModule } from '@angular/core'; // eslint-disable-line import/order
import { BrowserModule } from '@angular/platform-browser'; // eslint-disable-line import/order
ngMocks.globalKeep(ApplicationModule, true);
ngMocks.globalKeep(CommonModule, true);
ngMocks.globalKeep(BrowserModule, true);

if it helps, could you say which ng-mocks you used before and migrated to?
If not, let's check deeper where the problem can be.

[satanTime]

For history the test I have and it works correctly:

import {MockBuilder, MockRender, ngMocks} from "ng-mocks";
import {Component, Input, NgModule} from "@angular/core";
import {animate, AnimationTriggerMetadata, style, transition, trigger} from "@angular/animations";
import {BrowserAnimationsModule, NoopAnimationsModule} from "@angular/platform-browser/animations";
import {CommonModule} from "@angular/common";
import {of, Subject} from "rxjs";
import {BrowserModule} from "@angular/platform-browser";

const fadeInOutTransformation = (fadeInDuration: string, fadeOutDuration: string): AnimationTriggerMetadata => {
  return trigger('fadeInOutTrans', [
    transition(':enter', [style({ opacity: 0 }), animate(`${fadeInDuration} ease-out`, style({ opacity: 1 }))]),
    transition(':leave', [style({ opacity: 1 }), animate(`${fadeOutDuration} ease-out`, style({ opacity: 0 }))]),
  ]);
};

@Component({
  selector: 'test-target',
  template: `
    <span *ngIf="elements$ | async as elements">
      <div @fadeInOutTrans *ngFor="let element of elements; let index">{{ index }} - {{ element }}</div>
    </span>
  `,
  animations: [fadeInOutTransformation('1s', '0s')],
})
class TargetComponent {
  @Input() elements$ = of([]);
}

@NgModule({
  imports: [CommonModule, BrowserModule],
  declarations: [TargetComponent],
})
class TargetModule {}

describe('my tests', () => {
  beforeEach(() =>
    MockBuilder(TargetComponent, TargetModule).keep(NoopAnimationsModule, { export: true }));

  fit('should see all elements', async () => {
    const sub = new Subject();
    const fixture = MockRender(TargetComponent, {
      elements$: sub.asObservable(),
    });
    sub.next(['first', 'second']);
    fixture.detectChanges();
    await fixture.whenStable();
    expect(ngMocks.findAll('div').length).toEqual(2);
    sub.next([]);
    fixture.detectChanges();
    await fixture.whenStable();
    expect(ngMocks.findAll('div').length).toEqual(0);
  });
});

[Dji75]

Thanks @satanTime !

I did not thought await fixture.whenStable(); was required in order to "skip" animations but it works with it, so this is the only thing I missed in my unit test !
Maybe an extra explanation in this page could helps: https://ng-mocks.sudo.eu/troubleshooting/browser-animations-module

[satanTime]

Done, docs have been deployed. The update is here: https://ng-mocks.sudo.eu/troubleshooting/browser-animations-module/#writing-tests