@salesforcedevs/dx-components 0.18.10 → 0.18.11

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.18.10",
+    "version": "0.18.11",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -29,5 +29,5 @@
         "@types/debounce": "^1.2.0",
         "@types/lodash.get": "^4.4.6"
     },
-    "gitHead": "f29684780634b9abec6ead2e47fe7bda05e31412"
+    "gitHead": "ecf0f25f4c6927eb21118122f3b15884c198a287"
 }

package/src/modules/dx/sidebarSearchResult/__tests__/sidebarSearchResult.test.ts

@@ -4,7 +4,7 @@ import { createRenderComponent } from "utils/tests";
 const TAG = "dx-sidebar-search-result";
 const render = createRenderComponent(TAG, SidebarSearchResult);
 
-const PROPS = {
+const MOCK_RESULT = {
     description: "test description here",
     descriptionHighlights: [{ length: 5, offset: 5 }],
     href: "/test",
@@ -13,24 +13,65 @@ const PROPS = {
     titleHighlights: [{ length: 5, offset: 5 }]
 };
 
+const MOCK_RESULT_2 = {
+    description:
+        "Auth.MyDomainLoginDiscoveryHandler to show a custom error message on the My Domain login page ... Auth.LoginDiscoveryHandler to show an error message on the Experience Cloud site login page",
+    descriptionHighlights: [
+        { length: 4, offset: 0 },
+        { length: 4, offset: 98 }
+    ],
+    href: "/test",
+    selected: false,
+    title: "Auth Exceptions | Apex Reference Guide | Salesforce Developers",
+    titleHighlights: [{ length: 4, offset: 0 }]
+};
+
 describe(TAG, () => {
     it("renders a result with the correct highlighted content", () => {
-        const element = render(PROPS);
+        const element = render(MOCK_RESULT);
 
+        const title = element.shadowRoot.querySelector(".title");
         const titleBolds = element.shadowRoot.querySelectorAll(".title .bold");
-        expect(titleBolds.length).toEqual(1);
+        expect(title.textContent).toEqual(MOCK_RESULT.title);
+        expect(titleBolds.length).toEqual(MOCK_RESULT.titleHighlights.length);
         expect(titleBolds[0].textContent).toEqual("title");
 
+        const description = element.shadowRoot.querySelector(".description");
         const descriptionBolds =
             element.shadowRoot.querySelectorAll(".description .bold");
-        expect(descriptionBolds.length).toEqual(1);
+        expect(description.textContent).toEqual(MOCK_RESULT.description);
+        expect(descriptionBolds.length).toEqual(
+            MOCK_RESULT.descriptionHighlights.length
+        );
         expect(descriptionBolds[0].textContent).toEqual("descr");
 
         return expect(element).toBeAccessible();
     });
 
+    it("renders another result variant with the correct highlighted content", () => {
+        const element = render(MOCK_RESULT_2);
+
+        const title = element.shadowRoot.querySelector(".title");
+        const titleBolds = element.shadowRoot.querySelectorAll(".title .bold");
+        expect(title.textContent).toEqual(MOCK_RESULT_2.title);
+        expect(titleBolds.length).toEqual(MOCK_RESULT_2.titleHighlights.length);
+        expect(titleBolds[0].textContent).toEqual("Auth");
+
+        const description = element.shadowRoot.querySelector(".description");
+        const descriptionBolds =
+            element.shadowRoot.querySelectorAll(".description .bold");
+        expect(description.textContent).toEqual(MOCK_RESULT_2.description);
+        expect(descriptionBolds.length).toEqual(
+            MOCK_RESULT_2.descriptionHighlights.length
+        );
+        expect(descriptionBolds[0].textContent).toEqual("Auth");
+        expect(descriptionBolds[1].textContent).toEqual("Auth");
+
+        return expect(element).toBeAccessible();
+    });
+
     it("renders a result as selected when specified", () => {
-        const element = render({ ...PROPS, selected: true });
+        const element = render({ ...MOCK_RESULT, selected: true });
 
         const selected = element.shadowRoot.querySelector(
             ".sidebar-item-selected"
@@ -42,7 +83,7 @@ describe(TAG, () => {
 
     it("doesn't add bold class when there is no highlighted term", () => {
         const element = render({
-            ...PROPS,
+            ...MOCK_RESULT,
             descriptionHighlights: [],
             titleHighlights: []
         });

package/src/modules/dx/sidebarSearchResult/sidebarSearchResult.ts

@@ -13,7 +13,7 @@ const toChunks = (value: string, highlights: CoveoHighlights) => {
     }
 
     let endIndex = 0;
-    return highlights.reduce((acc, { length, offset }) => {
+    return highlights.reduce((acc, { length, offset }, i) => {
         const plainValue = value.slice(endIndex, offset);
         const plainChunk = {
             value: plainValue,
@@ -28,9 +28,23 @@ const toChunks = (value: string, highlights: CoveoHighlights) => {
             id: offset
         };
 
-        return plainValue.length > 0
-            ? [...acc, plainChunk, boldChunk]
-            : [...acc, boldChunk];
+        let chunks =
+            plainValue.length > 0
+                ? [...acc, plainChunk, boldChunk]
+                : [...acc, boldChunk];
+
+        const remaining = value.slice(endIndex);
+        if (remaining.length > 0 && highlights.length - 1 === i) {
+            chunks = [
+                ...chunks,
+                {
+                    value: remaining,
+                    id: value.length
+                }
+            ];
+        }
+
+        return chunks;
     }, []);
 };