This project is used to do Component Testing with Angular 12+ and Cypress 10
We first need to install the project dependencies:
npm install
Next let's add the following to our Cypress support file:
// cypress/support/component.js
import 'cypress-angular-component-testing/support';
The next thing is to configure the dev-server using the angular-dev-server
package found in `projects/angular-dev-server:
// cypress.config.ts
import { defineConfig } from 'cypress';
import { devServer } from 'cypress-angular-dev-server';
export default defineConfig({
component: {
devServer,
specPattern: 'src/**/*.cy.ts'
},
e2e: {
specPattern: 'cypress/e2e/**/*.cy.{ts,js}'
}
})
Finally we can start creating Angular Component Tests directly in our application using the .cy.ts
file extension and the Cypress mount()
command. Here is an example:
// app.component.cy.ts (located in the same directory as app.component.ts)
import { mount } from 'cypress-angular-component-testing';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
it('mounts AppComponent', () => {
mount(AppComponent)
// your cypress code goes here: cy.get('...').contains('......'), etc
})
})
Note that the mount
command takes in an optional 2nd parameter which accepts your TestBed MetaData as well as any of your Component's @Input()
properties. Here is an example:
// my-other.component.ts
@Component({...})
export class MyOtherComponent {
@Input() title: string;
constructor(private readonly service: MyOtherService) {}
doSomething(value): void {
this.service.doSomething(value)
}
}
import { mount } from 'cypress-angular-component-testing';
import { MyOtherComponent } from './my-other.component.ts';
import { MyOtherService } from 'services/my-other.service.ts';
import { MyOtherModule } from './my-other.module.ts';
describe('MyOtherComponent', () => {
it('mounts and displays the passed in input title in the DOM', () => {
mount(MyOtherComponent, {
inputs: { title: 'My Test Title' },
imports: [MyOtherModule],
providers: [MyOtherService]
});
cy.get('h1').contains('My Test Title')
})
})
The final thing to do is just open Cypress!
npx cypress open
You can also use the --component
flag if you just want to run the component tests
You can also run cypress headlessly using:
npx cypress run --component