sendSearchRequest updates and first unit test

Author: datKaMa

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "workbench.colorTheme": "Visual Studio Light"
+}

packages/plugins/Routing/src/components/Routing.vue

@@ -7,6 +7,7 @@
         :label="$t('common:plugins.routing.startLabel')"
         :hint="$t('common:plugins.routing.inputHint')"
         persistent-hint
+        @input="sendSearchRequest"
       >
       </v-text-field>
       <v-text-field
@@ -161,6 +162,7 @@ export default Vue.extend({
       'initializeTool',
       'resetCoordinates',
       'sendRequest',
+      'sendSearchRequest',
     ]),
     ...mapMutations('plugin/routing', [
       'setSelectedTravelMode',
@@ -179,7 +181,7 @@ export default Vue.extend({
 })
 </script>
 
-<style>
+<style lang="scss">
 .polar-routing-menu {
   display: flex;
   flex-direction: column;

packages/plugins/Routing/src/store/actions.ts

@@ -19,17 +19,17 @@ const actions: PolarActionTree<RoutingState, RoutingGetters> = {
     state,
   }) {
     console.error(configuration)
-    dispatch('initializeConfigStyle')
+    dispatch('initializeConfigStyle') // testen
     drawLayer = createDrawLayer(drawSource)
-    map.addLayer(drawLayer)
+    map.addLayer(drawLayer) // testen, ob es passiert ist
     console.error(map.getLayers().getArray())
     map.on('click', function (event) {
       const formattedCoordinate = event.coordinate
       console.error('formatierte Koordinate: ' + formattedCoordinate)
 
       // prüfen, ob im state schon startAddress vorhanden ist - falls ja, die neue Koordinate als endAddress speichern
       if (state.start.length === 0) {
-        commit('setStart', formattedCoordinate)
+        commit('setStart', formattedCoordinate) // wurde setStart als commit aufgerufen und meine formatierte Coordinate reingeschrieben? Im State überprüfen
       } else if (state.end.length === 0) {
         commit('setEnd', formattedCoordinate)
       }
@@ -84,7 +84,7 @@ const actions: PolarActionTree<RoutingState, RoutingGetters> = {
     console.error('Die übergebene URL: ', url)
     const fetchDirections = async () => {
       try {
-        const response = await fetch( url, {
+        const response = await fetch(url, {
           method: 'POST',
           headers: {
             'Content-Type': 'application/json',
@@ -123,6 +123,28 @@ const actions: PolarActionTree<RoutingState, RoutingGetters> = {
     }
     fetchDirections()
   },
+  createSearchUrl(searchInput) {
+    const url =
+      'https://geodienste.hamburg.de/HH_WFS_GAGES?service=WFS&request=GetFeature&version=2.0.0&StoredQuery_ID=findeStrasse&strassenname=' +
+      searchInput
+    return url
+  },
+  async sendSearchRequest({ dispatch, state }, searchInput) {
+    const url = dispatch('createSearchUrl', searchInput)
+    if (searchInput.length >= state.minLength) {
+      try {
+        const response = await fetch(url, {
+          method: 'GET',
+        })
+        if (!response.ok) {
+          throw new Error(`HTTP error! Status: ${response.status}`)
+        }
+        console.error(response.text())
+      } catch (error) {
+        console.error('send Search Error', error)
+      }
+    }
+  },
   drawRoute({ rootGetters: { configuration }, state }) {
     console.error(`stored response: `, state.searchResponseData)
     const transformedCoordinates =

packages/plugins/Routing/src/store/state.ts

@@ -1,17 +1,19 @@
 import { RoutingState } from '../types'
-
-export const getInitialState = (): RoutingState => ({
+const state = {
   start: [],
   startAddress: '',
   end: [],
-  endAddess: '',
+  endAddress: '',
   selectedTravelMode: '',
   selectableTravelModes: [
     { key: 'car', localKey: 'common:plugins.routing.travelMode.car' },
     { key: 'hgv', localKey: 'common:plugins.routing.travelMode.hgv' },
     { key: 'bike', localKey: 'common:plugins.routing.travelMode.bike' },
     { key: 'walking', localKey: 'common:plugins.routing.travelMode.walking' },
-    {key: 'wheelchair', localKey: 'common:plugins.routing.travelMode.wheelchair',},
+    {
+      key: 'wheelchair',
+      localKey: 'common:plugins.routing.travelMode.wheelchair',
+    },
   ],
   displayPreferences: false,
   selectedPreference: '',
@@ -46,7 +48,17 @@ export const getInitialState = (): RoutingState => ({
     },
   ],
   serviceID: '',
-  numberOfKeysToTriggerSearch: 3,
+  queryParameters: {
+    searchAddress: true,
+    searchStreets: true,
+    searchHouseNumbers: true,
+  },
+  searchInput: '',
+  addressSearchUrl: '',
+  minLength: 3,
+  waitMs: 300,
   searchResponseData: {},
   mousePosition: [],
-})
+}
+
+export const getInitialState = (): RoutingState => state

packages/plugins/Routing/src/tests/routing.spec.ts

@@ -0,0 +1,27 @@
+import { mount } from '@vue/test-utils'
+import createTestMountParameters, {
+  MockParameters,
+} from '@polar/lib-test-mount-parameters'
+import { Routing } from '../components/index'
+import { makeStoreModule } from '../store/index'
+
+describe('plugin-routing', () => {
+  let testParameters: MockParameters
+
+  beforeEach(() => {
+    testParameters = createTestMountParameters()
+    // täuscht die Erstellung des Stores vor
+    testParameters.store.registerModule(
+      ['plugin', 'routing'],
+      makeStoreModule()
+    )
+  })
+
+  describe('components', () => {
+    it('should define all elements', () => {
+      const wrapper = mount(Routing, { ...testParameters }) // hier wird das mounten des Routing components vorgetäuscht
+      const vBtn = wrapper.findAllComponents({ name: 'v-btn' })
+      expect(vBtn.length).toBe(3)
+    })
+  })
+})