Skip to content

Latest commit

 

History

History
173 lines (114 loc) · 3.94 KB

README.md

File metadata and controls

173 lines (114 loc) · 3.94 KB
Raw

Frontend

Built with Vue

Prerequisites

The repository contains a .node-version file to set up the required Node.js version automatically with nodenv.

Install dependencies:

npm install

For E2E and a11y testing with Playwright you will need to install the supported browsers, if you don't have them already:

npx playwright install chrome firefox

Icons

All icons in the Google Material, Material Symbol and Material Design Icons sets can be used.

To make the icon available in your code, select the icon, choose "Unplugin Icons" as component and copy-paste the import statement. Example:

import VerifiedIcon from "~icons/material-symbols/verified-user"

Development

Dev server

The project uses Vite to provide a fast bundler-less dev server.

You have two options:

  1. Run all services together:
./run.sh dev
  1. Start the frontend dev server in isolation:
npm run dev

Testing

The application has

To run the unit tests:

npm test

To run one unit test:

npm test -- chipsDateInput.spec.ts

Run unit tests with watcher:

npm run test:unit:watch

Gather coverage:

npm run coverage

To run the E2E tests:

(Requires the application to run locally.)

# run all
npm run test:e2e

# run all from a specific file
npm run test:e2e filename.spec.ts

# run a specific test in a specific file
npx playwright test filename.spec.ts -g "test name"

# for a less cluttered terminal during dev, you can comment out a browser in playwright.config.ts

To run the a11y tests:

npm run test:a11y

To run the performance tests:

npm run test:queries -- --workers=1

To run playwright tests against a different environment:

Add the URL of the environment like this

E2E_BASE_URL='<ENV_URL>' npm run <your_test>

Style (linting & formatting)

Check our Frontend Styleguide document.

Linting is done via ESLint; consistent formatting for a variety of source code files is being enforced using Prettier. ESLint and Prettier work in conjunction.

Check style:

npm run style:check

Autofix issues:

npm run style:fix

(Some problems might not autofix.)

Debugging

Debug Frontend in IntelliJ with Chrome

To debug frontend in IntelliJ IDEA, such as setting watchers and breakpoints:

  1. Run Chrome in Debug Mode:

    Start your Chrome browser in remote debugging mode to allow IntelliJ IDEA to connect to it by:

    • Locate your Chromium-based browser: 
      cd /Applications/Brave\ Browser.app/Contents/MacOS/
    • Then run it with debugging mode: 
      ./Brave\ Browser --remote-debugging-port=9222

  2. Configure IntelliJ IDEA:

    • Open IntelliJ IDEA and navigate to Run > Edit Configurations.
    • Click on the + button and select Attach to Node.js/Chrome.
    • Make sure you are setting the host to localhost and the port to 9222.
    • Run your project in IntelliJ IDEA and select the frontend tab to debug.

More info can be found in Debug JavaScript in Chrome