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

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!

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