@nordhealth/components 1.0.1 → 1.0.12-alpha.4

package/README.md

@@ -4,17 +4,45 @@
 
 The component package found from `packages/components` is built with [Lit](https://lit.dev/), a library for building Web Components. The component source code is written in TypeScript, with stylesheets written in CSS.
 
+## Initial setup
+
+We use [Docker](https://www.docker.com/) to run automated tests in a consistent, stable environment across platforms. Docker requires one-time installation and setup.
+
+On mac, if you use [brew](https://brew.sh/), then docker can be installed with the the following command:
+
+```sh
+brew install --cask docker
+```
+
+Alternatively, you can download docker directly from here: https://docs.docker.com/get-docker/
+
+For detailed information on what docker is, what is does, how it works etc, please refer to their documentation.
+
+Once docker is installed, run the following command in the components directory:
+
+```sh
+npm run build:docker
+```
+
+This will create, install, and build all the necessary parts for running tests inside a docker container. The result of this process is cached, and will be used whenever tests are run.
+
+**NOTE:** This should also be run whenever `package.json` dependencies change.
+
+Once this is complete, you can use the commands below to run tests in a docker container.
+
+## Commands
+
 The following are the most commonly used commands during development:
 
 - `npm start` - Compile components, start watching for changes, start local development server on port 3333.
 - `npm run build` - Builds the project.
-- `npm test` - Run all tests once.
+- `npm test` - Run all tests once, including visual regression.
+- `INCLUDE_VISUAL_REGRESSION=false npm test` - Run all tests once, excluding visual regression.
 - `npm test -- [path/glob for test file]` - Run specific tests file. e.g. `npm test -- **/Button.test.ts`
 - `npm run test:watch` - Run all tests and watch for changes.
-- `INCLUDE_VISUAL_REGRESSION=true npm test` - Run all tests and including visual regression.
-- `INCLUDE_VISUAL_REGRESSION=true npm test -- --update-visual-baseline` - Updates all failing screenshot snapshots.
+- `npm run test:capture` - Updates screenshot snapshots.
 
-The local development server started by `npm start` serves a file located at `/packages/components/demo/index.html`. Any local changes or new components are available on this page, so this can be used as a testing ground when developing. Component usage examples are available from the dev server using the URL structure `http://localhost:3333/[component]/[example]/` e.g. `/button/kitchen-sink/`. These pages get reloaded on any change.
+The local development server started by `npm start` serves a file located at `/packages/components/demo/index.html`. Any local changes or new components are available on this page, so this can be used as a testing ground when developing. Component usage examples are available from the dev server using the URL structure `http://localhost:3333/[component]/[example]/` e.g. `/button/basic/`. These pages get reloaded on any change.
 
 ## To create a new component