Cypress Angular

@jscutlery/cypress-angular brings Angular support to Cypress Component Testing.

It is aiming to make Cypress Component Testing with Angular easier than writing code without tests 😜.

🪄 Features

✅ A simple mount function to test any of your components.

✅ Mount options allow you to override style, providers, modules, child components...

✅ Easy setup using Angular CLI schematics or Nx generators.

✅ Using webpack configuration from Angular CLI to get the closest symmetry to production build. (i.e. no webpack hacks & less trouble)

✅ Angular builder & Nx executor to run Cypress Component Tests.

🤹🏻‍♂️ Demo

Demo

Table of Contents

• Cypress Angular
  • 🪄 Features
• 🤹🏻‍♂️ Demo
• Table of Contents
• ✨ Usage
  • Mount a component
  • Mount a template
  • Mount a component with inputs
  • Mount a component with outputs
  • Storybook (and Component Story Format) support
  • Destroy the component
• 🛠 Setup

✨ Usage

Mount a component

Add your .cy-spec.ts files in the e2e folder's *-e2e/src/components:

import { mount } from '@jscutlery/cypress-angular/mount';

describe(HelloComponent.name, () => {
  beforeEach(() => {
    mount(HelloComponent, {
      styles: [`body { background: purple}`],
      imports: [HelloModule],
    });
  });

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

Mount a template

describe(HelloComponent.name, () => {
  beforeEach(() => {
    mount(`<jc-hello></jc-hello>`, {
      imports: [HelloModule],
    });
  });

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

Mount a component with inputs

describe(HelloComponent.name, () => {
  beforeEach(() => {
    mount(HelloComponent, {
      inputs: {
        message: '❤️',
      },
    });
  });

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

Mount a component with outputs

describe(NameComponent.name, () => {
  it('should trigger output', () => {
    const { nameChangeStub } = mountComponent();
    cy.get('input').type('Foo');
    cy.wrap(nameChangesStub).should('be.calledOnceWith', 'Foo');
  });

  function mountComponent() {
    const nameChangeStub = cy.stub();
    mount(NameComponent, {
      inputs: {
        nameChange: nameChangeStub,
      },
    });
    return { nameChangeStub };
  }
});

Storybook (and Component Story Format) support

You can also mount Storybook stories:

import { mountStory } from '@jscutlery/cypress-angular/mount';
import { Default } from './hello.stories.ts';

describe(HelloComponent.name, () => {
  beforeEach(() => mountStory(Default));

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

Destroy the component

If you want to destroy the component manually to test some tear down logic, you can use the destroy function:

import { destroy, mount } from '@jscutlery/cypress-angular/mount';

describe(HelloComponent.name, () => {
  beforeEach(() => {
    mount(`<jc-hello></jc-hello>`, {
      imports: [HelloModule],
    });
  });

  it('should show alert when destroyed', () => {
    destroy();
    cy.window().its('alert').should('be.called');
  });
});

🛠 Setup

Using Angular CLI:

ng add @jscutlery/cypress-angular
ng g @jscutlery/cypress-angular:setup-ct --project my-project

npx ngcc

ng run my-project:ct

Using Nx:

npm i -D @jscutlery/cypress-angular
nx g @jscutlery/cypress-angular:setup-ct --project my-project

npx ngcc

nx run my-project:ct