added a test for cleared event

Author: Djfaucette

elements/pfe-autocomplete/src/pfe-autocomplete.js

@@ -149,7 +149,10 @@ class PfeAutocomplete extends PFElement {
     this._input.setAttribute("autocapitalize", "off");
     this._input.setAttribute("spellcheck", "false");
 
-    this._input.setAttribute("style", `input[type=search]::-ms-clear { display: none; width : 0; height: 0; }input[type = search]:: -ms - reveal { display: none; width: 0; height: 0; }" nput[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration { display: none; }`)
+    this._input.setAttribute(
+      "style",
+      `input[type=search]::-ms-clear { display: none; width : 0; height: 0; }input[type = search]:: -ms - reveal { display: none; width: 0; height: 0; }" nput[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration { display: none; }`
+    );
   }
 
   disconnectedCallback() {
@@ -273,11 +276,11 @@ class PfeAutocomplete extends PFElement {
   }
 
   _searchCleared() {
-    if(this._input.value == '') {
+    if (this._input.value == "") {
       this.emitEvent(PfeAutocomplete.events.optionsShown, {
         bubbles: true,
         composed: true,
-        detail: { searchValue: searchQuery }
+        detail: { searchValue: searchQuery },
       });
     }
   }

elements/pfe-autocomplete/test/pfe-autocomplete_test.js

@@ -177,6 +177,24 @@ describe('<pfe-autocomplete>', () => {
     });
   });
 
+  it('should fire a pfe-autocomplete:option-cleared event when the input is cleared', done => {
+    flush(() => {
+      const items = ['option 1', 'option 2'];
+
+      // autocompleteElem.autocompleteRequest = function (params, callback) {
+      //   const regx = new RegExp("\^" + params.query, "i");
+      //   callback(items.filter(function (item) {
+      //     return regx.test(item);
+      //   }));
+      // };
+
+      autocompleteElem.addEventListener("pfe-autocomplete:option-cleared", function (event) {
+        assert.isTrue(true); // the event listener was called
+        done();
+      });
+    });
+  });
+
   it('should set selected-value attribute after user click on an option', done => {
     flush(() => {
       droplistElem.data = ['option 1', 'option 2'];