README.md

Rosalution Frontend

Rosalution's frontend is a Vue 3 single page architecture (SPA) application that provides a visual user experience for interacting with Rosalution for analysis.

Setup

Dependencies

• Node.JS 20.8+
  • Recommended to manageNode.JS versions with nvm - install
• Yarn - Classic - install

Requirements

Dependencies for the Rosalution frontend application and development are managed within the package.json file in the project's frontend root structure.

Local Development

Run the following to setup application and development dependencies using Yarn.

yarn install

Deployment

Rosalution's frontend currently expects the host address route to end with /rosalution/ and for Rosalution's backend service to be available within the same base URL ending with /rosalution/api. Login to the application will fail if Rosalution's backend service is inaccessible.

Use docker and docker compose facilitate these two dependencies to deploy Rosalution in it's entirety for local development. Visit Rosalution's Environment Setup and Deployment for instructions on how to get started.

The local development deployment of Rosalution uses Vite to build and package Rosalution which includes Hot Module Replacement in support of rapid development.

Build

Builds Rosalution frontend for production.

yarn build

Testing

Rosalution frontend uses Vitest, a Vite-native unit test framework along with:

• Vue Test Utils for testing Vue 3 framework
• Sinon.js for test spies, stubs, and mocking
• Chai Assertion Library for assertions, builtin to Vitest

Unit Tests

Unit testing with Vitest supports hot module reloading by watching for changes in the project directory. Configuration for unit testing is managed in the vite.config.js in the project directory.

# Running Unit Testing - Basic
yarn test:unit

# Running Unit Testing - with Watch and Hot Module Reloading
yarn test:unit:watch

# Running Unit Testing - Code Coverage

yarn test:coverage

Code Coverage

Code coverage configuration is managed in the vite.config.jsby vitest configuration and is generated by v8.

Visit <{root_project_path/rosalution/frontend/coverage/index.html}> within the browser to see an HTML report of the code coverage generated from unit tests.

Static Analysis

Analyze and linting the JavaScript codebase is done via ESlint. Rosalution uses the ESLint shareable config for Google's JavaScript style guide ESLint Google Config.

# Linting
yarn lint

# Auto-Fix Linting
yarn lint:auto