Angular mounting in component testing weirdly overlaps properties

[PBartrina]

Current behavior

When I mount and angular component several times, it overrides the previous component but some elements are not reset, for example the @HostBinding classes are added every iteration of the mount without cleaning the previous one.

Desired behavior

I expect either the previous instance is fully removed/cleansed or a new instance is added

Test code to reproduce

1. Mount an standalone angular component with a property binded to the host. Component example:

@Component({
    selector: 'custom-button',
    template: `<button>This button parent class will change</button>`,
    changeDetection: ChangeDetectionStrategy.OnPush,
    encapsulation: ViewEncapsulation.None,
    standalone: true,
    imports: [NgIf]
})
export class CustomButtomComponent {

    @HostBinding('class')
    @Input()
    buttonType: string = '';
}

Use cy.mount(CustomButtomComponent, { componentProperties: { buttonType: 'class1' } });

2. Mount the component Again using cy.mount(CustomButtomComponent, { componentProperties: { buttonType: 'class2' } });
3. Run the test
4. See the parent div of the component have class="class1 class2"

Cypress Version

13.6.2

Node version

18.18.1

Operating System

macOS 14.2.1

Debug Logs

No response

Other

No response

[Kaemmelot]

Just stumbled upon the same problem with Cypress 13.6.4. When using style classes via HostBindings, the mounted root HTML element seems to keep CSS classes from previous test cases.

Edit: I do not use encapsulation: ViewEncapsulation.None as in the example above and the host binding is not an input parameter.

[jordanpowell88]

@PBartrina Are you mounting multiple times per it? If you do so their will be most likely some weird qwerks as even though it will remount the state of TestBed doesn't get reset until the before of the next test.

[PBartrina]

@jordanpowell88 I tried different approaches, but I wasn't mounting several times per it (although I tried it just in case). It happened both mounting in each it separately and using beforeEach.

[cypress-app-bot]

This issue has not had any activity in 180 days. Cypress evolves quickly and the reported behavior should be tested on the latest version of Cypress to verify the behavior is still occurring. It will be closed in 14 days if no updates are provided.

[cypress-app-bot]

This issue has been closed due to inactivity.