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

Update Calendar Tests

Explore how to update calendar tests within an Angular dashboard, verifying event population, default week view, and button states. Learn to use spies for method calls and ensure proper rendering of events using asynchronous testing and DOM queries.

We'll cover the following...

Below is our updated code. Use this to make further changes mentioned in the lesson.

<!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 calendar

Let’s update our tests now that our events are populated within the calendar.

  1. Add two spies for our new addJSDate and addEventColors methods, chaining them with .callThrough() to allow the implementation to run.
TypeScript 3.3.4
// src/app/dashboard/dashboard.component.spec.ts
beforeEach(() => {
  fixture = TestBed.createComponent(DashboardComponent);
  component = fixture.componentInstance;
  authService = fixture.debugElement.injector.get(AuthService);
  eventsService = fixture.debugElement.injector.get(EventsService);
  spyOn(component, 'addJSDate').and.callThrough();
  spyOn(component, 'addEventColors').and.callThrough();
  fixture.detectChanges();
});
  1. Now update our initialization test. Leverage our two spies to verify that the functions have been called when a collection of users have been returned.
TypeScript 3.3.4
// src/app/dashboard/dashboard.component.spec.ts
it('should initialize with a call to get the current user\'s events', () => {
  expect(authService.currentUser).toHaveBeenCalled();
  expect(eventsService.getUserEvents)
    .toHaveBeenCalledWith('5a550ea739fbc4ca3ee0ce58');
  expect(component.addJSDate).toHaveBeenCalled();
  expect(component.addEventColors).toHaveBeenCalled();
  expect(component.events.length).toEqual(1);
});

Adding tests

...