Загрузите API Карт Google в jsdom

Я пытаюсь загрузить API Карт Google в jsdom. В частности, меня интересует получение данных из функции обратного вызова getPanorama. Однако, когда я выполняю следующий код, я вижу «Выполнено без ошибок», но я не вижу сообщений «состояние в порядке» или «состояние не в порядке».

var jsdom = require("jsdom");
var cafe = {lat: 51.47803167, lng: 0.141212256};

jsdom.env({
  html: "<html><body></body></html>",
  scripts: ["https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"],
  done: function (err, window) {
    if (err) {
      console.log('Error is' + err);
    } else {
      // console.log(window.google);
      var google = window.google;
      var sv = new google.maps.StreetViewService();
      sv.getPanorama({location: cafe}, function(data, status) {
        if (status === 'OK') {
          console.log('status ok');
          console.log(data);
        } else {
          console.log('status not ok');
        }
      });
      console.log('Executed with no error');

    }
  }
});

Я также пытался изменить код и использовать jsdom.jsdom вместо env, но ничего не получилось. Любые идеи о том, как я могу получить данные из обратного вызова в моем коде узла?


google-maps node.js javascript jsdom google-maps-api-3
person Kostas    schedule 31.01.2017    source источник
comment
Было бы здорово иметь скрипку, чтобы иметь возможность проверить это. Я вообще не знаю jsdom, поэтому, вероятно, ничем не смогу помочь, но... вы случайно не пробовали тот же код с другой версией API? т.е. v=3 вместо v=3.exp?   -  person MrUpsidown    schedule 31.01.2017

Ответы (2)


arrow_upward
0
arrow_downward

Я нашел решение. Обратите внимание, что в этом примере кода используется более новая версия JSDOM API:

function runGmaps(lat, lng) {

    const jsdom = require("jsdom");
    const { JSDOM } = jsdom;

    const dom = new JSDOM(`
    <!DOCTYPE html>
    <html>
        <body>
            <div id="map"></div>
            <script>
                var map;
                function initMap() {
                    map = new google.maps.Map(document.getElementById('map'), {
                        center: {lat: ${lat}, lng: ${lng}},
                        zoom: 8
                    });
                }

                function loadScript(url, callback) {
                    var head = document.getElementsByTagName('head')[0];
                    var script = document.createElement('script');
                    script.type = 'text/javascript';
                    script.src = url;

                    // Fire the loading
                    head.appendChild(script);

                    // Then bind the event to the callback function.
                    // There are several events for cross browser compatibility.
                    script.onreadystatechange = callback;
                    script.onload = callback;
                }

                loadScript("https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY", initMap);
            </script>
        </body>
    </html>
    `, {
        runScripts: "dangerously",
        resources: "usable"
    });
}
person metaColin    schedule 04.08.2017

arrow_upward
0
arrow_downward

Несмотря на то, что решение найдено, я могу поделиться решением, которое я использовал, которое менее подробно.

jsdom 11.6.2 используется для интеграционного теста с jest

import GeolocationService from './geolocation'
import { JSDOM } from 'jsdom'

const getGoogleApi = () => new Promise(res => {
    const {window} = new JSDOM(`
    <!doctype html>
    <html>
        <head>
            <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDcRzhgDwvAiAcXKvDnXhczwOrKNCHhKS0&libraries=places&callback=googleReady"></script>
        </head>
    </html>`, {runScripts: 'dangerously', resources: 'usable'})

    window.googleReady = () => {
        res(window.google)
    }
})

it('test GeolocationService', async () => {

    const google = await getGoogleApi()
    const sut = new GeolocationService({googleApi: google})

    const suggestions = await sut.getSuggestions({
        input: 'bratis',
        anchorLocation: {
            latitude: 48.669,
            longitude: 19.699
        }
    })

    suggestions.forEach(s => {
        expect(s).toHaveProperty('id')
        expect(s).toHaveProperty('name')
        expect(s).toHaveProperty('terms')

        const {terms, name} = s
        expect(name.startsWith('Bratis')).toBe(true)
        expect(Array.isArray(terms)).toBe(true)
        expect(name.startsWith(terms[0])).toBe(true)
    })
})
person ps-aux    schedule 20.02.2018