feat: update to angular 13 (#157)

* feat: update/migrate angular to 13 * test(ya-api-loader): add FakeHTMLScriptElement, additional appendChild calls
ddubrava · Nov 25, 2021 · dbc5e26 · dbc5e26
1 parent da669be
commit dbc5e26
Show file tree

Hide file tree

Showing 9 changed files with 23,443 additions and 8,681 deletions.
diff --git a/.gitignore b/.gitignore
@@ -32,6 +32,7 @@ speed-measure-plugin*.json
 .history/*
 
 # misc
+/.angular/cache
 /.sass-cache
 /connect.lock
 /coverage

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -19,52 +19,51 @@
     "*.{js,ts}": "eslint --fix"
   },
   "dependencies": {
-    "@angular/animations": "^12.2.11",
-    "@angular/common": "^12.2.11",
-    "@angular/compiler": "^12.2.11",
-    "@angular/core": "^12.2.11",
-    "@angular/forms": "^12.2.11",
-    "@angular/platform-browser": "^12.2.11",
-    "@angular/platform-browser-dynamic": "^12.2.11",
-    "@angular/router": "^12.2.11",
-    "rxjs": "^6.6.7",
+    "@angular/animations": "^13.0.2",
+    "@angular/common": "^13.0.2",
+    "@angular/compiler": "^13.0.2",
+    "@angular/core": "^13.0.2",
+    "@angular/forms": "^13.0.2",
+    "@angular/platform-browser": "^13.0.2",
+    "@angular/platform-browser-dynamic": "^13.0.2",
+    "@angular/router": "^13.0.2",
+    "rxjs": "^7.4.0",
     "tslib": "^2.3.1",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^12.2.11",
-    "@angular-eslint/builder": "^12.5.0",
-    "@angular-eslint/eslint-plugin": "^12.5.0",
-    "@angular-eslint/eslint-plugin-template": "^12.5.0",
-    "@angular-eslint/schematics": "^12.5.0",
-    "@angular-eslint/template-parser": "^12.5.0",
-    "@angular/cli": "^12.2.11",
-    "@angular/compiler-cli": "^12.2.11",
-    "@compodoc/compodoc": "^1.1.15",
-    "@types/jasmine": "^3.10.1",
-    "@types/node": "^12.20.34",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
-    "@typescript-eslint/parser": "^4.33.0",
-    "codelyzer": "^6.0.2",
-    "eslint": "^7.32.0",
-    "eslint-config-airbnb-base": "^14.2.1",
-    "eslint-config-airbnb-typescript": "^12.3.1",
-    "eslint-config-prettier": "^6.15.0",
-    "eslint-plugin-import": "^2.25.2",
+    "@angular-devkit/build-angular": "^13.0.3",
+    "@angular-eslint/builder": "^13.0.1",
+    "@angular-eslint/eslint-plugin": "^13.0.1",
+    "@angular-eslint/eslint-plugin-template": "^13.0.1",
+    "@angular-eslint/schematics": "^13.0.1",
+    "@angular-eslint/template-parser": "^13.0.1",
+    "@angular/cli": "^13.0.3",
+    "@angular/compiler-cli": "^13.0.2",
+    "@compodoc/compodoc": "^1.1.16",
+    "@types/jasmine": "^3.10.2",
+    "@types/node": "^16.11.10",
+    "@typescript-eslint/eslint-plugin": "^5.4.0",
+    "@typescript-eslint/parser": "^5.4.0",
+    "eslint": "^8.3.0",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-config-airbnb-typescript": "^16.0.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-import": "^2.25.3",
     "husky": "^7.0.4",
-    "jasmine-core": "~3.6.0",
-    "jasmine-spec-reporter": "~5.0.0",
-    "karma": "^6.3.5",
+    "jasmine-core": "~3.10.1",
+    "jasmine-spec-reporter": "~7.0.0",
+    "karma": "^6.3.9",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage": "~2.0.3",
-    "karma-jasmine": "~4.0.0",
+    "karma-jasmine": "~4.0.1",
     "karma-jasmine-html-reporter": "^1.7.0",
-    "lint-staged": "^11.2.4",
-    "ng-packagr": "^12.2.4",
-    "prettier": "^2.4.1",
+    "lint-staged": "^12.1.2",
+    "ng-packagr": "^13.0.8",
+    "prettier": "^2.5.0",
     "protractor": "~7.0.0",
     "standard-version": "^9.3.2",
-    "ts-node": "~8.3.0",
-    "typescript": "4.2.4"
+    "ts-node": "~10.4.0",
+    "typescript": "~4.4.2"
   }
 }
diff --git a/projects/angular8-yandex-maps/src/lib/services/ya-api-loader/ya-api-loader.service.spec.ts b/projects/angular8-yandex-maps/src/lib/services/ya-api-loader/ya-api-loader.service.spec.ts
@@ -1,15 +1,38 @@
 import { YaApiLoaderService, YaConfig } from './ya-api-loader.service';
 import { createReadySpy } from '../../testing/fake-ymaps-utils';
 
+class FakeHTMLScriptElement {
+  onHandlers: Record<string, any> = {};
+
+  async: boolean;
+
+  defer: boolean;
+
+  id: string;
+
+  src: string;
+
+  type: string;
+
+  addEventListener(type: string, listener: EventListenerOrEventListenerObject): void {
+    this.onHandlers[type] = listener;
+  }
+
+  removeEventListener(): void {}
+}
+
 describe('YaApiLoaderService', () => {
   let service: YaApiLoaderService;
+  let script: FakeHTMLScriptElement;
   let mockDocument: any;
 
   beforeEach(() => {
     mockDocument = {
       createElement: jasmine.createSpy('createElement'),
       body: jasmine.createSpyObj('body', ['appendChild']),
     };
+
+    script = new FakeHTMLScriptElement();
   });
 
   afterEach(() => {
@@ -19,8 +42,8 @@ describe('YaApiLoaderService', () => {
   it('should create script with default options if config is not passed', () => {
     service = new YaApiLoaderService(null, mockDocument);
 
-    const script = {} as HTMLScriptElement;
     mockDocument.createElement.and.returnValue(script);
+    mockDocument.body.appendChild.and.returnValue(script);
 
     service.load();
 
@@ -40,8 +63,8 @@ describe('YaApiLoaderService', () => {
 
     service = new YaApiLoaderService(config, mockDocument);
 
-    const script = {} as HTMLScriptElement;
     mockDocument.createElement.and.returnValue(script);
+    mockDocument.body.appendChild.and.returnValue(script);
 
     service.load();
 
@@ -62,8 +85,8 @@ describe('YaApiLoaderService', () => {
 
     service = new YaApiLoaderService(config, mockDocument);
 
-    const script = {} as HTMLScriptElement;
     mockDocument.createElement.and.returnValue(script);
+    mockDocument.body.appendChild.and.returnValue(script);
 
     service.load();
 
@@ -82,8 +105,8 @@ describe('YaApiLoaderService', () => {
 
     service = new YaApiLoaderService(config, mockDocument);
 
-    const script = {} as HTMLScriptElement;
     mockDocument.createElement.and.returnValue(script);
+    mockDocument.body.appendChild.and.returnValue(script);
 
     service.load();
 
@@ -92,6 +115,7 @@ describe('YaApiLoaderService', () => {
 
   it('should not append second script if window.ymaps is defined', () => {
     createReadySpy();
+
     service = new YaApiLoaderService(null, mockDocument);
     service.load();
 
@@ -102,8 +126,8 @@ describe('YaApiLoaderService', () => {
   it('should not append second script if load called in a sequence', () => {
     service = new YaApiLoaderService(null, mockDocument);
 
-    mockDocument.createElement.and.returnValue({});
-    mockDocument.body.appendChild.and.returnValue({});
+    mockDocument.createElement.and.returnValue(script);
+    mockDocument.body.appendChild.and.returnValue(script);
 
     service.load();
     service.load();
@@ -115,15 +139,6 @@ describe('YaApiLoaderService', () => {
   it('should return observable with ymaps on script load', (done) => {
     service = new YaApiLoaderService(null, mockDocument);
 
-    const onHandlers: { [key: string]: any } = {};
-
-    const script = {
-      addEventListener(type: string, listener: any) {
-        onHandlers[type] = listener;
-      },
-      removeEventListener() {},
-    };
-
     mockDocument.createElement.and.returnValue(script);
     mockDocument.body.appendChild.and.returnValue(script);
 
@@ -134,38 +149,28 @@ describe('YaApiLoaderService', () => {
 
     setTimeout(() => {
       createReadySpy();
-      onHandlers.load();
+      script.onHandlers.load();
     });
   });
 
   it('should throw error on script loading error', (done) => {
     service = new YaApiLoaderService(null, mockDocument);
 
-    const onHandlers: { [key: string]: any } = {};
-
-    const script = {
-      addEventListener(type: string, listener: any) {
-        onHandlers[type] = listener;
-      },
-      removeEventListener() {},
-    };
-
-    const event = new Event('load');
+    const error = {};
 
     mockDocument.createElement.and.returnValue(script);
     mockDocument.body.appendChild.and.returnValue(script);
 
-    service.load().subscribe(
-      () => {},
-      (e) => {
-        expect(e).toEqual(event);
+    service.load().subscribe({
+      error: (e) => {
+        expect(e).toEqual(error);
         done();
       },
-    );
+    });
 
     setTimeout(() => {
       createReadySpy();
-      onHandlers.error(event);
+      script.onHandlers.error(error);
     });
   });
 });
diff --git a/projects/angular8-yandex-maps/src/lib/utils/generate-random-id.ts b/projects/angular8-yandex-maps/src/lib/utils/generate-random-id.ts
@@ -3,6 +3,4 @@
  * @example f175517fa4f3
  * @internal
  */
-export const generateRandomId = (): string => {
-  return `f${Number(new Date()).toString(16)}`;
-};
+export const generateRandomId = (): string => `f${Number(new Date()).toString(16)}`;
diff --git a/projects/angular8-yandex-maps/src/test.ts b/projects/angular8-yandex-maps/src/test.ts
@@ -20,7 +20,9 @@ declare const require: {
 };
 
 // First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
+getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), {
+  teardown: { destroyAfterEach: false },
+});
 // Then we find all the tests.
 const context = require.context('./', true, /\.spec\.ts$/);
 // And load the modules.

diff --git a/projects/angular8-yandex-maps/tsconfig.lib.prod.json b/projects/angular8-yandex-maps/tsconfig.lib.prod.json
@@ -5,6 +5,6 @@
     "declarationMap": false
   },
   "angularCompilerOptions": {
-    "enableIvy": false
+    "compilationMode": "partial"
   }
 }
diff --git a/src/polyfills.ts b/src/polyfills.ts
@@ -14,19 +14,10 @@
  * Learn more in https://angular.io/guide/browser-support
  */
 
-/** *************************************************************************************************
- * BROWSER POLYFILLS
- */
-
-/** IE11 requires the following for NgClass support on SVG elements */
-// import 'classlist.js';  // Run `npm install --save classlist.js`.
-
 /**
- * Web Animations `@angular/platform-browser/animations`
- * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
- * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
+ * *************************************************************************************************
+ * BROWSER POLYFILLS
  */
-// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
 
 /**
  * By default, zone.js will patch all possible macroTask and DomEvents
@@ -52,11 +43,13 @@
  *
  */
 
-/** *************************************************************************************************
+/**
+ * *************************************************************************************************
  * Zone JS is required by default for Angular itself.
  */
 import 'zone.js'; // Included with Angular CLI.
 
-/** *************************************************************************************************
+/**
+ * *************************************************************************************************
  * APPLICATION IMPORTS
  */
diff --git a/src/test.ts b/src/test.ts
@@ -19,7 +19,9 @@ declare const require: {
 };
 
 // First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
+getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), {
+  teardown: { destroyAfterEach: false },
+});
 // Then we find all the tests.
 const context = require.context('./', true, /\.spec\.ts$/);
 // And load the modules.