A simple dashboard demonstrating how to write reusable angular components, tested with jest and cypress
View Demo
This project demonstrates how to write reusable Angular components using a ComponentFactory and multiple generic TypeScript interfaces or classes.
To get a local copy up and running, follow these simple steps.
You have to use Node.js LTS and npm@6
npm install npm@6 -g- Clone the repo
git clone https://github.com/danielsogl/redmedical-dashboard.git
- Install npm packages
npm install
- Start the application
npm run start
The application follows the FeatureModule way and lazy loads the Dashboard route. Of corse a CoreModul and SharedModule is used to separate shared and initial required components.
Angular allows creating dynamic component by calling a ComponentFactoryResolver and render the result in a given view container. With that feature it is possible to generate a generic WidgetComponent accepting a generic WidgetItem class array.
The WidgetContentItemComponent then resolves the specified component class and renders it.
I added as much generic interfaces as possible and useful for the simple application. They could be extended to define more inputs like a loading input to display a loading spinner in the future.
The demo app defines a generic widget item containing a data input.
import { Type } from "@angular/core";
export class WidgetItem<T, K> {
component: Type<T>;
data: K;
constructor(component: Type<T>, data: K) {
this.component = component;
this.data = data;
}
}
export interface WidgetContent<T> {
data: T;
}The project is using ngxs to handle the applications state.
Every line of code is covered with a useful unit tests (containing also UI tests). The application itself is covered by e2e tests.
This project uses jest to run the tests in general and the Spectator library in detail to write angular specific unit tests. The library reduces boilerplate code and simplifies the way how to write tests, mocks and spys.
Jest itself reduces the amount of time tests need to run locally and in a CI environment.
For e2e tests Cypress is used to run them. With cypress it is possible to test any web application, so I can use this library to write my e2e tests not only for react but also for my angular applications. The test files can be found in the cypress folder.
To start cypress run the following command
npm run e2e