<div>
  <h1 *ngIf="condition">Marmicode</h1>
</div>

<div *ngIf="condition">
  <h1>Marmicode</h1>
</div>

<div>
  <h1 [class.hidden]="!condition">Marmicode</h1>
</div>

<div [class.hidden]="!condition">
  <h1>Marmicode</h1>
</div>

cy.visit('/iframe.html?id=blogpost--default');
cy.get('h1').contains('Testing Angular Components Using Cypress')

import { TitleComponent } from '.../src/title.component';

it('should display default title', () => {
  mount(TitleComponent);
  cy.get('h1').contains('👋 Welcome');
});

mount(TitleComponent, {
  inputs: {appName: 'Marmicode'}
});
cy.get('h1').contains('👋 Welcome to Marmicode');

mount(TitleComponent, {
  providers: [
    {
      provide: Settings,
      useValue: {greetings: '🇫🇷 Bienvenue'}
    }
  ]
});
cy.get('h1').contains('🇫🇷 Bienvenue');

mount(`<mc-title></mc-title>`, {
  imports: [TitleModule],
})

import { Love } from '.../love.stories.ts';

describe('Love', () => {
  it('should show some love', () => {
    mountStory(Love);
    cy.get('h1').contains('❤️');
  });
});

git clone https://github.com/jscutlery/test-utils
npm install
npx nx e2e cypress-mount-integration --watch