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

Dashboard Tests

Let's update dashboard tests to pass the failing tests.

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', () => {
  ...
});
...