refactor: enable strict mode

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;
 }

apps/example-app/src/app/issues/issue-254.spec.ts

@@ -1,12 +1,11 @@
-/* eslint-disable @typescript-eslint/naming-convention */
 import { Component, Inject, OnInit } from '@angular/core';
 import { render, screen } from '@testing-library/angular';
 import { createMock } from '@testing-library/angular/jest-utils';
 
 interface Division {
-  JobType: string;
-  JobBullets: string[];
-  Description: string;
+  jobType?: string;
+  jobBullets?: string[];
+  description?: string;
 }
 
 @Inject({
@@ -21,46 +20,46 @@ class JobsService {
 @Component({
   selector: 'app-home-career-oportunities',
   template: ` <ul class="popu-category-bullets">
-    <li class="text-dark" *ngFor="let bullet of dedicated.JobBullets">
+    <li class="text-dark" *ngFor="let bullet of dedicated?.jobBullets">
       {{ bullet }}
     </li>
   </ul>`,
 })
 class CareerOportunitiesComponent implements OnInit {
-  dedicated = {} as Division;
-  intermodal = {} as Division;
-  noCdl = {} as Division;
-  otr = {} as Division;
+  dedicated?: Division;
+  intermodal?: Division;
+  noCdl?: Division;
+  otr?: Division;
 
   constructor(private jobsService: JobsService) {}
 
   ngOnInit(): void {
     this.jobsService.divisions().then((apiDivisions) => {
-      this.dedicated = apiDivisions.find((c) => c.JobType === 'DEDICATED');
-      this.intermodal = apiDivisions.find((c) => c.JobType === 'INTERMODAL');
-      this.noCdl = apiDivisions.find((c) => c.JobType === 'NO_CDL');
-      this.otr = apiDivisions.find((c) => c.JobType === 'OVER_THE_ROAD');
+      this.dedicated = apiDivisions.find((c) => c.jobType === 'DEDICATED');
+      this.intermodal = apiDivisions.find((c) => c.jobType === 'INTERMODAL');
+      this.noCdl = apiDivisions.find((c) => c.jobType === 'NO_CDL');
+      this.otr = apiDivisions.find((c) => c.jobType === 'OVER_THE_ROAD');
     });
   }
 }
 
 test('Render Component', async () => {
   const divisions2: Division[] = [
     {
-      JobType: 'INTERMODAL',
-      JobBullets: ['Local Routes', 'Flexible Schedules', 'Competitive Pay'],
-      Description: '',
+      jobType: 'INTERMODAL',
+      jobBullets: ['Local Routes', 'Flexible Schedules', 'Competitive Pay'],
+      description: '',
     },
-    { JobType: 'NO_CDL', JobBullets: ['We Train', 'We Hire', 'We Pay'], Description: '' },
+    { jobType: 'NO_CDL', jobBullets: ['We Train', 'We Hire', 'We Pay'], description: '' },
     {
-      JobType: 'OVER_THE_ROAD',
-      JobBullets: ['Great Miles', 'Competitive Pay', 'Explore the Country'],
-      Description: '',
+      jobType: 'OVER_THE_ROAD',
+      jobBullets: ['Great Miles', 'Competitive Pay', 'Explore the Country'],
+      description: '',
     },
     {
-      JobType: 'DEDICATED',
-      JobBullets: ['Regular Routes', 'Consistent Miles', 'Great Pay'],
-      Description: '',
+      jobType: 'DEDICATED',
+      jobBullets: ['Regular Routes', 'Consistent Miles', 'Great Pay'],
+      description: '',
     },
   ];
   const jobService = createMock(JobsService);

projects/testing-library/.eslintrc.json

@@ -2,13 +2,20 @@
   "extends": "../../.eslintrc.json",
   "ignorePatterns": ["!**/*"],
   "overrides": [
+    {
+      "files": ["*.ts"],
+      "rules": {
+        "@typescript-eslint/ban-ts-comment": "off"
+      }
+    },
     {
       "files": ["*.ts"],
       "extends": ["plugin:@nrwl/nx/angular", "plugin:@angular-eslint/template/process-inline-templates"],
       "parserOptions": {
         "project": ["projects/testing-library/tsconfig.*?.json"]
       },
       "rules": {
+        "@typescript-eslint/ban-ts-comment": "off",
         "@angular-eslint/directive-selector": [
           "error",
           {

projects/testing-library/src/lib/models.ts

@@ -268,8 +268,8 @@ export interface RenderTemplateOptions<WrapperType, Properties extends object =
    * `WrapperComponent`, an empty component that strips the `ng-version` attribute
    *
    * @example
-   * const component = await render(SpoilerDirective, {
-   *  template: `<div spoiler message='SPOILER'></div>`
+   * const component = await render(`<div spoiler message='SPOILER'></div>`, {
+   *  declarations: [SpoilerDirective]
    *  wrapper: CustomWrapperComponent
    * })
    */