test: combine clear-button tests into single suite (#7187)

vaadin · Mar 11, 2024 · 011ffb7 · 011ffb7
1 parent 13e5de2
commit 011ffb7
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 112 deletions.
diff --git a/packages/combo-box/test/basic.common.js b/packages/combo-box/test/basic.common.js
@@ -165,20 +165,6 @@ describe('basic features', () => {
       expect(comboBox.selectedItem).to.be.null;
     });
 
-    it('should be null after clearing the value', () => {
-      comboBox.value = 'foo';
-      comboBox.$.clearButton.click();
-
-      expect(comboBox.selectedItem).to.be.null;
-    });
-
-    it('should not open the overlay after clearing the value', () => {
-      comboBox.value = 'foo';
-      comboBox.$.clearButton.click();
-
-      expect(overlay.opened).not.to.be.true;
-    });
-
     describe('autoselect', () => {
       it('should set autoselect to false by default', () => {
         expect(comboBox.autoselect).to.be.false;
@@ -232,43 +218,6 @@ describe('inside flexbox', () => {
   });
 });
 
-describe('clear button', () => {
-  let comboBox, clearButton;
-
-  describe('default', () => {
-    beforeEach(async () => {
-      comboBox = fixtureSync('<vaadin-combo-box></vaadin-combo-box>');
-      await nextRender();
-    });
-
-    it('should not have clear button visible by default', () => {
-      expect(comboBox.clearButtonVisible).to.be.false;
-    });
-  });
-
-  describe('visible', () => {
-    beforeEach(async () => {
-      comboBox = fixtureSync('<vaadin-combo-box clear-button-visible></vaadin-combo-box>');
-      await nextRender();
-      clearButton = comboBox.$.clearButton;
-    });
-
-    it('should reflect clear-button-visible attribute to property', () => {
-      expect(comboBox.clearButtonVisible).to.be.true;
-    });
-
-    it('should hide clear button should when disabled', () => {
-      comboBox.disabled = true;
-      expect(getComputedStyle(clearButton).display).to.equal('none');
-    });
-
-    it('should hide clear button when readonly', () => {
-      comboBox.readonly = true;
-      expect(getComputedStyle(clearButton).display).to.equal('none');
-    });
-  });
-});
-
 describe('value set before attach', () => {
   let comboBox;
 

diff --git a/packages/combo-box/test/interactions.common.js b/packages/combo-box/test/interactions.common.js
@@ -255,4 +255,87 @@ describe('interactions', () => {
       expect(input.inputMode).to.equal('');
     });
   });
+
+  describe('clear button', () => {
+    let clearButton;
+
+    describe('default', () => {
+      it('should not have clear button visible by default', () => {
+        expect(comboBox.clearButtonVisible).to.be.false;
+      });
+
+      it('should reflect clear-button-visible property to attribute', () => {
+        comboBox.clearButtonVisible = true;
+        expect(comboBox.hasAttribute('clear-button-visible')).to.be.true;
+      });
+    });
+
+    describe('visible', () => {
+      beforeEach(() => {
+        comboBox.clearButtonVisible = true;
+        comboBox.value = 'foo';
+        clearButton = comboBox.$.clearButton;
+      });
+
+      it('should show clear button only when value property is set', () => {
+        expect(getComputedStyle(clearButton).display).to.equal('block');
+
+        comboBox.value = '';
+        expect(getComputedStyle(clearButton).display).to.equal('none');
+      });
+
+      it('should not show clear button should when disabled', () => {
+        comboBox.disabled = true;
+        expect(getComputedStyle(clearButton).display).to.equal('none');
+      });
+
+      it('should not show clear button when readonly', () => {
+        comboBox.readonly = true;
+        expect(getComputedStyle(clearButton).display).to.equal('none');
+      });
+
+      it('should clear the value on clear button click', () => {
+        comboBox.open();
+
+        clearButton.click();
+
+        expect(comboBox.value).to.eql('');
+        expect(comboBox._scroller.selectedItem).to.be.null;
+        expect(comboBox.selectedItem).to.be.null;
+      });
+
+      it('should not open the overlay on clear button click', () => {
+        clearButton.click();
+
+        expect(comboBox.opened).to.be.false;
+      });
+
+      it('should not close the overlay on clear button click', () => {
+        comboBox.open();
+
+        clearButton.click();
+
+        expect(comboBox.opened).to.be.true;
+      });
+
+      it('should de-select dropdown item on clear button click', () => {
+        comboBox.open();
+
+        const item = getFirstItem(comboBox);
+        expect(item.hasAttribute('selected')).to.be.true;
+
+        clearButton.click();
+        expect(item.hasAttribute('selected')).to.be.false;
+      });
+
+      it('should prevent mousedown event to avoid input blur', () => {
+        comboBox.open();
+
+        const event = new CustomEvent('mousedown', { cancelable: true });
+        clearButton.dispatchEvent(event);
+
+        expect(event.defaultPrevented).to.be.true;
+      });
+    });
+  });
 });
diff --git a/packages/combo-box/test/selecting-items.common.js b/packages/combo-box/test/selecting-items.common.js
@@ -239,67 +239,6 @@ describe('selecting items', () => {
   });
 });
 
-describe('clearing a selection', () => {
-  let comboBox, clearIcon;
-
-  beforeEach(() => {
-    comboBox = fixtureSync('<vaadin-combo-box style="width: 320px" clear-button-visible></vaadin-combo-box>');
-    comboBox.items = ['foo', 'bar'];
-    comboBox.value = 'foo';
-    clearIcon = comboBox.$.clearButton;
-  });
-
-  it('should show the clearing icon only when comboBox has value', () => {
-    expect(window.getComputedStyle(clearIcon).display).not.to.contain('none');
-
-    comboBox.value = '';
-    expect(window.getComputedStyle(clearIcon).display).to.contain('none');
-  });
-
-  it('should clear the selection when clicking on the icon', () => {
-    comboBox.open();
-
-    clearIcon.click();
-
-    expect(comboBox.value).to.eql('');
-    expect(comboBox._scroller.selectedItem).to.be.null;
-    expect(comboBox.selectedItem).to.be.null;
-  });
-
-  it('should not close the dropdown after clearing a selection', () => {
-    comboBox.open();
-
-    clearIcon.click();
-
-    expect(comboBox.opened).to.eql(true);
-  });
-
-  it('should de-select dropdown item after clearing a selection', () => {
-    comboBox.open();
-
-    const item = document.querySelector('vaadin-combo-box-item');
-    expect(item.hasAttribute('selected')).to.be.true;
-
-    clearIcon.click();
-    expect(item.hasAttribute('selected')).to.be.false;
-  });
-
-  it('should not open the dropdown after clearing a selection', () => {
-    clearIcon.click();
-
-    expect(comboBox.opened).to.eql(false);
-  });
-
-  it('should prevent mousedown event to avoid input blur', () => {
-    comboBox.open();
-
-    const event = new CustomEvent('mousedown', { cancelable: true });
-    clearIcon.dispatchEvent(event);
-
-    expect(event.defaultPrevented).to.be.true;
-  });
-});
-
 describe('selecting a custom value', () => {
   let comboBox;