Define stricter match for categories labels in suggestions

config/categories.yml

@@ -3,13 +3,13 @@
   name: hotel
   color: "#495063"
   matcher:
-    regex: hote|campanile|premi[eè]re classe|b&b hotels|ibis budget|ibis|kyriad|mercure|fasthotel|ace hotel|best western|novotel|balladins
+    regex: hotels?|campanile|premi[eè]re classe|b&b hotels|ibis budget|ibis|kyriad|mercure|fasthotel|ace hotel|best western|novotel|balladins
   icon: lodging
 - label : _('restaurant')
   name: restaurant
   color: "#ef8000"
   matcher:
-    regex: rest|restos?|restaus?|ma?c\s?do(?:nald(?:'s)?)?|burger\s+king|quick|subway|flunch|hard\s+rock\s+cafe|kfc|pizza|brioche\s+doree|five\s+guys|mezzo\s+di\s+pasta|pomme\s+de\s+pain|pret\s+a\s+manger|vapiano|starbucks|big\s+fernand|sushi|memphis\s+coffee|buffalo\s+grill|la\s+boucherie|hippopotamus|leon|pataterie|pizzeria|brasserie|fast\s+food|restauration\s+rapide|snack|creperie|kebab|sandwicherie|il\s+ristorante|le kiosque a pizzas|buffalo grill|campanile|courtepaille|burger king|la pataterie|pizza hut|au bureau|poivre rouge|la croissanterie|tutti pizza|la boite a pizza|la brioche doree|leon de bruxelles|bagelstein|columbus cafe|memphis coffee|del arte|class'croute|o'tacos|sushi shop|mezzo di pasta|pomme de pain|big fernand|pizza sprint|bistro regent|l'epicurien|tablapizza|speed burger|pat a pain|pizza bonici|firmin|l'atelier gourmand|pizza time|a la bonne heure|francesca|planet sushi|speed rabbit pizza|pegast|pizza pai|best western|crep'eat|baila pizza|waffle factory|casino cafeteria|la pizza de nico|crocodile|fresh burritos|231 east street|bagel corner|coeur de ble|dubble|eat sushi|fuxia|il ristorante|les fils a maman|nooi|pitaya|jour|les burgers de papa|bchef|chez papa|cojean|le fournil de pierre|oceane|terre et mer|bistro romain|el rancho|l'alambic|le patacrepe|pizza city|cote sushi|la maison bleue|le club sandwich cafe|les 3 brasseurs|bellota-bellota|bistrot du boucher|la tagliatella|nostrum|pizza pino|point chaud|tacos avenue|exki|garden ice cafe|green is better|le paradis du fruit|les relais d'alsace|ma campagne|mamie bigoude|pasta pizza|pizza cosy|planetalis|salad&co|tommy's diner|yogurt factory|cafe leffe|dominos pizza|indiana cafe|le comptoir du malt|lina's|mythic burger|nikki sushi|alto cafe|ankka|burger bar by quick|carre bleu|esprit sushi|feel juice|five guys
+    regex: restos?|restaus?|ma?c\s?do(?:nald(?:'s)?)?|burger\s+king|quick|subway|flunch|hard\s+rock\s+cafe|kfc|pizza|brioche\s+doree|five\s+guys|mezzo\s+di\s+pasta|pomme\s+de\s+pain|pret\s+a\s+manger|vapiano|starbucks|big\s+fernand|sushi|memphis\s+coffee|buffalo\s+grill|la\s+boucherie|hippopotamus|leon|pataterie|pizzeria|brasserie|fast\s+food|restauration\s+rapide|snack|creperie|kebab|sandwicherie|il\s+ristorante|le kiosque a pizzas|buffalo grill|campanile|courtepaille|burger king|la pataterie|pizza hut|au bureau|poivre rouge|la croissanterie|tutti pizza|la boite a pizza|la brioche doree|leon de bruxelles|bagelstein|columbus cafe|memphis coffee|del arte|class'croute|o'tacos|sushi shop|mezzo di pasta|pomme de pain|big fernand|pizza sprint|bistro regent|l'epicurien|tablapizza|speed burger|pat a pain|pizza bonici|firmin|l'atelier gourmand|pizza time|a la bonne heure|francesca|planet sushi|speed rabbit pizza|pegast|pizza pai|best western|crep'eat|baila pizza|waffle factory|casino cafeteria|la pizza de nico|crocodile|fresh burritos|231 east street|bagel corner|coeur de ble|dubble|eat sushi|fuxia|il ristorante|les fils a maman|nooi|pitaya|jour|les burgers de papa|bchef|chez papa|cojean|le fournil de pierre|oceane|terre et mer|bistro romain|el rancho|l'alambic|le patacrepe|pizza city|cote sushi|la maison bleue|le club sandwich cafe|les 3 brasseurs|bellota-bellota|bistrot du boucher|la tagliatella|nostrum|pizza pino|point chaud|tacos avenue|exki|garden ice cafe|green is better|le paradis du fruit|les relais d'alsace|ma campagne|mamie bigoude|pasta pizza|pizza cosy|planetalis|salad&co|tommy's diner|yogurt factory|cafe leffe|dominos pizza|indiana cafe|le comptoir du malt|lina's|mythic burger|nikki sushi|alto cafe|ankka|burger bar by quick|carre bleu|esprit sushi|feel juice|five guys
   icon: restaurant
 - label : _('leisure')
   name: leisure
@@ -27,7 +27,7 @@
   name: supermarket
   color: "#f3c600"
   matcher:
-    regex: supe|superettes?|epiciers?|epiceries?|8 [aà] huit|leader price express|coccimarket|naturalia|viveco|utile|proxi service|kusmi tea|votre marche|epi service|satoriz|proxi marche|spar supermarche|day by day|palais des thes|le monde du macaron|point coop|le marche d'a cote|corsaire|cali|g 20|paris store|hyper casino|les halles? de l'aveyron|rnpc|ecofrais|europrix|easy marche|ferrari|intermarche express|kelly services?|partisans? du gout|(?:super|hyper|inter)marches?|auchan|carrefour|(?:e\.)?leclerc|casino|(?:super|hyper)\s+u|monoprix|simply|u\s+express|proxi|spar|vival|lidl|leader\s+price|grand\s+frais|petit casino|leader price|picard|franprix|super u|simply market|casino shop|grand frais|netto|8 a huit|coop|monop'|proxi super|panier sympa|supermarche match|chronodrive|atac|colruyt|casino supermarche|coccinelle express|cora|sherpa|aldi|maximarche|bi1|marche u|shopi|ecomax|relais des mousquetaires|sitis|champion|intermarche contact|marche plus|score|a2pas|geant casino|norma|systeme u|jumbo score|o'tera|coccinelle supermarche|ecomarche|espace multimedia|express|intermarche super|casino drive|costco wholesale|franprix nano|galeries gourmandes|hyper champion|partisans du gout|simply city|u drive|unik market|carrefour market|intermarche
+    regex: superettes?|epiciers?|epiceries?|8 [aà] huit|leader price express|coccimarket|naturalia|viveco|utile|proxi service|kusmi tea|votre marche|epi service|satoriz|proxi marche|spar supermarche|day by day|palais des thes|le monde du macaron|point coop|le marche d'a cote|corsaire|cali|g 20|paris store|hyper casino|les halles? de l'aveyron|rnpc|ecofrais|europrix|easy marche|ferrari|intermarche express|kelly services?|partisans? du gout|(?:super|hyper|inter)marches?|auchan|carrefour|(?:e\.)?leclerc|casino|(?:super|hyper)\s+u|monoprix|simply|u\s+express|proxi|spar|vival|lidl|leader\s+price|grand\s+frais|petit casino|leader price|picard|franprix|super u|simply market|casino shop|grand frais|netto|8 a huit|coop|monop'|proxi super|panier sympa|supermarche match|chronodrive|atac|colruyt|casino supermarche|coccinelle express|cora|sherpa|aldi|maximarche|bi1|marche u|shopi|ecomax|relais des mousquetaires|sitis|champion|intermarche contact|marche plus|score|a2pas|geant casino|norma|systeme u|jumbo score|o'tera|coccinelle supermarche|ecomarche|espace multimedia|express|intermarche super|casino drive|costco wholesale|franprix nano|galeries gourmandes|hyper champion|partisans du gout|simply city|u drive|unik market|carrefour market|intermarche
   icon: grocery
 - label : _('bank')
   name: bank

src/adapters/category.js

@@ -4,7 +4,7 @@
  * Simple Category helper
  */
 import IconManager from '../adapters/icon_manager';
-import ExtentedString from '../libs/string';
+import ExtendedString from '../libs/string';
 import { CATEGORY_TYPE } from '../../config/constants.yml';
 
 const DEFAULT_ICON_COLOR = '#ffffff';
@@ -37,7 +37,14 @@ export default class Category {
     const prefixLength = Math.min(4, this.label.length);
     // Match label prefix (eg: "supe" for "Supermarché", but not "supel")
     if (!matched && term.length >= prefixLength) {
-      matched = ExtentedString.compareIgnoreCase(term, this.label.slice(0, term.length)) >= 0;
+      if (this.label.length < term.length) {
+        // check if first word in term is label
+        matched = ExtendedString.compareIgnoreCase(term, `${this.label} `) === 0;
+      } else {
+        matched = ExtendedString.compareIgnoreCase(
+          term, this.label.substring(0, term.length)
+        ) === 0;
+      }
     }
 
     return matched;

src/adapters/suggest.js

@@ -205,13 +205,13 @@ export default class Suggest {
 
   /* select sub template */
   renderItem(poi) {
-    const {id, name, fromHistory, className, subClassName, type, alternativeName} = poi;
+    const {id, name, className, subClassName, type, alternativeName} = poi;
     const icon = IconManager.get({className: className, subClassName: subClassName, type: type});
     const klass = `autocomplete-icon ${`icon icon-${icon.iconClass}`}`;
     const iconDom = `<div style="color:${icon ? icon.color : ''}" class="${klass}"></div>`;
 
     return `
-      <div class="autocomplete_suggestion${fromHistory ? ' autocomplete_suggestion--history' : ''}"
+      <div class="autocomplete_suggestion"
            data-id="${id}" data-val="${ExtendedString.htmlEncode(poi.getInputValue())}">
         ${this.renderLines(iconDom, name, alternativeName)}
       </div>`;
@@ -226,7 +226,8 @@ export default class Suggest {
     const categoryLabel = ExtendedString.htmlEncode(category.label);
 
     return `
-      <div class="autocomplete_suggestion" data-id="${category.id}" data-val="${categoryLabel}">
+      <div class="autocomplete_suggestion autocomplete_suggestion--category"
+        data-id="${category.id}" data-val="${categoryLabel}">
         ${this.renderLines(iconDom, label, alternativeName)}
       </div>`;
   }

src/scss/includes/search_form.scss

@@ -189,7 +189,6 @@ input[type="search"] {
   display: inline-block;
   width: calc(100% - 50px);
   text-overflow:ellipsis;
-  text-transform: capitalize;
   overflow: hidden;
   white-space: nowrap;
 }
@@ -200,21 +199,12 @@ input[type="search"] {
   font-size: 14px;
   margin-left: 37px;
   text-overflow:ellipsis;
-  text-transform: capitalize;
   overflow: hidden;
   white-space: nowrap;
 }
 
-.autocomplete_suggestion--history {
-  color : $secondary_text;
-}
-
-.autocomplete_suggestion--history .autocomplete_prefix {
-  color : $primary_text;
-}
-
-.autocomplete_prefix {
-  color : $primary_text;
+.autocomplete_suggestion--category {
+  text-transform: capitalize;
 }
 
 .top_bar--small {

tests/__data__/autocomplete.json

@@ -8,8 +8,8 @@
       "geocoding": {
         "id": "osm:node:4872758213",
         "type": "poi",
-        "label": "test Dsquared2",
-        "name": "test Dsquared2",
+        "label": "test result 1",
+        "name": "test result 1",
         "postcode": null,
         "city": null,
         "citycode": null,

tests/integration/helpers/response_handler.js

@@ -20,6 +20,10 @@ export default class ResponseHandler {
     }
   }
 
+  reset() {
+    this.preparedResponses = [];
+  }
+
   async prepareResponse() {
     await this.page.setRequestInterception(true);
     this.page.on('request', async interceptedRequest => {

tests/integration/tests/autocomplete.js

@@ -64,8 +64,7 @@ test('search has lang in query', async() => {
 
 test('keyboard navigation', async() => {
   const TypedSearch = 'Hello';
-  responseHandler.addPreparedResponse(mockAutocomplete, /Hello/);
-  responseHandler.addPreparedResponse(mockAutocomplete, /square/);
+  responseHandler.addPreparedResponse(mockAutocomplete, /autocomplete/);
   await page.goto(APP_URL);
   await autocompleteHelper.typeAndWait(TypedSearch);
   await wait(100);
@@ -158,7 +157,7 @@ test('move to on click', async() => {
 
 test('bbox & center', async() => {
   expect.assertions(3);
-  responseHandler.addPreparedResponse(mockAutocomplete, /autocomplete\?q=Hello/);
+  responseHandler.addPreparedResponse(mockAutocomplete, /autocomplete/);
   await page.goto(APP_URL);
   await page.keyboard.type('Hello');
   await wait(100);
@@ -306,8 +305,27 @@ test('Retrieve restaurant category when we search "restau"', async() => {
   expect(suggestionId).toEqual('category:restaurant');
 });
 
+test('Retrieve no category when we search "barcelona", not even "bar"', async() => {
+  const searchQuery = 'barcelona';
+
+  responseHandler.addPreparedResponse(mockAutocomplete, /autocomplete\?q=barcelona/);
+
+  await page.goto(APP_URL);
+  await page.keyboard.type(searchQuery);
+  await page.waitForSelector('.autocomplete_suggestion');
+
+  const firstLine = await page.evaluate(() => {
+    return document.querySelector(
+      '.autocomplete_suggestion:first-child .autocomplete_suggestion__first_line'
+    ).innerText;
+  });
+
+  expect(firstLine).toEqual('test result 1');
+});
+
 afterEach(async() => {
   await clearStore(page);
+  responseHandler.reset();
 });
 
 afterAll(async() => {