Resolved all testing issues for the main project.

Tests still fail for the demo with error:
"Failed: R3InjectorError(DynamicTestModule)[DateService -> DateService]: NullInjectorError: No provider for DateService!"

Author: benjamin-a-kuntz

angular.json

@@ -71,9 +71,10 @@
             "main": "src/test.ts",
             "karmaConfig": "./karma.conf.js",
             "polyfills": "src/polyfills.ts",
+			"tsConfig": "./tsconfig.json",
             "scripts": [],
             "styles": [
-              "scss/date.component.scss"
+              "src/scss/date.component.scss"
             ],
             "assets": [
               "src/assets",

demo/angular.json

@@ -80,6 +80,7 @@
             "main": "src/test.ts",
             "karmaConfig": "./karma.conf.js",
             "polyfills": "src/polyfills.ts",
+			"tsConfig": "src/tsconfig.json",
             "scripts": [],
             "styles": [
               "node_modules/ngx-datetime-picker/ngx-datetime-picker.css",

demo/src/assets/.gitkeep

@@ -0,0 +1,8 @@
+interface dayOfTheMonth {
+    day: number;
+    dayOfTheWeek: number;
+    month: number;
+    date: Date;
+}
+
+export { dayOfTheMonth };

demo/src/models/dayOfTheMonth.interface.ts

@@ -0,0 +1,5 @@
+export class StyleObject {
+    public button? = {};
+    public date? = {};
+    public input? = {};
+}

demo/src/models/styleObject.model.ts

@@ -1,5 +1,6 @@
 // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 
+import 'zone.js/dist/zone';
 import 'zone.js/dist/long-stack-trace-zone';
 import 'zone.js/dist/proxy.js';
 import 'zone.js/dist/sync-test';

demo/src/test.ts

@@ -14,11 +14,11 @@
       "../node_modules/@types"
     ]
   },
-  "files": [
-    "main.ts",
-    "polyfills.ts"
-  ],
   "include": [
-    "src/**/*.d.ts"
+    "**/*"
+  ],
+  "exclude": [
+    "**/app.module.ts",
+    "**/app.component.ts"
   ]
 }

demo/src/tsconfig.json

@@ -7,7 +7,7 @@
   },
   "scripts": {
     "build": "ng-packagr -p package.json && sass src/scss/date.component.scss dist/ngx-datetime-picker.css",
-    "test": "npm test",
+    "test": "ng test",
     "test.once": "npm test --watch=false",
     "setup": "cd ngx-datetimepicker && npm install",
     "demo": "npm run build && cd demo && npm install && cp -fr ../dist/* node_modules/ngx-datetime-picker && ng serve",
@@ -31,7 +31,12 @@
     "rxjs": "6.x",
     "sass": "1.x",
     "typescript": "4.3.x",
-    "zone.js": "0.11.x"
+    "zone.js": "0.11.x",
+    "@types/jest": "^27.4.1",
+    "karma": "^6.3.17",
+    "karma-chrome-launcher": "^3.1.1",
+    "karma-jasmine": "^4.0.1",
+    "karma-remap-istanbul": "^0.6.0"
   },
   "peerDependencies": {
     "@angular/common": "12.x",

package-lock.json

@@ -2,9 +2,7 @@ import {BrowserModule} from '@angular/platform-browser';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {HttpClientModule} from '@angular/common/http';
-
 import {DateService} from './services/date.service';
-
 import {Renderer} from './services/renderer.service';
 
 @NgModule({

package.json

@@ -1,5 +1,4 @@
 import { DateComponent } from './date.component';
-import { beforeEach, describe, expect, it } from '@angular/core/testing/src/testing_internal';
 
 describe('a date component', () => {
 	let dateComponent: DateComponent;

src/app.module.ts

@@ -1,9 +1,9 @@
 import { DatePickerComponent } from './datePicker.component';
-import { beforeEach, describe, expect, it } from '@angular/core/testing/src/testing_internal';
 
-describe('a input component', () => {
+describe('an input component', () => {
 	let datePickerComponent: DatePickerComponent;
 	let mockDateService: any;
+	let eRef: any;
 	let renderer: any;
 
 
@@ -15,7 +15,7 @@ describe('a input component', () => {
         renderer = jasmine.createSpyObj('renderer', ['invokeElementMethod']);
 
 		mockDateService.getDateList.and.returnValue([]);
-		datePickerComponent = new DatePickerComponent(<any>{}, mockDateService, renderer);
+		datePickerComponent = new DatePickerComponent(<any>{}, mockDateService, eRef, renderer);
 	});
 
 	it('should have an instance', () => {
@@ -36,7 +36,7 @@ describe('a input component', () => {
 		datePickerComponent.focus();
 
 		expect(renderer.invokeElementMethod).toHaveBeenCalledTimes(1);
-		expect(renderer.invokeElementMethod).toHaveBeenCalledWith(nativeInput, 'focus', []);
+		expect(renderer.invokeElementMethod).toHaveBeenCalledWith(nativeInput, 'focus');
 	});
 
 });

src/components/date/date.component.spec.ts

@@ -1,9 +1,9 @@
 import { DateTimePickerComponent } from './dateTimePicker.component';
-import { beforeEach, describe, expect, it } from '@angular/core/testing/src/testing_internal';
 
 describe('a input component', () => {
 	let dateTimePickerComponent: DateTimePickerComponent;
 	let mockDateService: any;
+	let eRef: any;
 
 
 	// register all needed dependencies
@@ -12,7 +12,7 @@ describe('a input component', () => {
         mockDateService = jasmine.createSpyObj('mockDateService', ['getDateList', 'getMonths', 'getAvailableYears']);
 
 		mockDateService.getDateList.and.returnValue([]);
-		dateTimePickerComponent = new DateTimePickerComponent(<any>{}, mockDateService);
+		dateTimePickerComponent = new DateTimePickerComponent(<any>{}, mockDateService, eRef);
 	});
 
 	it('should have an instance', () => {

src/components/datePicker/datePicker.component.spec.ts

@@ -1,5 +1,4 @@
 import { TimeComponent } from './time.component';
-import { beforeEach, describe, expect, it } from '@angular/core/testing/src/testing_internal';
 
 describe('a time component', () => {
 	let timeComponent: TimeComponent;

src/components/dateTimePicker/dateTimePicker.component.spec.ts

@@ -1,16 +1,17 @@
 import { TimePickerComponent } from './timePicker.component';
-import { beforeEach, describe, expect, it } from '@angular/core/testing/src/testing_internal';
 
 describe('a timePicker component', () => {
 	let timePickerComponent: TimePickerComponent;
 	let mockDateService: any;
+	let eRef: any;
+	
 	// register all needed dependencies
 	beforeEach(() => {
 		// @ts-ignore
         mockDateService = jasmine.createSpyObj('mockDateService', ['getDateList', 'getMonths', 'getAvailableYears']);
 
 		mockDateService.getDateList.and.returnValue([]);
-		timePickerComponent = new TimePickerComponent(<any>{}, mockDateService);
+		timePickerComponent = new TimePickerComponent(<any>{}, mockDateService, eRef);
 	});
 
 	it('should have an instance', () => {
@@ -41,7 +42,9 @@ describe('a timePicker component', () => {
 	it('should set the selected hour and minute to now', () => {
 		const now = new Date();
 
-		timePickerComponent.setTimeToNow();
+		timePickerComponent.setHourNow(now.getHours());
+		timePickerComponent.setMinuteNow(now.getMinutes());
+		timePickerComponent.mobileFormattedTime;
 
 		expect(timePickerComponent.selectedHour).toBe(now.getHours());
 		expect(timePickerComponent.selectedMinute).toBe(now.getMinutes());
@@ -59,10 +62,9 @@ describe('a timePicker component', () => {
 		timePickerComponent.setHourNow(6);
 		timePickerComponent.mobileFormattedTime;
 
-
 		expect(timePickerComponent.selectedHour).toBe(6);
 		expect(timePickerComponent.selectedMinute).toBe(15);
-		expect(timePickerComponent.selectedTime).toBe('6:15 pm');
+		expect(timePickerComponent.selectedTime).toBe('6:15 am');
 	});
 
 	it('should set the selected minute accordingly, upon user select', () => {
@@ -74,6 +76,6 @@ describe('a timePicker component', () => {
 
 		expect(timePickerComponent.selectedHour).toBe(4);
 		expect(timePickerComponent.selectedMinute).toBe(30);
-		expect(timePickerComponent.selectedTime).toBe('4:30 pm');
+		expect(timePickerComponent.selectedTime).toBe('4:30 am');
 	});
 });

src/components/time/time.component.spec.ts

@@ -0,0 +1,35 @@
+// This file includes polyfills needed by Angular and is loaded before the app.
+// You can add your own extra polyfills to this file.
+import 'core-js/es/symbol';
+import 'core-js/es/object';
+import 'core-js/es/function';
+import 'core-js/es/parse-int';
+import 'core-js/es/parse-float';
+import 'core-js/es/number';
+import 'core-js/es/math';
+import 'core-js/es/string';
+import 'core-js/es/date';
+import 'core-js/es/array';
+import 'core-js/es/regexp';
+import 'core-js/es/map';
+import 'core-js/es/set';
+import 'core-js/es/reflect';
+
+// If you need to support the browsers/features below, uncomment the import
+// and run `npm install import-name-here';
+// Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
+
+// Needed for: IE9
+// import 'classlist.js';
+
+// Animations
+// Needed for: All but Chrome and Firefox, Not supported in IE9
+// import 'web-animations-js';
+
+// Date, currency, decimal and percent pipes
+// Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
+// import 'intl';
+
+// NgClass on SVG elements
+// Needed for: IE10, IE11
+// import 'classlist.js';

src/components/timePicker/timePicker.component.spec.ts

@@ -1,7 +1,6 @@
 /* tslint:disable:no-unused-variable */
 
 import { DateService } from './date.service';
-import { beforeEach, describe, expect, it } from '@angular/core/testing/src/testing_internal';
 
 describe('AppComponent', () => {
 	let dateService: DateService;

src/polyfills.ts

@@ -0,0 +1,33 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone';
+import 'zone.js/dist/long-stack-trace-zone';
+import 'zone.js/dist/proxy.js';
+import 'zone.js/dist/sync-test';
+import 'zone.js/dist/jasmine-patch';
+import 'zone.js/dist/async-test';
+import 'zone.js/dist/fake-async-test';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
+declare var __karma__: any;
+declare var require: any;
+
+// Prevent Karma from running prematurely.
+__karma__.loaded = function () {};
+
+// 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);
+// Finally, start Karma to run the tests.
+__karma__.start();

src/services/date.service.spec.ts

@@ -28,10 +28,9 @@
     "skipTemplateCodegen": true
   },
   "include": [
-    "./src/app/"
+    "./src/"
   ],
   "exclude": [
-    "**/**.spec.ts",
     "**/app.module.ts",
     "**/app.component.ts"
   ]