Person Roles UI

Tech

• Framework: Nuxt 3
• UI Library: Nuxt UI v3

Development and Contributing

Please review the Code of Conduct and Contributing guidelines before contributing to this project to ensure a positive and productive experience for everyone.

Create a fork and local copy of this repo. Answer Y to create a local clone.

gh repo fork bcgov/business-ui

Change into the directory and install the packages.

cd bcgov/business-ui/person-roles
pnpm install

Startup the development environment.

pnpm run dev

Build and Preview

Build the static site

pnpm run generate

Locally preview the static site

npx serve .output/public

Testing

Unit

Unit testing is configured to use the following libraries:

• Vitest - test runner
• Vitest Coverage - test coverage
• Nuxt Test Utils - nuxt specific test utils
• @testing-library/vue - test utils
• Vue Test Utils - test utils

To run Vitest:

pnpm test:unit

To run Vitest Coverage:

pnpm test:unit:cov

E2E

Unit testing is configured to use the following libraries:

• Playwright - test runner
• Axe Core Playwright - accessibility testing

Please use Faker to generate unique test data

To run Playwright in the terminal:

pnpm test:e2e

To run Playwright in ui mode:

pnpm test:e2e:ui

Playwright Config

The globalSetup option will create and save an auth user state which can then be used inside other tests:

  globalSetup: './tests/e2e/setup',

To use this auth state:

  test.describe('Describe Block', () => {
    test.use({ storageState: `tests/e2e/.auth/bcsc-user.json` })

    test('My Test', async ({ page }) => {
      // stuff
    })
  })

To run tests in headless mode, set the headless property in the Playwright config:

  use: {
    headless: true
  }

Environment Variables Setup

Before running any e2e tests, ensure the .env file has the correct values. Missing or incorrect values will lead to test failures. Below are the required environment variables:

# playwright login
PLAYWRIGHT_TEST_BCSC_USERNAME=""
PLAYWRIGHT_TEST_BCSC_PASSWORD=""

# The full url the tests will run against (local/dev/test/sandbox)
NUXT_BASE_URL=""

Important

• A maximum of 4 workers seems to be the sweet spot for tests to pass without colliding with each other.
• Setting to 1 worker will fully disable running tests in parallel.
• Using the Playwright extension/testing tab does not execute the global setup and save the auth state. You must run pnpm:e2e to at least create the auth files before running tests with the extension.