Adding jest for unit tests

Makefile

@@ -15,6 +15,7 @@ list:
 	@echo "  shell_client     > shell into angular client container"
 	@echo "  build_client     > generate the angular client dist application (html, css, js)"
 	@echo "  test_client      > Starts the angular client unit tests"
+	@echo "  client_coverage  > Run nginx web server test client coverage"
 	@echo "  install_server   > install server dependencies"
 	@echo "  shell_server     > shell into php server container"
 	@echo "  test_server      > Starts the server php unit tests"
@@ -54,7 +55,10 @@ build_client:
 	@docker-compose exec client ng build
 
 test_client:
-	@docker-compose exec client ng test --no-watch --code-coverage
+	@docker-compose exec client npx jest
+
+client_coverage:
+	@docker run --name anis-client-code-coverage -d -p 8888:80 -v $(CURDIR)/client/coverage/anis-client:/usr/share/nginx/html:ro nginx
 
 install_server:
 	@docker run --init -it --rm --user $(UID):$(GID) \

client/.gitlab-ci.yml

 stages:
     - install_dependencies
+    - test
     - sonar
     - build
     - dockerize
@@ -20,6 +21,20 @@ install_dependencies:
         - cd client
         - yarn install
 
+test:
+    image: node:16-slim
+    stage: test
+    cache: 
+        key: ${CI_COMMIT_REF_SLUG}_client
+        paths:
+            - node_modules
+        policy: pull
+    script:
+        - npx jest --coverage --coverageReporters lcov 
+    artifacts:
+        paths:
+            - client/coverage
+
 sonar_scanner:
     image: sonarsource/sonar-scanner-cli:latest
     stage: sonar
@@ -37,7 +52,7 @@ sonar_scanner:
             -Dsonar.host.url=$SONARQUBE_URL 
             -Dsonar.login=$SONAR_TOKEN_CLIENT
             -Dsonar.exclusions=**.spec.ts
-            -Dsonar.typescript.lcov.reportPaths=./coverage/anis-next/lcov.info
+            -Dsonar.typescript.lcov.reportPaths=./coverage/anis-client/lcov.info
 
 build:
     image: node:16-slim

client/angular.json

@@ -89,24 +89,6 @@
           "options": {
             "browserTarget": "client:build"
           }
-        },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "main": "src/test.ts",
-            "polyfills": "src/polyfills.ts",
-            "tsConfig": "tsconfig.spec.json",
-            "karmaConfig": "karma.conf.js",
-            "inlineStyleLanguage": "scss",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": [
-              "src/styles.scss"
-            ],
-            "scripts": []
-          }
         }
       }
     }

client/jest.config.js

+const { pathsToModuleNameMapper } = require('ts-jest/utils');
+const { compilerOptions } = require('./tsconfig');
+
+module.exports = {
+    preset: 'jest-preset-angular',
+    testMatch: ['**/+(*.)+(spec).+(ts|js)'],
+    setupFilesAfterEnv: ['<rootDir>/src/test.ts'],
+    collectCoverage: false,
+    collectCoverageFrom: ['src/**/*.ts'],
+    coverageReporters: ['html'],
+    coverageDirectory: 'coverage/anis-client',
+    moduleDirectories: ["node_modules", "./"],
+    moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths || {}, {
+        prefix: '<rootDir>/',
+    }),
+};

client/karma.conf.js

-// Karma configuration file, see link for more information
-// https://karma-runner.github.io/1.0/config/configuration-file.html
-
-module.exports = function (config) {
-  config.set({
-    basePath: '',
-    frameworks: ['jasmine', '@angular-devkit/build-angular'],
-    plugins: [
-      require('karma-jasmine'),
-      require('karma-chrome-launcher'),
-      require('karma-jasmine-html-reporter'),
-      require('karma-coverage'),
-      require('@angular-devkit/build-angular/plugins/karma')
-    ],
-    client: {
-      jasmine: {
-        // you can add configuration options for Jasmine here
-        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
-        // for example, you can disable the random execution with `random: false`
-        // or set a specific seed with `seed: 4321`
-      },
-      clearContext: false // leave Jasmine Spec Runner output visible in browser
-    },
-    jasmineHtmlReporter: {
-      suppressAll: true // removes the duplicated traces
-    },
-    coverageReporter: {
-      dir: require('path').join(__dirname, './coverage/client'),
-      subdir: '.',
-      reporters: [
-        { type: 'html' },
-        { type: 'text-summary' }
-      ]
-    },
-    reporters: ['progress', 'kjhtml'],
-    port: 9876,
-    colors: true,
-    logLevel: config.LOG_INFO,
-    autoWatch: true,
-    browsers: ['Chrome'],
-    singleRun: false,
-    restartOnFileChange: true
-  });
-};

client/package.json

@@ -5,8 +5,7 @@
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
-    "watch": "ng build --watch --configuration development",
-    "test": "ng test"
+    "watch": "ng build --watch --configuration development"
   },
   "private": true,
   "dependencies": {
@@ -42,13 +41,11 @@
     "@angular/compiler-cli": "~12.0.4",
     "@types/d3": "^5.7.2",
     "@types/jasmine": "~3.6.0",
+    "@types/jest": "^26.0.24",
     "@types/node": "^12.11.1",
     "jasmine-core": "~3.7.0",
-    "karma": "~6.3.0",
-    "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage": "~2.0.3",
-    "karma-jasmine": "~4.0.0",
-    "karma-jasmine-html-reporter": "^1.5.0",
+    "jest": "^27.0.6",
+    "jest-preset-angular": "^9.0.5",
     "typescript": "~4.2.3"
   }
 }

client/src/app/core/containers/app.component.spec.ts

+import { TestBed, waitForAsync, ComponentFixture  } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+
+import { of } from 'rxjs';
+import { provideMockStore, MockStore } from '@ngrx/store/testing';
+
+import { AppComponent } from './app.component';
+import { AppConfigService } from 'src/app/app-config.service';
+import * as authActions from 'src/app/auth/auth.actions';
+
+describe('AppComponent', () => {
+    let component: AppComponent;
+    let fixture: ComponentFixture<AppComponent>;
+    let store: MockStore;
+    let config: AppConfigService
+
+    beforeEach(waitForAsync(() => {
+        TestBed.configureTestingModule({
+            imports: [RouterTestingModule],
+            declarations: [
+                AppComponent
+            ],
+            providers: [
+                provideMockStore({ }),
+                AppConfigService
+            ]
+        }).compileComponents();
+        fixture = TestBed.createComponent(AppComponent);
+        component = fixture.componentInstance;
+        store = TestBed.inject(MockStore);
+        config = TestBed.inject(AppConfigService);
+    }));
+
+    it('should create the app', () => {
+        expect(component).toBeDefined();
+    });
+
+    it('authenticationEnabled() should give authentication enabled config key value', () => {
+        config.authenticationEnabled = true;
+        expect(component.authenticationEnabled()).toBeTruthy();
+    });
+
+    it('login() should dispatch login action', () => {
+        const spy = jest.spyOn(store, 'dispatch');
+        component.login();
+        expect(spy).toHaveBeenCalledTimes(1);
+        expect(spy).toHaveBeenCalledWith(authActions.login());
+    });
+
+    it('logout() should dispatch logout action', () => {
+        const spy = jest.spyOn(store, 'dispatch');
+        component.logout();
+        expect(spy).toHaveBeenCalledTimes(1);
+        expect(spy).toHaveBeenCalledWith(authActions.logout());
+    });
+
+    it('openEditProfile() should dispatch open edit profile action', () => {
+        const spy = jest.spyOn(store, 'dispatch');
+        component.openEditProfile();
+        expect(spy).toHaveBeenCalledTimes(1);
+        expect(spy).toHaveBeenCalledWith(authActions.openEditProfile());
+    });
+
+    it('isAnisAdmin() should return observable true if user is authenticated', () => {
+        component.userRoles = of(['user']);
+        component.isAnisAdmin().subscribe(isAuthenticated => expect(isAuthenticated).toBeFalsy());
+        component.userRoles = of(['user', 'anis_admin']);
+        component.isAnisAdmin().subscribe(isAuthenticated => expect(isAuthenticated).toBeTruthy());
+    });
+});

client/src/app/core/containers/app.component.ts

@@ -17,7 +17,7 @@ import * as fromAuth from '../../auth/auth.reducer';
 import * as authActions from '../../auth/auth.actions';
 import * as authSelector from '../../auth/auth.selector';
 import { UserProfile } from '../../auth/user-profile.model';
-import { AppConfigService } from 'src/app/app-config.service';
+import { AppConfigService } from '../../app-config.service';
 
 @Component({
   selector: 'app-root',

client/src/app/core/containers/not-found-page.component.spec.ts

+import { TestBed, waitForAsync, ComponentFixture  } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+
+import { NotFoundPageComponent } from './not-found-page.component';
+
+describe('NotFoundPageComponent', () => {
+    let component: NotFoundPageComponent;
+    let fixture: ComponentFixture<NotFoundPageComponent>;
+
+    beforeEach(waitForAsync(() => {
+        TestBed.configureTestingModule({
+            imports: [RouterTestingModule],
+            declarations: [
+                NotFoundPageComponent
+            ]
+        }).compileComponents();
+        fixture = TestBed.createComponent(NotFoundPageComponent);
+        component = fixture.componentInstance;
+    }));
+
+    it('should create the not found page component', () => {
+        expect(component).toBeDefined();
+    });
+});

client/src/app/core/containers/unauthorized.component.spec.ts

+import { TestBed, waitForAsync, ComponentFixture  } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+
+import { UnauthorizedComponent } from './unauthorized.component';
+
+describe('UnauthorizedComponent', () => {
+    let component: UnauthorizedComponent;
+    let fixture: ComponentFixture<UnauthorizedComponent>;
+
+    beforeEach(waitForAsync(() => {
+        TestBed.configureTestingModule({
+            imports: [RouterTestingModule],
+            declarations: [
+                UnauthorizedComponent
+            ]
+        }).compileComponents();
+        fixture = TestBed.createComponent(UnauthorizedComponent);
+        component = fixture.componentInstance;
+    }));
+
+    it('should create the unauthorized component', () => {
+        expect(component).toBeDefined();
+    });
+});

client/src/app/portal/containers/portal-home.component.spec.ts

+import { Component, Input } from '@angular/core';
+import { TestBed, waitForAsync, ComponentFixture  } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+
+import { provideMockStore, MockStore } from '@ngrx/store/testing';
+
+import { AppConfigService } from 'src/app/app-config.service';
+import { UserProfile } from 'src/app/auth/user-profile.model';
+import { Instance } from 'src/app/metamodel/models';
+import * as authActions from 'src/app/auth/auth.actions';
+import { PortalHomeComponent } from './portal-home.component';
+
+describe('PortalHomeComponent', () => {
+    @Component({ selector: 'app-navbar', template: '' })
+    class NavbarStubComponent {
+        @Input() links: {label: string, icon: string, routerLink: string}[];
+        @Input() isAuthenticated: boolean;
+        @Input() userProfile: UserProfile = null;
+        @Input() baseHref: string;
+        @Input() authenticationEnabled: boolean;
+    }
+
+    @Component({ selector: 'app-instance-card', template: '' })
+    class InstanceCardStubComponent {
+        @Input() instance: Instance;
+    }
+
+    let component: PortalHomeComponent;
+    let fixture: ComponentFixture<PortalHomeComponent>;
+    let store: MockStore;
+    let config: AppConfigService
+
+    beforeEach(waitForAsync(() => {
+        TestBed.configureTestingModule({
+            imports: [
+                RouterTestingModule
+            ],
+            declarations: [
+                PortalHomeComponent,
+                NavbarStubComponent,
+                InstanceCardStubComponent
+            ],
+            providers: [
+                provideMockStore({ }),
+                AppConfigService
+            ]
+        }).compileComponents();
+        fixture = TestBed.createComponent(PortalHomeComponent);
+        component = fixture.componentInstance;
+        store = TestBed.inject(MockStore);
+        config = TestBed.inject(AppConfigService);
+    }));
+
+    it('should create the portal home component', () => {
+        expect(component).toBeDefined();
+    });
+
+    it('getBaseHref() should give base href config key value', () => {
+        config.baseHref = '/my-project';
+        expect(component.getBaseHref()).toBe('/my-project');
+    });
+
+    it('authenticationEnabled() should give authentication enabled config key value', () => {
+        config.authenticationEnabled = true;
+        expect(component.getAuthenticationEnabled()).toBeTruthy();
+    });
+
+    it('login() should dispatch login action', () => {
+        const spy = jest.spyOn(store, 'dispatch');
+        component.login();
+        expect(spy).toHaveBeenCalledTimes(1);
+        expect(spy).toHaveBeenCalledWith(authActions.login());
+    });
+
+    it('logout() should dispatch logout action', () => {
+        const spy = jest.spyOn(store, 'dispatch');
+        component.logout();
+        expect(spy).toHaveBeenCalledTimes(1);
+        expect(spy).toHaveBeenCalledWith(authActions.logout());
+    });
+
+    it('openEditProfile() should dispatch open edit profile action', () => {
+        const spy = jest.spyOn(store, 'dispatch');
+        component.openEditProfile();
+        expect(spy).toHaveBeenCalledTimes(1);
+        expect(spy).toHaveBeenCalledWith(authActions.openEditProfile());
+    });
+});

client/src/test.ts

-// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+import 'jest-preset-angular/setup-jest';
 
-import 'zone.js/testing';
-import { getTestBed } from '@angular/core/testing';
-import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting
-} from '@angular/platform-browser-dynamic/testing';
+Object.defineProperty(window, 'CSS', { value: null });
+Object.defineProperty(window, 'getComputedStyle', {
+    value: () => {
+        return {
+            display: 'none',
+            appearance: ['-webkit-appearance'],
+        };
+    },
+});
 
-declare const require: {
-  context(path: string, deep?: boolean, filter?: RegExp): {
-    keys(): string[];
-    <T>(id: string): T;
-  };
-};
-
-// First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting()
-);
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().map(context);
+Object.defineProperty(document, 'doctype', {
+    value: '<!DOCTYPE html>',
+});
+Object.defineProperty(document.body.style, 'transform', {
+    value: () => {
+        return {
+            enumerable: true,
+            configurable: true,
+        };
+    },
+});

client/tsconfig.json

-/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
   "compileOnSave": false,
   "compilerOptions": {

client/tsconfig.spec.json

 /* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "./out-tsc/spec",
-    "types": [
-      "jasmine"
-    ]
-  },
-  "files": [
-    "src/test.ts",
-    "src/polyfills.ts"
-  ],
-  "include": [
-    "src/**/*.spec.ts",
-    "src/**/*.d.ts"
-  ]
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "./out-tsc/spec",
+        "types": [
+            "jest"
+        ],
+        "esModuleInterop": true,
+        "emitDecoratorMetadata": true
+    },
+    "files": ["src/test.ts", "src/polyfills.ts"],
+    "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
 }