feat(highlight): add highlited attributes in the suggestion data (#271)

algolia · Jul 4, 2016 · a5cb4c6 · a5cb4c6
1 parent b3d41a4
commit a5cb4c6
Show file tree

Hide file tree

Showing 5 changed files with 111 additions and 89 deletions.
diff --git a/docs/source/documentation.html.md.erb b/docs/source/documentation.html.md.erb
@@ -608,6 +608,34 @@ Examples:
 
  - Paris Île-de-France, France
  - 589 Howard Street San Francisco, California, United States of America
+</td>
+    </tr>
+    <tr>
+<td markdown="1">
+<div class="api-entry" id="api-suggestion-value"><code>highlight</code></div>
+
+Type: **object**
+</td>
+<td markdown="1">
+Given the query, contains the highlited values of the following attributes:
+
+- name
+- administrative
+- city
+- country
+
+Example:
+
+```js
+// query was `par`
+console.log(suggestion.highlight);
+// {
+//   name: '<em>Par</em>is',
+//   administrative: 'Île-de-France',
+//   country: 'France'
+// }
+```
+
 </td>
     </tr>
   </tbody>

diff --git a/src/formatDropdownValue.js b/src/formatDropdownValue.js
@@ -8,19 +8,13 @@ const icons = {
   country: countryIcon
 };
 
-export default function formatDropdownValue(options) {
+export default function formatDropdownValue({type, highlight}) {
   let {
+    name,
     administrative,
     city,
-    country,
-    type,
-    hit
-  } = options;
-
-  const name = hit._highlightResult.locale_names[0].value;
-  city = city ? hit._highlightResult.city[0].value : undefined;
-  administrative = administrative ? hit._highlightResult.administrative[0].value : undefined;
-  country = country ? hit._highlightResult.country.value : undefined;
+    country
+  } = highlight;
 
   const out = `<span class="ap-suggestion-icon">${icons[type].trim()}</span>
 <span class="ap-name">${name}</span>

diff --git a/src/formatDropdownValue.test.js b/src/formatDropdownValue.test.js
@@ -7,72 +7,20 @@ jest.mock('./icons/country.svg', () => 'country');
 jest.unmock('./formatDropdownValue.js');
 
 describe('formatDropdownValue', () => {
-  const testCases = [
-    getTestCase({
-      name: 'simple',
-      expected: '<span class="ap-suggestion-icon">address</span> <span class="ap-name">Paris</span> <span class="ap-address"> Paris, Île-de-France, France</span>' // eslint-disable-line max-len
-    }),
-    getTestCase({
-      name: 'no city',
-      root: {city: undefined},
-      expected: '<span class="ap-suggestion-icon">address</span> <span class="ap-name">Paris</span> <span class="ap-address"> Île-de-France, France</span>' // eslint-disable-line max-len
-    }),
-    getTestCase({
-      name: 'no administrative',
-      root: {administrative: undefined},
-      expected: '<span class="ap-suggestion-icon">address</span> <span class="ap-name">Paris</span> <span class="ap-address"> Paris, France</span>' // eslint-disable-line max-len
-    }),
-    getTestCase({
-      name: 'no country',
-      root: {country: undefined},
-      expected: '<span class="ap-suggestion-icon">address</span> <span class="ap-name">Paris</span> <span class="ap-address"> Paris, Île-de-France</span>' // eslint-disable-line max-len
-    }),
-    getTestCase({
-      name: 'city type',
-      root: {type: 'city'},
-      expected: '<span class="ap-suggestion-icon">city</span> <span class="ap-name">Paris</span> <span class="ap-address"> Paris, Île-de-France, France</span>' // eslint-disable-line max-len
-    }),
-    getTestCase({
-      name: 'country type',
-      root: {type: 'country'},
-      expected: '<span class="ap-suggestion-icon">country</span> <span class="ap-name">Paris</span> <span class="ap-address"> Paris, Île-de-France, France</span>' // eslint-disable-line max-len
-    })
-  ];
-
-  testCases.forEach(
-    testCase => it(`${testCase.name} test case`, () =>
-      expect(formatDropdownValue(testCase.input)).toEqual(testCase.expected)
-    )
-  );
+  it('formats the address', () => {
+    expect(
+      formatDropdownValue({
+        type: 'address',
+        highlight: {
+          name: 'Paris',
+          administrative: 'Île-de-France',
+          city: 'Paris',
+          country: 'France',
+          type: 'address'
+        }
+      })
+    ).toEqual(
+      '<span class="ap-suggestion-icon">address</span> <span class="ap-name">Paris</span> <span class="ap-address"> Paris, Île-de-France, France</span>' // eslint-disable-line max-len
+    );
+  });
 });
-
-function getTestCase({
-  name,
-  root,
-  highlight,
-  expected
-}) {
-  const defaultRoot = {
-    administrative: 'Île-de-France',
-    city: 'Paris',
-    country: 'France',
-    type: 'address'
-  };
-
-  const defaultHighlight = {
-    locale_names: [{value: 'Paris'}],
-    city: [{value: 'Paris'}],
-    administrative: [{value: 'Île-de-France'}],
-    country: {value: 'France'}
-  };
-
-  return {
-    name,
-    input: {
-      ...defaultRoot,
-      ...root,
-      hit: {_highlightResult: {...defaultHighlight, ...highlight}}
-    },
-    expected
-  };
-}
diff --git a/src/formatHit.js b/src/formatHit.js
@@ -15,6 +15,13 @@ export default function formatHit({
       hit.administrative[0] : undefined;
     const city = hit.city && hit.city[0] !== name ? hit.city[0] : undefined;
 
+    const highlight = {
+      name: hit._highlightResult.locale_names[0].value,
+      city: city ? hit._highlightResult.city[0].value : undefined,
+      administrative: administrative ? hit._highlightResult.administrative[0].value : undefined,
+      country: country ? hit._highlightResult.country.value : undefined
+    };
+
     const suggestion = {
       name,
       administrative,
@@ -34,6 +41,7 @@ export default function formatHit({
 
     return {
       ...suggestion,
+      highlight,
       hit,
       hitIndex,
       query,

diff --git a/src/formatHit.test.js b/src/formatHit.test.js
@@ -17,22 +17,46 @@ describe('formatHit', () => {
     getTestCase({
       name: 'no administrative',
       hit: {administrative: undefined},
-      expected: {administrative: undefined}
+      expected: {administrative: undefined, highlight: {administrative: undefined}}
     }),
     getTestCase({
       name: 'administrative[0] === locale_names[0]',
-      hit: {administrative: ['Île-de-France'], locale_names: ['Île-de-France']},
-      expected: {administrative: undefined, name: 'Île-de-France'}
+      hit: {
+        administrative: ['Île-de-France'],
+        locale_names: ['Île-de-France'],
+        _highlightResult: {
+          locale_names: [{value: 'Île-de-France'}],
+          administrative: [{value: 'Île-de-France'}]
+        }
+      },
+      expected: {
+        administrative: undefined, name: 'Île-de-France',
+        highlight: {administrative: undefined, name: 'Île-de-France'}
+      }
     }),
     getTestCase({
       name: 'no city',
       hit: {city: undefined},
-      expected: {city: undefined}
+      expected: {
+        city: undefined,
+        highlight: {city: undefined}
+      }
     }),
     getTestCase({
       name: 'city[0] === locale_names[0]',
-      hit: {city: ['Paris'], locale_names: ['Paris']},
-      expected: {city: undefined, name: 'Paris'}
+      hit: {
+        city: ['Paris'],
+        locale_names: ['Paris'],
+        _highlightResult: {
+          locale_names: [{value: 'Paris'}],
+          city: [{value: 'Paris'}]
+        }
+      },
+      expected: {
+        city: undefined,
+        name: 'Paris',
+        highlight: {city: undefined, name: 'Paris'}
+      }
     })
   ];
 
@@ -86,8 +110,8 @@ describe('formatHit', () => {
 
 function getTestCase({
   name,
-  hit: userHit,
-  expected: userExpected
+  hit: userHit = {},
+  expected: userExpected = {}
 }) {
   const defaultHit = {
     locale_names: ['rue de rivoli'],
@@ -99,7 +123,13 @@ function getTestCase({
       lng: '456'
     },
     postcode: ['75004'],
-    _tags: ['tags']
+    _tags: ['tags'],
+    _highlightResult: {
+      locale_names: [{value: 'Paris'}],
+      city: [{value: 'Paris'}],
+      administrative: [{value: 'Île-de-France'}],
+      country: {value: 'France'}
+    }
   };
 
   const defaultExpected = {
@@ -114,17 +144,31 @@ function getTestCase({
     postcode: '75004',
     hitIndex: 0,
     query: 'query',
-    rawAnswer: 'rawAnswer'
+    rawAnswer: 'rawAnswer',
+    highlight: {
+      name: 'Paris',
+      city: 'Paris',
+      administrative: 'Île-de-France',
+      country: 'France'
+    }
   };
 
   const hit = {
     ...defaultHit,
-    ...userHit
+    ...userHit,
+    _highlightResult: {
+      ...defaultHit._highlightResult,
+      ...userHit._highlightResult
+    }
   };
 
   const expected = {
     ...defaultExpected,
     ...userExpected,
+    highlight: {
+      ...defaultExpected.highlight,
+      ...userExpected.highlight
+    },
     hit
   };