This is a simple example to demonstrate various techniques to test ag-grid in an Angular app, specifically:
- Visualizing different states of a grid-based component using Storybook
- Unit testing grid-based components
- Integration testing (a.k.a. end-to-end testing) an app that uses the ag-grid
A screen shot of the final app is shown below. It contains a single page with an OrderListComponent
that contains orders.
This project was generated with Angular CLI version 6.0.8.
$ yarn install <--- npm install works too
$ ng serve
Now point your browser to http://localhost:4200/.
Allows you to visualize different states of your UI components and develop them interactively.
- index.stories.ts: Instantiates the
OrderListComponent
in two states, empty and filled. This allows you to visually inspect if it is rendered correctly in both states.
yarn storybook
Point your browser to http://localhost:6006/
Tests a single component in isolation.
- Karma: Test runner
- Jasmine: Testing framework
- Angular testing utilities: TestBed & Component Fixture
- order-list.component.spec.ts: Instantiates the
OrderListComponent
and tests if the columns have the correct titles and the rows have the correct cell values.
ng test
Tests the app as a black box.
- Protractor: Selenium wrapper
- Jasmine: Testing framework
- app.e2e-spec.ts: Navigates to the home page and tests if it renders the order list with the correct headers and order values. Uses a Page Object for low level page operations.
ng e2e