refactor: enable strict mode (#274)

Closes #261

Author: timdeschryver

apps/example-app-karma/src/test.ts

@@ -2,11 +2,7 @@
 import 'zone.js/dist/zone-testing';
 import { getTestBed } from '@angular/core/testing';
 import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
-import JasmineDOM from '@testing-library/jasmine-dom/dist';
-
-beforeAll(() => {
-  (jasmine.getEnv() as any).addMatchers(JasmineDOM);
-});
+import '@testing-library/jasmine-dom';
 
 declare const require: any;
 

apps/example-app/src/app/examples/01-nested-component.ts

@@ -5,7 +5,7 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
   template: ' <button (click)="raise.emit()">{{ name }}</button> ',
 })
 export class NestedButtonComponent {
-  @Input() name: string;
+  @Input() name = '';
   @Output() raise = new EventEmitter<void>();
 }
 
@@ -14,7 +14,7 @@ export class NestedButtonComponent {
   template: ' <span data-testid="value">{{ value }}</span> ',
 })
 export class NestedValueComponent {
-  @Input() value: number;
+  @Input() value?: number;
 }
 
 @Component({

apps/example-app/src/app/examples/03-forms.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { FormBuilder, Validators, ValidationErrors } from '@angular/forms';
+import { FormBuilder, Validators } from '@angular/forms';
 
 @Component({
   selector: 'app-fixture',
@@ -46,8 +46,8 @@ export class FormsComponent {
   get formErrors() {
     return Object.keys(this.form.controls)
       .map((formKey) => {
-        const controlErrors: ValidationErrors = this.form.get(formKey).errors;
-        if (controlErrors != null) {
+        const controlErrors = this.form.get(formKey)?.errors;
+        if (controlErrors) {
           return Object.keys(controlErrors).map((keyError) => {
             const error = controlErrors[keyError];
             switch (keyError) {

apps/example-app/src/app/examples/04-forms-with-material.spec.ts

@@ -44,6 +44,5 @@ test('is possible to fill in a form and verify error messages (with the help of
     score: 7,
   });
 
-  // not added to the form?
-  expect((fixture.componentInstance as MaterialFormsComponent).form.get('color').value).toBe('G');
+  expect((fixture.componentInstance as MaterialFormsComponent).form?.get('color')?.value).toBe('G');
 });

apps/example-app/src/app/examples/04-forms-with-material.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { FormBuilder, Validators, ValidationErrors } from '@angular/forms';
+import { FormBuilder, Validators } from '@angular/forms';
 
 @Component({
   selector: 'app-fixture',
@@ -68,8 +68,8 @@ export class MaterialFormsComponent {
   get formErrors() {
     return Object.keys(this.form.controls)
       .map((formKey) => {
-        const controlErrors: ValidationErrors = this.form.get(formKey).errors;
-        if (controlErrors != null) {
+        const controlErrors = this.form.get(formKey)?.errors;
+        if (controlErrors) {
           return Object.keys(controlErrors).map((keyError) => {
             const error = controlErrors[keyError];
             switch (keyError) {

apps/example-app/src/app/examples/06-with-ngrx-store.ts

@@ -3,16 +3,12 @@ import { createSelector, Store, createAction, createReducer, on, select } from '
 
 const increment = createAction('increment');
 const decrement = createAction('decrement');
-const counterReducer = createReducer(
+export const reducer = createReducer(
   0,
   on(increment, (state) => state + 1),
   on(decrement, (state) => state - 1),
 );
 
-export function reducer(state, action) {
-  return counterReducer(state, action);
-}
-
 const selectValue = createSelector(
   (state: any) => state.value,
   (value) => value * 10,

apps/example-app/src/app/examples/08-directive.spec.ts

@@ -36,11 +36,11 @@ test('it is possible to test directives with props', async () => {
   expect(screen.queryByText(visible)).not.toBeInTheDocument();
   expect(screen.queryByText(hidden)).toBeInTheDocument();
 
-  fireEvent.mouseOver(screen.queryByText(hidden));
+  fireEvent.mouseOver(screen.getByText(hidden));
   expect(screen.queryByText(hidden)).not.toBeInTheDocument();
   expect(screen.queryByText(visible)).toBeInTheDocument();
 
-  fireEvent.mouseLeave(screen.queryByText(visible));
+  fireEvent.mouseLeave(screen.getByText(visible));
   expect(screen.queryByText(hidden)).toBeInTheDocument();
   expect(screen.queryByText(visible)).not.toBeInTheDocument();
 });
@@ -56,11 +56,11 @@ test('it is possible to test directives with props in template', async () => {
   expect(screen.queryByText(visible)).not.toBeInTheDocument();
   expect(screen.queryByText(hidden)).toBeInTheDocument();
 
-  fireEvent.mouseOver(screen.queryByText(hidden));
+  fireEvent.mouseOver(screen.getByText(hidden));
   expect(screen.queryByText(hidden)).not.toBeInTheDocument();
   expect(screen.queryByText(visible)).toBeInTheDocument();
 
-  fireEvent.mouseLeave(screen.queryByText(visible));
+  fireEvent.mouseLeave(screen.getByText(visible));
   expect(screen.queryByText(hidden)).toBeInTheDocument();
   expect(screen.queryByText(visible)).not.toBeInTheDocument();
 });

apps/example-app/src/app/examples/12-service-component.ts

@@ -2,8 +2,8 @@ import { Component, Injectable } from '@angular/core';
 import { Observable, of } from 'rxjs';
 
 export class Customer {
-  id: string;
-  name: string;
+  id!: string;
+  name!: string;
 }
 
 @Injectable({

apps/example-app/src/app/examples/15-dialog.component.spec.ts

@@ -37,8 +37,8 @@ test('closes the dialog via the backdrop', async () => {
 
   // using fireEvent because of:
   // unable to click element as it has or inherits pointer-events set to "none"
-  // eslint-disable-next-line testing-library/no-node-access
-  fireEvent.click(document.querySelector('.cdk-overlay-backdrop'));
+  // eslint-disable-next-line testing-library/no-node-access, @typescript-eslint/no-non-null-assertion
+  fireEvent.click(document.querySelector('.cdk-overlay-backdrop')!);
 
   await waitForElementToBeRemoved(() => screen.getByRole('dialog'));
 

apps/example-app/src/app/examples/16-input-getter-setter.ts

@@ -18,6 +18,6 @@ export class InputGetterSetter {
     return 'I am value from getter ' + this.originalValue;
   }
 
-  private originalValue: string;
-  derivedValue: string;
+  private originalValue?: string;
+  derivedValue?: string;
 }