@coveo/quantic 3.23.0-pre.d7fca8f582 → 3.23.0-pre.ea7abafc70

package/force-app/main/default/lwc/quanticSearchBoxInput/templates/defaultSearchBoxInput.html

@@ -31,7 +31,7 @@
                 aria-expanded={shouldDisplaySuggestions}
                 aria-haspopup="listbox"
                 aria-autocomplete="list"
-                data-cy="search-box-input"
+                data-testid="search-box-input"
                 data-value={inputValue}
               />
 

package/force-app/main/default/lwc/quanticSearchBoxInput/templates/expandableSearchBoxInput.html

@@ -35,7 +35,7 @@
                 aria-autocomplete="list"
                 aria-haspopup="listbox"
                 style="white-space: nowrap"
-                data-cy="search-box-textarea"
+                data-testid="search-box-textarea"
                 data-value={inputValue}
               >
               </textarea>

package/force-app/main/default/lwc/quanticSearchBoxSuggestionsList/quanticSearchBoxSuggestionsList.html

@@ -1,37 +1,66 @@
 <template>
-    <div class={listboxCssClass}>
-        <ul id="listbox-id" data-cy="suggestion-list" class="slds-listbox slds-listbox_vertical" tabindex="-1"
-            role="listbox">
-            <template for:each={allOptions} for:item="option">
-                <template lwc:if={option.isClearRecentQueryButton}>
-                    <li id={option.id} key={option.key} onmousedown={option.onClick} tabindex="-1"
-                        data-cy="clear-recent-queries" role="option" class="slds-listbox__item"
-                        aria-selected={option.isSelected}>
-                        <div class={clearRecentQueriesOptionCSSClass} data-role="option">
-                            <span class="slds-media__body slds-text-title_bold">
-                                {labels.recentQueries}
-                            </span>
-                            <span class="slds-text-color_weak">{labels.clear}</span>
-                        </div>
-                    </li>
-                </template>
-                <template lwc:else>
-                    <li id={option.id} key={option.key} onmousedown={option.onClick} tabindex="-1"
-                        data-cy="suggestions-option" role="option" class="slds-listbox__item"
-                        data-rawvalue={option.rawValue} aria-selected={option.isSelected}>
-                        <div class={option.containerCSSClass}>
-                            <span class="slds-media__figure slds-listbox__option-icon suggestion-option__icon">
-                                <lightning-icon icon-name={option.icon} size="xx-small"
-                                    alternative-text={option.iconTitle}></lightning-icon>
-                            </span>
-                            <span class="slds-media__body slds-grid">
-                                <lightning-formatted-rich-text class="slds-truncate" data-cy="suggestions-option-text"
-                                    value={option.value} title={option.rawValue}></lightning-formatted-rich-text>
-                            </span>
-                        </div>
-                    </li>
-                </template>
-            </template>
-        </ul>
-    </div>
-</template>
+  <div class={listboxCssClass}>
+    <ul
+      id="listbox-id"
+      data-cy="suggestion-list"
+      class="slds-listbox slds-listbox_vertical"
+      tabindex="-1"
+      role="listbox"
+    >
+      <template for:each={allOptions} for:item="option">
+        <template lwc:if={option.isClearRecentQueryButton}>
+          <li
+            id={option.id}
+            key={option.key}
+            onmousedown={option.onClick}
+            tabindex="-1"
+            data-testid="clear-recent-queries-button"
+            role="option"
+            class="slds-listbox__item"
+            aria-selected={option.isSelected}
+          >
+            <div class={clearRecentQueriesOptionCSSClass} data-role="option">
+              <span class="slds-media__body slds-text-title_bold">
+                {labels.recentQueries}
+              </span>
+              <span class="slds-text-color_weak">{labels.clear}</span>
+            </div>
+          </li>
+        </template>
+        <template lwc:else>
+          <li
+            id={option.id}
+            key={option.key}
+            onmousedown={option.onClick}
+            tabindex="-1"
+            data-testid="suggestions-option"
+            role="option"
+            class="slds-listbox__item"
+            data-rawvalue={option.rawValue}
+            aria-selected={option.isSelected}
+          >
+            <div class={option.containerCSSClass}>
+              <span
+                class="slds-media__figure slds-listbox__option-icon suggestion-option__icon"
+              >
+                <lightning-icon
+                  icon-name={option.icon}
+                  size="xx-small"
+                  alternative-text={option.iconTitle}
+                ></lightning-icon>
+              </span>
+              <span class="slds-media__body slds-grid">
+                <lightning-formatted-rich-text
+                  class="slds-truncate"
+                  data-cy="suggestions-option-text"
+                  value={option.value}
+                  title={option.rawValue}
+                ></lightning-formatted-rich-text>
+              </span>
+            </div>
+          </li>
+        </template>
+      </template>
+    </ul>
+  </div>
+</template>

package/force-app/main/default/lwc/quanticSearchBoxSuggestionsList/quanticSearchBoxSuggestionsList.js

@@ -259,6 +259,8 @@ export default class QuanticSearchBoxSuggestionsList extends LightningElement {
       iconTitle: suggestion.isRecentQuery
         ? this.labels.recentQueryAriaLabel
         : this.labels.querySuggestionAriaLabel,
+      isClearRecentQueryButton: false,
+      isRecentQuery: !!suggestion.isRecentQuery,
       onClick: (event) => {
         this.handleSelection(event, optionIndex);
       },

package/force-app/main/default/lwc/quanticStandaloneSearchBox/templates/standaloneSearchBox.html

@@ -13,7 +13,7 @@
         without-submit-button={withoutSubmitButton}
         placeholder={placeholder}
         suggestions={suggestions}
-        data-cy="quantic-search-box-input"
+        data-testid="quantic-search-box-input"
       ></c-quantic-search-box-input>
     </c-quantic-search-interface>
   </template>