Skip to content

Latest commit

 

History

History
74 lines (49 loc) · 3.25 KB

DEVELOPMENT.md

File metadata and controls

74 lines (49 loc) · 3.25 KB

Development

Prerequisites

Set up your local development environment by following the steps in the development guide.

Setting up local development environment

  1. Build the hds-core and hds-design-tokens packages in the root folder. hds-react uses these packages as dependencies.
yarn build:tokens && yarn build:core
  1. Start the development server in the root folder. This starts the storybook development environment. You can read about how to write storybook stories here. The use of Storybook is recommended for component development.
yarn start:react

Commands

Command Description
yarn Install dependencies and link local packages.
yarn build Builds the package.
yarn start Starts the development environment.
yarn test Runs the tests.
yarn lint Runs the linting.
yarn scaffold Runs the scaffolding script for creating a new component.
yarn visual-test Runst the visual regression tests.
yarn update-reference-images Update reference images for visual regression tests.

Adding a component

To add a new component, use the scaffold helper. In the react package folder, run:

yarn scaffold

Also note the section below about visual regression tests and adding new components.

Visual regression tests

hds-react uses Loki for visual regression testing. Loki is using the Chrome browser inside a Docker container, so Docker needs to also be available.

Running visual tests

To run the visual regression tests, you must first build the storybook by running yarn build-storybook. Then you can proceed with the test run by running yarn visual-test.

Updating reference images

When adding a new component or after making visual changes to some existing component, you must update the corresponding reference image. Before you can do this, you must start the local react storybook by issuing the following command in the root of the whole project:

yarn start:react

Then leave the storybook on the background and switch to another terminal window. Go to packages/react and issue this command:

yarn update-reference-images --storiesFilter "<name or part of the name of the story>"

You should pass the component's story name with --storiesFilter flag to update the reference images only for that single component story. For example, to update Button story reference images, you can run:

yarn update-reference-images --storiesFilter "Button"

Here is more info about Loki-tests' command-line arguments