This is a simple example to demonstrate various techniques to test ag-grid in an Angular app, specifically:

1. Visualizing different states of a grid-based component using Storybook
2. Unit testing grid-based components
3. 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.

• Storybook

• 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