How to test Open Layers React components with Mocha (part II)
The second part of the story starts right where part I finished and assumes you already have a test workbench and an OpenLayers map React app in place. If it’s not the case you can complete part I and come back here or you can clone/download the GitHub repository with the finished part I branch from here.
1. Adding the map interaction feature
As an example I am choosing the drag and drop interaction of OpenLayers, allowing the map’s behaviour test when loading external data. As test data I made some GeoJSON features and saved them as .json files in a test_data folder in our app root directory, you can create your own test data here, the projection of the exported features is in LatLong (WGS84). The Openlayers’ drag and drop interaction in our MapComponent will require the storage of the uploaded features in memory. We will also create a button to remove all the uploaded features from the map. We will store an array of the GeoJSON uploaded features in our state, when a drop event is recorded from MapComponent we will invoke the function uploadFeature, passed from the parent (App) as the onUploadFeature prop. This function will set the new state on the App component and the props on our map will automatically update. The map will parse the GeoJSON back to an OpenLayers feature object, adding it to the uploadLayer layer and setting the map’s view to its centre. The clear button will simply pass an empty array to the App state, clearing the layer of all its features. After the implementation of these functionalities the map should look like this:
And below you can find the code for both App.jsand Map.js
2. Testing our new features
In our first new test spec we will create a GeoJSON object in a separate file, we can call it testFeature.js and it will be exported as a constant. making it usable in our test code. The data test file and the test spec look like this:
...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);
});
In our test spec we initialise the Enzyme wrapper of our MapComponent with the Enzyme mount method. We reach down to our olMap OpenLayers object and we expect our ‘uploadLayer’ to have 0 features. We read in the GeoJSON feature and transform it in an OpenLayers feature object. We select our dragAndDropInteraction and let it fire a drop file event with the parsed geometry in an array. In this case I use the dispatchEvent function of OpenLayers, as opposed to simulate since the custom event type addfeatures is not present in Enzyme. After the event it’s been dispatched we finally expect the ‘uploadLayer’ features array to have 1 feature. We will know that the map panned to the centre of the feature checking the map view, expecting its centre to be the same of the uploaded test feature, after 3 seconds because we have to wait for the 2 seconds animation to finish. We can create another test spec for our clear features button. We could add two features to the layer and simulate the click event and finally expect an empty array of features from the layer. After having added this last spec this is how our test suite looks:
We are now ready to run our tests. And the results are surprising 😁.all tests PASS!! 🎉
If you got till here and followed the tutorials first of all thank you very much, I hope you found it useful as much as I did. As I said at the beginning I don’t see many examples of tests of OpenLayers React components and I’d feel happy if this this little contribution will help someone else who has a passion for maps, like me.
