feat(google-maps): Add MapPolyline component (#17512)

Author: mbehrlich

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

@@ -13,8 +13,19 @@
                 [options]="markerOptions"
                 (mapClick)="clickMarker(marker)"></map-marker>
     <map-info-window>Testing 1 2 3</map-info-window>
+    <map-polyline *ngIf="isPolylineDisplayed" [options]="polylineOptions"></map-polyline>
   </google-map>
 
   <p><label>Latitude:</label> {{display?.lat}}</p>
   <p><label>Longitude:</label> {{display?.lng}}</p>
+
+  <div>
+    <label for="polyline-checkbox">Toggle Polyline</label>
+    <input id="polyline-checkbox" type="checkbox" (click)="togglePolylineDisplay()">
+  </div>
+  <div>
+    <label for="editable-polyline-checkbox">Toggle Editable Polyline</label>
+    <input id="editable-polyline-checkbox" type="checkbox" (click)="toggleEditablePolyline()">
+  </div>
+
 </div>

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

@@ -9,6 +9,9 @@
 import {Component, ViewChild} from '@angular/core';
 import {MapInfoWindow, MapMarker} from '@angular/google-maps';
 
+const POLYLINE_PATH: google.maps.LatLngLiteral[] =
+    [{lat: 25, lng: 26}, {lat: 26, lng: 27}, {lat: 30, lng: 34}];
+
 /** Demo Component for @angular/google-maps/map */
 @Component({
   selector: 'google-map-demo',
@@ -23,6 +26,9 @@ export class GoogleMapDemo {
   markerPositions: google.maps.LatLngLiteral[] = [];
   zoom = 4;
   display?: google.maps.LatLngLiteral;
+  isPolylineDisplayed = false;
+  polylineOptions:
+      google.maps.PolylineOptions = {path: POLYLINE_PATH, strokeColor: 'grey', strokeOpacity: 0.8};
 
   handleClick(event: google.maps.MouseEvent) {
     this.markerPositions.push(event.latLng.toJSON());
@@ -39,4 +45,12 @@ export class GoogleMapDemo {
   handleRightclick() {
     this.markerPositions.pop();
   }
+
+  togglePolylineDisplay() {
+    this.isPolylineDisplayed = !this.isPolylineDisplayed;
+  }
+
+  toggleEditablePolyline() {
+    this.polylineOptions = {...this.polylineOptions, editable: !this.polylineOptions.editable};
+  }
 }

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

@@ -11,11 +11,13 @@ import {NgModule} from '@angular/core';
 import {GoogleMap} from './google-map/google-map';
 import {MapInfoWindow} from './map-info-window/map-info-window';
 import {MapMarker} from './map-marker/map-marker';
+import {MapPolyline} from './map-polyline/map-polyline';
 
 const COMPONENTS = [
   GoogleMap,
   MapInfoWindow,
   MapMarker,
+  MapPolyline,
 ];
 
 @NgModule({

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

@@ -0,0 +1,145 @@
+import {Component} from '@angular/core';
+import {async, TestBed} from '@angular/core/testing';
+import {By} from '@angular/platform-browser';
+
+import {DEFAULT_OPTIONS, UpdatedGoogleMap} from '../google-map/google-map';
+import {GoogleMapsModule} from '../google-maps-module';
+import {
+  createMapConstructorSpy,
+  createMapSpy,
+  createPolylineConstructorSpy,
+  createPolylineSpy,
+  TestingWindow,
+} from '../testing/fake-google-map-utils';
+
+import {MapPolyline} from './map-polyline';
+
+describe('MapPolyline', () => {
+  let mapSpy: jasmine.SpyObj<UpdatedGoogleMap>;
+  let polylinePath: google.maps.LatLngLiteral[];
+  let polylineOptions: google.maps.PolylineOptions;
+
+  beforeEach(async(() => {
+    polylinePath = [{ lat: 25, lng: 26 }, { lat: 26, lng: 27 }, { lat: 30, lng: 34 }];
+    polylineOptions = {
+      path: polylinePath,
+      strokeColor: 'grey',
+      strokeOpacity: 0.8
+    };
+    TestBed.configureTestingModule({
+      imports: [GoogleMapsModule],
+      declarations: [TestApp],
+    });
+  }));
+
+  beforeEach(() => {
+    TestBed.compileComponents();
+
+    mapSpy = createMapSpy(DEFAULT_OPTIONS);
+    createMapConstructorSpy(mapSpy).and.callThrough();
+  });
+
+  afterEach(() => {
+    const testingWindow: TestingWindow = window;
+    delete testingWindow.google;
+  });
+
+  it('initializes a Google Map Polyline', () => {
+    const polylineSpy = createPolylineSpy({});
+    const polylineConstructorSpy = createPolylineConstructorSpy(polylineSpy).and.callThrough();
+
+    const fixture = TestBed.createComponent(TestApp);
+    fixture.detectChanges();
+
+    expect(polylineConstructorSpy).toHaveBeenCalledWith({path: undefined});
+    expect(polylineSpy.setMap).toHaveBeenCalledWith(mapSpy);
+  });
+
+  it('sets path from input', () => {
+    const path: google.maps.LatLngLiteral[] = [{lat: 3, lng: 5}];
+    const options: google.maps.PolylineOptions = {path};
+    const polylineSpy = createPolylineSpy(options);
+    const polylineConstructorSpy = createPolylineConstructorSpy(polylineSpy).and.callThrough();
+
+    const fixture = TestBed.createComponent(TestApp);
+    fixture.componentInstance.path = path;
+    fixture.detectChanges();
+
+    expect(polylineConstructorSpy).toHaveBeenCalledWith(options);
+  });
+
+  it('gives precedence to path input over options', () => {
+    const path: google.maps.LatLngLiteral[] = [{lat: 3, lng: 5}];
+    const expectedOptions: google.maps.PolylineOptions = {...polylineOptions, path};
+    const polylineSpy = createPolylineSpy(expectedOptions);
+    const polylineConstructorSpy = createPolylineConstructorSpy(polylineSpy).and.callThrough();
+
+    const fixture = TestBed.createComponent(TestApp);
+    fixture.componentInstance.options = polylineOptions;
+    fixture.componentInstance.path = path;
+    fixture.detectChanges();
+
+    expect(polylineConstructorSpy).toHaveBeenCalledWith(expectedOptions);
+  });
+
+  it('exposes methods that provide information about the Polyline', () => {
+    const polylineSpy = createPolylineSpy(polylineOptions);
+    createPolylineConstructorSpy(polylineSpy).and.callThrough();
+
+    const fixture = TestBed.createComponent(TestApp);
+    const polylineComponent = fixture.debugElement.query(By.directive(
+        MapPolyline))!.injector.get<MapPolyline>(MapPolyline);
+    fixture.detectChanges();
+
+    polylineSpy.getDraggable.and.returnValue(true);
+    expect(polylineComponent.getDraggable()).toBe(true);
+
+    polylineSpy.getEditable.and.returnValue(true);
+    expect(polylineComponent.getEditable()).toBe(true);
+
+    polylineComponent.getPath();
+    expect(polylineSpy.getPath).toHaveBeenCalled();
+
+    polylineSpy.getVisible.and.returnValue(true);
+    expect(polylineComponent.getVisible()).toBe(true);
+  });
+
+  it('initializes Polyline event handlers', () => {
+    const polylineSpy = createPolylineSpy(polylineOptions);
+    createPolylineConstructorSpy(polylineSpy).and.callThrough();
+
+    const fixture = TestBed.createComponent(TestApp);
+    fixture.detectChanges();
+
+    expect(polylineSpy.addListener).toHaveBeenCalledWith('click', jasmine.any(Function));
+    expect(polylineSpy.addListener).not.toHaveBeenCalledWith('dblclick', jasmine.any(Function));
+    expect(polylineSpy.addListener).not.toHaveBeenCalledWith('drag', jasmine.any(Function));
+    expect(polylineSpy.addListener).not.toHaveBeenCalledWith('dragend', jasmine.any(Function));
+    expect(polylineSpy.addListener).not.toHaveBeenCalledWith('dragstart', jasmine.any(Function));
+    expect(polylineSpy.addListener).not.toHaveBeenCalledWith('mousedown', jasmine.any(Function));
+    expect(polylineSpy.addListener).not.toHaveBeenCalledWith('mousemove', jasmine.any(Function));
+    expect(polylineSpy.addListener).not.toHaveBeenCalledWith('mouseout', jasmine.any(Function));
+    expect(polylineSpy.addListener).not.toHaveBeenCalledWith('mouseover', jasmine.any(Function));
+    expect(polylineSpy.addListener).not.toHaveBeenCalledWith('mouseup', jasmine.any(Function));
+    expect(polylineSpy.addListener).toHaveBeenCalledWith('rightclick', jasmine.any(Function));
+  });
+});
+
+@Component({
+  selector: 'test-app',
+  template: `<google-map>
+                <map-polyline [options]="options"
+                              [path]="path"
+                              (polylineClick)="handleClick()"
+                              (polylineRightclick)="handleRightclick()">
+                </map-polyline>
+            </google-map>`,
+})
+class TestApp {
+  options?: google.maps.PolylineOptions;
+  path?: google.maps.LatLngLiteral[];
+
+  handleClick() {}
+
+  handleRightclick() {}
+}