test: add place-input test

src/support/utils.js

@@ -239,6 +239,12 @@ const Utils = {
     return clone
   },
 
+  merge (original, changes) {
+    let clone = Utils.clone(original)
+    let merged = {...clone, ...changes}
+    return merged
+  },
+
   /**
    * Compress a text to a unit 8 array
    * @param {*} txt

tests/integration/specs/OrsApiRunner.spec.js

@@ -14,7 +14,7 @@ describe('OrsApiRunner test', () => {
       done.fail(result)
     }) 
   })
-  it('fetch API data and calculate a route', (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]
@@ -33,7 +33,7 @@ describe('OrsApiRunner test', () => {
     }) 
   })
 
-  it('fetch API data and calculate isochrone', (done) => {
+  it('should fetch API data and calculate isochrone', (done) => {
     new AppLoader().fetchApiInitialData().then(() => {
       expect(store.getters.mapSettings.apiKey).toBeDefined() 
       let places = [mockupPlaces.isochroneSinglePlace]
@@ -52,7 +52,7 @@ describe('OrsApiRunner test', () => {
     }) 
   })
 
-  it('fetch API data and find places', (done) => {
+  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)      
@@ -69,7 +69,7 @@ describe('OrsApiRunner test', () => {
     }) 
   })
 
-  it('fetch API data and reverse geocode', (done) => {
+  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)      

tests/integration/specs/PlaceInput.spec.js

@@ -0,0 +1,74 @@
+import { mount } from '@vue/test-utils'
+import { render } from '@vue/server-test-utils'
+import PlaceInput from '@/fragments/forms/place-input/PlaceInput.vue'
+import I18nBuilder from '@/i18n/i18n-builder'
+import AppLoader from '@/app-loader'
+import Utils from '@/support/utils'
+import Place from '@/models/place'
+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('Place-input', () => {
+  var i18n = I18nBuilder.build()
+
+  var placeInputProps = {
+    index: 0,
+    isLast: false,
+    box: true,
+    model: new Place(),
+    single: true,
+    autofocus: false,
+    supportDirections: true,
+    supportDirectRouting: false,
+    supportSearch: true,
+    pickPlaceSupported: false,
+    directionsButtonTooltip: true,
+    directionsButtonTooltipPosition: 'right',
+    idPostfix: '',
+    height: 30,
+    mb: 0,
+    disabled: false
+  }  
+
+  it('should render place-input component with `find a place` label', async (done) => {
+    await new AppLoader().fetchApiInitialData()
+    const wrapper = await render(PlaceInput, {propsData: placeInputProps, i18n: i18n, store: store })
+    expect(wrapper.text()).toContain(i18n.messages[i18n.locale].placeInput.findAPlace)
+    done()
+  })
+
+  it('should render place-input component with `startingPlace`', async (done) => {
+    await new AppLoader().fetchApiInitialData()
+    let placeInputParams = Utils.merge(placeInputProps, {single: false, model: new Place(10,14)})
+    const wrapper = await render(PlaceInput, {propsData: placeInputParams, i18n: i18n, store: store })
+    expect(wrapper.text()).toContain(i18n.messages[i18n.locale].placeInput.startingPlace)
+    done()
+  })
+
+  it('should show suggestions when a place name is inputted', async (done) => {
+    placeInputProps.isLast = false
+    await new AppLoader().fetchApiInitialData()
+    const wrapper = mount(PlaceInput, {propsData: placeInputProps, i18n: i18n, store: store })   
+
+    expect(wrapper.contains('.place-input')).toBe(true)
+    expect(wrapper.findComponent(PlaceInput).exists()).toBe(true)
+
+    const textInput = wrapper.find('input[type="text"]')    
+    await textInput.setValue('heidelberg')
+    await textInput.trigger('keyup')
+
+    // When the input has completed the autocomplete task
+    wrapper.vm.$on('autocompleted', () => {
+      // Wait a bit so that suggestions are rendered
+      setTimeout(() => {
+        expect(wrapper.findAll('.place-suggestion').length).toBeGreaterThan(2)
+        expect(wrapper.vm.localModel.suggestions.length).toBeGreaterThan(2)
+        expect(wrapper.vm.placeSuggestions.length).toBeGreaterThan(2)
+        done()        
+      }, 200)
+    })
+  })
+})

tests/unit/specs/place-input.spec.js

@@ -1,12 +1,11 @@
-import { mount } from '@vue/test-utils'
-import { render } from '@vue/server-test-utils'
 import PlaceInput from '@/fragments/forms/place-input/PlaceInput.vue'
+import { render } from '@vue/server-test-utils'
 import I18nBuilder from '@/i18n/i18n-builder'
-import Place from '@/models/place'
 import AppLoader from '@/app-loader'
+import Place from '@/models/place'
 import store from '@/store/store'
 
-// Solve the 'RegeneratorRuntime is not defined' issue according to
+// Solves the 'RegeneratorRuntime is not defined' issue according to
 // https://stackoverflow.com/questions/28976748/regeneratorruntime-is-not-defined
 import '@babel/polyfill'
 
@@ -38,27 +37,4 @@ describe('Place-input', () => {
     expect(wrapper.text()).toContain('Destination')
     done()
   })
-
-  it('should show suggestions when a place name is inputted', async (done) => {
-    await new AppLoader().fetchApiInitialData()
-    const wrapper = mount(PlaceInput, {propsData: placeInputProps, i18n: i18n, store: store })   
-
-    expect(wrapper.contains('.place-input')).toBe(true)
-    expect(wrapper.findComponent(PlaceInput).exists()).toBe(true)
-
-    const textInput = wrapper.find('input[type="text"]')    
-    await textInput.setValue('heidelberg')
-    await textInput.trigger('keyup')
-
-    // When the input has completed the autocomplete task
-    wrapper.vm.$on('autocompleted', () => {
-      // Wait a bit so that suggestions are rendered
-      setTimeout(() => {
-        expect(wrapper.findAll('.place-suggestion').length).toBeGreaterThan(2)
-        expect(wrapper.vm.localModel.suggestions.length).toBeGreaterThan(2)
-        expect(wrapper.vm.placeSuggestions.length).toBeGreaterThan(2)
-        done()        
-      }, 200)
-    })
-  })
 })