fix(highlight): gracefully display empty string if attr is not available

algolia · Apr 10, 2017 · 3976dca · 3976dca
1 parent 06e7c1f
commit 3976dca
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 4 deletions.
diff --git a/packages/vue-instantsearch-highlight/src/Highlight.vue b/packages/vue-instantsearch-highlight/src/Highlight.vue
@@ -27,11 +27,11 @@
       const attributeName = ctx.props.attributeName
       const tagName = ctx.props.tagName
 
-      if (!result._highlightResult || !result._highlightResult[attributeName]) {
-        throw new Error(`Attribute ${attributeName} is not highlighted.`)
-      }
+      let attributeValue = ''
+      if (result._highlightResult && result._highlightResult[attributeName]) {
+        attributeValue = result._highlightResult[attributeName].value
+      } 
 
-      let attributeValue = result._highlightResult[attributeName].value
       if (ctx.props.escapeHtml === true) {
         attributeValue = escapeHtml(attributeValue)
       }

diff --git a/packages/vue-instantsearch-highlight/src/__tests__/__snapshots__/index.js.snap b/packages/vue-instantsearch-highlight/src/__tests__/__snapshots__/index.js.snap
@@ -17,3 +17,5 @@ exports[`renders proper HTML 1`] = `
 <span class="ais-highlight">con
   <mark>ten</mark>t</span>
 `;
+
+exports[`should render an empty string if attribute is not highlighted 1`] = `<span class="ais-highlight"></span>`;
diff --git a/packages/vue-instantsearch-highlight/src/__tests__/index.js b/packages/vue-instantsearch-highlight/src/__tests__/index.js
@@ -109,5 +109,29 @@ test('allows unsafe output', () => {
     }
   }).$mount();
 
+  expect(vm.$el.outerHTML).toMatchSnapshot();
+});
+
+test('should render an empty string if attribute is not highlighted', () => {
+  const result = {
+    _highlightResult: {}
+  };
+
+  const vm = new Vue({
+    template: '<highlight attributeName="attr" :result="result">',
+    render(h) {
+      return h('highlight', {
+        props: {
+          attributeName: 'attr',
+          result: result
+        }
+      });
+    },
+    components: {
+      Highlight
+    }
+  }).$mount();
+
+
   expect(vm.$el.outerHTML).toMatchSnapshot();
 });