From d9e553b800bc4bb48450472c2d50a74ead13c0ae Mon Sep 17 00:00:00 2001
From: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>
Date: Sat, 30 Jan 2021 00:18:26 +0100
Subject: [PATCH 01/14] - backend implementation location query

---
 backend/src/middleware/permissionsMiddleware.js  |  1 +
 backend/src/schema/resolvers/locations.js        | 11 +++++++++++
 backend/src/schema/resolvers/users/location.js   | 10 ++++++++++
 backend/src/schema/types/{ => type}/Location.gql |  9 +++++++++
 4 files changed, 31 insertions(+)
 rename backend/src/schema/types/{ => type}/Location.gql (71%)

diff --git a/backend/src/middleware/permissionsMiddleware.js b/backend/src/middleware/permissionsMiddleware.js
index 6fe82951e..dae6f0e48 100644
--- a/backend/src/middleware/permissionsMiddleware.js
+++ b/backend/src/middleware/permissionsMiddleware.js
@@ -121,6 +121,7 @@ export default shield(
       userData: isAuthenticated,
       MyInviteCodes: isAuthenticated,
       isValidInviteCode: allow,
+      queryLocations: isAuthenticated,
     },
     Mutation: {
       '*': deny,
diff --git a/backend/src/schema/resolvers/locations.js b/backend/src/schema/resolvers/locations.js
index be72001f7..fa0feafa1 100644
--- a/backend/src/schema/resolvers/locations.js
+++ b/backend/src/schema/resolvers/locations.js
@@ -1,4 +1,6 @@
+import { UserInputError } from 'apollo-server'
 import Resolver from './helpers/Resolver'
+import { queryLocations } from './users/location'
 
 export default {
   Location: {
@@ -16,4 +18,13 @@ export default {
       ],
     }),
   },
+  Query: {
+    queryLocations: async (object, args, context, resolveInfo) => {
+      try {
+        return queryLocations(args)
+      } catch (e) {
+        throw new UserInputError(e.message)
+      }
+    },
+  },
 }
diff --git a/backend/src/schema/resolvers/users/location.js b/backend/src/schema/resolvers/users/location.js
index b58d8d1aa..70372e548 100644
--- a/backend/src/schema/resolvers/users/location.js
+++ b/backend/src/schema/resolvers/users/location.js
@@ -137,4 +137,14 @@ const createOrUpdateLocations = async (userId, locationName, session) => {
   })
 }
 
+export const queryLocations = async ({place, lang}) => {
+  const res = await fetch(`https://api.mapbox.com/geocoding/v5/mapbox.places/${place}.json?access_token=${CONFIG.MAPBOX_TOKEN}&types=region,place,country&language=${lang}`)
+  console.log(res)
+  if (!res || !res.features) {
+    // Return empty array if no location found or error occurred
+    return []
+  }
+  return res.features
+}
+
 export default createOrUpdateLocations
diff --git a/backend/src/schema/types/Location.gql b/backend/src/schema/types/type/Location.gql
similarity index 71%
rename from backend/src/schema/types/Location.gql
rename to backend/src/schema/types/type/Location.gql
index 78bc07656..d80c9bebb 100644
--- a/backend/src/schema/types/Location.gql
+++ b/backend/src/schema/types/type/Location.gql
@@ -16,3 +16,12 @@ type Location {
   parent: Location @cypher(statement: "MATCH (this)-[:IS_IN]->(l:Location) RETURN l")
 }
 
+type Location2 {
+  id: ID!
+  place_name: String!
+}
+
+type Query {
+  queryLocations(place: String!, lang: String!): [Location2]!
+}
+

From c0b25040c3e3d1547b02c8ad9c47bbc11866a8bd Mon Sep 17 00:00:00 2001
From: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>
Date: Sat, 30 Jan 2021 00:18:55 +0100
Subject: [PATCH 02/14] - frontend implementation location query - remove
 mapboxtoken from .env template

---
 webapp/.env.template            |  1 -
 webapp/graphql/location.js      | 10 +++++++
 webapp/pages/settings/index.vue | 47 +++++++++++----------------------
 3 files changed, 25 insertions(+), 33 deletions(-)
 create mode 100644 webapp/graphql/location.js

diff --git a/webapp/.env.template b/webapp/.env.template
index 198452e27..1acad49b4 100644
--- a/webapp/.env.template
+++ b/webapp/.env.template
@@ -1,4 +1,3 @@
-MAPBOX_TOKEN="pk.eyJ1IjoiYnVzZmFrdG9yIiwiYSI6ImNraDNiM3JxcDBhaWQydG1uczhpZWtpOW4ifQ.7TNRTO-o9aK1Y6MyW_Nd4g"
 SENTRY_DSN_WEBAPP=
 COMMIT=
 PUBLIC_REGISTRATION=false
diff --git a/webapp/graphql/location.js b/webapp/graphql/location.js
new file mode 100644
index 000000000..ba47a2983
--- /dev/null
+++ b/webapp/graphql/location.js
@@ -0,0 +1,10 @@
+import gql from 'graphql-tag'
+
+export const queryLocations = () => gql`
+  query($place: String!, $lang: String!) {
+    queryLocations(place: $place, lang: $lang) {
+      place_name
+      id
+    }
+  }
+`
\ No newline at end of file
diff --git a/webapp/pages/settings/index.vue b/webapp/pages/settings/index.vue
index 9766ab81c..be1c4800f 100644
--- a/webapp/pages/settings/index.vue
+++ b/webapp/pages/settings/index.vue
@@ -41,17 +41,15 @@
 
 <script>
 import { mapGetters, mapMutations } from 'vuex'
-import { CancelToken } from 'axios'
 import UniqueSlugForm from '~/components/utils/UniqueSlugForm'
 import { updateUserMutation } from '~/graphql/User'
+import { queryLocations } from '~/graphql/location'
 
 let timeout
-const mapboxToken = process.env.MAPBOX_TOKEN
 
 export default {
   data() {
     return {
-      axiosSource: null,
       cities: [],
       loadingData: false,
       loadingGeo: false,
@@ -123,51 +121,36 @@ export default {
       clearTimeout(timeout)
       timeout = setTimeout(() => this.requestGeoData(value), 500)
     },
-    processCityResults(res) {
-      if (!res || !res.data || !res.data.features || !res.data.features.length) {
+    processLocationsResult(places) {
+      if (!places.length) {
         return []
       }
-      const output = []
-      res.data.features.forEach((item) => {
-        output.push({
-          label: item.place_name,
-          value: item.place_name,
-          id: item.id,
+      const result = []
+      places.forEach((place) => {
+        result.push({
+          label: place.place_name,
+          value: place.place_name,
+          id: place.id,
         })
       })
 
-      return output
+      return result
     },
-    requestGeoData(e) {
-      if (this.axiosSource) {
-        // cancel last request
-        this.axiosSource.cancel()
-      }
-
+    async requestGeoData(e) {
       const value = e.target ? e.target.value.trim() : ''
       if (value === '' || value.length < 3) {
         this.cities = []
         return
       }
       this.loadingGeo = true
-      this.axiosSource = CancelToken.source()
 
       const place = encodeURIComponent(value)
       const lang = this.$i18n.locale()
 
-      this.$axios
-        .get(
-          `https://api.mapbox.com/geocoding/v5/mapbox.places/${place}.json?access_token=${mapboxToken}&types=region,place,country&language=${lang}`,
-          {
-            cancelToken: this.axiosSource.token,
-          },
-        )
-        .then((res) => {
-          this.cities = this.processCityResults(res)
-        })
-        .finally(() => {
-          this.loadingGeo = false
-        })
+      const { data: { queryLocations: res }} = await this.$apollo.query({ query: queryLocations(), variables: { place, lang } })
+      
+      this.cities = this.processLocationsResult(res)
+      this.loadingGeo = false
     },
   },
 }

From 31038c5c2afe6826f455f4cb6817bbdf89bfccf9 Mon Sep 17 00:00:00 2001
From: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>
Date: Sat, 30 Jan 2021 00:21:05 +0100
Subject: [PATCH 03/14] - lint fixes

---
 backend/src/schema/resolvers/users/location.js | 9 +++++----
 webapp/graphql/location.js                     | 2 +-
 webapp/pages/settings/index.vue                | 6 ++++--
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/backend/src/schema/resolvers/users/location.js b/backend/src/schema/resolvers/users/location.js
index 70372e548..affd3267e 100644
--- a/backend/src/schema/resolvers/users/location.js
+++ b/backend/src/schema/resolvers/users/location.js
@@ -137,11 +137,12 @@ const createOrUpdateLocations = async (userId, locationName, session) => {
   })
 }
 
-export const queryLocations = async ({place, lang}) => {
-  const res = await fetch(`https://api.mapbox.com/geocoding/v5/mapbox.places/${place}.json?access_token=${CONFIG.MAPBOX_TOKEN}&types=region,place,country&language=${lang}`)
-  console.log(res)
+export const queryLocations = async ({ place, lang }) => {
+  const res = await fetch(
+    `https://api.mapbox.com/geocoding/v5/mapbox.places/${place}.json?access_token=${CONFIG.MAPBOX_TOKEN}&types=region,place,country&language=${lang}`,
+  )
+  // Return empty array if no location found or error occurred
   if (!res || !res.features) {
-    // Return empty array if no location found or error occurred
     return []
   }
   return res.features
diff --git a/webapp/graphql/location.js b/webapp/graphql/location.js
index ba47a2983..0fa2c2a2d 100644
--- a/webapp/graphql/location.js
+++ b/webapp/graphql/location.js
@@ -7,4 +7,4 @@ export const queryLocations = () => gql`
       id
     }
   }
-`
\ No newline at end of file
+`
diff --git a/webapp/pages/settings/index.vue b/webapp/pages/settings/index.vue
index be1c4800f..3b532fc42 100644
--- a/webapp/pages/settings/index.vue
+++ b/webapp/pages/settings/index.vue
@@ -147,8 +147,10 @@ export default {
       const place = encodeURIComponent(value)
       const lang = this.$i18n.locale()
 
-      const { data: { queryLocations: res }} = await this.$apollo.query({ query: queryLocations(), variables: { place, lang } })
-      
+      const {
+        data: { queryLocations: res },
+      } = await this.$apollo.query({ query: queryLocations(), variables: { place, lang } })
+
       this.cities = this.processLocationsResult(res)
       this.loadingGeo = false
     },

From a350e40b3e488bb880ee51a8f16532df1de42a94 Mon Sep 17 00:00:00 2001
From: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>
Date: Sun, 31 Jan 2021 00:13:46 +0100
Subject: [PATCH 04/14] - backend tests

---
 .../schema/resolvers/users/location.spec.js   | 70 ++++++++++++++++++-
 1 file changed, 68 insertions(+), 2 deletions(-)

diff --git a/backend/src/schema/resolvers/users/location.spec.js b/backend/src/schema/resolvers/users/location.spec.js
index 3044e4b6f..fdbea7e17 100644
--- a/backend/src/schema/resolvers/users/location.spec.js
+++ b/backend/src/schema/resolvers/users/location.spec.js
@@ -6,7 +6,7 @@ import createServer from '../../../server'
 
 const neode = getNeode()
 const driver = getDriver()
-let authenticatedUser, mutate, variables
+let authenticatedUser, mutate, query, variables
 
 const updateUserMutation = gql`
   mutation($id: ID!, $name: String!, $locationName: String) {
@@ -16,6 +16,15 @@ const updateUserMutation = gql`
   }
 `
 
+const queryLocations = gql`
+  query($place: String!, $lang: String!) {
+    queryLocations(place: $place, lang: $lang) {
+      place_name
+      id
+    }
+  }
+`
+
 const newlyCreatedNodesWithLocales = [
   {
     city: {
@@ -76,6 +85,7 @@ beforeAll(() => {
     },
   })
   mutate = createTestClient(server).mutate
+  query = createTestClient(server).query
 })
 
 beforeEach(() => {
@@ -85,6 +95,62 @@ beforeEach(() => {
 
 afterEach(cleanDatabase)
 
+describe('Location Service',() => {
+  // Authentication
+  // TODO: unify, externalize, simplify, wtf?
+  let user
+  beforeEach(async () => {
+    user = await Factory.build('user', {
+      id: 'updating-user',
+    })
+    authenticatedUser = await user.toJson()
+  })
+  it('query Location existing', async () => {
+    variables = {
+      place: "Berlin",
+      lang: "en"
+    }
+    const result = await query({ query: queryLocations, variables })
+    expect(result.data.queryLocations).toEqual([
+      {"id": "place.14094307404564380", "place_name": "Berlin, Germany"},
+      {"id": "place.15095411613564380", "place_name": "Berlin, Maryland, United States"},
+      {"id": "place.5225018734564380", "place_name": "Berlin, Connecticut, United States"},
+      {"id": "place.16922023226564380", "place_name": "Berlin, New Jersey, United States"},
+      {"id": "place.4035845612564380", "place_name": "Berlin Township, New Jersey, United States"},
+    ])
+  })
+  it('query Location existing in different language', async () => {
+    variables = {
+      place: "Berlin",
+      lang: "de"
+    }
+    const result = await query({ query: queryLocations, variables })
+    expect(result.data.queryLocations).toEqual([
+      {"id": "place.14094307404564380", "place_name": "Berlin, Deutschland"},
+      {"id": "place.15095411613564380", "place_name": "Berlin, Maryland, Vereinigte Staaten"},
+      {"id": "place.16922023226564380", "place_name": "Berlin, New Jersey, Vereinigte Staaten"},
+      {"id": "place.10735893248465990", "place_name": "Berlin Heights, Ohio, Vereinigte Staaten"},
+      {"id": "place.1165756679564380", "place_name": "Berlin, Massachusetts, Vereinigte Staaten"},
+    ])
+  })
+  it('query Location not existing', async () => {
+    variables = {
+      place: "GbHtsd4sdHa",
+      lang: "en"
+    }
+    const result = await query({ query: queryLocations, variables })
+    expect(result.data.queryLocations).toEqual([])
+  })
+  it('query Location without a place name given', async () => {
+    variables = {
+      place: "",
+      lang: "en"
+    }
+    const result = await query({ query: queryLocations, variables })
+    expect(result.data.queryLocations).toEqual([])
+  })
+})
+
 describe('userMiddleware', () => {
   describe('UpdateUser', () => {
     let user
@@ -95,7 +161,7 @@ describe('userMiddleware', () => {
       authenticatedUser = await user.toJson()
     })
 
-    it('creates a Location node with localised city/state/country names', async () => {
+    it('creates a Location node with localized city/state/country names', async () => {
       variables = {
         ...variables,
         id: 'updating-user',

From 143dee49c8deaf62804710e657c533a8b3e12931 Mon Sep 17 00:00:00 2001
From: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>
Date: Sun, 31 Jan 2021 01:07:50 +0100
Subject: [PATCH 05/14] - lint fixes

---
 .../schema/resolvers/users/location.spec.js   | 38 +++++++++----------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/backend/src/schema/resolvers/users/location.spec.js b/backend/src/schema/resolvers/users/location.spec.js
index fdbea7e17..0dd52b3c8 100644
--- a/backend/src/schema/resolvers/users/location.spec.js
+++ b/backend/src/schema/resolvers/users/location.spec.js
@@ -95,7 +95,7 @@ beforeEach(() => {
 
 afterEach(cleanDatabase)
 
-describe('Location Service',() => {
+describe('Location Service', () => {
   // Authentication
   // TODO: unify, externalize, simplify, wtf?
   let user
@@ -107,44 +107,44 @@ describe('Location Service',() => {
   })
   it('query Location existing', async () => {
     variables = {
-      place: "Berlin",
-      lang: "en"
+      place: 'Berlin',
+      lang: 'en',
     }
     const result = await query({ query: queryLocations, variables })
     expect(result.data.queryLocations).toEqual([
-      {"id": "place.14094307404564380", "place_name": "Berlin, Germany"},
-      {"id": "place.15095411613564380", "place_name": "Berlin, Maryland, United States"},
-      {"id": "place.5225018734564380", "place_name": "Berlin, Connecticut, United States"},
-      {"id": "place.16922023226564380", "place_name": "Berlin, New Jersey, United States"},
-      {"id": "place.4035845612564380", "place_name": "Berlin Township, New Jersey, United States"},
+      { id: 'place.14094307404564380', place_name: 'Berlin, Germany' },
+      { id: 'place.15095411613564380', place_name: 'Berlin, Maryland, United States' },
+      { id: 'place.5225018734564380', place_name: 'Berlin, Connecticut, United States' },
+      { id: 'place.16922023226564380', place_name: 'Berlin, New Jersey, United States' },
+      { id: 'place.4035845612564380', place_name: 'Berlin Township, New Jersey, United States' },
     ])
   })
   it('query Location existing in different language', async () => {
     variables = {
-      place: "Berlin",
-      lang: "de"
+      place: 'Berlin',
+      lang: 'de',
     }
     const result = await query({ query: queryLocations, variables })
     expect(result.data.queryLocations).toEqual([
-      {"id": "place.14094307404564380", "place_name": "Berlin, Deutschland"},
-      {"id": "place.15095411613564380", "place_name": "Berlin, Maryland, Vereinigte Staaten"},
-      {"id": "place.16922023226564380", "place_name": "Berlin, New Jersey, Vereinigte Staaten"},
-      {"id": "place.10735893248465990", "place_name": "Berlin Heights, Ohio, Vereinigte Staaten"},
-      {"id": "place.1165756679564380", "place_name": "Berlin, Massachusetts, Vereinigte Staaten"},
+      { id: 'place.14094307404564380', place_name: 'Berlin, Deutschland' },
+      { id: 'place.15095411613564380', place_name: 'Berlin, Maryland, Vereinigte Staaten' },
+      { id: 'place.16922023226564380', place_name: 'Berlin, New Jersey, Vereinigte Staaten' },
+      { id: 'place.10735893248465990', place_name: 'Berlin Heights, Ohio, Vereinigte Staaten' },
+      { id: 'place.1165756679564380', place_name: 'Berlin, Massachusetts, Vereinigte Staaten' },
     ])
   })
   it('query Location not existing', async () => {
     variables = {
-      place: "GbHtsd4sdHa",
-      lang: "en"
+      place: 'GbHtsd4sdHa',
+      lang: 'en',
     }
     const result = await query({ query: queryLocations, variables })
     expect(result.data.queryLocations).toEqual([])
   })
   it('query Location without a place name given', async () => {
     variables = {
-      place: "",
-      lang: "en"
+      place: '',
+      lang: 'en',
     }
     const result = await query({ query: queryLocations, variables })
     expect(result.data.queryLocations).toEqual([])

From ad509c8818f4198ce63ad2e0c0bc96f8b1947f72 Mon Sep 17 00:00:00 2001
From: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>
Date: Tue, 2 Feb 2021 02:51:00 +0100
Subject: [PATCH 06/14] - reuse user in backend location test

---
 backend/src/schema/resolvers/users/location.spec.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/backend/src/schema/resolvers/users/location.spec.js b/backend/src/schema/resolvers/users/location.spec.js
index 0dd52b3c8..aa257801f 100644
--- a/backend/src/schema/resolvers/users/location.spec.js
+++ b/backend/src/schema/resolvers/users/location.spec.js
@@ -99,9 +99,9 @@ describe('Location Service', () => {
   // Authentication
   // TODO: unify, externalize, simplify, wtf?
   let user
-  beforeEach(async () => {
+  beforeAll(async () => {
     user = await Factory.build('user', {
-      id: 'updating-user',
+      id: 'location-user',
     })
     authenticatedUser = await user.toJson()
   })

From 0597cead6a1bcfcdcfcbe4ab5d17509d48004be0 Mon Sep 17 00:00:00 2001
From: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>
Date: Tue, 2 Feb 2021 02:51:59 +0100
Subject: [PATCH 07/14] - have blank lines between it in backend tests

---
 backend/src/schema/resolvers/users/location.spec.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/backend/src/schema/resolvers/users/location.spec.js b/backend/src/schema/resolvers/users/location.spec.js
index aa257801f..7f85f3af9 100644
--- a/backend/src/schema/resolvers/users/location.spec.js
+++ b/backend/src/schema/resolvers/users/location.spec.js
@@ -105,6 +105,7 @@ describe('Location Service', () => {
     })
     authenticatedUser = await user.toJson()
   })
+
   it('query Location existing', async () => {
     variables = {
       place: 'Berlin',
@@ -119,6 +120,7 @@ describe('Location Service', () => {
       { id: 'place.4035845612564380', place_name: 'Berlin Township, New Jersey, United States' },
     ])
   })
+
   it('query Location existing in different language', async () => {
     variables = {
       place: 'Berlin',
@@ -133,6 +135,7 @@ describe('Location Service', () => {
       { id: 'place.1165756679564380', place_name: 'Berlin, Massachusetts, Vereinigte Staaten' },
     ])
   })
+
   it('query Location not existing', async () => {
     variables = {
       place: 'GbHtsd4sdHa',
@@ -141,6 +144,7 @@ describe('Location Service', () => {
     const result = await query({ query: queryLocations, variables })
     expect(result.data.queryLocations).toEqual([])
   })
+  
   it('query Location without a place name given', async () => {
     variables = {
       place: '',

From c726c6bcc31260a14abcb23988dd3328e987cfde Mon Sep 17 00:00:00 2001
From: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>
Date: Tue, 2 Feb 2021 03:00:03 +0100
Subject: [PATCH 08/14] - lint fixes (backend)

---
 backend/src/schema/resolvers/users/location.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/backend/src/schema/resolvers/users/location.spec.js b/backend/src/schema/resolvers/users/location.spec.js
index 7f85f3af9..c1e34bf6c 100644
--- a/backend/src/schema/resolvers/users/location.spec.js
+++ b/backend/src/schema/resolvers/users/location.spec.js
@@ -144,7 +144,7 @@ describe('Location Service', () => {
     const result = await query({ query: queryLocations, variables })
     expect(result.data.queryLocations).toEqual([])
   })
-  
+
   it('query Location without a place name given', async () => {
     variables = {
       place: '',

From 0ba37aab18f537d722aede7b87fa0b8e79f80e66 Mon Sep 17 00:00:00 2001
From: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>
Date: Tue, 2 Feb 2021 06:56:56 +0100
Subject: [PATCH 09/14] - lots of additional tests - removed 3 character
 condition for location query - lint ing

---
 webapp/pages/settings/index.spec.js | 141 ++++++++++++++++++++++++++++
 webapp/pages/settings/index.vue     |   4 +-
 2 files changed, 143 insertions(+), 2 deletions(-)

diff --git a/webapp/pages/settings/index.spec.js b/webapp/pages/settings/index.spec.js
index ff2781073..7b919e877 100644
--- a/webapp/pages/settings/index.spec.js
+++ b/webapp/pages/settings/index.spec.js
@@ -11,6 +11,7 @@ describe('index.vue', () => {
 
   beforeEach(() => {
     mocks = {
+      $i18n: { locale: () => 'en' },
       $t: jest.fn(),
       $apollo: {
         mutate: jest
@@ -27,6 +28,36 @@ describe('index.vue', () => {
               },
             },
           }),
+        query: jest
+          .fn()
+          .mockRejectedValue({ message: 'Ouch!' })
+          .mockResolvedValueOnce({
+            data: {
+              queryLocations: [
+                { place_name: 'Brazil', id: 'country.9531777110682710', __typename: 'Location2' },
+                {
+                  place_name: 'United Kingdom',
+                  id: 'country.12405201072814600',
+                  __typename: 'Location2',
+                },
+                {
+                  place_name: 'Buenos Aires, Argentina',
+                  id: 'place.7159025980072860',
+                  __typename: 'Location2',
+                },
+                {
+                  place_name: 'Bandung, West Java, Indonesia',
+                  id: 'place.8224726664248590',
+                  __typename: 'Location2',
+                },
+                {
+                  place_name: 'Banten, Indonesia',
+                  id: 'region.11849645724544000',
+                  __typename: 'Location2',
+                },
+              ],
+            },
+          }),
       },
       $toast: {
         error: jest.fn(),
@@ -96,6 +127,116 @@ describe('index.vue', () => {
           expect(mocks.$apollo.mutate).toHaveBeenCalled()
         })
       })
+
+      describe('given a new slug and hitting submit', () => {
+        it('calls updateUser mutation', () => {
+          const wrapper = Wrapper()
+
+          wrapper.find('#slug').setValue('peter-der-lustige')
+          wrapper.find('.ds-form').trigger('submit')
+
+          expect(mocks.$apollo.mutate).toHaveBeenCalled()
+        })
+      })
+
+      describe('given a new location and hitting submit', () => {
+        it('calls updateUser mutation', () => {
+          const wrapper = Wrapper()
+
+          wrapper.find('#city').setValue('Berlin, Germany')
+          wrapper.find('.ds-form').trigger('submit')
+
+          expect(mocks.$apollo.mutate).toHaveBeenCalled()
+        })
+      })
+
+      describe('given a new about and hitting submit', () => {
+        it('calls updateUser mutation', () => {
+          const wrapper = Wrapper()
+
+          wrapper.find('#about').setValue('I am Peter!111elf')
+          wrapper.find('.ds-form').trigger('submit')
+
+          expect(mocks.$apollo.mutate).toHaveBeenCalled()
+        })
+      })
+
+      describe('given new username, slug, location and about and hitting submit', () => {
+        it('calls updateUser mutation', () => {
+          const wrapper = Wrapper()
+
+          wrapper.find('#name').setValue('Peter')
+          wrapper.find('#slug').setValue('peter-der-lustige')
+          wrapper.find('#city').setValue('Berlin, Germany')
+          wrapper.find('#about').setValue('I am Peter!111elf')
+          wrapper.find('.ds-form').trigger('submit')
+
+          expect(mocks.$apollo.mutate).toHaveBeenCalled()
+        })
+      })
+    })
+
+    describe('given user input on location field', () => {
+      it('calls queryLocations query', async () => {
+        const wrapper = Wrapper()
+
+        jest.useFakeTimers()
+
+        wrapper.find('#city').trigger('input')
+        wrapper.find('#city').setValue('B')
+
+        jest.runAllTimers()
+
+        expect(mocks.$apollo.query).toHaveBeenCalled()
+      })
+
+      it('opens the dropdown', () => {
+        const wrapper = Wrapper()
+
+        wrapper.find('#city').trigger('input')
+        wrapper.find('#city').setValue('B')
+
+        expect(wrapper.find('.ds-select-dropdown').isVisible()).toBe(true)
+      })
+    })
+
+    describe('given no user input on location field', () => {
+      it('cannot call queryLocations query', async () => {
+        const wrapper = Wrapper()
+
+        jest.useFakeTimers()
+
+        wrapper.find('#city').setValue('')
+        wrapper.find('#city').trigger('input')
+
+        jest.runAllTimers()
+
+        expect(mocks.$apollo.query).not.toHaveBeenCalled()
+      })
+
+      it('does not show the dropdown', () => {
+        const wrapper = Wrapper()
+
+        wrapper.find('#city').setValue('')
+        wrapper.find('#city').trigger('input')
+
+        expect(wrapper.find('.ds-select-is-open').exists()).toBe(false)
+      })
+    })
+
+    describe('given user presses escape on location field', () => {
+      it('closes the dropdown', () => {
+        const wrapper = Wrapper()
+
+        wrapper.find('#city').setValue('B')
+        wrapper.find('#city').trigger('input')
+
+        expect(wrapper.find('.ds-select-dropdown').isVisible()).toBe(true)
+
+        wrapper.find('#city').trigger('keyup.esc')
+
+        expect(wrapper.find('.ds-select-is-open').exists()).toBe(false)
+      })
     })
   })
 })
diff --git a/webapp/pages/settings/index.vue b/webapp/pages/settings/index.vue
index 3b532fc42..5d59f5ecb 100644
--- a/webapp/pages/settings/index.vue
+++ b/webapp/pages/settings/index.vue
@@ -24,7 +24,7 @@
         />
         <!-- eslint-enable vue/use-v-on-exact -->
         <ds-input
-          id="bio"
+          id="about"
           model="about"
           type="textarea"
           rows="3"
@@ -138,7 +138,7 @@ export default {
     },
     async requestGeoData(e) {
       const value = e.target ? e.target.value.trim() : ''
-      if (value === '' || value.length < 3) {
+      if (value === '') {
         this.cities = []
         return
       }

From 49b4ebb9543749d139ed9e94d4d4f710a28bb074 Mon Sep 17 00:00:00 2001
From: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>
Date: Tue, 2 Feb 2021 07:19:50 +0100
Subject: [PATCH 10/14] - beofreAll does not work - back to beforeEach

---
 backend/src/schema/resolvers/users/location.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/backend/src/schema/resolvers/users/location.spec.js b/backend/src/schema/resolvers/users/location.spec.js
index c1e34bf6c..0c871b168 100644
--- a/backend/src/schema/resolvers/users/location.spec.js
+++ b/backend/src/schema/resolvers/users/location.spec.js
@@ -99,7 +99,7 @@ describe('Location Service', () => {
   // Authentication
   // TODO: unify, externalize, simplify, wtf?
   let user
-  beforeAll(async () => {
+  beforeEach(async () => {
     user = await Factory.build('user', {
       id: 'location-user',
     })

From ba460148b2292e6f3c6000992734d77d9a7dd82a Mon Sep 17 00:00:00 2001
From: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>
Date: Wed, 3 Feb 2021 17:17:09 +0100
Subject: [PATCH 11/14] - renamed `Location2` to `LocationMapBox`

---
 backend/src/schema/types/type/Location.gql | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/backend/src/schema/types/type/Location.gql b/backend/src/schema/types/type/Location.gql
index d80c9bebb..fad24cc26 100644
--- a/backend/src/schema/types/type/Location.gql
+++ b/backend/src/schema/types/type/Location.gql
@@ -16,12 +16,13 @@ type Location {
   parent: Location @cypher(statement: "MATCH (this)-[:IS_IN]->(l:Location) RETURN l")
 }
 
-type Location2 {
+# This is not smart - we need one location for everything - use the same type everywhere!
+type LocationMapBox {
   id: ID!
   place_name: String!
 }
 
 type Query {
-  queryLocations(place: String!, lang: String!): [Location2]!
+  queryLocations(place: String!, lang: String!): [LocationMapBox]!
 }
 

From d0274a40ae3eabb2de302c4606b016cc9294e341 Mon Sep 17 00:00:00 2001
From: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>
Date: Wed, 3 Feb 2021 17:17:18 +0100
Subject: [PATCH 12/14] - renamed `Location2` to `LocationMapBox`

---
 webapp/pages/settings/index.spec.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/webapp/pages/settings/index.spec.js b/webapp/pages/settings/index.spec.js
index 7b919e877..f71f0ca3e 100644
--- a/webapp/pages/settings/index.spec.js
+++ b/webapp/pages/settings/index.spec.js
@@ -34,26 +34,26 @@ describe('index.vue', () => {
           .mockResolvedValueOnce({
             data: {
               queryLocations: [
-                { place_name: 'Brazil', id: 'country.9531777110682710', __typename: 'Location2' },
+                { place_name: 'Brazil', id: 'country.9531777110682710', __typename: 'LocationMapBox' },
                 {
                   place_name: 'United Kingdom',
                   id: 'country.12405201072814600',
-                  __typename: 'Location2',
+                  __typename: 'LocationMapBox',
                 },
                 {
                   place_name: 'Buenos Aires, Argentina',
                   id: 'place.7159025980072860',
-                  __typename: 'Location2',
+                  __typename: 'LocationMapBox',
                 },
                 {
                   place_name: 'Bandung, West Java, Indonesia',
                   id: 'place.8224726664248590',
-                  __typename: 'Location2',
+                  __typename: 'LocationMapBox',
                 },
                 {
                   place_name: 'Banten, Indonesia',
                   id: 'region.11849645724544000',
-                  __typename: 'Location2',
+                  __typename: 'LocaLocationMapBoxtion2',
                 },
               ],
             },

From 05adf4a9f1b623535f872fbc4e640b5b76f6c158 Mon Sep 17 00:00:00 2001
From: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>
Date: Wed, 3 Feb 2021 17:50:36 +0100
Subject: [PATCH 13/14] - have expected call values in test calls

---
 webapp/pages/settings/index.spec.js | 60 +++++++++++++++++++++++++----
 1 file changed, 52 insertions(+), 8 deletions(-)

diff --git a/webapp/pages/settings/index.spec.js b/webapp/pages/settings/index.spec.js
index f71f0ca3e..da204f059 100644
--- a/webapp/pages/settings/index.spec.js
+++ b/webapp/pages/settings/index.spec.js
@@ -34,7 +34,11 @@ describe('index.vue', () => {
           .mockResolvedValueOnce({
             data: {
               queryLocations: [
-                { place_name: 'Brazil', id: 'country.9531777110682710', __typename: 'LocationMapBox' },
+                {
+                  place_name: 'Brazil',
+                  id: 'country.9531777110682710',
+                  __typename: 'LocationMapBox',
+                },
                 {
                   place_name: 'United Kingdom',
                   id: 'country.12405201072814600',
@@ -124,7 +128,13 @@ describe('index.vue', () => {
           wrapper.find('#name').setValue('Peter')
           wrapper.find('.ds-form').trigger('submit')
 
-          expect(mocks.$apollo.mutate).toHaveBeenCalled()
+          expect(mocks.$apollo.mutate).toHaveBeenCalledWith(
+            expect.objectContaining({
+              variables: expect.objectContaining({
+                name: 'Peter',
+              }),
+            }),
+          )
         })
       })
 
@@ -135,7 +145,13 @@ describe('index.vue', () => {
           wrapper.find('#slug').setValue('peter-der-lustige')
           wrapper.find('.ds-form').trigger('submit')
 
-          expect(mocks.$apollo.mutate).toHaveBeenCalled()
+          expect(mocks.$apollo.mutate).toHaveBeenCalledWith(
+            expect.objectContaining({
+              variables: expect.objectContaining({
+                slug: 'peter-der-lustige',
+              }),
+            }),
+          )
         })
       })
 
@@ -144,9 +160,16 @@ describe('index.vue', () => {
           const wrapper = Wrapper()
 
           wrapper.find('#city').setValue('Berlin, Germany')
+          wrapper.find('#city').trigger('input')
           wrapper.find('.ds-form').trigger('submit')
 
-          expect(mocks.$apollo.mutate).toHaveBeenCalled()
+          expect(mocks.$apollo.mutate).toHaveBeenCalledWith(
+            expect.objectContaining({
+              variables: expect.objectContaining({
+                locationName: 'Berlin, Germany',
+              }),
+            }),
+          )
         })
       })
 
@@ -157,11 +180,17 @@ describe('index.vue', () => {
           wrapper.find('#about').setValue('I am Peter!111elf')
           wrapper.find('.ds-form').trigger('submit')
 
-          expect(mocks.$apollo.mutate).toHaveBeenCalled()
+          expect(mocks.$apollo.mutate).toHaveBeenCalledWith(
+            expect.objectContaining({
+              variables: expect.objectContaining({
+                about: 'I am Peter!111elf',
+              }),
+            }),
+          )
         })
       })
 
-      describe('given new username, slug, location and about and hitting submit', () => {
+      describe('given new username, slug, location and about then hitting submit', () => {
         it('calls updateUser mutation', () => {
           const wrapper = Wrapper()
 
@@ -171,7 +200,16 @@ describe('index.vue', () => {
           wrapper.find('#about').setValue('I am Peter!111elf')
           wrapper.find('.ds-form').trigger('submit')
 
-          expect(mocks.$apollo.mutate).toHaveBeenCalled()
+          expect(mocks.$apollo.mutate).toHaveBeenCalledWith(
+            expect.objectContaining({
+              variables: expect.objectContaining({
+                name: 'Peter',
+                slug: 'peter-der-lustige',
+                locationName: 'Berlin, Germany',
+                about: 'I am Peter!111elf',
+              }),
+            }),
+          )
         })
       })
     })
@@ -187,7 +225,13 @@ describe('index.vue', () => {
 
         jest.runAllTimers()
 
-        expect(mocks.$apollo.query).toHaveBeenCalled()
+        expect(mocks.$apollo.query).toHaveBeenCalledWith(
+          expect.objectContaining({
+            variables: expect.objectContaining({
+              place: 'B',
+            }),
+          }),
+        )
       })
 
       it('opens the dropdown', () => {

From 73cc1b1fa1065334b75bfc0f5fc24966a4e46feb Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Thu, 4 Feb 2021 15:03:55 +0100
Subject: [PATCH 14/14] locations: fix frontend test for selecting new location

---
 webapp/pages/settings/index.spec.js | 41 ++++++++++++++++++++++-------
 1 file changed, 32 insertions(+), 9 deletions(-)

diff --git a/webapp/pages/settings/index.spec.js b/webapp/pages/settings/index.spec.js
index da204f059..01d68e029 100644
--- a/webapp/pages/settings/index.spec.js
+++ b/webapp/pages/settings/index.spec.js
@@ -156,14 +156,22 @@ describe('index.vue', () => {
       })
 
       describe('given a new location and hitting submit', () => {
-        it('calls updateUser mutation', () => {
+        it('calls updateUser mutation', async () => {
           const wrapper = Wrapper()
-
-          wrapper.find('#city').setValue('Berlin, Germany')
-          wrapper.find('#city').trigger('input')
+          wrapper.setData({
+            cities: [
+              {
+                label: 'Berlin, Germany',
+                value: 'Berlin, Germany',
+                id: '1',
+              },
+            ],
+          })
+          await wrapper.vm.$nextTick()
+          wrapper.find('.ds-select-option').trigger('click')
           wrapper.find('.ds-form').trigger('submit')
 
-          expect(mocks.$apollo.mutate).toHaveBeenCalledWith(
+          await expect(mocks.$apollo.mutate).toHaveBeenCalledWith(
             expect.objectContaining({
               variables: expect.objectContaining({
                 locationName: 'Berlin, Germany',
@@ -191,21 +199,36 @@ describe('index.vue', () => {
       })
 
       describe('given new username, slug, location and about then hitting submit', () => {
-        it('calls updateUser mutation', () => {
+        it('calls updateUser mutation', async () => {
           const wrapper = Wrapper()
 
+          wrapper.setData({
+            cities: [
+              {
+                label: 'Berlin, Germany',
+                value: 'Berlin, Germany',
+                id: '1',
+              },
+              {
+                label: 'Hamburg, Germany',
+                value: 'Hamburg, Germany',
+                id: '2',
+              },
+            ],
+          })
+          await wrapper.vm.$nextTick()
           wrapper.find('#name').setValue('Peter')
           wrapper.find('#slug').setValue('peter-der-lustige')
-          wrapper.find('#city').setValue('Berlin, Germany')
+          wrapper.findAll('.ds-select-option').at(1).trigger('click')
           wrapper.find('#about').setValue('I am Peter!111elf')
           wrapper.find('.ds-form').trigger('submit')
 
-          expect(mocks.$apollo.mutate).toHaveBeenCalledWith(
+          await expect(mocks.$apollo.mutate).toHaveBeenCalledWith(
             expect.objectContaining({
               variables: expect.objectContaining({
                 name: 'Peter',
                 slug: 'peter-der-lustige',
-                locationName: 'Berlin, Germany',
+                locationName: 'Hamburg, Germany',
                 about: 'I am Peter!111elf',
               }),
             }),