feat(settings): add recommended strict settings to compiler options

- update typescript configuration - eliminate strict checking violations - update unit tests where changes were made closes #536
tomastrajan · Mar 25, 2021 · 6480960 · 6480960
1 parent c72a6c6
commit 6480960
Show file tree

Hide file tree

Showing 22 changed files with 55 additions and 36 deletions.
diff --git a/angular.json b/angular.json
@@ -50,6 +50,11 @@
               "vendorChunk": false,
               "buildOptimizer": true,
               "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1536kb"
+                },
                 {
                   "type": "bundle",
                   "name": "polyfills",
@@ -73,7 +78,8 @@
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "6kb"
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
                 }
               ]
             }

diff --git a/projects/angular-ngrx-material-starter/src/app/core/auth/auth.effects.spec.ts b/projects/angular-ngrx-material-starter/src/app/core/auth/auth.effects.spec.ts
@@ -29,7 +29,7 @@ describe('AuthEffects', () => {
       const effect = new AuthEffects(actions, localStorageService, router);
       const metadata = getEffectsMetadata(effect);
 
-      expect(metadata.login.dispatch).toEqual(false);
+      expect(metadata.login?.dispatch).toEqual(false);
     });
 
     it('should call setItem on LocalStorageService', () => {
@@ -55,7 +55,7 @@ describe('AuthEffects', () => {
       const effect = new AuthEffects(actions, localStorageService, router);
       const metadata = getEffectsMetadata(effect);
 
-      expect(metadata.logout.dispatch).toEqual(false);
+      expect(metadata.logout?.dispatch).toEqual(false);
     });
 
     it('should call setItem on LocalStorageService and navigate to about', () => {

diff --git a/...ular-ngrx-material-starter/src/app/core/google-analytics/google-analytics.effects.spec.ts b/...ular-ngrx-material-starter/src/app/core/google-analytics/google-analytics.effects.spec.ts
@@ -34,7 +34,7 @@ describe('GoogleAnalyticsEffects', () => {
     const effect = new GoogleAnalyticsEffects(router);
     const metadata = getEffectsMetadata(effect);
 
-    expect(metadata.pageView.dispatch).toEqual(false);
+    expect(metadata.pageView?.dispatch).toEqual(false);
   });
 
   it('should call google analytics', function () {

diff --git a/...ts/angular-ngrx-material-starter/src/app/core/local-storage/local-storage.service.spec.ts b/...ts/angular-ngrx-material-starter/src/app/core/local-storage/local-storage.service.spec.ts
@@ -28,7 +28,7 @@ describe('LocalStorageService', () => {
     service.setItem('TEST', 'item');
     expect(service.getItem('TEST')).toBe('item');
     service.removeItem('TEST');
-    expect(service.getItem('TEST')).toBe(null);
+    expect(service.getItem('TEST')).toEqual({});
   });
 
   it('should load initial state', () => {

diff --git a/projects/angular-ngrx-material-starter/src/app/features/examples/crud/books.effects.spec.ts b/projects/angular-ngrx-material-starter/src/app/features/examples/crud/books.effects.spec.ts
@@ -44,7 +44,7 @@ describe('BooksEffects', () => {
       const effects = new BooksEffects(actions, store, localStorage);
       const metadata = getEffectsMetadata(effects);
 
-      expect(metadata.persistBooks.dispatch).toEqual(false);
+      expect(metadata.persistBooks?.dispatch).toEqual(false);
     });
 
     it('should call setItem on LocalStorageService for delete one action', () => {

diff --git a/projects/angular-ngrx-material-starter/src/app/features/examples/crud/books.reducer.spec.ts b/projects/angular-ngrx-material-starter/src/app/features/examples/crud/books.reducer.spec.ts
@@ -35,7 +35,7 @@ describe('BookReducer', () => {
     const state = bookReducer(TEST_INITIAL_STATE, action);
 
     expect(state.ids.length).toEqual(2);
-    expect(state.entities['1234'].title).toEqual('test');
+    expect(state.entities['1234']?.title).toEqual('test');
   });
 
   it('should update a book', () => {

diff --git a/...ar-ngrx-material-starter/src/app/features/examples/crud/components/crud.component.spec.ts b/...ar-ngrx-material-starter/src/app/features/examples/crud/components/crud.component.spec.ts
@@ -28,7 +28,7 @@ describe('CrudComponent', () => {
       }).compileComponents();
       store = TestBed.inject(MockStore);
       store.overrideSelector(selectAllBooks, []);
-      store.overrideSelector(selectSelectedBook, null);
+      store.overrideSelector(selectSelectedBook, undefined);
       fixture = TestBed.createComponent(CrudComponent);
       component = fixture.componentInstance;
       fixture.detectChanges();

diff --git a/projects/angular-ngrx-material-starter/src/app/features/examples/examples.effects.spec.ts b/projects/angular-ngrx-material-starter/src/app/features/examples/examples.effects.spec.ts
@@ -50,7 +50,7 @@ describe('SettingsEffects', () => {
         titleService
       );
       const metadata = getEffectsMetadata(effect);
-      expect(metadata.setTranslateServiceLanguage.dispatch).toEqual(false);
+      expect(metadata.setTranslateServiceLanguage?.dispatch).toEqual(false);
     });
   });
 
@@ -66,7 +66,7 @@ describe('SettingsEffects', () => {
       );
       const metadata = getEffectsMetadata(effect);
 
-      expect(metadata.setTitle.dispatch).toEqual(false);
+      expect(metadata.setTitle?.dispatch).toEqual(false);
     });
 
     it('should setTitle', () => {

diff --git a/projects/angular-ngrx-material-starter/src/app/features/examples/form/form.effects.spec.ts b/projects/angular-ngrx-material-starter/src/app/features/examples/form/form.effects.spec.ts
@@ -28,7 +28,7 @@ describe('FormEffects', () => {
       const effect = new FormEffects(actions, localStorageService);
       const metadata = getEffectsMetadata(effect);
 
-      expect(metadata.persistForm.dispatch).toEqual(false);
+      expect(metadata.persistForm?.dispatch).toEqual(false);
     });
 
     it('should call setItem on LocalStorageService for UPDATE action', () => {

diff --git a/...al-starter/src/app/features/examples/simple-state-management/components/user.component.ts b/...al-starter/src/app/features/examples/simple-state-management/components/user.component.ts
@@ -20,7 +20,7 @@ import { User, UserService } from '../user.service';
 })
 export class UserComponent implements OnInit {
   routeAnimationsElements = ROUTE_ANIMATIONS_ELEMENTS;
-  userForm: FormGroup | undefined;
+  userForm: FormGroup = new FormGroup({});
   users$: Observable<User[]> | undefined;
   isEdit$: Observable<{ value: boolean }> | undefined;
 

diff --git a/...r/src/app/features/examples/stock-market/components/stock-market-container.component.html b/...r/src/app/features/examples/stock-market/components/stock-market-container.component.html
@@ -11,7 +11,7 @@ <h1 rtl class="main-heading">{{ 'anms.examples.stocks.title' | translate }}</h1>
           <mat-form-field>
             <input matInput [placeholder]="'anms.examples.stocks.symbol' | translate"
                    [value]="stocks.symbol"
-                   (keyup)="onSymbolChange($event.target.value)">
+                   (keyup)="onSymbolChange($event)">
           </mat-form-field>
         </form>
         <p>

diff --git a/...ter/src/app/features/examples/stock-market/components/stock-market-container.component.ts b/...ter/src/app/features/examples/stock-market/components/stock-market-container.component.ts
@@ -26,10 +26,14 @@ export class StockMarketContainerComponent implements OnInit {
     this.stocks$ = this.store.pipe(select(selectStockMarket));
     this.stocks$
       .pipe(take(1))
-      .subscribe((stocks) => this.onSymbolChange(stocks.symbol));
+      .subscribe((stocks) => this.onSymbolValue(stocks.symbol));
   }
 
-  onSymbolChange(symbol: string) {
+  onSymbolValue(symbol: string) {
     this.store.dispatch(actionStockMarketRetrieve({ symbol }));
   }
+
+  onSymbolChange(event: any) {
+    this.onSymbolValue(event.target.value);
+  }
 }
diff --git a/...ngrx-material-starter/src/app/features/examples/stock-market/stock-market.effects.spec.ts b/...ngrx-material-starter/src/app/features/examples/stock-market/stock-market.effects.spec.ts
@@ -13,13 +13,14 @@ import {
 import { StockMarketEffects, STOCK_MARKET_KEY } from './stock-market.effects';
 import { Stock } from './stock-market.model';
 import { StockMarketService } from './stock-market.service';
+import { RunHelpers } from 'rxjs/internal/testing/TestScheduler';
 
 const symbol = 'TSLA';
 
 describe('StockMarketEffects', () => {
   let localStorage: jasmine.SpyObj<LocalStorageService>;
   let stockMarket: jasmine.SpyObj<StockMarketService>;
-  let scheduler;
+  let scheduler: TestScheduler;
 
   beforeEach(() => {
     localStorage = jasmine.createSpyObj('localStorageService', ['setItem']);
@@ -30,7 +31,7 @@ describe('StockMarketEffects', () => {
   });
 
   it('should emit ActionStockMarketRetrieveSuccess on success', (done) => {
-    scheduler.run((helpers) => {
+    scheduler.run((helpers: RunHelpers) => {
       const { cold, expectObservable } = helpers;
       const retrieveAction1 = actionStockMarketRetrieve({
         symbol
@@ -88,7 +89,7 @@ describe('StockMarketEffects', () => {
   });
 
   it('should emit ActionStockMarketRetrieveError on error', () => {
-    scheduler.run((helpers) => {
+    scheduler.run((helpers: RunHelpers) => {
       const { cold, expectObservable } = helpers;
       const retrieveAction = actionStockMarketRetrieve({
         symbol

diff --git a/...ngrx-material-starter/src/app/features/examples/stock-market/stock-market.reducer.spec.ts b/...ngrx-material-starter/src/app/features/examples/stock-market/stock-market.reducer.spec.ts
@@ -49,8 +49,8 @@ describe('StockMarketReducer', () => {
       const state = stockMarketReducer(originalState, action);
 
       expect(state.loading).toBeTruthy();
-      expect(state.stock).toBeNull();
-      expect(state.error).toBeNull();
+      expect(state.stock).toBeUndefined();
+      expect(state.error).toBeUndefined();
       expect(state.symbol).toBe(action.symbol);
     });
   });
@@ -63,7 +63,7 @@ describe('StockMarketReducer', () => {
 
       expect(state.symbol).toBe(state.symbol);
       expect(state.loading).toBeFalsy();
-      expect(state.stock).toBeNull();
+      expect(state.stock).toBeUndefined();
       expect(state.error).toBe(error);
     });
   });
@@ -85,7 +85,7 @@ describe('StockMarketReducer', () => {
 
       expect(state.loading).toBeFalsy();
       expect(state.stock).toBe(stock);
-      expect(state.error).toBeNull();
+      expect(state.error).toBeUndefined();
       expect(state.symbol).toBe(state.symbol);
     });
   });

diff --git a/...aterial-starter/src/app/features/examples/todos/components/todos-container.component.html b/...aterial-starter/src/app/features/examples/todos/components/todos-container.component.html
@@ -1,14 +1,14 @@
 <div class="container">
   <div class="row">
     <div class="offset-md-2 col-md-8 entry">
-      <anms-big-input rtl [placeholder]="'anms.examples.todos.input' | translate" [value]="newTodo" (keyup)="onNewTodoChange($event.target.value)"
+      <anms-big-input rtl [placeholder]="'anms.examples.todos.input' | translate" [value]="newTodo" (keyup)="onNewTodoChange($event)"
         (keyup.enter)="!isAddTodoDisabled && onAddTodo()" (keyup.escape)="onNewTodoClear()">
-        <anms-big-input-action fontSet="fas" fontIcon="fa-plus" faIcon="plus" color="accent"
+        <anms-big-input-action fontSet="fas" fontIcon="plus" faIcon="plus" color="accent"
           (action)="onAddTodo()" [disabled]="isAddTodoDisabled" [matTooltip]="'anms.examples.todos.tooltip.add' | translate"
           matTooltipPosition="before">
         </anms-big-input-action>
-        <anms-big-input-action fontSet="fas" fontIcon="fa-trash" faIcon="trash" color="warn"
-          (action)="onRemoveDoneTodos()" [disabled]="removeDoneDisabled$ | async"
+        <anms-big-input-action fontSet="fas" fontIcon="trash" faIcon="trash" color="warn"
+          (action)="onRemoveDoneTodos()" [disabled]="(removeDoneDisabled$ | async) || false"
           [matTooltip]="'anms.examples.todos.tooltip.remove' | translate" matTooltipPosition="after">
         </anms-big-input-action>
       </anms-big-input>

diff --git a/...-material-starter/src/app/features/examples/todos/components/todos-container.component.ts b/...-material-starter/src/app/features/examples/todos/components/todos-container.component.ts
@@ -4,7 +4,7 @@ import { TranslateService } from '@ngx-translate/core';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { select, Store } from '@ngrx/store';
 import { take } from 'rxjs/operators';
-import { Observable } from 'rxjs';
+import { Observable, of as observableOf } from 'rxjs';
 
 import {
   ROUTE_ANIMATIONS_ELEMENTS,
@@ -26,7 +26,7 @@ export class TodosContainerComponent implements OnInit {
   routeAnimationsElements = ROUTE_ANIMATIONS_ELEMENTS;
   todos$: Observable<Todo[]> | undefined;
   filter$: Observable<TodosFilter> | undefined;
-  removeDoneDisabled$: Observable<boolean> | undefined;
+  removeDoneDisabled$: Observable<boolean> = observableOf(false);
   newTodo = '';
 
   constructor(
@@ -48,8 +48,8 @@ export class TodosContainerComponent implements OnInit {
     return this.newTodo.length < 4;
   }
 
-  onNewTodoChange(newTodo: string) {
-    this.newTodo = newTodo;
+  onNewTodoChange(event: any) {
+    this.newTodo = event.target.value;
   }
 
   onNewTodoClear() {

diff --git a/projects/angular-ngrx-material-starter/src/app/features/examples/todos/todos.effects.spec.ts b/projects/angular-ngrx-material-starter/src/app/features/examples/todos/todos.effects.spec.ts
@@ -30,7 +30,7 @@ describe('TodosEffects', () => {
       const effect = new TodosEffects(actions$, store, localStorage);
       const metadata = getEffectsMetadata(effect);
 
-      expect(metadata.persistTodos.dispatch).toEqual(false);
+      expect(metadata.persistTodos?.dispatch).toEqual(false);
     });
 
     it('should call setItem on LocalStorageService for any action', () => {

diff --git a/...rial-starter/src/app/shared/big-input/big-input-action/big-input-action.component.spec.ts b/...rial-starter/src/app/shared/big-input/big-input-action/big-input-action.component.spec.ts
@@ -62,10 +62,10 @@ describe('BigInputActionComponent', () => {
 
   it('should display icon if fontSet and fontIcon properties are set', () => {
     const template =
-      '<anms-big-input-action fontSet="fas" fontIcon="fa-trash"></anms-big-input-action>';
+      '<anms-big-input-action fontSet="fas" fontIcon="trash"></anms-big-input-action>';
     fixture = createHostComponent(template);
     expect(getIcon()).toBeTruthy();
-    expect(getIcon().nativeElement.classList.contains('fa-trash')).toBeTruthy();
+    expect(getIcon().nativeElement.classList.contains('trash')).toBeTruthy();
     expect(getIcon().nativeElement.classList.contains('fas')).toBeTruthy();
   });
 

diff --git a/...-material-starter/src/app/shared/big-input/big-input-action/big-input-action.component.ts b/...-material-starter/src/app/shared/big-input/big-input-action/big-input-action.component.ts
@@ -6,6 +6,8 @@ import {
   ChangeDetectionStrategy
 } from '@angular/core';
 
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+
 @Component({
   selector: 'anms-big-input-action',
   templateUrl: './big-input-action.component.html',
@@ -20,7 +22,7 @@ export class BigInputActionComponent {
   @Input()
   fontIcon = '';
   @Input()
-  faIcon = '';
+  faIcon: IconProp | undefined;
   @Input()
   label = '';
   @Input()

diff --git a/...ular-ngrx-material-starter/src/app/shared/big-input/big-input/big-input.component.spec.ts b/...ular-ngrx-material-starter/src/app/shared/big-input/big-input/big-input.component.spec.ts
@@ -18,7 +18,7 @@ import { SharedModule } from '../../shared.module';
   `
 })
 class HostComponent {
-  newValue: string;
+  newValue = '';
   onKeyEvent(eventData: any) {}
 }
 

diff --git a/...ts/angular-ngrx-material-starter/src/app/shared/rtl-support/rtl-support.directive.spec.ts b/...ts/angular-ngrx-material-starter/src/app/shared/rtl-support/rtl-support.directive.spec.ts
@@ -21,7 +21,7 @@ describe('RtlSupportDirective', () => {
   let fixture: ComponentFixture<TestComponent>;
   let des: DebugElement[]; // the three elements w/ the directive
   let bareH2: DebugElement; // the <h2> w/o the directive
-  let languageSubject;
+  let languageSubject: BehaviorSubject<{ lang: string }>;
 
   beforeEach(() => {
     languageSubject = new BehaviorSubject({ lang: 'he' });

diff --git a/tsconfig.json b/tsconfig.json
@@ -9,16 +9,22 @@
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "importHelpers": true,
+    "strict": true,
     "strictNullChecks": true,
     "noImplicitAny": true,
     "strictPropertyInitialization": true,
     "strictFunctionTypes": true,
+    "strictBindCallApply": true,
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
     "module": "esnext",
     "target": "es2015",
     "typeRoots": ["node_modules/@types"],
     "lib": ["es2018", "dom"]
   },
   "angularCompilerOptions": {
+    "strictTemplates": true,
     "fullTemplateTypeCheck": true,
     "strictInjectionParameters": true
   }