Using Cypress and Storybook for Component Testing in Angular — A Step-by-Step Guide

Learn how to test your Angular components in isolation using Cypress and Storybook. Step-by-step guide on setting up Storybook for Angular, using Cypress to interact with components, and testing component actions and state changes.

Component Testing

Component testing in front-end engineering refers to the practice of testing individual parts or components of a user interface (UI) separately to ensure they function correctly. This is done to ensure that each component is isolated and behaves as expected, regardless of the state or behavior of other components on the page. Common types of component tests include unit tests and snapshot tests, which can be performed using testing frameworks such as Jest, Mocha, and Enzyme.

Photo by Christina @ wocintechchat.com on Unsplash

What is Storybook

Storybook is an open-source tool for building and testing UI components. It allows developers to create a library of components that can be previewed and interacted with in a browser, making it easy to develop, document, and test components in isolation. Storybook provides a way to create a “story” for each component, which is a way to describe the different states and interactions that the component can have. It also allows for automatic testing, and also provides a way to share and document the components with other developers or stakeholders. Storybook is commonly used in conjunction with other front-end frameworks such as React, Angular, and Vue.

Testing components using Storybook

There are several ways to test components using Storybook, depending on the testing framework and library you are using.

1. Storyshots: Storyshots is a utility that allows you to take “snapshots” of your components and compare them to previous versions, to ensure that they haven’t been changed unexpectedly. It’s built on top of Jest and uses its snapshot testing feature.
2. Storybook Addon-test-actions: This add-on allows you to test the actions that are dispatched by the component and also test the state changes.
3. Storybook Addon-knobs: This add-on allows you to test the component with different props and see how the component behaves with different inputs
4. Using Cypress: Cypress is a E2E test framework. You can use Cypress to test your components in Storybook by visiting the storybook server and interact with the components as a user would.
5. Using Selenium: Selenium is another E2E testing framework that can be used to test the components in Storybook.

You can use any of these testing frameworks and libraries to test your components in isolation, by using the Storybook as a testing environment, allowing you to test the components in different states, and different inputs.

Using Cypress and Storybook for Component testing

To use Cypress and Storybook for component testing, you will need to set up both tools in your project.

1. First, set up Storybook by following the instructions on the official website (https://storybook.js.org/docs/guides/guide-react/). This will involve installing Storybook and configuring it to work with your project.
2. Next, install Cypress by running npm install cypress in your project's root directory.
3. Configure Cypress to run against your Storybook server by modifying the cypress.json file and setting the baseUrl property to the URL of your Storybook server.
4. Create a new directory in the cypress/integration directory called storybook and create new test files in that directory for each component you want to test.
5. In each test file, you can use Cypress’ API to interact with the components in your Storybook stories, such as cy.get(), cy.click(), and cy.should() to test their behavior and behavior of the actions they dispatch.
6. You can also use Cypress’ cy.visit() command to visit different stories in your Storybook and test the components in different states.
7. Once you have written your tests, you can run them using the npx cypress run command or npx cypress open to open the cypress test runner.

By using Cypress with Storybook, you can test your components in a real browser environment, simulating user interactions and asserting on the resulting behavior of the component.

Using Storybook for an Angular application

To run Storybook for an Angular project, you will need to set up Storybook and configure it to work with Angular.

1. First, install Storybook by running npm install -g @storybook/cli in the root of your Angular project.
2. Next, initialize Storybook in your Angular project by running getstorybook in the root of your project. This will create a new .storybook directory in your project and add some basic configuration files.
3. Now you need to configure Storybook to work with Angular by adding the following to your main.ts file:

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import { defineCustomElements } from '@storybook/custom-elements/dist/defineCustomElements';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));

defineCustomElements(window);

• Next, you need to create a new file called main.stories.ts in the src directory of your project. This file is where you will define the stories for your components.
• Add new stories for your components by importing them and adding a decorator like @StorybookModule
• Finally, you can start the Storybook server by running npm run storybook in the root of your project. This will start a development server on http://localhost:6006 where you can preview your components and their stories.

By following these steps, you should be able to run Storybook for your Angular project and start creating stories for your components.