Merge branch 'master' into spencer/fix-tests

package.json

@@ -100,5 +100,9 @@
     "hooks": {
       "pre-commit": "npx pretty-quick --staged && npm run format:lint && npx lint-staged"
     }
+  },
+  "browser": {
+    "child_process": false,
+    "fs": false
   }
 }

src/app/_guards/auth.guard.spec.ts

@@ -3,12 +3,15 @@ import { TestBed } from '@angular/core/testing';
 
 // Application imports
 import { AuthGuard } from '@app/_guards/auth.guard';
+import { RouterTestingModule } from '@angular/router/testing';
 
 describe('AuthGuard', () => {
   let guard: AuthGuard;
 
   beforeEach(() => {
-    TestBed.configureTestingModule({});
+    TestBed.configureTestingModule({
+      imports: [RouterTestingModule],
+    });
     guard = TestBed.inject(AuthGuard);
   });
 

src/app/_guards/role.guard.spec.ts

@@ -3,12 +3,15 @@ import { TestBed } from '@angular/core/testing';
 
 // Application imports
 import { RoleGuard } from '@app/_guards/role.guard';
+import { RouterTestingModule } from '@angular/router/testing';
 
 describe('RoleGuard', () => {
   let guard: RoleGuard;
 
   beforeEach(() => {
-    TestBed.configureTestingModule({});
+    TestBed.configureTestingModule({
+      imports: [RouterTestingModule],
+    });
     guard = TestBed.inject(RoleGuard);
   });
 

src/app/_interceptors/error.interceptor.spec.ts

@@ -3,10 +3,12 @@ import { TestBed } from '@angular/core/testing';
 
 // Application imports
 import { ErrorInterceptor } from '@app/_interceptors/error.interceptor';
+import { MatDialogModule } from '@angular/material/dialog';
 
 describe('ErrorInterceptor', () => {
   beforeEach(() =>
     TestBed.configureTestingModule({
+      imports: [MatDialogModule],
       providers: [ErrorInterceptor],
     })
   );

src/app/_services/auth.service.spec.ts

@@ -1,12 +1,15 @@
 import { TestBed } from '@angular/core/testing';
 
 import { AuthService } from '@app/_services/auth.service';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
 
 describe('AuthService', () => {
   let service: AuthService;
 
   beforeEach(() => {
-    TestBed.configureTestingModule({});
+    TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule],
+    });
     service = TestBed.inject(AuthService);
   });
 

src/app/_services/error-dialog.service.spec.ts

@@ -1,12 +1,15 @@
 import { TestBed } from '@angular/core/testing';
 
 import { ErrorDialogService } from './error-dialog.service';
+import { MatDialogModule } from '@angular/material/dialog';
 
 describe('ErrorDialogService', () => {
   let service: ErrorDialogService;
 
   beforeEach(() => {
-    TestBed.configureTestingModule({});
+    TestBed.configureTestingModule({
+      imports: [MatDialogModule],
+    });
     service = TestBed.inject(ErrorDialogService);
   });
 

src/app/_services/location.service.spec.ts

@@ -1,12 +1,15 @@
 import { TestBed } from '@angular/core/testing';
 
 import { LocationService } from '@app/_services/location.service';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
 
 describe('LocationService', () => {
   let service: LocationService;
 
   beforeEach(() => {
-    TestBed.configureTestingModule({});
+    TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule],
+    });
     service = TestBed.inject(LocationService);
   });
 

src/app/_services/token.service.spec.ts

@@ -1,6 +1,7 @@
 import { TestBed } from '@angular/core/testing';
 
 import { TokenService } from '@app/_services/token.service';
+import { Token } from '@app/_models';
 
 describe('TokenService', () => {
   let service: TokenService;
@@ -15,10 +16,27 @@ describe('TokenService', () => {
   });
 
   it('should return token for available token', () => {
-    expect(service.getTokenBySymbol('RSV')).toEqual({ name: 'Reserve', symbol: 'RSV' });
+    const token: Token = {
+      name: 'Giftable Reserve',
+      symbol: 'GRZ',
+      address: '0xa686005CE37Dce7738436256982C3903f2E4ea8E',
+      supply: '1000000001000000000000000000',
+      decimals: '18',
+      reserves: {},
+    };
+    service.addToken(token);
+    service.getTokenBySymbol('GRZ').then((tokenSubject) => {
+      tokenSubject.subscribe((returnedToken) => {
+        expect(returnedToken).toEqual(token);
+      });
+    });
   });
 
   it('should not return token for unavailable token', () => {
-    expect(service.getTokenBySymbol('ABC')).toBeUndefined();
+    service.getTokenBySymbol('ABC').then((tokenSubject) => {
+      tokenSubject.subscribe((returnedToken) => {
+        expect(returnedToken).toBeUndefined();
+      });
+    });
   });
 });

src/app/_services/user.service.spec.ts

@@ -23,38 +23,52 @@ describe('UserService', () => {
   });
 
   it('should return action for available id', () => {
-    expect(service.getActionById('1')).toEqual({
+    service.getActionById('1').subscribe((returnedAction) => {
+      expect(
+        returnedAction.toEqual({
           id: 1,
           user: 'Tom',
           role: 'enroller',
           action: 'Disburse RSV 100',
           approval: false,
+        })
+      );
     });
   });
 
   it('should not return action for unavailable id', () => {
-    expect(service.getActionById('9999999999')).toBeUndefined();
+    service.getActionById('9999999999').subscribe((returnedAction) => {
+      expect(returnedAction.toBeUndefined());
+    });
   });
 
   it('should switch action approval from false to true', () => {
     service.approveAction('1');
-    expect(service.getActionById('1')).toEqual({
+    service.getActionById('1').subscribe((returnedAction) => {
+      expect(
+        returnedAction.toEqual({
           id: 1,
           user: 'Tom',
           role: 'enroller',
           action: 'Disburse RSV 100',
           approval: true,
+        })
+      );
     });
   });
 
   it('should switch action approval from true to false', () => {
     service.revokeAction('2');
-    expect(service.getActionById('2')).toEqual({
+    service.getActionById('2').subscribe((returnedAction) => {
+      expect(
+        returnedAction.toEqual({
           id: 2,
           user: 'Christine',
           role: 'admin',
           action: 'Change user phone number',
           approval: false,
+        })
+      );
     });
   });
 });

src/app/app.component.spec.ts

@@ -8,11 +8,12 @@ import {
   TopbarStubComponent,
   TransactionServiceStub,
 } from '@src/testing';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
 
 describe('AppComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [RouterTestingModule],
+      imports: [HttpClientTestingModule, RouterTestingModule],
       declarations: [AppComponent, FooterStubComponent, SidebarStubComponent, TopbarStubComponent],
       providers: [{ provide: TransactionService, useClass: TransactionServiceStub }],
     }).compileComponents();

src/app/auth/_directives/password-toggle.directive.spec.ts

@@ -1,17 +1,33 @@
 // Core imports
-import { ElementRef, Renderer2 } from '@angular/core';
+import { Component, DebugElement } from '@angular/core';
 
 // Application imports
 import { PasswordToggleDirective } from '@app/auth/_directives/password-toggle.directive';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
 
-// tslint:disable-next-line:prefer-const
-let elementRef: ElementRef;
-// tslint:disable-next-line:prefer-const
-let renderer: Renderer2;
+@Component({
+  template: ` <div>
+    <input type="password" id="password" />
+    <span id="icon" class="fa fa-eye" appPasswordToggle [id]="'password'" [iconId]="'icon'"></span>
+  </div>`,
+})
+class TestComponent {}
 
 describe('PasswordToggleDirective', () => {
-  it('should create an instance', () => {
-    const directive = new PasswordToggleDirective(elementRef, renderer);
-    expect(directive).toBeTruthy();
+  let fixture: ComponentFixture<TestComponent>;
+  let des: DebugElement[];
+
+  beforeEach(() => {
+    fixture = TestBed.configureTestingModule({
+      declarations: [PasswordToggleDirective, TestComponent],
+    }).createComponent(TestComponent);
+    fixture.detectChanges();
+
+    des = fixture.debugElement.queryAll(By.directive(PasswordToggleDirective));
+  });
+
+  it('should have one element with menu-toggle directive', () => {
+    expect(des.length).toBe(1);
   });
 });

src/app/auth/auth.component.spec.ts

@@ -1,6 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { AuthComponent } from '@app/auth/auth.component';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
 
 describe('AuthComponent', () => {
   let component: AuthComponent;
@@ -8,6 +9,7 @@ describe('AuthComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule],
       declarations: [AuthComponent],
     }).compileComponents();
   });

src/app/components/components.module.ts

@@ -1,30 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { TransactionsDatatableComponent } from './datatables/transactions-datatable/transactions-datatable.component';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatSelectModule } from '@angular/material/select';
-import { MatSortModule } from '@angular/material/sort';
-import { MatTableModule } from '@angular/material/table';
-import { MatRippleModule } from '@angular/material/core';
-import { MatPaginatorModule } from '@angular/material/paginator';
-import { SharedModule } from '@app/shared/shared.module';
-import { MatIconModule } from '@angular/material/icon';
-import { MatButtonModule } from '@angular/material/button';
-
-@NgModule({
-  declarations: [TransactionsDatatableComponent],
-  exports: [TransactionsDatatableComponent],
-  imports: [
-    CommonModule,
-    MatFormFieldModule,
-    MatSelectModule,
-    MatSortModule,
-    MatTableModule,
-    MatRippleModule,
-    MatPaginatorModule,
-    SharedModule,
-    MatIconModule,
-    MatButtonModule,
-  ],
-})
-export class ComponentsModule {}

src/app/components/datatables/transactions-datatable/transactions-datatable.component.html

@@ -1,107 +0,0 @@
-<div *ngIf="transactions" class="card mt-1">
-  <div class="card-header">
-    <div class="row">
-      <mat-form-field appearance="outline">
-        <mat-label> TRANSACTION TYPE </mat-label>
-        <mat-select
-          id="transferSelect"
-          [(value)]="transactionsType"
-          (selectionChange)="filterTransactions()"
-        >
-          <mat-option value="all">ALL TRANSFERS</mat-option>
-          <mat-option *ngFor="let transactionType of transactionsTypes" [value]="transactionType">
-            {{ transactionType | uppercase }}
-          </mat-option>
-        </mat-select>
-      </mat-form-field>
-      <button
-        mat-raised-button
-        color="primary"
-        type="button"
-        class="btn btn-outline-primary ml-auto mr-2"
-        (click)="downloadCsv(transactions, 'transactions')"
-      >
-        EXPORT
-      </button>
-    </div>
-  </div>
-
-  <div class="card-body">
-    <mat-form-field appearance="outline">
-      <mat-label> Filter </mat-label>
-      <input
-        matInput
-        type="text"
-        (keyup)="doTransactionFilter($event.target.value)"
-        placeholder="Filter"
-      />
-      <mat-icon matSuffix>search</mat-icon>
-    </mat-form-field>
-
-    <table
-      mat-table
-      class="mat-elevation-z10"
-      [dataSource]="transactionsDataSource"
-      matSort
-      matSortActive="created"
-      #TransactionTableSort="matSort"
-      matSortDirection="asc"
-      matSortDisableClear
-    >
-      <ng-container matColumnDef="sender">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header>Sender</th>
-        <td mat-cell *matCellDef="let transaction">
-          {{ transaction?.sender?.vcard.fn[0].value || transaction.from }}
-        </td>
-      </ng-container>
-
-      <ng-container matColumnDef="recipient">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header>Recipient</th>
-        <td mat-cell *matCellDef="let transaction">
-          {{ transaction?.recipient?.vcard.fn[0].value || transaction.to }}
-        </td>
-      </ng-container>
-
-      <ng-container matColumnDef="value">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header>Value</th>
-        <td mat-cell *matCellDef="let transaction">
-          <span *ngIf="transaction.type == 'transaction'"
-            >{{ transaction?.value | tokenRatio }} {{ tokenSymbol | uppercase }}</span
-          >
-          <span *ngIf="transaction.type == 'conversion'"
-            >{{ transaction?.toValue | tokenRatio }} {{ tokenSymbol | uppercase }}</span
-          >
-        </td>
-      </ng-container>
-
-      <ng-container matColumnDef="created">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header>Created</th>
-        <td mat-cell *matCellDef="let transaction">
-          {{ transaction?.tx.timestamp | unixDate }}
-        </td>
-      </ng-container>
-
-      <ng-container matColumnDef="type">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header>TYPE</th>
-        <td mat-cell *matCellDef="let transaction">
-          <span class="badge badge-success badge-pill"> {{ transaction?.type }} </span>
-        </td>
-      </ng-container>
-
-      <tr mat-header-row *matHeaderRowDef="transactionsDisplayedColumns"></tr>
-      <tr
-        mat-row
-        *matRowDef="let transaction; columns: transactionsDisplayedColumns"
-        matRipple
-        (click)="viewTransaction(transaction)"
-      ></tr>
-    </table>
-
-    <mat-paginator
-      #TransactionTablePaginator="matPaginator"
-      [pageSize]="transactionsDefaultPageSize"
-      [pageSizeOptions]="transactionsPageSizeOptions"
-      showFirstLastButtons
-    ></mat-paginator>
-  </div>
-</div>

src/app/components/datatables/transactions-datatable/transactions-datatable.component.spec.ts

@@ -1,24 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { TransactionsDatatableComponent } from './transactions-datatable.component';
-
-describe('TransactionsDatatableComponent', () => {
-  let component: TransactionsDatatableComponent;
-  let fixture: ComponentFixture<TransactionsDatatableComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [TransactionsDatatableComponent],
-    }).compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(TransactionsDatatableComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/components/datatables/transactions-datatable/transactions-datatable.component.ts

@@ -1,92 +0,0 @@
-import {
-  Component,
-  OnInit,
-  ChangeDetectionStrategy,
-  ViewChild,
-  Input,
-  ChangeDetectorRef,
-  Output,
-  EventEmitter,
-} from '@angular/core';
-import { MatTableDataSource } from '@angular/material/table';
-import { MatPaginator } from '@angular/material/paginator';
-import { MatSort } from '@angular/material/sort';
-import { Transaction } from '@app/_models';
-import { exportCsv } from '@app/_helpers';
-import {TokenService, TransactionService, UserService} from '@app/_services';
-import {first} from 'rxjs/operators';
-
-@Component({
-  selector: 'app-transactions-datatable',
-  templateUrl: './transactions-datatable.component.html',
-  styleUrls: ['./transactions-datatable.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class TransactionsDatatableComponent implements OnInit {
-  @Input() transactions: Array<Transaction>;
-
-  @Output() viewTx: EventEmitter<any> = new EventEmitter<any>();
-
-  transactionsDataSource: MatTableDataSource<any>;
-  transactionsDisplayedColumns: Array<string> = ['sender', 'recipient', 'value', 'created', 'type'];
-  transactionsDefaultPageSize: number = 10;
-  transactionsPageSizeOptions: Array<number> = [10, 20, 50, 100];
-  @ViewChild('TransactionTablePaginator', { static: true }) transactionTablePaginator: MatPaginator;
-  @ViewChild('TransactionTableSort', { static: true }) transactionTableSort: MatSort;
-  transactionsType: string = 'all';
-  transactionsTypes: Array<string>;
-  tokenSymbol: string;
-
-  constructor(
-    private cdr: ChangeDetectorRef,
-    private tokenService: TokenService,
-    private transactionService: TransactionService,
-    private userService: UserService,
-  ) {}
-
-  async ngOnInit(): Promise<void> {
-    await this.tokenService.init();
-    await this.transactionService.init();
-    await this.userService.init();
-    this.userService
-      .getTransactionTypes()
-      .pipe(first())
-      .subscribe((res) => (this.transactionsTypes = res));
-    this.tokenService.load.subscribe(async (status: boolean) => {
-      if (status) {
-        this.tokenSymbol = await this.tokenService.getTokenSymbol();
-      }
-    });
-    if (this.transactions) {
-      this.transactionsDataSource = new MatTableDataSource<any>(this.transactions);
-      this.transactionsDataSource.paginator = this.transactionTablePaginator;
-      this.transactionsDataSource.sort = this.transactionTableSort;
-      this.cdr.detectChanges();
-    }
-  }
-
-  viewTransaction(transaction): void {
-    this.viewTx.emit(transaction);
-  }
-
-  doTransactionFilter(value: string): void {
-    this.transactionsDataSource.filter = value.trim().toLocaleLowerCase();
-  }
-
-  filterTransactions(): void {
-    if (this.transactionsType === 'all') {
-      this.transactionService.transactionsSubject.subscribe((transactions) => {
-        this.transactionsDataSource.data = transactions;
-        this.transactions = transactions;
-      });
-    } else {
-      this.transactionsDataSource.data = this.transactions.filter(
-        (transaction) => transaction.type + 's' === this.transactionsType
-      );
-    }
-  }
-
-  downloadCsv(data: any, filename: string): void {
-    exportCsv(data, filename);
-  }
-}

src/app/pages/accounts/account-details/account-details.component.html

@@ -333,13 +333,6 @@
         </div>
       </div>
 
-<!--      <div *ngIf="account && transactions !== undefined">-->
-<!--        <app-transactions-datatable-->
-<!--          [transactions]="transactions"-->
-<!--          (viewTx)="transaction = $event"-->
-<!--        ></app-transactions-datatable>-->
-<!--      </div>-->
-
       <mat-tab-group *ngIf="account" dynamicHeight mat-align-tabs="start">
         <mat-tab label="Transactions">
           <app-transaction-details

src/app/pages/accounts/account-search/account-search.component.spec.ts

@@ -1,6 +1,8 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { AccountSearchComponent } from './account-search.component';
+import { ReactiveFormsModule } from '@angular/forms';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
 
 describe('AccountSearchComponent', () => {
   let component: AccountSearchComponent;
@@ -9,6 +11,7 @@ describe('AccountSearchComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [AccountSearchComponent],
+      imports: [ReactiveFormsModule, HttpClientTestingModule],
     }).compileComponents();
   });
 

src/app/pages/accounts/accounts.module.ts

@@ -23,7 +23,6 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { ReactiveFormsModule } from '@angular/forms';
 import { AccountSearchComponent } from './account-search/account-search.component';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
-import { ComponentsModule } from '@app/components/components.module';
 
 @NgModule({
   declarations: [
@@ -52,7 +51,6 @@ import { ComponentsModule } from '@app/components/components.module';
     MatProgressSpinnerModule,
     ReactiveFormsModule,
     MatSnackBarModule,
-    ComponentsModule,
   ],
 })
 export class AccountsModule {}

src/app/pages/admin/admin.component.spec.ts

@@ -48,7 +48,7 @@ describe('AdminComponent', () => {
 
   it('#approveAction should toggle approval status', () => {
     const action = userService.getActionById('1');
-    expect(action).toBe({
+    expect(action).toEqual({
       id: 1,
       user: 'Tom',
       role: 'enroller',

src/app/pages/pages.component.spec.ts

@@ -1,6 +1,8 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { PagesComponent } from '@pages/pages.component';
+import { SharedModule } from '@app/shared/shared.module';
+import { RouterTestingModule } from '@angular/router/testing';
 
 describe('PagesComponent', () => {
   let component: PagesComponent;
@@ -8,6 +10,7 @@ describe('PagesComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
+      imports: [SharedModule, RouterTestingModule],
       declarations: [PagesComponent],
     }).compileComponents();
   });

src/app/pages/transactions/transaction-details/transaction-details.component.spec.ts

@@ -1,6 +1,8 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { TransactionDetailsComponent } from '@pages/transactions/transaction-details/transaction-details.component';
+import { RouterTestingModule } from '@angular/router/testing';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
 
 describe('TransactionDetailsComponent', () => {
   let component: TransactionDetailsComponent;
@@ -8,6 +10,7 @@ describe('TransactionDetailsComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
+      imports: [RouterTestingModule, HttpClientTestingModule],
       declarations: [TransactionDetailsComponent],
     }).compileComponents();
   });

src/app/shared/_directives/menu-selection.directive.spec.ts

@@ -1,21 +1,34 @@
 // Core imports
-import { ElementRef, Renderer2 } from '@angular/core';
+import { Component, DebugElement } from '@angular/core';
 
 // Application imports
 import { MenuSelectionDirective } from '@app/shared/_directives/menu-selection.directive';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+
+@Component({
+  template: ` <div appMenuSelection>
+    <div id="sidebar"></div>
+    <div id="content"></div>
+    <div id="sidebarCollapse"></div>
+  </div>`,
+})
+class TestComponent {}
 
 describe('MenuSelectionDirective', () => {
-  // tslint:disable-next-line:prefer-const
-  let elementRef: ElementRef;
-  // tslint:disable-next-line:prefer-const
-  let renderer: Renderer2;
+  let fixture: ComponentFixture<TestComponent>;
+  let des: DebugElement[];
 
   beforeEach(() => {
-    // renderer = new
+    fixture = TestBed.configureTestingModule({
+      declarations: [MenuSelectionDirective, TestComponent],
+    }).createComponent(TestComponent);
+    fixture.detectChanges();
+
+    des = fixture.debugElement.queryAll(By.directive(MenuSelectionDirective));
   });
 
-  it('should create an instance', () => {
-    const directive = new MenuSelectionDirective(elementRef, renderer);
-    expect(directive).toBeTruthy();
+  it('should have one element with menu-selection directive', () => {
+    expect(des.length).toBe(1);
   });
 });

src/app/shared/_directives/menu-toggle.directive.spec.ts

@@ -1,16 +1,32 @@
-// Core imports
-import { ElementRef, Renderer2 } from '@angular/core';
-
 // Application imports
 import { MenuToggleDirective } from '@app/shared/_directives/menu-toggle.directive';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { Component, DebugElement } from '@angular/core';
+import { By } from '@angular/platform-browser';
+
+@Component({
+  template: ` <div appMenuToggle>
+    <div id="sidebar"></div>
+    <div id="content"></div>
+    <div id="sidebarCollapse"></div>
+  </div>`,
+})
+class TestComponent {}
 
 describe('MenuToggleDirective', () => {
-  // tslint:disable-next-line:prefer-const
-  let elementRef: ElementRef;
-  // tslint:disable-next-line:prefer-const
-  let renderer: Renderer2;
-  it('should create an instance', () => {
-    const directive = new MenuToggleDirective(elementRef, renderer);
-    expect(directive).toBeTruthy();
+  let fixture: ComponentFixture<TestComponent>;
+  let des: DebugElement[];
+
+  beforeEach(() => {
+    fixture = TestBed.configureTestingModule({
+      declarations: [MenuToggleDirective, TestComponent],
+    }).createComponent(TestComponent);
+    fixture.detectChanges();
+
+    des = fixture.debugElement.queryAll(By.directive(MenuToggleDirective));
+  });
+
+  it('should have one element with menu-toggle directive', () => {
+    expect(des.length).toBe(1);
   });
 });

src/app/shared/error-dialog/error-dialog.component.spec.ts

@@ -1,6 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ErrorDialogComponent } from './error-dialog.component';
+import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 
 describe('ErrorDialogComponent', () => {
   let component: ErrorDialogComponent;
@@ -9,6 +10,8 @@ describe('ErrorDialogComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [ErrorDialogComponent],
+      imports: [MatDialogModule],
+      providers: [{ provide: MAT_DIALOG_DATA, useValue: {} }],
     }).compileComponents();
   });