@nuskin/account-components

account-components

Overview

There are two types of components in this project: 'normal' or 'bundled' components, and 'dynamic' components.

'Normal' components are plain old Vue components and are bundled with the consuming application. This is what you are used to. These are contained in src/components.

'Dynamic' components are deployed separately from the consuming application and are loaded into the consuming app at runtime. The consuming app will directly consume (and thus bundle) a wrapper component which knows how to do the dynamic loading. These are in src/dynamic. For documentation on how they work, see src/dynamic/README.md.

RELEASE PROCESS

The process of releasing this package is as follows:

1. The Aeronaut team will have to merge the code into the master branch.
2. The Account Components are now treated as 1 release with the Signup App.

If you need to go outside this process please reach out to the tech lead of the aeronauts.

Project setup

yarn install

Run storybook

yarn storybook

Run your unit tests

yarn test

Lints and fixes files

yarn lint

Customize configuration

See Configuration Reference.

Visual Regression Testing

This project includes visual regression testing. It is implemented using storyshots-puppeteer and Nu Skin Visual Regression Tools.

Running tests

# Run a basic test run
yarn test:visual

# Approve new snapshots
yarn test:visual:approve

# Run tests in watch mode
yarn test:visual:watch

# Run tests in the exact way they are run in the pipeline
#  (much slower, but more reliable)
yarn test:visual:ci

Workflow

1. Make changes to components
2. Run yarn test:visual
3. If you made visual changes:
   1. If test:visual passes, your changes may not have been reflected OR they didn't differ enough from the original snapshot to break the test. It may be useful to delete the snapshots associated with the component you modified and re-run the tests to get new snapshots.
   2. If the tests failed, look at the output and view the diffs it produced. If they match your expectations, run yarn test:visual:approve and commit the updated snapshots.
4. If you didn't intend to make visual changes:
   1. if test:visual passed, you're okay! You didn't break anything!
   2. If the tests failed, you'll need to look at the diffs and see what changed in the snapshots.

Writing Tests

Our visual tests are based around Storybook stories. Any story with a parameter called puppeteerTest will cause visual regression tests to be run on that story.

In order to include visual regression testing in a story that is to be included in the master storybook at http://nuskin.design, you must separate the visual regression test story and the main story. You can re-use the main story in your visual regression test story. See InviteLinkBuilder.visual-testing.stories.js and InviteLinkBuilder.stories.js for an example of how to do this.