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

Add tests for the google-map-marker component.

Author: mbehrlich

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

@@ -10,6 +10,7 @@ import {CommonModule} from '@angular/common';
 import {HttpClientJsonpModule, HttpClientModule} from '@angular/common/http';
 import {NgModule} from '@angular/core';
 import {GoogleMapModule} from '@angular/google-maps/google-map';
+import {GoogleMapMarkerModule} from '@angular/google-maps/google-map-marker';
 import {RouterModule} from '@angular/router';
 
 import {GoogleMapDemo} from './google-map-demo';
@@ -18,6 +19,7 @@ import {GoogleMapDemo} from './google-map-demo';
   imports: [
     CommonModule,
     GoogleMapModule,
+    GoogleMapMarkerModule,
     HttpClientJsonpModule,
     HttpClientModule,
     RouterModule.forChild([{path: '', component: GoogleMapDemo}]),

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

@@ -4,7 +4,11 @@
             [center]="center"
             [zoom]="zoom"
             (mapClick)="handleClick($event)"
-            (mapMousemove)="handleMove($event)"></google-map>
+            (mapMousemove)="handleMove($event)">
+  <google-map-marker [position]="gettysburg"
+                     [options]="markerOptions"
+                     (mapClick)="clickMarker($event)"></google-map-marker>
+</google-map>
 
 <div>Latitude: {{display?.lat}}</div>
 <div>Longitude: {{display?.lng}}</div>

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

@@ -19,6 +19,8 @@ export class GoogleMapDemo {
   isReady = false;
 
   center = {lat: 24, lng: 12};
+  markerOptions = {draggable: false};
+  gettysburg = {lat: 39.830205, lng:-77.232949};
   zoom = 4;
   display?: google.maps.LatLngLiteral;
 
@@ -36,4 +38,9 @@ export class GoogleMapDemo {
   handleMove(event: google.maps.MouseEvent) {
     this.display = event.latLng.toJSON();
   }
+
+  clickMarker(event: google.maps.MouseEvent) {
+    console.log(this.markerOptions);
+    this.markerOptions = {draggable: true};
+  }
 }

src/google-maps/google-map-marker/BUILD.bazel

@@ -30,6 +30,7 @@ ng_test_library(
     ),
     deps = [
         ":google-map-marker",
+        "//src/google-maps/testing",
         "@npm//@angular/platform-browser",
     ],
 )

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

@@ -1 +1,69 @@
-descript('GoogleMapMarker', () => {});
+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 {createMarkerSpy, createMarkerConstructorSpy, TestingWindow} from '../testing/fake-google-map-utils';
+
+describe('GoogleMapMarker', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [GoogleMapMarkerModule],
+      declarations: [TestApp],
+    });
+  }));
+
+  beforeEach(() => {
+    TestBed.compileComponents();
+  });
+
+  afterEach(() => {
+    const testingWindow: TestingWindow = window;
+    delete testingWindow.google;
+  });
+
+  it('initializes a Google Map marker', () => {
+    let markerSpy = createMarkerSpy(DEFAULT_OPTIONS);
+    let markerConstructorSpy = createMarkerConstructorSpy(markerSpy);
+
+    const fixture = TestBed.createComponent(TestApp);
+    fixture.detectChanges();
+
+    expect(markerConstructorSpy).toHaveBeenCalledWith(DEFAULT_OPTIONS);
+  });
+
+  it('sets marker inputs', () => {});
+
+  it('sets marker options, ignoring map', () => {});
+
+  it('gives precedence to specific inputs over options', () => {});
+
+  it('sets the map on the marker only once', () => {});
+
+  it('exposes methods that provide information about the marker', () => {});
+
+  it('initializes marker event handlers', () => {});
+});
+
+@Component({
+  selector: 'test-app',
+  template: `<google-map-marker [title]="title"
+                                [position]="position"
+                                [label]="label"
+                                [clickable]="clickable"
+                                [options]="options"
+                                (mapClick)="handleClick()"
+                                (positionChanged)="handlePositionChanged()"></google-map-marker>`,
+})
+class TestApp {
+  title?: string;
+  position?: google.maps.LatLngLiteral;
+  label?: string;
+  clickable?: boolean;
+  options?: google.maps.MarkerOptions;
+
+  handleClick() {}
+
+  handlePositionChanged() {}
+}