From a15b1c8a6256f39f09dc257fe159ea7b261773db Mon Sep 17 00:00:00 2001 From: Amon Caldas Date: Mon, 25 Oct 2021 13:52:04 +0200 Subject: [PATCH] test: await for app view/data load before proceeding with the test --- tests/integration/specs/AppRender.spec.js | 66 ++++++----- tests/integration/specs/BuildMapData.spec.js | 76 ++++++------- tests/integration/specs/MapRender.spec.js | 53 +++++---- tests/integration/specs/OrsApiRunner.spec.js | 111 ++++++++----------- 4 files changed, 142 insertions(+), 164 deletions(-) diff --git a/tests/integration/specs/AppRender.spec.js b/tests/integration/specs/AppRender.spec.js index 75fe25a6..1663a13c 100755 --- a/tests/integration/specs/AppRender.spec.js +++ b/tests/integration/specs/AppRender.spec.js @@ -2,6 +2,10 @@ import AppLoader from '@/app-loader' import AppRootComponent from '@/App' import store from '@/store/store' +// Solves the 'RegeneratorRuntime is not defined' issue according to +// https://stackoverflow.com/questions/28976748/regeneratorruntime-is-not-defined +import '@babel/polyfill' + describe('App rendering', () => { it('should render app initial page', (done) => { let appLoader = new AppLoader() @@ -77,39 +81,43 @@ describe('App rendering', () => { }) }) - it('should render app in embed mode', (done) => { - let appLoader = new AppLoader() - appLoader.loadApp(AppRootComponent, '#app', '').then(vueInstance => { - vueInstance.appHooks.loadRegisteredHooks() - vueInstance.appHooks.run('appLoaded', vueInstance) + it('should render app in embed mode', async (done) => { + + let vueInstance = await new AppLoader().loadApp(AppRootComponent, '#app', '') - vueInstance.$nextTick(() => { - let appContent = vueInstance.$el.querySelector('.app-content') - expect(appContent).toBeDefined() - expect(appContent).not.toBeNull() + // Switch the application to embed mode + store.commit('embed', true) + + vueInstance.appHooks.loadRegisteredHooks() + vueInstance.appHooks.run('appLoaded', vueInstance) - let mapView = vueInstance.$el.querySelector('#map-view') - expect(mapView).toBeDefined() - expect(mapView).not.toBeNull() - - appContent.__vue__.$nextTick(() => { - // Switch the application to embed mode - store.commit('embed', true) + let appContent = vueInstance.$el.querySelector('.app-content') + expect(appContent).toBeDefined() + expect(appContent).not.toBeNull() - setTimeout(() => { - let simplePlaceSearch = appContent.querySelector('.simple-place-search') - expect(simplePlaceSearch).toBeNull() // in embed mode, simple place search must not be visible + let mapView = vueInstance.$el.querySelector('#map-view') + expect(mapView).toBeDefined() + expect(mapView).not.toBeNull() + + appContent.__vue__.$nextTick(() => { + // In embed mode, simple place search and other components must not be visible + expect(appContent.querySelector('.my-location-floating-menu')).toBeNull() + expect(appContent.querySelector('.fit-all-features')).toBeNull() + expect(appContent.querySelector('.over-brand')).toBeNull() + expect(appContent.querySelector('#polyline-measure-control')).toBeNull() + expect(appContent.querySelector('.simple-place-search')).toBeNull() - // in embed mode, view on ors button must be visible - let viewOnOrs = appContent.querySelector('.view-on-ors') - expect(viewOnOrs).toBeDefined() - expect(viewOnOrs).not.toBeNull() - done() - }, 1000) - }) - }) - }).catch ( err => { - done.fail(err) + // The decision about rendering or not some leaflet or third-part components + // is made on mount or created cycle. As we are setting the embed more after the + // app load cycle, then this check is not working. Another strategy has to be found + // expect(appContent.querySelector('.leaflet-draw')).toBeNull() + // expect(appContent.querySelector('.leaflet-control-zoom')).toBeNull() + + // In embed mode, view-on-ors button must be visible + let viewOnOrs = appContent.querySelector('.view-on-ors') + expect(viewOnOrs).toBeDefined() + expect(viewOnOrs).not.toBeNull() + done() }) }) }) diff --git a/tests/integration/specs/BuildMapData.spec.js b/tests/integration/specs/BuildMapData.spec.js index 78ff7405..24c7609b 100755 --- a/tests/integration/specs/BuildMapData.spec.js +++ b/tests/integration/specs/BuildMapData.spec.js @@ -9,55 +9,43 @@ import Place from '@/models/place' import store from '@/store/store' describe('Build map mapViewData', () => { - it('should build directions mapViewData', (done) => { - new AppLoader().fetchApiInitialData().then(() => { - expect(store.getters.mapSettings.apiKey).toBeDefined() - store.commit('mode', constants.modes.directions) - let places = [] + it('should build directions mapViewData', async (done) => { + await new AppLoader().fetchApiInitialData() + expect(store.getters.mapSettings.apiKey).toBeDefined() + store.commit('mode', constants.modes.directions) + let places = [] - for (let key in buildMapData.directionsMapData.content.metadata.query.coordinates) { - let coordinates = buildMapData.directionsMapData.content.metadata.query.coordinates[key] - places.push(new Place(coordinates[1], coordinates[0])) - } + for (let key in buildMapData.directionsMapData.content.metadata.query.coordinates) { + let coordinates = buildMapData.directionsMapData.content.metadata.query.coordinates[key] + places.push(new Place(coordinates[1], coordinates[0])) + } - let filters = {} - OrsParamsParser.setFilters(filters, OrsMapFilters, constants.services.directions) - - MapViewDataBuilder.buildMapData(buildMapData.directionsMapData, places, filters).then((mapViewData) => { - expect(mapViewData).toBeDefined() - expect(mapViewData).toBeInstanceOf(MapViewData) - done() - }).catch(result => { - done.fail(result) - }) - }).catch(result => { - done.fail(result) - }) + let filters = {} + OrsParamsParser.setFilters(filters, OrsMapFilters, constants.services.directions) + + let mapViewData = await MapViewDataBuilder.buildMapData(buildMapData.directionsMapData, places, filters) + expect(mapViewData).toBeDefined() + expect(mapViewData).toBeInstanceOf(MapViewData) + done() }) - it('should build isochrones mapViewData', (done) => { - new AppLoader().fetchApiInitialData().then(() => { - expect(store.getters.mapSettings.apiKey).toBeDefined() - store.commit('mode', constants.modes.directions) - let places = [] + it('should build isochrones mapViewData', async (done) => { + await new AppLoader().fetchApiInitialData() + expect(store.getters.mapSettings.apiKey).toBeDefined() + store.commit('mode', constants.modes.directions) + let places = [] - for (let key in buildMapData.directionsMapData.content.metadata.query.locations) { - let coordinates = buildMapData.directionsMapData.content.metadata.query.locations[key] - places.push(new Place(coordinates[1], coordinates[0])) - } + for (let key in buildMapData.directionsMapData.content.metadata.query.locations) { + let coordinates = buildMapData.directionsMapData.content.metadata.query.locations[key] + places.push(new Place(coordinates[1], coordinates[0])) + } - let filters = {} - OrsParamsParser.setFilters(filters, OrsMapFilters, constants.services.isochrones) - - MapViewDataBuilder.buildMapData(buildMapData.isochronesMapData, places, filters).then((mapViewData) => { - expect(mapViewData).toBeDefined() - expect(mapViewData).toBeInstanceOf(MapViewData) - done() - }).catch(result => { - console.log(result) - }) - }).catch(result => { - console.log(result) - }) + let filters = {} + OrsParamsParser.setFilters(filters, OrsMapFilters, constants.services.isochrones) + + let mapViewData = await MapViewDataBuilder.buildMapData(buildMapData.isochronesMapData, places, filters) + expect(mapViewData).toBeDefined() + expect(mapViewData).toBeInstanceOf(MapViewData) + done() }) }) diff --git a/tests/integration/specs/MapRender.spec.js b/tests/integration/specs/MapRender.spec.js index b5c00b9a..2313eaf2 100755 --- a/tests/integration/specs/MapRender.spec.js +++ b/tests/integration/specs/MapRender.spec.js @@ -9,34 +9,31 @@ import AppLoader from '@/app-loader' import store from '@/store/store' describe('Map render', () => { - it('should render map-view component', (done) => { - new AppLoader().fetchApiInitialData().then(() => { - const MapConstructor = PreparedVue.extend(MapView) - let props = { - initialZoom: appConfig.initialZoomLevel, - avoidPolygons: [], - mapViewData: new MapViewData(), - center: defaultMapSettings.mapCenter, - showPopups: false, - height: 900, - fitBounds: true, - showControls: true, - shrunk: false, - mode: constants.modes.place, - supportsDrawingTool: true, - routingProfileIcon: null - } - - let i18n = I18nBuilder.build() - var mapInstance = new MapConstructor({ propsData: props, i18n: i18n, store: store}) - const vm = mapInstance.$mount() + it('should render map-view component', async (done) => { + await new AppLoader().fetchApiInitialData() + const MapConstructor = PreparedVue.extend(MapView) + let props = { + initialZoom: appConfig.initialZoomLevel, + avoidPolygons: [], + mapViewData: new MapViewData(), + center: defaultMapSettings.mapCenter, + showPopups: false, + height: 900, + fitBounds: true, + showControls: true, + shrunk: false, + mode: constants.modes.place, + supportsDrawingTool: true, + routingProfileIcon: null + } - let mapView = vm.$el.querySelector('#map-view') - expect(mapView).toBeDefined() - expect(mapView).not.toBeNull() - done() - }).catch(result => { - done.fail(result) - }) + let i18n = I18nBuilder.build() + var mapInstance = new MapConstructor({ propsData: props, i18n: i18n, store: store}) + const vm = mapInstance.$mount() + + let mapView = vm.$el.querySelector('#map-view') + expect(mapView).toBeDefined() + expect(mapView).not.toBeNull() + done() }) }) diff --git a/tests/integration/specs/OrsApiRunner.spec.js b/tests/integration/specs/OrsApiRunner.spec.js index 4982b5f9..1449e15e 100755 --- a/tests/integration/specs/OrsApiRunner.spec.js +++ b/tests/integration/specs/OrsApiRunner.spec.js @@ -6,83 +6,68 @@ import store from '@/store/store' import lodash from 'lodash' describe('OrsApiRunner test', () => { - it('fetch API data', (done) => { - new AppLoader().fetchApiInitialData().then(() => { - expect(store.getters.mapSettings.apiKey).toBeDefined() - done() - }).catch(result => { - done.fail(result) - }) + it('fetch API data', async (done) => { + await new AppLoader().fetchApiInitialData() + expect(store.getters.mapSettings.apiKey).toBeDefined() + done() }) - it('should fetch API data and calculate a route', (done) => { - new AppLoader().fetchApiInitialData().then(() => { - expect(store.getters.mapSettings.apiKey).toBeDefined() - let places = [mockupPlaces.FromToDirectionsPlaces.from, mockupPlaces.FromToDirectionsPlaces.to] - store.commit('mode', constants.modes.directions) + it('should fetch API data and calculate a route', async (done) => { + await new AppLoader().fetchApiInitialData() + expect(store.getters.mapSettings.apiKey).toBeDefined() + let places = [mockupPlaces.FromToDirectionsPlaces.from, mockupPlaces.FromToDirectionsPlaces.to] + store.commit('mode', constants.modes.directions) - Directions(places).then(response => { - expect(response.content.features.length).toEqual(1) - expect(response.content.features[0].geometry.type).toEqual('LineString') - done() - }).catch(result => { - let error =lodash.get(result, 'response.response.body.error') || result.response - done.fail(error) - }) + Directions(places).then(response => { + expect(response.content.features.length).toEqual(1) + expect(response.content.features[0].geometry.type).toEqual('LineString') + done() }).catch(result => { - done.fail(result) - }) + let error =lodash.get(result, 'response.response.body.error') || result.response + done.fail(error) + }) }) - it('should fetch API data and calculate isochrone', (done) => { - new AppLoader().fetchApiInitialData().then(() => { - expect(store.getters.mapSettings.apiKey).toBeDefined() - let places = [mockupPlaces.isochroneSinglePlace] - store.commit('mode', constants.modes.isochrones) + it('should fetch API data and calculate isochrone', async (done) => { + await new AppLoader().fetchApiInitialData() + expect(store.getters.mapSettings.apiKey).toBeDefined() + let places = [mockupPlaces.isochroneSinglePlace] + store.commit('mode', constants.modes.isochrones) - Isochrones(places).then(response => { - expect(response.content.features.length).toEqual(1) - expect(response.content.features[0].geometry.type).toEqual('Polygon') - done() - }).catch(result => { - let error = lodash.get(result, 'response.response.body.error') || result.response - done.fail(error) - }) + Isochrones(places).then(response => { + expect(response.content.features.length).toEqual(1) + expect(response.content.features[0].geometry.type).toEqual('Polygon') + done() }).catch(result => { - done.fail(result) - }) + let error = lodash.get(result, 'response.response.body.error') || result.response + done.fail(error) + }) }) - it('should fetch API data and find places', (done) => { - new AppLoader().fetchApiInitialData().then(() => { - expect(store.getters.mapSettings.apiKey).toBeDefined() - store.commit('mode', constants.modes.place) + it('should fetch API data and find places', async (done) => { + await new AppLoader().fetchApiInitialData() + expect(store.getters.mapSettings.apiKey).toBeDefined() + store.commit('mode', constants.modes.place) - PlacesSearch('Heidelberg').then(places => { - expect(places.length).toBeGreaterThan(10) - done() - }).catch(result => { - let error = lodash.get(result, 'response.response.body.error') || result.response || result - done.fail(error) - }) + PlacesSearch('Heidelberg').then(places => { + expect(places.length).toBeGreaterThan(10) + done() }).catch(result => { - done.fail(result) - }) + let error = lodash.get(result, 'response.response.body.error') || result.response || result + done.fail(error) + }) }) - it('should fetch API data and reverse geocode', (done) => { - new AppLoader().fetchApiInitialData().then(() => { - expect(store.getters.mapSettings.apiKey).toBeDefined() - store.commit('mode', constants.modes.place) + it('should fetch API data and reverse geocode', async (done) => { + await new AppLoader().fetchApiInitialData() + expect(store.getters.mapSettings.apiKey).toBeDefined() + store.commit('mode', constants.modes.place) - ReverseGeocode(41.060067961642716, -8.543758392333986).then(places => { - expect(places.length).toBeGreaterThan(9) - done() - }).catch(result => { - let error = lodash.get(result, 'response.response.body.error') || result.response - done.fail(error) - }) + ReverseGeocode(41.060067961642716, -8.543758392333986).then(places => { + expect(places.length).toBeGreaterThan(9) + done() }).catch(result => { - done.fail(result) - }) + let error = lodash.get(result, 'response.response.body.error') || result.response + done.fail(error) + }) }) })