How to use with animations?

First off, thank you so much for the library. I am having an issue when I have animations triggers though with using this library. Example:

@Component({
    selector: 'app-applications-grid',
    templateUrl: './applications-grid.component.html',
    styleUrls: ['./applications-grid.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush,
    animations: [
        trigger('applicationAnimation', [
            transition('* => *', [
                query(
                    ':enter',
                    [
                        style({ opacity: 0, transform: 'translateY(-100px)' }),
                        stagger(50, [animate('400ms ease-out', style({ opacity: 1, transform: 'none' }))]),
                    ],
                    { optional: true }
                ),
            ]),
        ]),
    ],
})
export class ApplicationsGridComponent {
    @Input() applications: ApplicationDetail[];

    trackByFn(idx, { name }: ApplicationDetail) {
        return name;
    }
}

with a template of

<section class="application-grid" [@applicationAnimation]="applications?.length">
    <app-applications-grid-item *ngFor="let application of applications; trackBy: trackByFn" [item]="application"></app-applications-grid-item>
</section>

This error is thrown:

HeadlessChrome 0.0.0 (Linux 0.0.0) ApplicationsGridComponent should create FAILED
	Error: Found the synthetic property @applicationAnimation. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application.
	    at checkNoSyntheticProp node_modules/@angular/platform-browser/fesm5/platform-browser.js:1296:1)
	    at EmulatedEncapsulationDomRenderer2.push../node_modules/@angular/platform-browser/fesm5/platform-browser.js.DefaultDomRenderer2.setProperty node_modules/@angular/platform-browser/fesm5/platform-browser.js:1280:1)
	    at DebugRenderer2.push../node_modules/@angular/core/fesm5/core.js.DebugRenderer2.setProperty node_modules/@angular/core/fesm5/core.js:11207:1)
	    at setElementProperty node_modules/@angular/core/fesm5/core.js:7966:1)
	    at checkAndUpdateElementValue node_modules/@angular/core/fesm5/core.js:7917:1)
	    at checkAndUpdateElementInline node_modules/@angular/core/fesm5/core.js:7864:1)
	    at checkAndUpdateNodeInline node_modules/@angular/core/fesm5/core.js:10205:1)
	    at checkAndUpdateNode node_modules/@angular/core/fesm5/core.js:10171:1)
	    at debugCheckAndUpdateNode node_modules/@angular/core/fesm5/core.js:10804:1)
	    at debugCheckRenderNodeFn node_modules/@angular/core/fesm5/core.js:10790:1)
HeadlessChrome 0.0.0 (Linux 0.0.0) ApplicationsGridComponent should create FAILED
	Error: Found the synthetic property @applicationAnimation. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application.
	    at checkNoSyntheticProp node_modules/@angular/platform-browser/fesm5/platform-browser.js:1296:1)
	    at EmulatedEncapsulationDomRenderer2.push../node_modules/@angular/platform-browser/fesm5/platform-browser.js.DefaultDomRenderer2.setProperty node_modules/@angular/platform-browser/fesm5/platform-browser.js:1280:1)
	    at DebugRenderer2.push../node_modules/@angular/core/fesm5/core.js.DebugRenderer2.setProperty node_modules/@angular/core/fesm5/core.js:11207:1)
	    at setElementProperty node_modules/@angular/core/fesm5/core.js:7966:1)
	    at checkAndUpdateElementValue node_modules/@angular/core/fesm5/core.js:7917:1)
	    at checkAndUpdateElementInline node_modules/@angular/core/fesm5/core.js:7864:1)
	    at checkAndUpdateNodeInline node_modules/@angular/core/fesm5/core.js:10205:1)
	    at checkAndUpdateNode node_modules/@angular/core/fesm5/core.js:10171:1)
	    at debugCheckAndUpdateNode node_modules/@angular/core/fesm5/core.js:10804:1)

If I create a testing module that imports the NoopAnimationsModule,

@NgModule({
    imports: [NoopAnimationsModule, ApplicationsModule],
    exports: [ApplicationsModule],
})
export class ApplicationsTestModule {
}

describe('ApplicationsGridComponent', () => {
    let shallow: Shallow<ApplicationsGridComponent>;

    beforeEach(() => {
        shallow = new Shallow(ApplicationsGridComponent, ApplicationsTestModule);
    });

    const applications = mockApps;

    it('should create', async () => {
        const res = await shallow.render(
            `<app-applications-grid [applications]="applications"></app-applications-grid>`,
            { bind: { applications } },
        );
    });
});

the test fails with the following error:

HeadlessChrome 0.0.0 (Linux 0.0.0) ApplicationsGridComponent should create FAILED
	TypeError: this.delegate.createRenderer is not a function
	    at DebugRendererFactory2.push../node_modules/@angular/core/fesm5/core.js.DebugRendererFactory2.createRenderer node_modules/@angular/core/fesm5/core.js:11067:1)
	    at createRootData node_modules/@angular/core/fesm5/core.js:10538:1)
	    at Object.debugCreateRootView [as createRootView] node_modules/@angular/core/fesm5/core.js:10531:1)
	    at ComponentFactory_.push../node_modules/@angular/core/fesm5/core.js.ComponentFactory_.create node_modules/@angular/core/fesm5/core.js:8361:1)
	    at initComponent node_modules/@angular/core/fesm5/testing.js:1163:1)
	    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke node_modules/zone.js/dist/zone.js:388:1)
	    at ProxyZoneSpec.push../node_modules/zone.js/dist/zone-testing.js.ProxyZoneSpec.onInvoke node_modules/zone.js/dist/zone-testing.js:288:1)
	    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke node_modules/zone.js/dist/zone.js:387:1)
	    at Object.onInvoke node_modules/@angular/core/fesm5/core.js:3671:1)
	    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke node_modules/zone.js/dist/zone.js:38HeadlessChrome 0.0.0 (Linux 0.0.0): Executed 1 of 125 (1 FAILED) (skipped 124) ERROR (0.096 secs / 0.072 secs)

Any ideas?

[getsaf]

Thanks for the positive feedback and (+1 on the details you provided)! You’re close here but instead of creating a separate test module, you’ll use your actual Angular module and “replace” BrowserAnimationsModule with NoopAnimationsModule with Shallow.

describe('ApplicationsGridComponent', () => {
    let shallow: Shallow<ApplicationsGridComponent>;

    beforeEach(() => {
        shallow = new Shallow(ApplicationsGridComponent, ApplicationsModule)
          .replaceModule(BrowserAnimationsModule, NoopAnimationsModule);
    });

    const applications = mockApps;

    it('should create', async () => {
        const res = await shallow.render(
            `<app-applications-grid [applications]="applications"></app-applications-grid>`,
            { bind: { applications } },
        );
    });
});

If you want to do this for all tests (recommended), you can add this line in your test shim to replace that module globally:

Shallow.alwaysReplaceModule(BrowserAnimationsModule, NoopAnimationsModule);

Let me know if that works out for you!

[insidewhy]

@lubek1983 I’d do the testing via jest-marbles or jasmine-marbles if it was me. But for a simple use case, you should be storing a reference to the mock store… otherwise you can’t push mock data through it or check if dispatch has been called. Although this kind of support is proper best handled through stackoverflow than a GitHub issue.