chore(quantic): refactor the Quantic Search Box and Quantic Standalon…

…e Search Box components #2 (#3501)

* created quanticSearchBoxInput with customEvents, cleaned up standalone and default searchbox

* some more improvements

* fixed events, styling, need to fix submit search

* fix issues and clean logs

* fixed e2e tests

* some cleanup

* added rough structure of UTs (to finish)

* added unit tests, still need some work

* added some improvements, some tests still failing

* set custom event names to lowercase

* modified events in uts

* added commands for unit tests in the README file

* fixed and cleanup unit tests for searchboxinput

* fixed linter issue with test

* try to fix linter fail

* added unit tests for withoutSubmitButton

* fix bug display of searchbox when expandable and withoutSubmitButton is true

* fix icon sliding issue in expandable searchbox

* added feedback improvements

* fixed bug where pressing enter on clear button was not working for standalone searchbox

* Revert "added feedback improvements"

This reverts commit 965b011.

* Revert "Revert "added feedback improvements""

This reverts commit 35dd5d8.

* Revert "fixed bug where pressing enter on clear button was not working for standalone searchbox"

This reverts commit e89a138.

* refactored aria-labelledBy

* removed useless aria value

* added some improvements

packages/quantic/README.md

@@ -109,6 +109,20 @@ To get the [detailed report](./docs/detailed-reporting.md), run:
 npm run e2e:detailed
 ```
 
+### Run LWC unit tests for Quantic Components
+
+To run LWC unit tests directly in your console, run:
+
+```bash
+npm run test:unit
+```
+
+To run specific file/components LWC unit tests directly in your console, run:
+
+```bash
+npm run test:unit -p force-app/main/default/lwc/nameOfComponent/
+```
+
 ## Use Quantic From Source
 
 After you have cloned the repository and have run `npm install`, run the following commands:

packages/quantic/cypress/e2e/default-2/standalone-search-box/standalone-search-box-expectations.ts

@@ -17,9 +17,9 @@ function standaloneSearchBoxExpectations(
         .should(display ? 'exist' : 'not.exist')
         .logDetail(`${should(display)} display the input search box`);
     },
-    inputInitialized: (textarea = false) => {
+    inputInitialized: () => {
       selector
-        .input(textarea)
+        .quanticSearchBoxInput()
         .invoke('attr', 'is-initialized')
         .should('eq', 'true');
     },

packages/quantic/cypress/e2e/default-2/standalone-search-box/standalone-search-box-selectors.ts

@@ -4,6 +4,7 @@ export const standaloneSearchBoxComponent = 'c-quantic-standalone-search-box';
 
 export interface StandaloneSearchBoxSelector extends ComponentSelector {
   input: (textarea?: boolean) => CypressSelector;
+  quanticSearchBoxInput: () => CypressSelector;
   suggestionList: () => CypressSelector;
   clearButton: () => CypressSelector;
   searchIcon: () => CypressSelector;
@@ -12,18 +13,30 @@ export interface StandaloneSearchBoxSelector extends ComponentSelector {
 
 export const StandaloneSearchBoxSelectors: StandaloneSearchBoxSelector = {
   get: () => cy.get(standaloneSearchBoxComponent),
+  quanticSearchBoxInput: () =>
+    StandaloneSearchBoxSelectors.get().find(
+      '[data-cy="quantic-search-box-input"]'
+    ),
   input: (textarea = false) =>
     StandaloneSearchBoxSelectors.get().find(
-      textarea ? 'textarea[type="search"]' : 'input[type="search"]'
+      textarea
+        ? 'c-quantic-search-box-input [data-cy="search-box-textarea"]'
+        : 'c-quantic-search-box-input [data-cy="search-box-input"]'
     ),
   suggestionList: () =>
     StandaloneSearchBoxSelectors.get().find(
-      'c-quantic-search-box-suggestions-list li'
+      'c-quantic-search-box-input c-quantic-search-box-suggestions-list li'
     ),
   clearButton: () =>
-    StandaloneSearchBoxSelectors.get().find('.searchbox__clear-button'),
+    StandaloneSearchBoxSelectors.get().find(
+      'c-quantic-search-box-input [data-cy="search-box-clear-button"]'
+    ),
   searchIcon: () =>
-    StandaloneSearchBoxSelectors.get().find('.searchbox__search-icon'),
+    StandaloneSearchBoxSelectors.get().find(
+      'c-quantic-search-box-input [data-cy="search-box-search-icon"]'
+    ),
   searchButton: () =>
-    StandaloneSearchBoxSelectors.get().find('.searchbox__submit-button'),
+    StandaloneSearchBoxSelectors.get().find(
+      'c-quantic-search-box-input [data-cy="search-box-submit-button"]'
+    ),
 };

packages/quantic/force-app/main/default/lwc/jsconfig.json

@@ -57,6 +57,9 @@
         "quanticResultsPerPage/quanticResultsPerPage.js"
       ],
       "c/quanticSearchBox": ["quanticSearchBox/quanticSearchBox.js"],
+      "c/quanticSearchBoxInput": [
+        "quanticSearchBoxInput/quanticSearchBoxInput.js"
+      ],
       "c/quanticSearchBoxSuggestionsList": [
         "quanticSearchBoxSuggestionsList/quanticSearchBoxSuggestionsList.js"
       ],