Use Combobox automation hooks with clear

AppFolio-IM · Feb 24, 2023 · 04502aa · 04502aa
1 parent 24cf2e0
commit 04502aa
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 8 deletions.
diff --git a/cypress/component/commands/clear.cy.jsx b/cypress/component/commands/clear.cy.jsx
@@ -94,7 +94,7 @@ describe('cy.clear', () => {
       cy.get('[data-testid=combobox-menu]').should('not.be.visible');
     });
 
-    it.only('cooperates with fill', () => {
+    it('cooperates with fill', () => {
       let selected = 'alpha';
 
       cy.mount(
@@ -111,10 +111,60 @@ describe('cy.clear', () => {
       cy.component(comp.Combobox, 'some label').clear();
       eventually(() => selected === undefined);
     });
+
+    context('with test-automation hooks', () => {
+      function FutureTestbed({ clearable = true, onClear, onToggle }) {
+        return (
+          <FormLabelGroup label="some label">
+            <div data-testid="combobox-dropdown" class="combobox dropdown">
+              <div aria-haspopup="true" aria-expanded="false">
+                <div class="input-group">
+                  <input data-testid="combobox-input" class="form-control" placeholder="Select..." />
+                  <button disabled={!clearable} type="button" onClick={onClear} data-testid="combobox-clear" title="Clear value" class="bg-transparent border-0 font-weight-bold px-0 btn btn-secondary disabled" style={{ opacity: 0 }}>×</button>
+                  <button type="button" onClick={onToggle} data-testid="combobox-caret" class="bg-transparent border-0 pl-0 pr-2 btn btn-secondary" aria-label="Toggle options menu"><i aria-hidden="true" class="fa fa-caret-down fa-fw"></i></button>
+                </div>
+              </div>
+            </div>
+          </FormLabelGroup >
+        );
+      }
+
+      it('uses the clear button', () => {
+        let cleared = false;
+
+        cy.mount(
+          <FutureTestbed
+            onClear={() => {
+              cleared = true;
+            }}
+          />
+        );
+
+        cy.component(comp.Combobox, 'some label').clear();
+        eventually(() => cleared === true);
+      })
+
+      it('tolerates disabled clear button', () => {
+        let cleared = false;
+
+        cy.mount(
+          <FutureTestbed
+            clearable={false}
+            onClear={() => {
+              cleared = true;
+            }}
+          />
+        );
+
+        cy.component(comp.Combobox, 'some label').clear();
+        cy.wait(1000);
+        expect(cleared).to.equal(false);
+      })
+    })
   });
 
   context('Select component', () => {
-    it.only('clears values', () => {
+    it('clears values', () => {
       const options = ['alpha', 'bravo', 'charlie'].map((o) => ({
         label: o,
         value: o,

diff --git a/src/commands/actions/clear.ts b/src/commands/actions/clear.ts
@@ -33,12 +33,20 @@ export function clear(
     });
 
   if (isGearsCombobox) {
-    return cy
-      .wrap(prevSubject, QUIET)
-      .find('[data-testid=combobox-input]', QUIET)
-      .focus(QUIET)
-      .type('{backspace}{backspace}', QUIET)
-      .then(blurIfNecessary);
+    const btn = prevSubject.find('[data-testid=combobox-clear]');
+    if (btn.length === 1 && !btn.prop('disabled')) {
+      // testing hook is present; use it for maximum stability
+      return cy
+        .wrap(btn, QUIET).click().wrap(prevSubject, QUIET).then(blurIfNecessary);
+    } else {
+      // fall back to UI gesture that should work in most cases
+      return cy
+        .wrap(prevSubject, QUIET)
+        .find('[data-testid=combobox-input]', QUIET)
+        .focus(QUIET)
+        .type('{backspace}{backspace}', QUIET)
+        .then(blurIfNecessary);
+    }
   }
 
   if (isGearsSelect) {