test(docs-infra): simplify `EventsComponent` tests and add more test cases (#36517)

This commit simplifies the tests of `EventsComponent` (by introducing a
`createMockEvent()` helper and getting rid of the irrelevant `Event`
fields) and adds tests for some more usecases. It also makes the tests
more robust by using Jasmine's `Clock` to mock the current date.

PR Close #36517

aio/src/app/custom-elements/events/events.component.spec.ts

@@ -1,22 +1,20 @@
-import { EventsComponent } from './events.component';
+import { Duration, Event, EventsComponent } from './events.component';
 import { EventsService } from './events.service';
-import { Event } from './events.component';
 import { ReflectiveInjector } from '@angular/core';
 import { Subject } from 'rxjs';
 
 describe('EventsComponent', () => {
   let component: EventsComponent;
   let injector: ReflectiveInjector;
-  let eventsService: TestEventService;
+  let eventsService: TestEventsService;
 
   beforeEach(() => {
     injector = ReflectiveInjector.resolveAndCreate([
       EventsComponent,
-      {provide: EventsService, useClass: TestEventService },
+      { provide: EventsService, useClass: TestEventsService },
     ]);
     eventsService = injector.get(EventsService) as any;
     component = injector.get(EventsComponent);
-    component.ngOnInit();
   });
 
   it('should have no pastEvents when first created', () => {
@@ -27,269 +25,205 @@ describe('EventsComponent', () => {
     expect(component.upcomingEvents).toBeUndefined();
   });
 
-  describe('ngOnInit', () => {
+  describe('ngOnInit()', () => {
-    it('should have 2 upcoming events', () => {
+    beforeEach(() => {
-      eventsService.events.next([{
+      jasmine.clock().install();
-        'location': 'Oslo, Norway',
+      jasmine.clock().mockDate(new Date(2020, 5, 15, 23, 59, 59));
-        'tooltip': 'ngVikings',
+      component.ngOnInit();
-        'linkUrl': 'https://ngvikings.org/',
-        'name': 'ngVikings',
-        'date': {
-          'start': '2099-07-25',
-          'end': '2099-07-26'
-        },
-        'workshopsDate': {
-          'start': '2099-07-27',
-          'end': '2099-07-27'
-        }
-      },
-      {
-        'location': 'Salt Lake City, Utah',
-        'tooltip': 'ng-conf',
-        'linkUrl': 'https://ng-conf.org/',
-        'name': 'ng-conf  ',
-        'date': {
-          'start': '2099-06-20',
-          'end': '2099-06-20'
-        }
-      },
-      {
-        'location': 'Delhi, India',
-        'tooltip': 'ngIndia',
-        'linkUrl': 'https://www.ng-ind.com/',
-        'name': 'ngIndia',
-        'date': {
-          'start': '2020-02-29',
-          'end': '2020-02-29'
-        }
-      }]);
-      expect(component.upcomingEvents.length).toEqual(2);
     });
 
-    it('should have 4 past events', () => {
+    afterEach(() => jasmine.clock().uninstall());
+
+    it('should separate past and upcoming events', () => {
       eventsService.events.next([
-      {
+        createMockEvent(
-        'location': 'Salt Lake City, Utah',
+            'Upcoming event 1',
-        'tooltip': 'ng-conf',
+            {start: '2020-06-16', end: '2020-06-17'},
-        'linkUrl': 'https://ng-conf.org/',
+            {start: '2020-06-18', end: '2020-06-18'}),
-        'name': 'ng-conf  ',
+        createMockEvent(
-        'date': {
+            'Upcoming event 3',
-          'start': '2099-06-20',
+            {start: '2222-01-01', end: '2222-01-02'}),
-          'end': '2099-06-20'
+        createMockEvent(
-        }
+            'Past event 2',
-      },
+            {start: '2020-06-13', end: '2020-06-14'}),
-      {
+        createMockEvent(
-        'location': 'Rome, Italy',
+            'Upcoming event 2',
-        'tooltip': 'NG Rome MMXIX - The Italian Angular Conference',
+            {start: '2020-06-17', end: '2020-06-18'},
-        'linkUrl': 'https://ngrome.io',
+            {start: '2020-06-16', end: '2020-06-16'}),
-        'name': 'NG Rome MMXIX',
+        createMockEvent(
-        'date': {
+            'Past event 1',
-          'start': '2019-10-07',
+            {start: '2020-05-30', end: '2020-05-31'}),
-          'end': '2019-10-07'
+        createMockEvent(
-        },
+            'Past event 3',
-        'workshopsDate': {
+            {start: '2020-06-14', end: '2020-06-14'},
-          'start': '2019-10-06',
+            {start: '2020-06-16', end: '2020-06-17'}),
-          'end': '2019-10-06'
+      ]);
-        }
+
-      },
+      expect(component.pastEvents.map(evt => evt.name)).toEqual(jasmine.arrayWithExactContents(
-      {
+          ['Past event 1', 'Past event 2', 'Past event 3']));
-        'location': 'London, UK',
+
-        'tooltip': 'AngularConnect',
+      expect(component.upcomingEvents.map(evt => evt.name)).toEqual(jasmine.arrayWithExactContents(
-        'linkUrl': 'https://www.angularconnect.com/?utm_source=angular.io&utm_medium=referral',
+          ['Upcoming event 1', 'Upcoming event 2', 'Upcoming event 3']));
-        'name': 'AngularConnect',
+    });
-        'date': {
+
-          'start': '2019-09-19',
+    it('should order past events in reverse chronological order (ignoring workshops dates)', () => {
-          'end': '2019-09-20'
+      eventsService.events.next([
-        }
+        createMockEvent(
-      },
+            'Past event 2',
-      {
+            {start: '1999-12-13', end: '1999-12-14'},
-        'location': 'Berlin, Germany',
+            {start: '1999-12-11', end: '1999-12-11'}),
-        'tooltip': 'NG-DE',
+        createMockEvent(
-        'linkUrl': 'https://ng-de.org/',
+            'Past event 4',
-        'name': 'NG-DE',
+            {start: '2020-01-16', end: '2020-01-17'},
-        'date': {
+            {start: '2020-01-14', end: '2020-01-15'}),
-          'start': '2019-08-30',
+        createMockEvent(
-          'end': '2019-08-31'
+            'Past event 3',
-        },
+            {start: '2020-01-15', end: '2020-01-16'},
-        'workshopsDate': {
+            {start: '2020-01-17', end: '2020-01-18'}),
-          'start': '2019-08-29',
+        createMockEvent(
-          'end': '2019-08-29'
+            'Past event 1',
-        }
+            {start: '1999-12-12', end: '1999-12-15'}),
-      },
+      ]);
-      {
+
-        'location': 'Oslo, Norway',
+      expect(component.pastEvents.map(evt => evt.name)).toEqual(
-        'tooltip': 'ngVikings',
+          ['Past event 4', 'Past event 3', 'Past event 2', 'Past event 1']);
-        'linkUrl': 'https://ngvikings.org/',
+    });
-        'name': 'ngVikings',
+
-        'date': {
+    it('should order upcoming events in chronological order (ignoring workshops dates)', () => {
-          'start': '2018-07-26',
+      eventsService.events.next([
-          'end': '2018-07-26'
+        createMockEvent(
-        },
+            'Upcoming event 2',
-        'workshopsDate': {
+            {start: '2020-12-13', end: '2020-12-14'},
-          'start': '2018-07-27',
+            {start: '2020-12-11', end: '2020-12-11'}),
-          'end': '2018-07-27'
+        createMockEvent(
-        }
+            'Upcoming event 4',
-      }]);
+            {start: '2021-01-16', end: '2021-01-17'},
-      expect(component.pastEvents.length).toEqual(4);
+            {start: '2021-01-14', end: '2021-01-15'}),
+        createMockEvent(
+            'Upcoming event 3',
+            {start: '2021-01-15', end: '2021-01-16'},
+            {start: '2021-01-17', end: '2021-01-18'}),
+        createMockEvent(
+            'Upcoming event 1',
+            {start: '2020-12-12', end: '2020-12-15'}),
+      ]);
+
+      expect(component.upcomingEvents.map(evt => evt.name)).toEqual(
+          ['Upcoming event 1', 'Upcoming event 2', 'Upcoming event 3', 'Upcoming event 4']);
+    });
+
+    it('should treat ongoing events as upcoming', () => {
+      eventsService.events.next([
+        createMockEvent(
+            'Ongoing event 1',
+            {start: '2020-06-14', end: '2020-06-16'}),
+        createMockEvent(
+            'Ongoing event 2',
+            {start: '2020-06-14', end: '2020-06-15'},
+            {start: '2020-06-13', end: '2020-06-13'}),
+      ]);
+
+      expect(component.pastEvents).toEqual([]);
+      expect(component.upcomingEvents.map(evt => evt.name)).toEqual(jasmine.arrayWithExactContents(
+          ['Ongoing event 1', 'Ongoing event 2']));
     });
   });
 
-  describe('Getting event dates if no workshop date', () => {
+  describe('getEventDates()', () => {
-    it('should return only conference date', () => {
+    describe('(without workshops)', () => {
-      const datestring = component.getEventDates({
+      it('should correctly format the main event date', () => {
-            'location': 'Salt Lake City, Utah',
+        const testEvent = createMockEvent('Test', {start: '2020-06-20', end: '2020-06-20'});
-            'tooltip': 'ng-conf',
+        expect(component.getEventDates(testEvent)).toBe('June 20, 2020');
-            'linkUrl': 'https://ng-conf.org/',
+      });
-            'name': 'ng-conf  ',
+
-            'date': {
+      it('should correctly format the main event date spanning mupliple days', () => {
-              'start': '2020-06-20',
+        const testEvent = createMockEvent('Test', {start: '2019-09-19', end: '2019-09-21'});
-              'end': '2020-06-20'
+        expect(component.getEventDates(testEvent)).toBe('September 19-21, 2019');
-            }
+      });
-          });
+
-      expect(datestring).toEqual('June 20, 2020');
+      it('should correctly format the main event date spanning mupliple months', () => {
+        const testEvent = createMockEvent('Test', {start: '2019-10-30', end: '2019-11-01'});
+        expect(component.getEventDates(testEvent)).toBe('October 30 - November 1, 2019');
+      });
     });
 
-    it('should return only conference date with changing months if date is in two diffrent months', () => {
+    describe('(with workshops)', () => {
-      const datestring = component.getEventDates({
+      it('should correctly format event dates with workshops after main event', () => {
-        'location': 'Prague, Czech Republic',
+        const testEvent = createMockEvent(
-        'tooltip': 'ReactiveConf',
+            'Test',
-        'linkUrl': 'https://reactiveconf.com/',
+            {start: '2020-07-25', end: '2020-07-26'},
-        'name': 'ReactiveConf',
+            {start: '2020-07-27', end: '2020-07-27'});
-        'date': {
-          'start': '2019-10-30',
-          'end': '2019-11-01'
-        }
-      });
-      expect(datestring).toEqual('October 30 - November 1, 2019');
-    });
 
-    it('should return only conference date with "- lastdate" if conference over multiple days', () => {
+        expect(component.getEventDates(testEvent))
-      const datestring = component.getEventDates({
+            .toBe('July 25-26 (conference), July 27 (workshops), 2020');
-        'location': 'London, UK',
+      });
-        'tooltip': 'AngularConnect',
+
-        'linkUrl': 'https://www.angularconnect.com/?utm_source=angular.io&utm_medium=referral',
+      it('should correctly format event dates with workshops before main event', () => {
-        'name': 'AngularConnect',
+        const testEvent = createMockEvent(
-        'date': {
+            'Test',
-          'start': '2019-09-19',
+            {start: '2019-10-07', end: '2019-10-07'},
-          'end': '2019-09-20'
+            {start: '2019-10-06', end: '2019-10-06'});
-        }
+
+        expect(component.getEventDates(testEvent))
+            .toBe('October 6 (workshops), October 7 (conference), 2019');
+      });
+
+      it('should correctly format event dates spanning multiple days', () => {
+        const testEvent = createMockEvent(
+            'Test',
+            {start: '2019-08-30', end: '2019-08-31'},
+            {start: '2019-08-28', end: '2019-08-29'});
+
+        expect(component.getEventDates(testEvent))
+            .toBe('August 28-29 (workshops), August 30-31 (conference), 2019');
+      });
+
+      it('should correctly format event dates with workshops on different month before the main event',
+        () => {
+          const testEvent = createMockEvent(
+              'Test',
+              {start: '2020-08-01', end: '2020-08-02'},
+              {start: '2020-07-30', end: '2020-07-31'});
+
+          expect(component.getEventDates(testEvent))
+              .toBe('July 30-31 (workshops), August 1-2 (conference), 2020');
+        });
+
+      it('should correctly format event dates with workshops on different month after the main event',
+        () => {
+          const testEvent = createMockEvent(
+              'Test',
+              {start: '2020-07-30', end: '2020-07-31'},
+              {start: '2020-08-01', end: '2020-08-02'});
+
+          expect(component.getEventDates(testEvent))
+              .toBe('July 30-31 (conference), August 1-2 (workshops), 2020');
+        });
+
+      it('should correctly format event dates spanning multiple months', () => {
+        const testEvent = createMockEvent(
+            'Test',
+            {start: '2020-07-31', end: '2020-08-01'},
+            {start: '2020-07-30', end: '2020-08-01'});
+
+        expect(component.getEventDates(testEvent))
+            .toBe('July 30 - August 1 (workshops), July 31 - August 1 (conference), 2020');
       });
-      expect(datestring).toEqual('September 19-20, 2019');
     });
   });
 
-  describe('Getting event dates if workshop date', () => {
+  // Helpers
-    it('should return conference date with different days, workshopdate', () => {
+  class TestEventsService {
-      const datestring = component.getEventDates({
+    events = new Subject<Event[]>();
-            'location': 'Oslo, Norway',
+  }
-            'tooltip': 'ngVikings',
-            'linkUrl': 'https://ngvikings.org/',
-            'name': 'ngVikings',
-            'date': {
-              'start': '2020-07-25',
-              'end': '2020-07-26'
-            },
-            'workshopsDate': {
-              'start': '2020-07-27',
-              'end': '2020-07-27'
-            }
-          });
-      expect(datestring).toEqual('July 25-26 (conference), July 27 (workshops), 2020');
-    });
 
-    it('should return workshop date, conference date if workshop before conf date', () => {
+  function createMockEvent(name: string, date: Duration, workshopsDate?: Duration): Event {
-      const datestring = component.getEventDates({
+    return {
-        'location': 'Rome, Italy',
+      name,
-        'tooltip': 'NG Rome MMXIX - The Italian Angular Conference',
+      location: '',
-        'linkUrl': 'https://ngrome.io',
+      linkUrl: '',
-        'name': 'NG Rome MMXIX',
+      date,
-        'date': {
+      workshopsDate,
-          'start': '2019-10-07',
+    };
-          'end': '2019-10-07'
+  }
-        },
-        'workshopsDate': {
-          'start': '2019-10-06',
-          'end': '2019-10-06'
-        }
-      });
-      expect(datestring).toEqual('October 6 (workshops), October 7 (conference), 2019');
-    });
-
-    it('should return workshop date, conference date if workshop before conference date', () => {
-      const datestring = component.getEventDates({
-        'location': 'Berlin, Germany',
-        'tooltip': 'NG-DE',
-        'linkUrl': 'https://ng-de.org/',
-        'name': 'NG-DE',
-        'date': {
-          'start': '2019-08-30',
-          'end': '2019-08-31'
-        },
-        'workshopsDate': {
-          'start': '2019-08-29',
-          'end': '2019-08-29'
-        }
-      });
-      expect(datestring).toEqual('August 29 (workshops), August 30-31 (conference), 2019');
-    });
-
-    it('should return only conference date, wokshop date if workshop after conference', () => {
-      const datestring = component.getEventDates({
-        'location': 'Oslo, Norway',
-        'tooltip': 'ngVikings',
-        'linkUrl': 'https://ngvikings.org/',
-        'name': 'ngVikings',
-        'date': {
-          'start': '2018-07-26',
-          'end': '2018-07-26'
-        },
-        'workshopsDate': {
-          'start': '2018-07-27',
-          'end': '2018-07-27'
-        }
-      });
-      expect(datestring).toEqual('July 26 (conference), July 27 (workshops), 2018');
-    });
-
-    it('should return conference date and workshop date with different days and months, starting with confrence date', () => {
-      const datestring = component.getEventDates({
-            'location': 'Oslo, Norway',
-            'tooltip': 'ngVikings',
-            'linkUrl': 'https://ngvikings.org/',
-            'name': 'ngVikings',
-            'date': {
-              'start': '2020-07-30',
-              'end': '2020-07-31'
-            },
-            'workshopsDate': {
-              'start': '2020-08-01',
-              'end': '2020-08-02'
-            }
-          });
-      expect(datestring).toEqual('July 30-31 (conference), August 1-2 (workshops), 2020');
-    });
-
-    it('should return conference date and workshop date with different days and months, starting with workshopdate', () => {
-      const datestring = component.getEventDates({
-            'location': 'Oslo, Norway',
-            'tooltip': 'ngVikings',
-            'linkUrl': 'https://ngvikings.org/',
-            'name': 'ngVikings',
-            'date': {
-              'start': '2020-08-01',
-              'end': '2020-08-02'
-            },
-            'workshopsDate': {
-              'start': '2020-07-30',
-              'end': '2020-07-31'
-            }
-          });
-      expect(datestring).toEqual('July 30-31 (workshops), August 1-2 (conference), 2020');
-    });
-
-  });
 });
-
-class TestEventService {
-  events = new Subject<Event[]>();
-}

aio/src/app/custom-elements/events/events.component.ts

@@ -18,8 +18,8 @@ const MONTHS = [
   'December',
 ];
 
-type date = string; // of the format `YYYY-MM-DD`.
+export type date = string; // of the format `YYYY-MM-DD`.
-interface Duration {
+export interface Duration {
   start: date;
   end: date;
 }