feat(google-maps) Add google-map-marker component

Add tests to Google Map marker component.

Author: mbehrlich

src/dev-app/google-map/google-map-demo.html

@@ -5,7 +5,7 @@
             [zoom]="zoom"
             (mapClick)="handleClick($event)"
             (mapMousemove)="handleMove($event)">
-  <google-map-marker [position]="gettysburg"
+  <google-map-marker [position]="markerPosition"
                      [options]="markerOptions"
                      (mapClick)="clickMarker($event)"></google-map-marker>
 </google-map>

src/dev-app/google-map/google-map-demo.ts

@@ -20,7 +20,7 @@ export class GoogleMapDemo {
 
   center = {lat: 24, lng: 12};
   markerOptions = {draggable: false};
-  gettysburg = {lat: 39.830205, lng:-77.232949};
+  markerPosition = {lat: 39.830205, lng: -77.232949};
   zoom = 4;
   display?: google.maps.LatLngLiteral;
 

src/google-maps/google-map-marker/google-map-marker-module.ts

@@ -6,8 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import { NgModule } from '@angular/core';
-import { GoogleMapMarker } from './google-map-marker';
+import {NgModule} from '@angular/core';
+import {GoogleMapMarker} from './google-map-marker';
 
 @NgModule({
   exports: [GoogleMapMarker],

src/google-maps/google-map-marker/google-map-marker.spec.ts

@@ -1,10 +1,14 @@
-import { Component } from '@angular/core';
-import { async, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
+import {Component} from '@angular/core';
+import {async, TestBed} from '@angular/core/testing';
+import {By} from '@angular/platform-browser';
 
-import {DEFAULT_OPTIONS, GoogleMapMarkerModule} from './index';
+import {
+  createMarkerConstructorSpy,
+  createMarkerSpy,
+  TestingWindow
+} from '../testing/fake-google-map-utils';
 
-import {createMarkerSpy, createMarkerConstructorSpy, TestingWindow} from '../testing/fake-google-map-utils';
+import {DEFAULT_MARKER_OPTIONS, GoogleMapMarker, GoogleMapMarkerModule} from './index';
 
 describe('GoogleMapMarker', () => {
   beforeEach(async(() => {
@@ -24,26 +28,214 @@ describe('GoogleMapMarker', () => {
   });
 
   it('initializes a Google Map marker', () => {
-    let markerSpy = createMarkerSpy(DEFAULT_OPTIONS);
-    let markerConstructorSpy = createMarkerConstructorSpy(markerSpy);
+    let markerSpy = createMarkerSpy(DEFAULT_MARKER_OPTIONS);
+    let markerConstructorSpy = createMarkerConstructorSpy(markerSpy).and.callThrough();
 
     const fixture = TestBed.createComponent(TestApp);
+    const fakeMap = {} as unknown as google.maps.Map;
+    const markerComponent =
+        fixture.debugElement.query(By.directive(GoogleMapMarker)).componentInstance;
+    markerComponent.setMap(fakeMap);
     fixture.detectChanges();
 
-    expect(markerConstructorSpy).toHaveBeenCalledWith(DEFAULT_OPTIONS);
+    expect(markerConstructorSpy).toHaveBeenCalledWith({
+      ...DEFAULT_MARKER_OPTIONS,
+      title: undefined,
+      label: undefined,
+      clickable: undefined,
+      map: fakeMap
+    });
+  });
+
+  it('sets marker inputs', () => {
+    const fakeMap = {} as unknown as google.maps.Map;
+    const options: google.maps.MarkerOptions = {
+      position: {lat: 3, lng: 5},
+      title: 'marker title',
+      label: 'marker label',
+      clickable: false,
+      map: fakeMap,
+    };
+    let markerSpy = createMarkerSpy(options);
+    let markerConstructorSpy = createMarkerConstructorSpy(markerSpy).and.callThrough();
+
+    const fixture = TestBed.createComponent(TestApp);
+    fixture.componentInstance.position = options.position;
+    fixture.componentInstance.title = options.title;
+    fixture.componentInstance.label = options.label;
+    fixture.componentInstance.clickable = options.clickable;
+    const markerComponent =
+        fixture.debugElement.query(By.directive(GoogleMapMarker)).componentInstance;
+    markerComponent.setMap(fakeMap);
+    fixture.detectChanges();
+
+    expect(markerConstructorSpy).toHaveBeenCalledWith(options);
+  });
+
+  it('sets marker options, ignoring map', () => {
+    const fakeMap = {} as unknown as google.maps.Map;
+    const options: google.maps.MarkerOptions = {
+      position: {lat: 3, lng: 5},
+      title: 'marker title',
+      label: 'marker label',
+      clickable: false,
+      icon: 'icon name',
+    };
+    let markerSpy = createMarkerSpy(options);
+    let markerConstructorSpy = createMarkerConstructorSpy(markerSpy).and.callThrough();
+
+    const fixture = TestBed.createComponent(TestApp);
+    fixture.componentInstance.options = options;
+    const markerComponent =
+        fixture.debugElement.query(By.directive(GoogleMapMarker)).componentInstance;
+    markerComponent.setMap(fakeMap);
+    fixture.detectChanges();
+
+    expect(markerConstructorSpy).toHaveBeenCalledWith({...options, map: fakeMap});
   });
 
-  it('sets marker inputs', () => {});
+  it('gives precedence to specific inputs over options', () => {
+    const fakeMap = {} as unknown as google.maps.Map;
+    const options: google.maps.MarkerOptions = {
+      position: {lat: 3, lng: 5},
+      title: 'marker title',
+      label: 'marker label',
+      clickable: false,
+      icon: 'icon name',
+    };
+    const expectedOptions: google.maps.MarkerOptions = {
+      position: {lat: 5, lng: 12},
+      title: 'updated title',
+      label: 'updated label',
+      clickable: true,
+      icon: 'icon name',
+      map: fakeMap,
+    };
+    let markerSpy = createMarkerSpy(options);
+    let markerConstructorSpy = createMarkerConstructorSpy(markerSpy).and.callThrough();
+
+    const fixture = TestBed.createComponent(TestApp);
+    fixture.componentInstance.position = expectedOptions.position;
+    fixture.componentInstance.title = expectedOptions.title;
+    fixture.componentInstance.label = expectedOptions.label;
+    fixture.componentInstance.clickable = expectedOptions.clickable;
+    fixture.componentInstance.options = options;
+    const markerComponent =
+        fixture.debugElement.query(By.directive(GoogleMapMarker)).componentInstance;
+    markerComponent.setMap(fakeMap);
+    fixture.detectChanges();
 
-  it('sets marker options, ignoring map', () => {});
+    expect(markerConstructorSpy).toHaveBeenCalledWith(expectedOptions);
+  });
 
-  it('gives precedence to specific inputs over options', () => {});
+  it('sets the map on the marker only once', () => {
+    let markerSpy = createMarkerSpy(DEFAULT_MARKER_OPTIONS);
+    let markerConstructorSpy = createMarkerConstructorSpy(markerSpy).and.callThrough();
 
-  it('sets the map on the marker only once', () => {});
+    const fixture = TestBed.createComponent(TestApp);
+    const fakeMap = {} as unknown as google.maps.Map;
+    const fakeMap2 = {testValue: 'test'} as unknown as google.maps.Map;
+    const markerComponent =
+        fixture.debugElement.query(By.directive(GoogleMapMarker)).componentInstance;
+    markerComponent.setMap(fakeMap);
+    markerComponent.setMap(fakeMap2);
+    fixture.detectChanges();
+
+    expect(markerConstructorSpy).toHaveBeenCalledWith({
+      ...DEFAULT_MARKER_OPTIONS,
+      title: undefined,
+      label: undefined,
+      clickable: undefined,
+      map: fakeMap
+    });
+    expect(markerSpy.setOptions).not.toHaveBeenCalled();
+  });
 
-  it('exposes methods that provide information about the marker', () => {});
+  it('exposes methods that provide information about the marker', () => {
+    let markerSpy = createMarkerSpy(DEFAULT_MARKER_OPTIONS);
+    createMarkerConstructorSpy(markerSpy).and.callThrough();
 
-  it('initializes marker event handlers', () => {});
+    const fixture = TestBed.createComponent(TestApp);
+    const fakeMap = {} as unknown as google.maps.Map;
+    const markerComponent =
+        fixture.debugElement.query(By.directive(GoogleMapMarker)).componentInstance;
+    markerComponent.setMap(fakeMap);
+    fixture.detectChanges();
+
+    markerSpy.getAnimation.and.returnValue(null);
+    expect(markerComponent.getAnimation()).toBe(null);
+
+    markerSpy.getClickable.and.returnValue(true);
+    expect(markerComponent.getClickable()).toBe(true);
+
+    markerSpy.getCursor.and.returnValue('cursor');
+    expect(markerComponent.getCursor()).toBe('cursor');
+
+    markerSpy.getDraggable.and.returnValue(true);
+    expect(markerComponent.getDraggable()).toBe(true);
+
+    markerSpy.getIcon.and.returnValue('icon');
+    expect(markerComponent.getIcon()).toBe('icon');
+
+    markerSpy.getLabel.and.returnValue('label');
+    expect(markerComponent.getLabel()).toBe('label');
+
+    markerSpy.getOpacity.and.returnValue(5);
+    expect(markerComponent.getOpacity()).toBe(5);
+
+    markerSpy.getPosition.and.returnValue({lat: 1, lng: 2});
+    expect(markerComponent.getPosition()).toEqual({lat: 1, lng: 2});
+
+    markerSpy.getShape.and.returnValue(null);
+    expect(markerComponent.getShape()).toBe(null);
+
+    markerSpy.getTitle.and.returnValue('title');
+    expect(markerComponent.getTitle()).toBe('title');
+
+    markerSpy.getVisible.and.returnValue(true);
+    expect(markerComponent.getVisible()).toBe(true);
+
+    markerSpy.getZIndex.and.returnValue(2);
+    expect(markerComponent.getZIndex()).toBe(2);
+  });
+
+  it('initializes marker event handlers', () => {
+    let markerSpy = createMarkerSpy(DEFAULT_MARKER_OPTIONS);
+    createMarkerConstructorSpy(markerSpy).and.callThrough();
+
+    const fixture = TestBed.createComponent(TestApp);
+    const fakeMap = {} as unknown as google.maps.Map;
+    const markerComponent =
+        fixture.debugElement.query(By.directive(GoogleMapMarker)).componentInstance;
+    markerComponent.setMap(fakeMap);
+    fixture.detectChanges();
+
+    expect(markerSpy.addListener)
+        .not.toHaveBeenCalledWith('animation_changed', jasmine.any(Function));
+    expect(markerSpy.addListener).toHaveBeenCalledWith('click', jasmine.any(Function));
+    expect(markerSpy.addListener)
+        .not.toHaveBeenCalledWith('clickable_changed', jasmine.any(Function));
+    expect(markerSpy.addListener).not.toHaveBeenCalledWith('cursor_changed', jasmine.any(Function));
+    expect(markerSpy.addListener).not.toHaveBeenCalledWith('dblclick', jasmine.any(Function));
+    expect(markerSpy.addListener).not.toHaveBeenCalledWith('drag', jasmine.any(Function));
+    expect(markerSpy.addListener).not.toHaveBeenCalledWith('dragend', jasmine.any(Function));
+    expect(markerSpy.addListener)
+        .not.toHaveBeenCalledWith('draggable_changed', jasmine.any(Function));
+    expect(markerSpy.addListener).not.toHaveBeenCalledWith('dragstart', jasmine.any(Function));
+    expect(markerSpy.addListener).not.toHaveBeenCalledWith('flat_changed', jasmine.any(Function));
+    expect(markerSpy.addListener).not.toHaveBeenCalledWith('icon_changed', jasmine.any(Function));
+    expect(markerSpy.addListener).not.toHaveBeenCalledWith('mousedown', jasmine.any(Function));
+    expect(markerSpy.addListener).not.toHaveBeenCalledWith('mouseout', jasmine.any(Function));
+    expect(markerSpy.addListener).not.toHaveBeenCalledWith('mouseover', jasmine.any(Function));
+    expect(markerSpy.addListener).not.toHaveBeenCalledWith('mouseup', jasmine.any(Function));
+    expect(markerSpy.addListener).toHaveBeenCalledWith('position_changed', jasmine.any(Function));
+    expect(markerSpy.addListener).not.toHaveBeenCalledWith('rightclick', jasmine.any(Function));
+    expect(markerSpy.addListener).not.toHaveBeenCalledWith('shape_changed', jasmine.any(Function));
+    expect(markerSpy.addListener).not.toHaveBeenCalledWith('title_changed', jasmine.any(Function));
+    expect(markerSpy.addListener)
+        .not.toHaveBeenCalledWith('visible_changed', jasmine.any(Function));
+    expect(markerSpy.addListener).not.toHaveBeenCalledWith('zindex_changed', jasmine.any(Function));
+  });
 });
 
 @Component({
@@ -58,8 +250,8 @@ describe('GoogleMapMarker', () => {
 })
 class TestApp {
   title?: string;
-  position?: google.maps.LatLngLiteral;
-  label?: string;
+  position?: google.maps.LatLng|google.maps.LatLngLiteral;
+  label?: string|google.maps.MarkerLabel;
   clickable?: boolean;
   options?: google.maps.MarkerOptions;