chore(jest): move to jest backend for testing

remove all files linked to karma / jasmine

frontend-angular/jest.config.js

@@ -0,0 +1,34 @@
+module.exports = {
+  "globals": {
+    "ts-jest": {
+      "tsConfigFile": "src/tsconfig.spec.json"
+    },
+    "__TRANSFORM_HTML__": true
+  },
+  "transform": {
+    "^.+\\.(ts|js|html)$": "<rootDir>/node_modules/jest-preset-angular/preprocessor.js",
+    "^.+\\.js$": "babel-jest"
+  },
+  "testMatch": [
+    "**/__tests__/**/*.+(ts|js)?(x)",
+    "**/+(*.)+(spec|test).+(ts|js)?(x)"
+  ],
+  "moduleFileExtensions": [
+    "ts",
+    "js",
+    "html",
+    "json"
+  ],
+  "moduleNameMapper": {
+    "#app/(.*)": "<rootDir>/src/app/$1"
+  },
+  "transformIgnorePatterns": [
+    "node_modules/(?!@ngrx|ng2-truncate)"
+  ],
+  "snapshotSerializers": [
+    "<rootDir>/node_modules/jest-preset-angular/AngularSnapshotSerializer.js",
+    "<rootDir>/node_modules/jest-preset-angular/HTMLCommentSerializer.js"
+  ],
+  "preset": "jest-preset-angular",
+  "setupTestFrameworkScriptFile": "<rootDir>/src/test.ts"
+};

frontend-angular/package.json

@@ -7,7 +7,8 @@
     "start:local": "ng serve --proxy-config proxy.conf.json --aot --build-optimizer",
     "start": "ng serve --proxy-config proxy-prod.conf.json --aot --build-optimizer -sm=false",
     "build": "ng build --aot true --base-href /v2/",
-    "test": "ng t -w false",
+    "test": "jest --runInBand --ci --silent",
+    "test:watch": "jest --watch",
     "lint": "npm run prettier && ng lint --fix",
     "prettier": "prettier --write src/app/**/*.ts",
     "e2e": "ng e2e"
@@ -44,12 +45,15 @@
     "@angular/cli": "1.6.8",
     "@angular/compiler-cli": "^5.2.0",
     "@angular/language-service": "^5.2.0",
+    "@types/jest": "^22.2.0",
     "@types/jasmine": "~2.8.3",
     "@types/jasminewd2": "~2.0.2",
     "@types/node": "~6.0.60",
     "codelyzer": "^4.0.1",
     "jasmine-core": "~2.8.0",
     "jasmine-spec-reporter": "~4.2.1",
+    "jest": "^22.4.2",
+    "jest-preset-angular": "^5.2.1",
     "karma": "~2.0.0",
     "karma-chrome-launcher": "~2.2.0",
     "karma-coverage-istanbul-reporter": "^1.2.1",

frontend-angular/src/app/podcast/core/episodes/episodes.component.spec.ts

@@ -309,6 +309,6 @@ describe('EpisodesComponent', () => {
 	});
 
 	function asText(v: DebugElement) {
-		return v.nativeElement.innerText;
+		return v.nativeElement.textContent.trim();
 	}
 });

frontend-angular/src/app/podcast/podcast.component.spec.ts

@@ -79,7 +79,7 @@ describe('PodcastComponent', () => {
 		expect(component).toBeTruthy();
 	});
 
-	it('should have title in the nav-bar', async () => {
+	it('should have title in the nav-bar', () => {
 		/* Given */
 		/* When  */
 		const title = el.query(By.css('.toolbar__title'));
@@ -105,6 +105,6 @@ describe('PodcastComponent', () => {
 	});
 
 	function asText(d: DebugElement) {
-		return d.nativeElement.innerText;
+		return d.nativeElement.textContent.trim();
 	}
 });

frontend-angular/src/app/podcasts/core/resolver/podcasts.resolver.spec.ts

@@ -116,8 +116,8 @@ describe('PodcastsResolver', () => {
 	];
 
 	beforeEach(() => {
-		podcastService = jasmine.createSpyObj('podcastService', ['findAll']);
-		(podcastService.findAll as Spy).and.returnValue(of(PODCASTS));
+		podcastService = { findAll: jest.fn() };
+		podcastService.findAll.mockReturnValue(of(PODCASTS));
 	});
 
 	beforeEach(() => {

frontend-angular/src/app/podcasts/podcasts.component.spec.ts

@@ -22,8 +22,6 @@ import { PodcastsEffects } from './podcasts.effects';
 import * as fromPodcasts from './podcasts.reducer';
 import { reducer } from './podcasts.reducer';
 
-import Spy = jasmine.Spy;
-
 describe('PodcastsFeature', () => {
 	const podcasts = [
 		{
@@ -192,8 +190,8 @@ describe('PodcastsFeature', () => {
 		let actions: Observable<Action>;
 
 		beforeEach(() => {
-			podcastService = jasmine.createSpyObj('podcastService', ['findAll']);
-			(podcastService.findAll as Spy).and.returnValue(of([]));
+			podcastService = { findAll: jest.fn() } ;
+      podcastService.findAll.mockReturnValue(of([]));
 		});
 
 		beforeEach(() => {

frontend-angular/src/app/search/resolver/search.resolver.spec.ts

@@ -244,15 +244,15 @@ describe('SearchResolver', () => {
 	const NUM_PAGE = 3;
 
 	beforeEach(() => {
-		itemService = jasmine.createSpyObj('itemService', ['search']);
-		(itemService.search as Spy).and.returnValue(of(PAGE));
+		itemService = { search: jest.fn() };
+    itemService.search.mockReturnValue(of(PAGE));
 	});
 
 	beforeEach(() => {
 		route = <ActivatedRouteSnapshot>{
-			queryParamMap: jasmine.createSpyObj('queryParamMap', ['get'])
+			queryParamMap: { get: jest.fn() }
 		};
-		(route.queryParamMap.get as Spy).and.returnValue(NUM_PAGE);
+    route.queryParamMap.get.mockReturnValue(NUM_PAGE);
 	});
 
 	beforeEach(() => {

frontend-angular/src/app/search/search.component.spec.ts

@@ -2,13 +2,13 @@ import { DebugElement } from '@angular/core';
 import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
 import {
-	MatButtonModule,
-	MatCardModule,
-	MatIconModule,
-	MatInputModule,
-	MatPaginatorModule,
-	MatSelectModule,
-	MatToolbarModule
+  MatButtonModule,
+  MatCardModule,
+  MatIconModule,
+  MatInputModule,
+  MatPaginatorModule,
+  MatSelectModule,
+  MatToolbarModule
 } from '@angular/material';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
@@ -17,7 +17,6 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { provideMockActions } from '@ngrx/effects/testing';
 import { Action, Store, StoreModule } from '@ngrx/store';
 import { cold, hot } from 'jasmine-marbles';
-import { TruncateModule } from 'ng2-truncate';
 import { Observable } from 'rxjs/Observable';
 import { of } from 'rxjs/observable/of';
 
@@ -31,8 +30,7 @@ import { SearchComponent, StatusesViewValue } from './search.component';
 import { SearchEffects } from './search.effects';
 import * as fromSearch from './search.reducer';
 import { selectRequest, selectResults } from './search.reducer';
-
-import Spy = jasmine.Spy;
+import { TruncateModule } from 'ng2-truncate';
 
 describe('SearchFeature', () => {
 	describe('SearchComponent', () => {
@@ -935,8 +933,8 @@ describe('SearchFeature', () => {
 		};
 
 		beforeEach(() => {
-			itemService = jasmine.createSpyObj('itemService', ['search']);
-			(itemService.search as Spy).and.returnValue(of(PAGE));
+			itemService = { search: jest.fn() };
+      (itemService.search as jest.Mock<Page<Item>>).mockReturnValue(of(PAGE));
 		});
 
 		beforeEach(() => {

frontend-angular/src/test.ts

@@ -1,17 +1,40 @@
-// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+import 'jest-preset-angular';
 
-import 'zone.js/dist/zone-testing';
-import {getTestBed} from '@angular/core/testing';
-import {BrowserDynamicTestingModule, platformBrowserDynamicTesting} from '@angular/platform-browser-dynamic/testing';
+// @ts-ignore
+global.CSS = null;
 
-declare var require: any;
+const webStorageMock = () => {
+  let storage: Record<string, any> = {};
+  return {
+    getItem: (key: string) => (key in storage ? storage[key] : null),
+    setItem: (key: string, value: any) => (storage[key] = value || ''),
+    removeItem: (key: string) => delete storage[key],
+    clear: () => (storage = {}),
+  };
+};
 
-// 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(window, 'localStorage', { value: webStorageMock() });
+Object.defineProperty(window, 'sessionStorage', { value: webStorageMock() });
+Object.defineProperty(document, 'doctype', {
+  value: '<!DOCTYPE html>',
+});
+Object.defineProperty(window, 'getComputedStyle', {
+  value: () => {
+    return {
+      display: 'none',
+      appearance: ['-webkit-appearance'],
+    };
+  },
+});
+/**
+ * ISSUE: https://github.com/angular/material2/issues/7101
+ * Workaround for JSDOM missing transform property
+ */
+Object.defineProperty(document.body.style, 'transform', {
+  value: () => {
+    return {
+      enumerable: true,
+      configurable: true,
+    };
+  },
+});

frontend-angular/src/tsconfig.spec.json

@@ -1,11 +1,12 @@
 {
   "extends": "../tsconfig.json",
   "compilerOptions": {
+    "allowJs": true,
     "outDir": "../out-tsc/spec",
+    "baseUrl": "./",
     "module": "commonjs",
-    "baseUrl": "",
     "types": [
-      "jasmine",
+      "jest",
       "node"
     ]
   },