Skip to content

Latest commit

 

History

History
76 lines (46 loc) · 3.37 KB

DEVELOPER.md

File metadata and controls

76 lines (46 loc) · 3.37 KB
Raw

AgnosUI

A framework-agnostic widget library.

This is a monorepo organised with multiple npm packages:

  • core contains the framework agnostic sources

Then for each supported framework, a corresponding package is present with framework-specific code. Each of them contains the lib folder, with components using the core, and the demo folder, hosting the demo application.

  • angular contains Angular sources, with the server running on port 4200
  • react contains React sources, with the server running on port 3000
  • svelte contains Svelte sources, with the server running on port 3001

Finally, two other npm packages are available for testing purposes:

  • base-po contains a base class for page objects when writing end-to-end tests with Playwright
  • page-objects contains page objects for each AgnosUI widget

Running AgnosUI locally

If you want to play with AgnosUI on your own machine:

  • Clone the project
  • Run npm install
  • Use commands below

Commands

Several commands are available in the different workspaces. In order to avoid to repeatedly enter the same thing for each workspace, the command will be run on every workspace directly. If needed, you can filter them by entering the workspace names.

For example:

  • npm run dev will run the task dev on the workspaces demo, angular, react and svelte.
  • npm run dev demo svelte will run the task dev on the workspaces demo and svelte.

Run the demos

Preview

The preview mode is used to run the servers that will serve a build version of the applications.

  • npm run preview (workspaces : demo, angular, react, svelte).

Unit tests

Vitest is the test runner used to run the unit tests of the core sources

  • npm run tdd: run the TDD in watch mode (workspaces : core, angular, eslint-plugin).
  • npm run tdd:ui: run the TDD in the watch mode, with a UI (workspaces : core, eslint-plugin)
  • npm run test:coverage: run the unit tests with the coverage report (workspaces : core, eslint-plugin)

It's also possible to filter test by their pathname. For example, npm run tdd core rating will run the tdd task of the core workspace, for the rating only,

End-to-end tests

The end-to-end (e2e) tests are performed with Playwright. The setup is done to run the same specs on Chromium, Firefox and Webkit, on the three demos (Angular, React and Svelte) to ensure that everything works the same in each combination.

You can use some specific keyworks to filter the tests:

  • angular, react or svelte will select a specific framework,
  • chromium, firefox or webkit will select a specific browser,
  • Any other word will filter the tests by filename.

For example:

  • npm run e2e: run the full e2e suite for all the browsers, all the applications,
  • npm run e2e angular: run all the specs for Angular in all browsers,
  • npm run e2e svelte chromium: run all the specs for Svelte in Chromium,
  • npm run e2e firefox react select: run all the specs with the 'select' filename, for React in Firefox,