Angular Component Testing: ngOnChanges does not fire (post mounting)

[rujorgensen]

Current behavior

ngOnChanges does not seem to be called when the inputs of a component is changed post mounting.

Desired behavior

ngOnChanges should run whenever the inputs of a component changes.

Test code to reproduce

classic-component-with-input.component.ts

import { Component, Input, OnChanges } from '@angular/core';

@Component({
    selector: 'app-classic-component-with-input',
    template: `<p cy-data-id="el-number-list">{{ numberList }}</p><p cy-data-id="el-change-count">{{ __changesDetected }}</p>`
})
export class ClassicComponentWithInputComponent implements OnChanges {
    @Input()
    public numberList: number[] = [];

    public __changesDetected: number = 0;

    public ngOnChanges(

    ): void {
        this.__changesDetected = this.__changesDetected + 1;
    }
}

classic-component-with-input.component.cy.ts

import { ComponentFixture } from '@angular/core/testing';
import { mount } from 'cypress/angular';
import { ClassicComponentWithInputComponent } from './classic-component-with-input.component';

describe(ClassicComponentWithInputComponent.name, () => {
    const config = {
        declarations: [],
        imports: [],
        providers: []
    };
    let component: ClassicComponentWithInputComponent;
    let fixture: ComponentFixture<ClassicComponentWithInputComponent>;

    beforeEach((done) => {
        mount(ClassicComponentWithInputComponent, {
            ...config,
        })
            .then((instance) => {
                component = instance.fixture.componentInstance;
                fixture = instance.fixture;
                fixture.detectChanges();
                done();
            })
            ;
    });

    // ✅ Works!
    it('detects input changes', () => {

        // * Act #1
        component.numberList = [1, 2, 3, 4];
        fixture.detectChanges();

        cy
            // * Assertion #1
            .get('[cy-data-id="el-number-list"]')
            .should('have.text', '1,2,3,4')
            .then(() => {
                // * Act #2
                component.numberList = [1, 2, 3];
                fixture.detectChanges();
            })

            // * Assertion #2
            .get('[cy-data-id="el-number-list"]')
            .should('have.text', '1,2,3')
            ;
    })

    // ❌ Does not work
    it('counts input changes', () => {
        // Should + 1 to `__changesDetected`
        component.numberList = [1, 2, 3, 4];
        fixture.detectChanges();

        cy
            .get('[cy-data-id="el-change-count"]')
            .should('have.text', '2')
            ;
    })
})

Cypress Version

10.9.0 11.1.0

Node version

16.17.0

Operating System

Windows 10

Other

The code can be found in this NX repo too https://github.com/rujorgensen/nx-workspace, run npm run test:components to start component tests.

I don't have a lot of experience with testing, so it might just be me missing something obvious 😬.

Thanks!

[jordanpowell88]

This was fixed in this PR #23596 and should be available in the next release.

[rujorgensen]

As far as I can see this is not the same issue (and still fails with Cypress 10.10.0) 🙂.

If I modify the issue you're referring to, to this:
simple-component.component.ts

import { Component, Input, OnChanges } from '@angular/core';

@Component({
    selector: 'app-simple',
    template: `<div data-cy="simple">ngOnChanges fired: {{ ngOnChangesFired }}</div>`,
})
export class SimpleComponent implements OnChanges {
    @Input() name: string | undefined;

    ngOnChangesFired = 0;

    ngOnChanges(

    ): void {
        this.ngOnChangesFired++;
    }
}

simple-component.component.cy.ts

import { mount } from 'cypress/angular';
import { SimpleComponent } from './simple-component.component';

describe(`${SimpleComponent.name}`, () => {

    // ❌ Fails
    it('should fire ngOnChanges when using class syntax', () => {
        mount(
            SimpleComponent, { componentProperties: { name: 'Henk' } })
            .then((instance) => {
                const component = instance.fixture.componentInstance;
                const fixture = instance.fixture;
                fixture.detectChanges();

                cy
                    .get('[data-cy=simple]')
                    .should('have.text', 'ngOnChanges fired: 1')
                    .then(() => {
                        component.name = 'Another Name';
                        fixture.detectChanges();
                    })

                    // 👇 Here                    
                    .get('[data-cy=simple]')
                    .should('have.text', 'ngOnChanges fired: 2')
                    ;
            });
    });
})

Request to re-open @jordanpowell88 (or one of the others involved @ZachJW34 @mike-plummer)🙂? I'm still open to the possibility that it's just me missing something obvious (but the issue was just closed, and it sounds like the issue was misunderstood) 😊..

[warrensplayer]

@rujorgensen Yes, this one is going to be reopened.

[rujorgensen]

Update: I migrated my NX project, and Cypress 11.1.0 still fails this test.