The beginning of frontend tests. 😎 (frain-dev#580)

* complete critical dashboard component test

* improve dashboard component test to use service and mock data

* add empty states tests for dashboard-component

* create Github action for dashboard component test

* fix test working directory

* remove unused assets

* clean up

* clean up

Author: horlah

.editorconfig

@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 4
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

.github/workflows/dashboard-component.yml

@@ -0,0 +1,36 @@
+name: Test Convoy Dashboard Component
+
+on:
+    push:
+        branches: [main]
+    pull_request:
+        branches: [main]
+
+jobs:
+    build:
+        runs-on: ubuntu-latest
+
+        strategy:
+            matrix:
+                node-version: [14.18.0]
+
+        steps:
+            - uses: actions/checkout@v2
+            - name: Use Node.js ${{ matrix.node-version }}
+              uses: actions/setup-node@v1
+              with:
+                  node-version: ${{ matrix.node-version }}
+            - name: Cache Node.js modules
+              uses: actions/cache@v2
+              with:
+                  path: ~/.npm
+                  key: ${{ runner.OS }}-node-${{ hashFiles('**/yarn.lock') }}
+                  restore-keys: |
+                      ${{ runner.OS }}-node-
+                      ${{ runner.OS }}-
+            - name: Install dependencies
+              run: npm install
+              working-directory: ./web/ui/dashboard-component
+            - name: Run tests
+              run: npm run test:prod
+              working-directory: ./web/ui/dashboard-component

web/components/app-portal-angular/projects/convoy-app/src/lib/prism/prism.component.ts

@@ -14,7 +14,7 @@ export class PrismComponent implements AfterViewInit, OnChanges {
 	constructor() {}
 
 	ngAfterViewInit() {
-		Prism.highlightElement(this.codeEle.nativeElement);
+		Prism.highlightElement(this.codeEle?.nativeElement);
 	}
 
 	ngOnChanges(): void {

web/ui/dashboard-component/angular.json

@@ -32,7 +32,8 @@
 					"options": {
 						"main": "projects/convoy-dashboard/src/test.ts",
 						"tsConfig": "projects/convoy-dashboard/tsconfig.spec.json",
-						"karmaConfig": "projects/convoy-dashboard/karma.conf.js"
+						"karmaConfig": "projects/convoy-dashboard/karma.conf.js",
+						"codeCoverage": true
 					}
 				}
 			}