Search⌘ K
AI Features
Home
Courses
Learn Front-End Development and Automated Testing with Angular

Dashboard Tests

Understand how to update and fix broken Angular dashboard tests by integrating RouterTestingModule and mocking services. Learn to verify service calls and ensure component initialization works correctly, preparing you to effectively test calendar-related features and UI routing in Angular.

We'll cover the following...

Below is our updated code. Use this to make further changes:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>LetsGetLunch</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>
Updated dashboard

Fixing broken tests

Before adding the calendar UI, let’s update our broken test.

  1. Update our list of imports.
TypeScript 3.3.4
// src/app/dashboard/dashboard.component.spec.ts
import { RouterTestingModule } from '@angular/router/testing';
import { of } from 'rxjs';
import { DashboardModule } from './dashboard.module';
import { AuthService } from '../services/auth/auth.service';
import { EventsService } from '../services/events/events.service';
import { Event } from '../services/events/event';

The only new import here is RouterTestingModule, which we need to import due to the “New Event” button in our template that redirects us to /event. We’ll see how this is used shortly.

With our imports ready, set up our mocks for AuthService and EventsService.

TypeScript 3.3.4
// src/app/dashboard/dashboard.component.spec.ts
const currentUser = {
  'username': 'myUser',
  '_id': '5a550ea739fbc4ca3ee0ce58'
};
const events: Array<Event> = [{
  '_id': '5a55135639fbc4ca3ee0ce5a',
  '_creator': '5a550ea739fbc4ca3ee0ce58',
  'title': 'My first event',
  'description': 'My first description',
  'city': 'Atlanta',
  'state': 'GA',
  'startTime': new Date().toISOString(),
  'endTime': new Date().toISOString(),
  '__v': 0,
  'suggestLocations': true,
  'members': [
    '5a550ea739fbc4ca3ee0ce58'
  ]
}];
class MockAuthService {
  currentUser = jasmine.createSpy('currentUser').and.callFake(() => currentUser);
}
class MockEventsService {
  getUserEvents = jasmine.createSpy('getUserEvents')
                         .and.callFake(() => of(events));
}
describe('DashboardComponent', () => {
  ...
});
...