jest integration

Nilesh Patel · Nilesh Patel · commit 1d453f6b89a0 · 2018-07-22T22:23:06.000+05:30
diff --git a/jest.config.js b/jest.config.js
@@ -0,0 +1,23 @@
+// @TODO: try to add ts-check
+const jestConfig = {
+  preset: 'jest-preset-angular',
+  setupTestFrameworkScriptFile: '<rootDir>/src/setup-jest.ts',
+  testMatch: [
+    '<rootDir>/src/**/__tests__/**/*.+(ts|js)?(x)',
+    '<rootDir>/src/**/+(*.)+(spec|test).+(ts|js)?(x)',
+  ],
+  //  // moduleNameMapper: {
+  // //     'app/(.*)': '<rootDir>/src/app/$1',
+  // //     'assets/(.*)': '<rootDir>/src/assets/$1',
+  // //     'environments/(.*)': '<rootDir>/src/environments/$1',
+  // //   },
+  // //   transformIgnorePatterns: ['node_modules/(?!@ngrx)'],
+  coveragePathIgnorePatterns: [
+    '<rootDir>/node_modules/',
+    '<rootDir>/out-tsc/',
+    '<rootDir>/src/.*(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$',
+    'src/(setup-jest|jest-global-mocks).ts',
+  ],
+};
+
+module.exports = jestConfig;
diff --git a/package.json b/package.json
@@ -9,8 +9,11 @@
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
-    "test": "ng test",
+    "ng:test": "ng test",
     "lint": "ng lint",
+    "test": "jest --watch",
+    "test:ci": "jest --runInBand",
+    "test:coverage": "jest --coverage",
     "build:prod": "ng build --prod --base-href https://nileshpatel17.github.io/ng-multiselect-dropdown/",
     "clear:lib": "rimraf dist-lib",
     "copyfiles": "copyfiles -u 1 ./dist-lib/**/*.* node_modules/ng-multiselect-dropdown",
@@ -84,6 +87,8 @@
     "ts-node": "~3.0.4",
     "tslint": "~5.3.2",
     "typescript": "2.6.2",
-    "zone.js": "^0.8.25"
+    "zone.js": "^0.8.25",
+    "jest": "^23.4.1",
+    "jest-preset-angular": "^5.2.3"
   }
-}
+}
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -1,5 +1,4 @@
 import { Component, OnInit } from '@angular/core';
-import { DropdownSettings } from '../ng-multiselect-dropdown/src/multiselect.component';
 
 @Component({
     selector: 'app-root',
diff --git a/src/app/components/select/multiple-demo.ts b/src/app/components/select/multiple-demo.ts
@@ -1,5 +1,6 @@
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { Component, OnInit } from '@angular/core';
+import { IDropdownSettings } from '../../../ng-multiselect-dropdown/src';
 
 @Component({
   selector: 'multiple-demo',
@@ -13,7 +14,7 @@ export class MultipleDemoComponent implements OnInit {
   limitSelection = false;
   cities: Array<any> = [];
   selectedItems: Array<any> = [];
-  dropdownSettings: any = {};
+  dropdownSettings: IDropdownSettings = {};
   htmlCode = `
     &lt;form [formGroup]="myForm"&gt;
         &lt;ng-multiselect-dropdown
@@ -90,7 +91,7 @@ export class MultipleDemoComponent implements OnInit {
     }
 `;
 
-  constructor(private fb: FormBuilder) {}
+  constructor(private fb: FormBuilder) { }
 
   ngOnInit() {
     this.cities = [
diff --git a/src/jest-global-mocks.ts b/src/jest-global-mocks.ts
@@ -0,0 +1,38 @@
+// @ts-ignore
+global.CSS = null;
+
+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 = {}),
+  };
+};
+
+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,
+    };
+  },
+});
diff --git a/src/ng-multiselect-dropdown/test/list-filter.pipe.spec.ts b/src/ng-multiselect-dropdown/test/list-filter.pipe.spec.ts
@@ -0,0 +1,3 @@
+test('sanity test', () => {
+    expect(1).toBe(1)
+})
diff --git a/src/ng-multiselect-dropdown/test/multi-select.component.spec.ts b/src/ng-multiselect-dropdown/test/multi-select.component.spec.ts
@@ -74,7 +74,7 @@ class Ng2MultiSelectDropdownMultipleSelect {
     singleSelection: false,
     idField: 'item_id',
     textField: 'item_text',
-    selectAllText: 'Select-All',
+    selectAllText: 'Select All',
     unSelectAllText: 'UnSelect All',
     badgeShowLimit: 3,
     disabled: false,
@@ -259,7 +259,7 @@ describe('ng-multiselect-component', function() {
     it('should have custom placeholder for "select all text" button', () => {
       fixture.whenStable().then(() => {
         const sel = document.querySelector('.select-all-text') as HTMLElement;
-        expect(sel.innerText).toContain('Select-All');
+        expect(sel.innerText).toContain('Select All');
       });
     });
   });
diff --git a/src/setup-jest.ts b/src/setup-jest.ts
@@ -0,0 +1,3 @@
+import 'jest-preset-angular';
+
+import './jest-global-mocks'; // browser mocks globally available for every test

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,4 @@`
`1`	`1`	`import { Component, OnInit } from '@angular/core';`
`2`		`-import { DropdownSettings } from '../ng-multiselect-dropdown/src/multiselect.component';`
`3`	`2`
`4`	`3`	`@Component({`
`5`	`4`	`selector: 'app-root',`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+test('sanity test', () => {`
	`2`	`+ expect(1).toBe(1)`
	`3`	`+})`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+import 'jest-preset-angular';`
	`2`	`+`
	`3`	`+import './jest-global-mocks'; // browser mocks globally available for every test`