cypress/angular
👉 but don't forget to check out our Angular CDK Harness support with @jscutlery/cypress-harness 👈
Last version's source code: cypress-angular-0.9.22
@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 😜.
✅ 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.
jscutlery-cypress-angular.mp4
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('❤️');
});
});describe(HelloComponent.name, () => {
beforeEach(() => {
mount(`<jc-hello></jc-hello>`, {
imports: [HelloModule],
});
});
it('should show some love', () => {
cy.get('h1').contains('❤️');
});
});describe(HelloComponent.name, () => {
beforeEach(() => {
mount(HelloComponent, {
inputs: {
message: '❤️',
},
});
});
it('should show some love', () => {
cy.get('h1').contains('❤️');
});
});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 };
}
});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('❤️');
});
});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');
});
});Using Angular CLI:
ng add @jscutlery/cypress-angular
ng g @jscutlery/cypress-angular:setup-ct --project my-project
npx ngcc
ng run my-project:ctUsing Nx:
npm i -D @jscutlery/cypress-angular
nx g @jscutlery/cypress-angular:setup-ct --project my-project
npx ngcc
nx run my-project:ct