WH

NX - Angular Storybook and Cypress Testing

Scaffolding for Angular and Storybook with Cypress

First, use npx to localize the install of NX (v11.0.20) and Angular CLI (v11.0.20).

# Create a nx workspace
npx create-nx-workspace@latest

Then "Choose the Angular workspace" and "Choose Application name of your choice".

If the Angular module install did not appear in the package.json, install it now by

# Install the Angular module
npm install -D @nrwl/angular

To see a demo of the Cypress test window in persistent standalone mode

# The defined projects can be found in the "nx.json" under the "projects" key.

# Click on the spec file you wish to execute upon seeing the window
npx nx run project-name-e2e:e2e --watch

You will find related information for the Angular plugin with

# List associated information of the Angular plugin
npx nx list @nrwl/angular

Generate a library under the "lib" folder

# The generated libraries will count as "projects"
npx ng g @nrwl/angular:lib ui

The Storybook integration begins with adding the nrwl plugin.

# Adding the plugin
npm add --dev @nrwl/storybook

# Associate Storybook with a "project"
npx nx g @nrwl/angular:storybook-configuration project-name

# Demo run of Storybook (Navigate to http://localhost:4400/)
npx nx run project-name:storybook

See additional information for the Storybook generator

# Options for the Storybook generator
Options:
  --name                  Library or application name
  --configureCypress      Run the cypress-configure generator
  --generateStories       Automatically generate *.stories.ts files for components declared in this library
  --generateCypressSpecs  Automatically generate *.spec.ts files in the cypress e2e app generated by the cypress-configure generator
  --linter                The tool to use for running lint checks. (default: tslint)
  --dryRun                Runs through and reports activity without writing to disk.
  --skip-nx-cache         Skip the use of Nx cache.
  --help                  Show available options for project target.

The initial setup association of Storybook

# Use Storybook on a generated 'ui' folder
npx nx g @nrwl/angular:storybook-configuration ui

Set the Storybook Cli Prompt Configuration Options to "Yes"

? Configure a cypress e2e app to run against the storybook instance? Yes
? Automatically generate *.stories.ts files for components declared in this library? Yes
? Automatically generate *.spec.ts files in the cypress e2e app generated by the cypress-configure generator? Yes

The generated integration test folder lies outside the area of the ui folder, which is grouped along with any of your other e2e tests in the "/apps" folder.

When you generate a component, they will need to reside inside a "library" folder.

# Generate a component into lib/ui folder
npx ng g component button --project=ui --export

If the automatic generation of spec files for Storybook and Cypress did not automatically generate the spec files, generate them manually with the command below.

# Generate stories for components after initial Storybook configuration
npx nx generate @nrwl/angular:stories --name=ui

# Options for generating stories individually for components in the library

Options:
  --name                  Library or application name
  --generateCypressSpecs  Automatically generate *.spec.ts files in the cypress e2e app generated by the cypress-configure generator
  --dryRun                Runs through and reports activity without writing to disk.
  --skip-nx-cache         Skip the use of Nx cache.
  --help                  Show available options for project target.

View Storybook in either your browser or run the Cypress tests against the Storybook components inside a standalone window.

# Run the StoryBook server for viewing in the browser
npx nx run ui:storybook

# Run Cypress test for the library
npx nx run ui-e2e:e2e --watch