Вторая часть истории начинается там же, где я ее закончил, и предполагает, что у вас уже есть тестовая рабочая среда и приложение React карты OpenLayers. Если это не так, вы можете завершить часть I и вернуться сюда, или вы можете клонировать/скачать репозиторий GitHub с готовой веткой части I здесь.

1. Добавление функции взаимодействия с картой

В качестве примера я выбираю взаимодействие перетаскиванием OpenLayers, позволяющее тестировать поведение карты при загрузке внешних данных. В качестве тестовых данных я сделал некоторые функции GeoJSON и сохранил их в виде .json файлов в папке test_data в корневом каталоге нашего приложения, вы можете создать свои собственные тестовые данные здесь, проекция экспортированных функций находится в LatLong (WGS84). Взаимодействие перетаскивания Openlayers в нашем MapComponent потребует хранения загруженных функций в памяти. Мы также создадим кнопку для удаления всех загруженных объектов с карты. Мы будем хранить массив загруженных функций GeoJSON в нашем состоянии, когда событие перетаскивания будет записано из MapComponent, мы вызовем функцию uploadFeature, переданную от родителя (App) как onUploadFeature prop. Эта функция установит новое состояние компонента App, и свойства на нашей карте будут автоматически обновлены. Карта будет анализировать GeoJSON обратно в объект объекта OpenLayers, добавляя его к слою uploadLayer и устанавливая вид карты в его центре. Кнопка очистки просто передает пустой массив в состояние приложения, очищая слой от всех его функций. После реализации этих функций карта должна выглядеть так:

А ниже вы можете найти код как для App.js, так и для Map.js

2. Тестируем наши новые функции

В нашей первой новой тестовой спецификации мы создадим объект GeoJSON в отдельном файле, мы можем назвать его testFeature.js, и он будет экспортирован как константа. сделать его пригодным для использования в нашем тестовом коде. Тестовый файл данных и тестовая спецификация выглядят следующим образом:

...
it('Test the drop file behaviour', () => { 
    const appWrapper = mount(<App />);0
    const mapComponent = appWrapper.find('MapComponent');
    expect(mapComponent.instance().olMap.getLayers().getArray() [1].getSource().getFeatures()).to.have.lengthOf(0);
    const mockFeature = new GeoJSON().readFeatures(testFeature);
    expect(mapComponent).to.have.length(1);
    
    mapComponent.instance().dragAndDropInteraction.dispatchEvent({
        type: 'addfeatures',
        features: mockFeature
    });
expect(mapComponent.instance().olMap.getLayers().getArray()   [1].getSource().getFeatures()).to.have.lengthOf(1);
    
    const mapCentre = mockFeature[0].getProperties().centre
    setTimeout(() => {               expect(mapComponent.instance().olMap.getView().getCenter()).to.deep. equal(mapCentre);
    }, 3000);
});

В нашей тестовой спецификации мы инициализируем оболочку Enzyme нашего MapComponent методом Enzyme mount. Мы переходим к нашему olMap объекту OpenLayers и expect нашему «uploadLayer» имеем 0 функций. Мы считываем функцию GeoJSON и преобразуем ее в объект функции OpenLayers. Мы выбираем наш dragAndDropInteraction и позволяем ему запускать событие перетаскивания файла с проанализированной геометрией в массиве. В этом случае я использую функцию dispatchEvent OpenLayers, а не simulate, поскольку пользовательский тип события addfeatures отсутствует в Enzyme. После того, как событие было отправлено, мы, наконец, ожидаем, что массив функций «uploadLayer» будет иметь 1 функцию. Мы узнаем, что карта переместилась в центр объекта, проверяя карту view, ожидая, что ее центр будет таким же, как у загруженного тестового объекта, через 3 секунды, потому что нам нужно дождаться окончания двухсекундной анимации. Мы можем создать еще одну тестовую спецификацию для нашей кнопки очистки функций. Мы могли бы добавить к слою две функции, смоделировать событие щелчка и, наконец, ожидать от слоя пустой массив функций. После добавления этой последней спецификации наш набор тестов выглядит так:

Теперь мы готовы запустить наши тесты. И результаты удивляют 😁.все тесты ПРОШЕЛ!! 🎉

Если вы добрались до этого места и следили за учебными пособиями, прежде всего большое спасибо, я надеюсь, что вы нашли это полезным так же, как и я. Как я сказал в начале, я не вижу много примеров тестов компонентов OpenLayers React, и я был бы счастлив, если бы этот небольшой вклад помог кому-то еще, кто увлекается картами, как я.