Change test from karma to jest and added tsconfig paths

angular.json

@@ -81,23 +81,6 @@
             "browserTarget": "TFTPaths: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",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": [
-              "src/styles.scss"
-            ],
-            "scripts": []
-          }
-        },
         "lint": {
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {

jest.config.js

@@ -0,0 +1,15 @@
+const { pathsToModuleNameMapper } = require('ts-jest/utils');
+const { compilerOptions } = require('./tsconfig');
+
+module.exports = {
+  preset: 'jest-preset-angular',
+  roots: ['<rootDir>/src/'],
+  testMatch: ['**/+(*.)+(spec).+(ts)'],
+  setupFilesAfterEnv: ['<rootDir>/src/test.ts'],
+  collectCoverage: true,
+  coverageReporters: ['html'],
+  coverageDirectory: 'coverage/my-app',
+  moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths || {}, {
+    prefix: '<rootDir>/'
+  })
+};

karma.conf.js

@@ -1,32 +0,0 @@
-// 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-istanbul-reporter'),
-      require('@angular-devkit/build-angular/plugins/karma')
-    ],
-    client: {
-      clearContext: false // leave Jasmine Spec Runner output visible in browser
-    },
-    coverageIstanbulReporter: {
-      dir: require('path').join(__dirname, './coverage/TFTPaths'),
-      reports: ['html', 'lcovonly', 'text-summary'],
-      fixWebpackSourcePaths: true
-    },
-    reporters: ['progress', 'kjhtml'],
-    port: 9876,
-    colors: true,
-    logLevel: config.LOG_INFO,
-    autoWatch: true,
-    browsers: ['Chrome'],
-    singleRun: false,
-    restartOnFileChange: true
-  });
-};

package.json

@@ -5,7 +5,7 @@
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
-    "test": "ng test",
+    "test": "npx jest",
     "lint": "ng lint",
     "e2e": "ng e2e"
   },
@@ -31,15 +31,13 @@
     "@angular/language-service": "^11.2.11",
     "@types/jasmine": "~3.3.8",
     "@types/jasminewd2": "^2.0.8",
+    "@types/jest": "^27.0.2",
     "@types/node": "~8.9.4",
     "codelyzer": "^6.0.1",
     "jasmine-core": "~3.4.0",
     "jasmine-spec-reporter": "~4.2.1",
-    "karma": "~6.3.2",
-    "karma-chrome-launcher": "~2.2.0",
-    "karma-coverage-istanbul-reporter": "~2.0.1",
-    "karma-jasmine": "~2.0.1",
-    "karma-jasmine-html-reporter": "^1.5.4",
+    "jest": "^27.3.1",
+    "jest-preset-angular": "^10.0.1",
     "protractor": "^7.0.0",
     "ts-node": "~7.0.0",
     "tslint": "~6.1.3",

src/app/app.component.spec.ts

@@ -1,9 +1,9 @@
-import { TestBed, async } from '@angular/core/testing';
+import { TestBed, waitForAsync } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { AppComponent } from './app.component';
 
 describe('AppComponent', () => {
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
         RouterTestingModule
@@ -23,13 +23,8 @@ describe('AppComponent', () => {
   it(`should have as title 'TFTPaths'`, () => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.debugElement.componentInstance;
+    app.ngOnInit();
     expect(app.title).toEqual('TFTPaths');
   });
 
-  it('should render title in a h1 tag', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.debugElement.nativeElement;
-    expect(compiled.querySelector('h1').textContent).toContain('Welcome to TFTPaths!');
-  });
 });

src/models/bonus.spec.ts

@@ -0,0 +1,18 @@
+import { Bonus } from './bonus';
+
+describe('Bonus', () => {
+  let bonus: Bonus;
+  beforeEach(() => {
+    bonus = new Bonus('bonus example', 'knight', 1, 6);
+  });
+
+  it('should create a bonus', () => {
+    const mockBonus = {
+        description: 'bonus example',
+        role: 'knight',
+        units: 1,
+        maxUnits: 6
+    }
+    expect(bonus).toEqual(mockBonus);
+  });
+});

src/models/champion.spec.ts

@@ -0,0 +1,21 @@
+import { Champion } from './champion';
+
+describe('Champion', () => {
+  let champion: Champion;
+  beforeEach(() => {
+    champion = new Champion('John Doe', 'johndoe', ['knight'], 3, false, false, false);
+  });
+
+  it('should create a bonus', () => {
+    const mockChampion = {
+        name: 'John Doe',
+        img: 'johndoe',
+        roles: ['knight'],
+        cost: 3,
+        isSelected: false,
+        sinergy: false,
+        sinergy2: false
+    }
+    expect(champion).toEqual(mockChampion);
+  });
+});

src/models/dataToShare.spec.ts

@@ -0,0 +1,25 @@
+import { Bonus } from './bonus';
+import { Champion } from './champion';
+import { DataToShare } from './dataToShare';
+
+describe('DataToShare', () => {
+  let dataToShare: DataToShare;
+  const champion = new Champion('John Doe', 'johndoe', ['knight'], 3, false, false, false);
+  const bonus = new Bonus('bonus example', 'knight', 1, 6);
+  beforeEach(() => {
+    dataToShare = new DataToShare([champion], ['knight'], [3, 6], ['knight'], [bonus], true, 1);
+  });
+
+  it('should create a bonus', () => {
+    const mockDataToShare = {
+        champions: [champion],
+        roles: ['knight'],
+        rolesCount: [3, 6],
+        rolesPool: ['knight'],
+        bonusesPool: [bonus],
+        noChampSelected: true,
+        teamSize: 1
+    }
+    expect(dataToShare).toEqual(mockDataToShare);
+  });
+});

src/modules/pool/components/card/card.component.spec.ts

@@ -0,0 +1,40 @@
+import { TestBed, waitForAsync } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { CardComponent } from './card.component';
+
+describe('CardComponent', () => {
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        RouterTestingModule
+      ],
+      declarations: [
+        CardComponent
+      ],
+    }).compileComponents();
+  }));
+
+  it('should create a card', () => {
+    const fixture = TestBed.createComponent(CardComponent);
+    const card = fixture.debugElement.componentInstance;
+    expect(card).toBeTruthy();
+  });
+
+  it('should get a imageUrl', () => {
+    const mockResponse = 'url(../../assets/images/champions/johndoe.png)';
+    const fixture = TestBed.createComponent(CardComponent);
+    const card = fixture.debugElement.componentInstance;
+    expect(card.getImage('johndoe').changingThisBreaksApplicationSecurity).toEqual(mockResponse);
+  });
+
+  it('should emit a value', () => {
+    const fixture = TestBed.createComponent(CardComponent);
+    const card = fixture.debugElement.componentInstance;
+    let valueEmitted;
+    card.championClicked.subscribe( event =>{
+      valueEmitted = event;
+    })
+    card.selectChampion('John Doe');
+    expect(valueEmitted).toBe('John Doe');
+  });
+});

src/modules/pool/components/card/card.component.ts

@@ -2,7 +2,7 @@ import { Component, EventEmitter, Input, Output} from '@angular/core';
 
 import { DomSanitizer } from '@angular/platform-browser';
 
-import { Champion } from 'src/models/champion';
+import { Champion } from '@models/champion';
 
 
 @Component({

src/modules/pool/components/pool/pool.component.spec.ts

@@ -0,0 +1,73 @@
+import { TestBed, waitForAsync } from '@angular/core/testing';
+import { ReactiveFormsModule } from '@angular/forms';
+import { RouterTestingModule } from '@angular/router/testing';
+import { CardComponent } from '../card/card.component';
+import { PoolComponent } from './pool.component';
+
+describe('PoolComponent', () => {
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        RouterTestingModule,
+        ReactiveFormsModule
+      ],
+      declarations: [
+        PoolComponent,
+        CardComponent
+      ],
+    }).compileComponents();
+  }));
+
+  it('should create a pool', () => {
+    const fixture = TestBed.createComponent(PoolComponent);
+    const pool = fixture.debugElement.componentInstance;
+    expect(pool).toBeTruthy();
+  });
+
+  it('should set form teamSize', () => {
+    const fixture = TestBed.createComponent(PoolComponent);
+    const pool = fixture.debugElement.componentInstance;
+    pool.ngOnInit();
+    expect(pool.formFilters).toBeTruthy();
+  });
+
+  it('should select a Champion', () => {
+    const fixture = TestBed.createComponent(PoolComponent);
+    const pool = fixture.debugElement.componentInstance;
+    const mockChampion = pool.champions[0];
+    pool.ngOnInit();
+    pool.selectChampion(mockChampion);
+    expect(pool.teamSize).toBe(1);
+    expect(pool.rolesPool).toContain(mockChampion.roles[0]);
+  });
+
+  it('should select a Role', () => {
+    const fixture = TestBed.createComponent(PoolComponent);
+    const pool = fixture.debugElement.componentInstance;
+    const mockRole = pool.champions[0].roles[0];
+    pool.ngOnInit();
+    pool.selectRole(mockRole);
+    expect(pool.teamSize).toBeGreaterThan(0);
+  });
+
+  it('should check if a role is selected', () => {
+    const fixture = TestBed.createComponent(PoolComponent);
+    const pool = fixture.debugElement.componentInstance;
+    const mockRole = pool.champions[0].roles[0];
+    pool.ngOnInit();
+    pool.selectRole(mockRole);
+    expect(pool.checkRoleFilter(mockRole)).toBe(true);
+  });
+
+  it('should reset composition', () => {
+    const fixture = TestBed.createComponent(PoolComponent);
+    const pool = fixture.debugElement.componentInstance;
+    const mockRole = pool.champions[0].roles[0];
+    pool.ngOnInit();
+    pool.selectRole(mockRole);
+    pool.resetComposition();
+    expect(pool.teamSize).toBe(0);
+    expect(pool.rolesCount.lenght).toBeUndefined();
+    expect(pool.rolesPool.lenght).toBeUndefined();
+  });
+});

src/modules/pool/components/pool/pool.component.ts

@@ -1,13 +1,13 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 
-import { Champion } from 'src/models/champion';
-import { Bonus } from 'src/models/bonus';
-import { PoolService } from 'src/modules/pool/services/pool.service';
+import { Champion } from '@models/champion';
+import { Bonus } from '@models/bonus';
+import { PoolService } from '@modules/pool/services/pool.service';
 
 import * as _ from 'lodash';
 import { Subscription } from 'rxjs';
-import { DataToShare } from 'src/models/dataToShare';
+import { DataToShare } from '@models/dataToShare';
 
 
 

src/modules/pool/pool.module.ts

@@ -4,7 +4,7 @@ import { CommonModule } from '@angular/common';
 import { PoolRoutingModule } from './pool-routing.module';
 import { ReactiveFormsModule } from '@angular/forms';
 
-import { PoolService } from 'src/modules/pool/services/pool.service';
+import { PoolService } from '@modules/pool/services/pool.service';
 
 import { PoolComponent } from './components/pool/pool.component';
 import { CardComponent } from './components/card/card.component';

src/modules/pool/services/pool.service.spec.ts

@@ -0,0 +1,66 @@
+import { PoolService } from './pool.service';
+
+describe('PoolService', () => {
+  let poolService: PoolService;
+  beforeEach(() => {
+    poolService = new PoolService();
+
+  });
+
+  it('should set Champions', () => {
+    let dataSet;
+    poolService.dataToShare.subscribe( data => {
+          dataSet = data;
+    })
+    poolService.setChampions();
+    expect(dataSet).not.toBeNull();
+  });
+
+  it('should update data to share', () => {
+    let dataSetBefore;
+    let dataSetAfter;
+    poolService.dataToShare.subscribe( data => {
+        if (dataSetBefore === undefined) {
+            dataSetBefore = data;
+        } else {
+            dataSetAfter = data;
+        }
+    });
+    poolService.setChampions();
+    poolService.updateDataToShare();
+    expect(dataSetBefore).not.toEqual(dataSetAfter);
+  });
+
+  it('should select a champion', () => {
+    const mockChampion = poolService.champions[0];
+    poolService.setChampions();
+    poolService.selectChampion(mockChampion);
+    expect(poolService.teamSize).toBe(1);
+    poolService.selectChampion(mockChampion);
+    expect(poolService.teamSize).toBe(0);
+  });
+
+  it('should select a role', () => {
+    const mockRole = poolService.champions[0].roles[0];
+    poolService.setChampions();
+    poolService.selectRole(mockRole);
+    expect(poolService.teamSize).toBeGreaterThan(0);
+    poolService.selectRole(mockRole);
+    expect(poolService.teamSize).toBe(0);
+  });
+
+  it('should check role filter', () => {
+    const mockRole = poolService.champions[0].roles[0];
+    poolService.setChampions();
+    poolService.selectRole(mockRole);
+    expect(poolService.checkRoleFilter(mockRole)).toBe(true);
+    poolService.selectRole(mockRole);
+    expect(poolService.checkRoleFilter(mockRole)).toBe(false);
+  });
+
+  it('should sort champions', () => {
+    poolService.setChampions();
+    poolService.championSort('cost');
+    expect(poolService.champions[0].cost).toBe(1);
+  });
+});

src/modules/pool/services/pool.service.ts

@@ -1,10 +1,10 @@
 import { Injectable } from '@angular/core';
 import { BehaviorSubject, Observable } from 'rxjs';
 
-import { Constants } from 'src/shared/constants';
-import { Bonus } from 'src/models/bonus';
-import { Champion } from 'src/models/champion';
-import { DataToShare } from 'src/models/dataToShare';
+import { Constants } from '@shared/constants';
+import { Bonus } from '@models/bonus';
+import { Champion } from '@models/champion';
+import { DataToShare } from '@models/dataToShare';
 
 import * as _ from 'lodash';
 
@@ -138,11 +138,7 @@ export class PoolService {
   getBonus() {
     this.bonusesPool = [];
     this.bonuses.forEach(bonus => {
-      if (bonus.role === 'ninja') {
-        if (this.rolesCount[bonus.role] === bonus.units) {
-          this.bonusesPool[bonus.role] = bonus;
-        }
-      } else if (bonus.units <= this.rolesCount[bonus.role]) {
+     if (bonus.units <= this.rolesCount[bonus.role]) {
         this.bonusesPool[bonus.role] = bonus;
       }
     });

src/shared/constants.ts

@@ -1,7 +1,7 @@
-import { Champion } from 'src/models/champion';
-import { Bonus } from 'src/models/bonus';
-import champions from './champions.json';
-import traits from './traits.json';
+import { Champion } from '@models/champion';
+import { Bonus } from '@models/bonus';
+import champions from '@assets/data/champions.json';
+import traits from '@assets/data/traits.json';
 
 export class Constants {
     public static Champions: Champion [] = champions.map(champion => {

src/test.ts

@@ -1,20 +1,23 @@
-// 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/dist/zone-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: any;
-
-// 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
+    };
+  }
+});

tsconfig.json

@@ -17,7 +17,13 @@
     "lib": [
       "es2018",
       "dom"
-    ]
+    ],
+    "paths": {
+      "@assets/*": ["src/assets/*"],
+      "@models/*": ["src/models/*"],
+      "@modules/*": ["src/modules/*"],
+      "@shared/*": ["src/shared/*"]
+    }
   },
     "angularCompilerOptions": {
     "fullTemplateTypeCheck": true,

tsconfig.spec.json

@@ -3,9 +3,12 @@
   "compilerOptions": {
     "outDir": "./out-tsc/spec",
     "types": [
+      "jest",
       "jasmine",
       "node"
-    ]
+    ],
+    "esModuleInterop": true,
+    "emitDecoratorMetadata": true
   },
   "files": [
     "src/test.ts",