Ebcont-galaxy NPM

Ebcont Galaxy

The Angular framework for the EBCONT applications, based on TailwindCSS, using the new corporate design created by the EBCONT design team in 2023, contact: Matthias Grieder

Unit testing

Run npm run test to execute all the unit tests (karma) in one go. It is a headless test (not opening any window) and will finish after the tests are done. It is intended to be used in the CI/CD pipeline.

Run npm run test:watch to execute all the unit tests (karma) in watch mode. It will open a browser window and will run the tests adn then waits for any change to run them again. It is intended to be used during development.

After the tests are done, the coverage will be generated in the coverage directory and the test reports in the testing-results/karma directory: karma-tests.xml and karma-tests.html (junit format).

Component testing

Run npm run cypress to execute the component tests (cypress). This runs in headless mode and will finish after the tests are done. It is intended to be used in the CI/CD pipeline. It generates results in the testing-results/cypress directory:

all-tests.json is the junit format for all the tests
html/all-tests.html is the html report for all the tests
videos/ contains the videos for all the tests
screenshots/ contains the screenshots for all the tests (if any)

Run npm run cypress:watch to execute the component tests (cypress) in interactive mode. This will open the client GUI for the Cypress. It is intended to be used during development. In this case "Electron" runner is not optimal, may cause testing errors, so choose "Chrome" or "Firefox"

Storybook

Run npm run storybook to execute the storybook. This will open the client GUI for the Storybook. It is intended to be used during development.

Storybook publishing

To create a deployable version of the storybook, run the "npm run storybook:build" command. This will generate the static files in the storybook-static directory. This can be deployed to any web server. To try it, the following commands can be used:

npm install -g http-server
cd storybook-static
http-server -p 8080

to start a simple local HTTP server on port 8080. Then open the browser on http://localhost:8080 to see the storybook.

Build

Run npm run build --prod to build the project. The build artifacts will be stored in the dist/ directory.

CSS precompilation

This framework uses Tailwinds, and in the *.compontent.css files there are a lot of @apply directives. These are not supported by the Angular CLI, so we need to precompile the CSS files before the build. This is done by the npm run build:css command. This will generate the *.precompiled.css files in the component directories. These files are then used in the component's styleUrls property. This means that the *.component.css files are not used directly, but the *.precompiled.css files are used instead.

This pre-compilation makes the build a few seconds longer, but that is not a problem.