Component is not destroyed. Angular

[volhase]

I wrote component tests.

I mount components in every test case, but for some reason, it is not unmounted and 2 components appear during second test case

Have anyone had this issue before?

Angular version: 18.1.4
Cypress version: 13.14.1

[gweesin]

1. Could you please provide the NotificationBoxComponent?
2. Is your component rendered by Angular rather than manipulating the document directly? If so, the element should be destroyed by the lifecycle method in your component.

[volhase]

export enum NotificationType {
	ERROR = 'error',
	INFO = 'info',
	WARNING = 'warning',
	SUCCESS = 'success'
}

@Component({
	changeDetection: ChangeDetectionStrategy.OnPush,
	imports: [
		NgClass,
		NgIf,
		MemoizePipe,
		MatButton
	],
	selector: 'notification-box',
	standalone: true,
	styleUrls: ['./notification-box.component.scss'],
	templateUrl: './notification-box.component.html'
})
export class NotificationBoxComponent implements OnInit {
	@Input() type: NotificationType = NotificationType.INFO;
	@Input() title: string;
	@Input() closeEnabled: boolean = false;
	private container: EmbeddedViewRef<any>;
	@ViewChild('notification', { static: true }) notificationTemplate: TemplateRef<HTMLDivElement>;

	constructor(private viewContainerRef: ViewContainerRef) {
	}

	ngOnInit(): void {
		this.container = this.viewContainerRef.createEmbeddedView(this.notificationTemplate);
	}

	onClose(): void {
		this.container.destroy();
	}

	getIcon = (type: NotificationType): SEIcon =>  {
		switch (type) {
			case NotificationType.ERROR:
				return SEIcon.CLOSE;
			case NotificationType.INFO:
				return SEIcon.INFO;
			case NotificationType.WARNING:
				return SEIcon.WARNING;
			case NotificationType.SUCCESS:
				return SEIcon.CHECK_MARK;
		}
	}
}

it is usual Angular component