feat(chore): Angular 16 update

packages/angular/.eslintrc.json

@@ -47,19 +47,20 @@
         "import/no-extraneous-dependencies": [
           "error",
           {
-            "devDependencies": ["**/*.spec.ts"],
-            "packageDir": "./" // Needed for angular library support
+            "devDependencies": [
+              "**/*.spec.ts"
+            ],
+            "packageDir": "./"
           }
         ],
         "tsdoc/syntax": "warn",
-        "unicorn/filename-case": "off", // We are naming files with capitals
-        // I think some of these are silly. `e` is bad, but `err` and `exc` are decent. `user of users` is confusing, `usr of users` is safer.
+        "unicorn/filename-case": "off",
         "unicorn/prevent-abbreviations": "off"
       },
       "settings": {
         "import/resolver": {
           "typescript": {
-            "alwaysTryTypes": true // always try to resolve types under `<root>@types` directory even it doesn't contain any source code, like `@types/unist`
+            "alwaysTryTypes": true
           }
         }
       }

packages/angular/angular.json

@@ -26,7 +26,7 @@
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "main": "projects/tx-native-angular-sdk/test.ts",
+            "polyfills": ["zone.js", "zone.js/testing"],
             "tsConfig": "projects/tx-native-angular-sdk/tsconfig.spec.json",
             "karmaConfig": "projects/tx-native-angular-sdk/karma.conf.js",
             "codeCoverage": true
@@ -46,5 +46,12 @@
       }
     }
   },
-  "defaultProject": "@transifex/angular"
+  "schematics": {
+    "@angular-eslint/schematics:application": {
+      "setParserOptionsProject": true
+    },
+    "@angular-eslint/schematics:library": {
+      "setParserOptionsProject": true
+    }
+  }
 }

packages/angular/package.json

@@ -32,29 +32,29 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~14.3.0",
-    "@angular/common": "~14.3.0",
-    "@angular/compiler": "~14.3.0",
-    "@angular/core": "~14.3.0",
-    "@angular/forms": "~14.3.0",
-    "@angular/platform-browser": "^14.3.0",
-    "@angular/platform-browser-dynamic": "^14.3.0",
-    "@angular/router": "~14.3.0",
+    "@angular/animations": "~16.2.7",
+    "@angular/common": "~16.2.7",
+    "@angular/compiler": "~16.2.7",
+    "@angular/core": "~16.2.7",
+    "@angular/forms": "~16.2.7",
+    "@angular/platform-browser": "^16.2.7",
+    "@angular/platform-browser-dynamic": "^16.2.7",
+    "@angular/router": "~16.2.7",
     "@transifex/native": "^7.0.1",
     "rxjs": "~6.6.0",
     "tslib": "^2.6.2",
-    "zone.js": "^0.11.8"
+    "zone.js": "^0.13.3"
   },
   "devDependencies": {
-    "@angular-devkit/architect": "^0.1402.11",
-    "@angular-devkit/build-angular": "^14.2.13",
-    "@angular-eslint/builder": "^14.4.0",
-    "@angular-eslint/eslint-plugin": "^14.4.0",
-    "@angular-eslint/eslint-plugin-template": "^14.4.0",
-    "@angular-eslint/schematics": "14.4.0",
-    "@angular-eslint/template-parser": "^14.4.0",
-    "@angular/cli": "^14.2.13",
-    "@angular/compiler-cli": "^14.3.0",
+    "@angular-devkit/architect": "^0.1602.4",
+    "@angular-devkit/build-angular": "^16.2.4",
+    "@angular-eslint/builder": "^16.2.0",
+    "@angular-eslint/eslint-plugin": "^16.2.0",
+    "@angular-eslint/eslint-plugin-template": "^16.2.0",
+    "@angular-eslint/schematics": "16.2.0",
+    "@angular-eslint/template-parser": "^16.2.0",
+    "@angular/cli": "^16.2.4",
+    "@angular/compiler-cli": "^16.2.7",
     "@types/jasmine": "~4.0.0",
     "@types/node": "^16.18.70",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
@@ -76,8 +76,8 @@
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "^2.1.0",
-    "ng-packagr": "^14.2.2",
+    "ng-packagr": "^16.2.3",
     "ts-node": "~8.3.0",
-    "typescript": "~4.6.4"
+    "typescript": "~4.9.5"
   }
 }

packages/angular/projects/tx-native-angular-sdk/.eslintrc.json

@@ -17,7 +17,7 @@
       },
       "rules": {
         "@angular-eslint/component-selector": [
-          "off", // We are not following the angular styleguide to match other implementations
+          "off",
           {
             "prefix": "tx",
             "style": "kebab-case",

packages/angular/projects/tx-native-angular-sdk/package.json

@@ -17,8 +17,8 @@
   "repository": "git://github.com/transifex/transifex-javascript.git",
   "license": "Apache-2.0",
   "peerDependencies": {
-    "@angular/common": "^12.0.0 || ^13.0.0 || ^14.0.0 || ^15.0.0",
-    "@angular/core": "^12.0.0 || ^13.0.0 || ^14.0.0 || ^15.0.0",
-    "@transifex/native": "^7.0.0"
+    "@angular/common": "^16.0.0",
+    "@angular/core": " ^16.0.0",
+    "@transifex/native": "^7.0.1"
   }
 }

packages/angular/projects/tx-native-angular-sdk/tests/T.component.spec.ts → packages/angular/projects/tx-native-angular-sdk/src/tests/T.component.spec.ts

@@ -1,10 +1,13 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { ReplaySubject } from 'rxjs';
 import { tx } from '@transifex/native';
+import { ReplaySubject } from 'rxjs';
 
-import { TComponent } from '../src/lib/T.component';
-import { SafeHtmlPipe, TranslationService, TXInstanceComponent } from '../src/public-api';
-
+import { TComponent } from '../lib/T.component';
+import {
+  SafeHtmlPipe,
+  TranslationService,
+  TXInstanceComponent,
+} from '../public-api';
 
 describe('TComponent', () => {
   let localeChangedSubject: ReplaySubject<string>;
@@ -30,16 +33,19 @@ describe('TComponent', () => {
     await TestBed.configureTestingModule({
       declarations: [TComponent, SafeHtmlPipe, TXInstanceComponent],
       providers: [TXInstanceComponent],
-    })
-        .compileComponents();
+    }).compileComponents();
 
     localeChangedSubject = new ReplaySubject<string>(0);
 
     service = TestBed.inject(TranslationService);
     instance = TestBed.inject(TXInstanceComponent);
 
     spyOn(service, 'getCurrentLocale').and.returnValue('en');
-    localeChangedSpy = spyOnProperty(service, 'localeChanged', 'get').and.returnValue(localeChangedSubject);
+    localeChangedSpy = spyOnProperty(
+      service,
+      'localeChanged',
+      'get'
+    ).and.returnValue(localeChangedSubject);
     spyOn(service, 'setCurrentLocale').and.callFake(async (locale) => {
       localeChangedSubject.next(locale);
     });
@@ -54,8 +60,11 @@ describe('TComponent', () => {
   it('should create the component', async () => {
     // setup
     spyOn(component, 'translate');
-    localeChangedSpy = spyOnProperty(component, 'localeChanged', 'get')
-      .and.returnValue(localeChangedSubject);
+    localeChangedSpy = spyOnProperty(
+      component,
+      'localeChanged',
+      'get'
+    ).and.returnValue(localeChangedSubject);
 
     // act
     component.ngOnInit();
@@ -82,8 +91,11 @@ describe('TComponent', () => {
     fixture.detectChanges();
 
     // assert
-    expect(service.translate).toHaveBeenCalledWith('not-translated',
-      { ...translationParams }, '');
+    expect(service.translate).toHaveBeenCalledWith(
+      'not-translated',
+      { ...translationParams },
+      ''
+    );
     expect(component.translatedStr).toEqual('translated');
   });
 
@@ -98,8 +110,11 @@ describe('TComponent', () => {
     fixture.detectChanges();
 
     // assert
-    expect(service.translate).toHaveBeenCalledWith('not-translated',
-      { ...translationParams }, '');
+    expect(service.translate).toHaveBeenCalledWith(
+      'not-translated',
+      { ...translationParams },
+      ''
+    );
     expect(component.translatedStr).toEqual('translated');
   });
 
@@ -114,8 +129,11 @@ describe('TComponent', () => {
     fixture.detectChanges();
 
     // assert
-    expect(service.translate).toHaveBeenCalledWith('not-translated',
-      { ...translationParams, _key: 'key-not-translated' }, '');
+    expect(service.translate).toHaveBeenCalledWith(
+      'not-translated',
+      { ...translationParams, _key: 'key-not-translated' },
+      ''
+    );
     expect(component.translatedStr).toEqual('translated');
   });
 
@@ -130,8 +148,9 @@ describe('TComponent', () => {
 
     // assert
     const compiled = fixture.debugElement.nativeElement;
-    expect((compiled as HTMLDivElement).innerHTML)
-      .toContain('&lt;a&gt;translated&lt;/a&gt;');
+    expect((compiled as HTMLDivElement).innerHTML).toContain(
+      '&lt;a&gt;translated&lt;/a&gt;'
+    );
   });
 
   it('should translate and sanitize the string', () => {
@@ -146,8 +165,9 @@ describe('TComponent', () => {
 
     // assert
     const compiled = fixture.debugElement.nativeElement;
-    expect((compiled as HTMLDivElement).innerHTML)
-      .toContain('<span><a>translated</a></span>');
+    expect((compiled as HTMLDivElement).innerHTML).toContain(
+      '<span><a>translated</a></span>'
+    );
   });
 
   it('should detect input parameters change and translate', () => {
@@ -158,14 +178,15 @@ describe('TComponent', () => {
     // act
     service.translate('test', { ...translationParams });
     component.str = 'other-value';
-    component.ngOnChanges()
+    component.ngOnChanges();
     fixture.detectChanges();
 
     // assert
     expect(service.translate).toHaveBeenCalled();
     const compiled = fixture.debugElement.nativeElement;
-    expect((compiled as HTMLDivElement).innerHTML)
-      .toContain('&lt;a&gt;translated&lt;/a&gt;');
+    expect((compiled as HTMLDivElement).innerHTML).toContain(
+      '&lt;a&gt;translated&lt;/a&gt;'
+    );
   });
 
   it('should detect localeChange and translate', async () => {
@@ -183,8 +204,11 @@ describe('TComponent', () => {
     fixture.detectChanges();
 
     // assert
-    expect(service.translate).toHaveBeenCalledWith('not-translated',
-      { ...translationParams, _key: 'key-not-translated' }, '');
+    expect(service.translate).toHaveBeenCalledWith(
+      'not-translated',
+      { ...translationParams, _key: 'key-not-translated' },
+      ''
+    );
     expect(component.translatedStr).toEqual('translated-again');
   });
 
@@ -203,11 +227,15 @@ describe('TComponent', () => {
     fixture.detectChanges();
 
     // assert
-    expect(service.translate).toHaveBeenCalledWith('not-translated', {
-      ...translationParams,
-      _key: 'key-not-translated',
-      _context: 'late',
-    }, '');
+    expect(service.translate).toHaveBeenCalledWith(
+      'not-translated',
+      {
+        ...translationParams,
+        _key: 'key-not-translated',
+        _context: 'late',
+      },
+      ''
+    );
     expect(component.translatedStr).toEqual('translated');
   });
 
@@ -223,8 +251,11 @@ describe('TComponent', () => {
     fixture.detectChanges();
 
     // assert
-    expect(service.translate).toHaveBeenCalledWith('not-translated',
-      { ...translationParams }, 'instance-alias');
+    expect(service.translate).toHaveBeenCalledWith(
+      'not-translated',
+      { ...translationParams },
+      'instance-alias'
+    );
     expect(component.translatedStr).toEqual('translated');
   });
 
@@ -245,24 +276,26 @@ describe('TComponent', () => {
     expect(service.translate).toHaveBeenCalled();
   });
 
-  it('should detect translationsFetched using alternative instance',
-    async () => {
-      // setup
-      instance.token = 'instance-token';
-      instance.alias = 'instance-alias';
-      spyOn(service, 'translate').and.returnValue('translated');
-
-      // act
-      component.str = 'not-translated';
-      component.ngOnInit();
-      fixture.detectChanges();
-
-      // change
-      await service.fetchTranslations('tag1');
-      fixture.detectChanges();
-
-      // assert
-      expect(service.translate).toHaveBeenCalledWith('not-translated',
-        { ...translationParams }, 'instance-alias');
-    });
+  it('should detect translationsFetched using alternative instance', async () => {
+    // setup
+    instance.token = 'instance-token';
+    instance.alias = 'instance-alias';
+    spyOn(service, 'translate').and.returnValue('translated');
+
+    // act
+    component.str = 'not-translated';
+    component.ngOnInit();
+    fixture.detectChanges();
+
+    // change
+    await service.fetchTranslations('tag1');
+    fixture.detectChanges();
+
+    // assert
+    expect(service.translate).toHaveBeenCalledWith(
+      'not-translated',
+      { ...translationParams },
+      'instance-alias'
+    );
+  });
 });