Learn Front-End Development and Automated Testing with Angular/

...

/

Dashboard Tests

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.
Press + to interact
// 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.

Press + to interact
// 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', () => {
  ...
});
...