@dickssportinggoods/angular

Angular Component Library

This repo is the home for the DSG's Angular component library. Find usage and documentation at Dick's Design System.

Generated with Angular CLI version 7.0.2.

Development server with Storybook

Run npm start for a dev server. Navigate to http://localhost:6006/. The app will automatically reload if you change any of the source files.

Code scaffolding

To generate a new component:

npm run ng:generate

You'll be asked for a component name.

Testing

Unit

Unit tests are not so common in this package, since the framework agnostic code is stored in the core package. That being said, nothing blocks you to create a file.test.ts and write tests in this package in case something is needed specifically for the angular component library.

To run unit tests execute:

npm run test
npm run test:watch

Snapshot

Snapshot tests are automatically generated through @storybook/addon-storyshots. StoryShots reads all stories and generate a snapshot for each one of them. This way, as long as we have enough stories to cover all different input combinations for every component, we will automatically have snapshots for all of them. Adding an additional confirmation step to contributors before submitting their change.

Both unit and snapshot run through the same Jest setup:

npm run test
npm run test:watch

We are also customizing storyshots by overriding test function. This way we can call the default test function and also pipe the snapshot html into axe.

Integration

Integration tests are executed through jest-puppeteer preset package, that facilitates using both together.

We use puppeteer to take screenshots of every story, and we compare the images to ensure a confirmation step happens every visually noticeable change. For pixel diffing we are leveraging jest-image-snapshot.

All integration NPM scripts (anything that has integration in the name) must be run through a local docker instance. This ensures consistency when executing tests in the pipeline, because Chrome like most browsers relies on O.S. specific thing to render, such as Fonts, which are different for instance in Mac and Linux, thus making the tests fail in CI.

To execute integration tests run:

npm run test:integration
npm run test:integration:update