Вторая часть истории начинается там же, где я ее закончил, и предполагает, что у вас уже есть тестовая рабочая среда и приложение 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, и я был бы счастлив, если бы этот небольшой вклад помог кому-то еще, кто увлекается картами, как я.