google-map/test/marker-basic.html at 16bf552ed8a156ffac7deef38defe5ef46f8205e · GoogleWebComponents/google-map · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!doctype html>
<!-- Copyright (c) 2014 Google Inc. All rights reserved. -->
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
  <script src="../../web-component-tester/browser.js"></script>
  <link rel="import" href="../google-map.html">
</head>
<body>

  <google-map id="map1" latitude="37.77493" longitude="-122.41942">
    <google-map-marker slot="markers" latitude="37.779" longitude="-122.3892"></google-map-marker>
    <google-map-marker slot="markers" id="marker2" latitude="37.777" longitude="-122.38911" drag-events></google-map-marker>
    <google-map-marker slot="markers" id="labeled-marker" label="GG" latitude="37.777" longitude="-122.38911" drag-events></google-map-marker>
  </google-map>

<script>
var map = document.querySelector('#map1');

var whenReady = function(cb) {
  if (map.map) {
    cb();
  } else {
    map.addEventListener('google-map-ready', cb);
  }
};

suite('markers', function() {
  test('labeled marker should have a label', function() {
    var markerEl = document.querySelector('#labeled-marker');

    assert.equal(markerEl.label, "GG");
  });
  // TODO: add test for info window content, including empty & whitespace-only.
  test('infowindow', function() {
  });
  test.skip('infowindow');

  // TODO: test draggable, hidden, title properties.
  test('properties', function() {
  });
  test.skip('properties');

  // TODO: add test for drag and drop marker.
  test('dragdrop marker', function() {
  });
  test.skip('dragdrop marker');

  test('defaults', function() {
    var markerEl = Polymer.dom(map).querySelector('google-map-marker');
    assert.isNull(markerEl.icon);
    assert.isNull(markerEl.info);
    assert.equal(markerEl.zIndex, 0);
    assert.equal(markerEl.latitude, 37.779);
    assert.equal(markerEl.longitude, -122.3892);
    assert.isFalse(markerEl.open);
    assert.isNull(markerEl.offsetParent,
                  'google-map-marker should be display: none');
  });

  test('update properties', function(done) {
    whenReady(function(e) {
      var markerEl = Polymer.dom(map).querySelector('google-map-marker');
      markerEl.latitude = 37.77493;
      markerEl.longitude = -122.41942;
      markerEl.zIndex = 1;
      assert.equal(
          markerEl.map, map.map, "marker's map is not the google-map's");

      flush(function() {
        assert.equal(markerEl.marker.getPosition().lat(), markerEl.latitude);
        assert.equal(markerEl.marker.getPosition().lng(), markerEl.longitude);
        assert.equal(markerEl.marker.getZIndex(), markerEl.zIndex);

        markerEl.icon = 'https://www.google.com/images/srpr/logo11w.png';
        flush(function() {
          assert.equal(markerEl.marker.getIcon(), markerEl.icon);

          done();
        });

      });

    });
  });

  test('dragEvents', function() {

    var markerEl = Polymer.dom(map).querySelector('#marker2');

    assert.equal(markerEl.dragEvents, true);

    flush(function() {
      assert.instanceOf(markerEl._listeners.drag, google.maps.MapsEventListener);
      assert.instanceOf(markerEl._listeners.dragstart, google.maps.MapsEventListener);
      assert.instanceOf(markerEl._listeners.dragend, google.maps.MapsEventListener);
      done();
    });

  });

});

</script>
</body>
</html>