@rangertechnologies/fusion-ui

Shared Angular component library for the Fusion platform and micro-frontends (Host & MFEs).

Prerequisites & Setup

1. Install dependencies:

   npm install

2. Install Playwright Chromium browser (required for Vitest browser mode & E2E tests):

   npx playwright install chromium

Available Scripts

| Command | Description | | :--- | :--- | | npm run build | Builds the Angular library using ng-packagr -p ng-package.json into dist/ | | npm run pack | Builds the library and generates a .tgz package tarball inside dist/ | | npm test | Runs unit and component tests once using Vitest (vitest run) | | npm run test:watch | Runs Vitest in interactive watch mode (vitest) | | npm run test:e2e | Runs Playwright E2E regression tests (playwright test) |

1. Running Automated Tests Inside fusion-ui

Unit & Component Tests (Vitest)

Unit and component specs (src/**/*.spec.ts) run in real headless Chromium via @vitest/browser and Playwright (configured in vitest.config.ts):

• Single run:

  npm test

• Watch mode (for active development):

  npm run test:watch

E2E Regression Tests (Playwright)

End-to-end regression specs (./e2e) are configured in playwright.config.ts:

npm run test:e2e

2. Testing the Library in a Local Consumer App (Host / MFE)

Because @rangertechnologies/fusion-ui is built with ng-packagr (ng-package.json), always test against the compiled dist/ output rather than raw src/ files to avoid duplicate @angular/core instances or peer-dependency resolution issues.

Option A: Using npm run pack (Recommended — Closest to Production)

1. Build and pack the library in fusion-ui:

   npm run pack

   This compiles the library into dist/ and produces dist/rangertechnologies-fusion-ui-<version>.tgz (e.g., dist/rangertechnologies-fusion-ui-0.1.11.tgz).

2. Install the tarball in your local consumer app (Host or MFE):

   cd /path/to/your-consumer-app
   npm install /Users/ranger/Programs/rangertech/fusionapp/library/fusion-ui/dist/rangertechnologies-fusion-ui-0.1.11.tgz

Option B: Live Reload / Watch Mode (For Active Development)

1. Watch and rebuild fusion-ui on file changes:

   npx ng-packagr -p ng-package.json --watch

2. Link the built dist/ folder to your consumer app:

   cd /Users/ranger/Programs/rangertech/fusionapp/library/fusion-ui/dist
   npm link
   
   cd /path/to/your-consumer-app
   npm link @rangertechnologies/fusion-ui

   Note: When using npm link, ensure "preserveSymlinks": true is set under your build options in the consumer app's angular.json so Angular resolves peer dependencies (@angular/core, @angular/material, etc.) from the consumer app's node_modules.