From ddf79a52b8b7e45a82db5f8d38c58784ff7e4aca Mon Sep 17 00:00:00 2001
From: Sergey Vinogradov <mr.vursen@gmail.com>
Date: Fri, 17 Jun 2022 16:30:33 +0300
Subject: [PATCH] test: replace some combo-box unit tests with snapshot tests
 (#4055)

---
 packages/combo-box/test/aria.test.js          | 128 ++++--------------
 packages/combo-box/test/basic.test.js         |  41 ------
 .../dom/__snapshots__/combo-box.test.snap.js  | 108 +++++++++++++++
 packages/combo-box/test/dom/combo-box.test.js |  29 +++-
 4 files changed, 159 insertions(+), 147 deletions(-)

diff --git a/packages/combo-box/test/aria.test.js b/packages/combo-box/test/aria.test.js
index 11024b92590..d7bbafde871 100644
--- a/packages/combo-box/test/aria.test.js
+++ b/packages/combo-box/test/aria.test.js
@@ -1,137 +1,55 @@
 import { expect } from '@esm-bundle/chai';
-import { arrowDownKeyDown, aTimeout, escKeyDown, fixtureSync, nextFrame } from '@vaadin/testing-helpers';
+import { arrowDownKeyDown, escKeyDown, fixtureSync, nextFrame } from '@vaadin/testing-helpers';
 import './not-animated-styles.js';
 import '../vaadin-combo-box.js';
 import { getAllItems } from './helpers.js';
 
 describe('ARIA', () => {
-  let comboBox, input, label, helper, error;
+  let comboBox, input;
 
   beforeEach(() => {
-    comboBox = fixtureSync('<vaadin-combo-box label="my label" helper-text="Helper"></vaadin-combo-box>');
+    comboBox = fixtureSync('<vaadin-combo-box></vaadin-combo-box>');
     comboBox.items = ['foo', 'bar', 'baz'];
     input = comboBox.inputElement;
-    label = comboBox.querySelector('[slot=label]');
-    error = comboBox.querySelector('[slot=error-message]');
-    helper = comboBox.querySelector('[slot=helper]');
   });
 
-  afterEach(() => {
-    comboBox.opened = false;
+  it('should toggle aria-expanded attribute on open', () => {
+    arrowDownKeyDown(input);
+    expect(input.getAttribute('aria-expanded')).to.equal('true');
+    escKeyDown(input);
+    expect(input.getAttribute('aria-expanded')).to.equal('false');
   });
 
-  describe('default', () => {
-    it('should set role attribute on the native input', () => {
-      expect(input.getAttribute('role')).to.equal('combobox');
-    });
-
-    it('should set aria-autocomplete attribute on the native input', () => {
-      expect(input.getAttribute('aria-autocomplete')).to.equal('list');
-    });
-
-    it('should set aria-labelledby attribute on the native input', () => {
-      expect(input.getAttribute('aria-labelledby')).to.equal(label.id);
-    });
-
-    it('should set aria-describedby with helper text ID when valid', () => {
-      const aria = input.getAttribute('aria-describedby');
-      expect(aria).to.include(helper.id);
-      expect(aria).to.not.include(error.id);
-    });
-
-    it('should add error message ID to aria-describedby when invalid', async () => {
-      comboBox.invalid = true;
-      await aTimeout(0);
-      const aria = input.getAttribute('aria-describedby');
-      expect(aria).to.include(helper.id);
-      expect(aria).to.include(error.id);
-    });
-
-    it('should set spellcheck attribute on the native input', () => {
-      expect(input.getAttribute('spellcheck')).to.equal('false');
-    });
-
-    it('should set autocorrect attribute on the native input', () => {
-      expect(input.getAttribute('autocorrect')).to.equal('off');
-    });
+  it('should toggle aria-controls attribute on open', () => {
+    arrowDownKeyDown(input);
+    expect(input.hasAttribute('aria-controls')).to.be.true;
+    escKeyDown(input);
+    expect(input.hasAttribute('aria-controls')).to.be.false;
   });
 
   describe('opened', () => {
-    let scroller, items;
+    let items;
 
     beforeEach(async () => {
       arrowDownKeyDown(input);
-      scroller = comboBox._scroller;
       items = getAllItems(comboBox);
       await nextFrame();
     });
 
-    it('should set role listbox on the scroller', () => {
-      expect(scroller.getAttribute('role')).to.equal('listbox');
-    });
-
-    it('should set aria-setsize attribute on the scroller', () => {
-      expect(scroller.getAttribute('aria-setsize')).to.equal(comboBox.items.length.toString());
-    });
-
-    it('should set aria-controls on the native input', () => {
-      expect(input.getAttribute('aria-controls')).to.equal(scroller.id);
-    });
-
-    it('should remove aria-controls attribute when closed', () => {
-      escKeyDown(input);
-
-      expect(input.hasAttribute('aria-controls')).to.be.false;
-    });
-
-    it('should set aria-expanded attribute when opened', () => {
-      expect(input.getAttribute('aria-expanded')).to.equal('true');
-    });
-
-    it('should unset aria-expanded attribute when closed', () => {
-      escKeyDown(input);
-
-      expect(input.getAttribute('aria-expanded')).to.equal('false');
-    });
-
-    it('should set role attribute on the dropdown items', () => {
-      items.forEach((item) => {
-        expect(item.getAttribute('role')).to.equal('option');
-      });
-    });
-
-    it('should set ID on the dropdown items', () => {
-      items.forEach((item) => {
-        expect(item.id).to.match(/^vaadin-combo-box-item-\d+$/);
-      });
-    });
-
-    it('should set aria-posinset attribute on the dropdown items', () => {
-      items.forEach((item, idx) => {
-        expect(item.getAttribute('aria-posinset')).to.equal((idx + 1).toString());
-      });
-    });
-
-    it('should set aria-activedescendant on the input', () => {
-      expect(input.hasAttribute('aria-activedescendant')).to.be.false;
-
-      arrowDownKeyDown(input); // 'focus moves to 1st item'
+    it('should set aria-activedescendant on the input element depending on the focused item', () => {
+      arrowDownKeyDown(input); // Move focus to the 1st item.
       expect(input.getAttribute('aria-activedescendant')).to.equal(items[0].id);
+      arrowDownKeyDown(input); // Move focus to the 2nd item.
+      expect(input.getAttribute('aria-activedescendant')).to.equal(items[1].id);
     });
 
-    it('should update aria-selected when focused item changes', () => {
-      comboBox.value = 'foo';
-      arrowDownKeyDown(input); // 'focus moves to 2nd item'
-
+    it('should set aria-selected on item elements depending on the focused item', () => {
+      arrowDownKeyDown(input); // Move focus to the 1st item.
+      expect(items[0].getAttribute('aria-selected')).to.equal('true');
+      expect(items[1].getAttribute('aria-selected')).to.equal('false');
+      arrowDownKeyDown(input); // Move focus to the 2nd item.
       expect(items[0].getAttribute('aria-selected')).to.equal('false');
       expect(items[1].getAttribute('aria-selected')).to.equal('true');
     });
-
-    it('should update aria-activedescendant when focused item changes', () => {
-      comboBox.value = 'foo';
-      arrowDownKeyDown(input); // 'focus moves to 2nd item'
-
-      expect(input.getAttribute('aria-activedescendant')).to.equal(items[1].id);
-    });
   });
 });
diff --git a/packages/combo-box/test/basic.test.js b/packages/combo-box/test/basic.test.js
index 8c3315bfd40..ebf8380fdc7 100644
--- a/packages/combo-box/test/basic.test.js
+++ b/packages/combo-box/test/basic.test.js
@@ -463,47 +463,6 @@ describe('inside flexbox', () => {
   });
 });
 
-describe('slots', () => {
-  let comboBox;
-
-  beforeEach(() => {
-    comboBox = fixtureSync(`
-      <vaadin-combo-box>
-        <div slot="prefix">foo</div>
-        <div slot="helper">bar</div>
-      </vaadin-combo-box>
-    `);
-  });
-
-  it('should expose the prefix slot', () => {
-    const slot = comboBox.shadowRoot.querySelector('slot[name="prefix"]');
-    expect(slot.assignedNodes()[0].textContent).to.eql('foo');
-  });
-
-  it('should expose the helper slot', () => {
-    const slot = comboBox.shadowRoot.querySelector('slot[name="helper"]');
-    expect(slot.assignedNodes()[0].textContent).to.eql('bar');
-  });
-});
-
-describe('theme attribute', () => {
-  let comboBox;
-
-  beforeEach(() => {
-    comboBox = fixtureSync('<vaadin-combo-box theme="foo"></vaadin-combo-box>');
-  });
-
-  it('should propagate theme attribute to overlay', () => {
-    expect(comboBox.$.overlay.getAttribute('theme')).to.equal('foo');
-  });
-
-  it('should propagate theme attribute to item', () => {
-    comboBox.items = ['bar', 'baz'];
-    comboBox.open();
-    expect(getFirstItem(comboBox).getAttribute('theme')).to.equal('foo');
-  });
-});
-
 describe('clear button', () => {
   let comboBox, clearButton;
 
diff --git a/packages/combo-box/test/dom/__snapshots__/combo-box.test.snap.js b/packages/combo-box/test/dom/__snapshots__/combo-box.test.snap.js
index 8de1fea265c..f5acf81face 100644
--- a/packages/combo-box/test/dom/__snapshots__/combo-box.test.snap.js
+++ b/packages/combo-box/test/dom/__snapshots__/combo-box.test.snap.js
@@ -193,6 +193,114 @@ snapshots["vaadin-combo-box host error"] =
 `;
 /* end snapshot vaadin-combo-box host error */
 
+snapshots["vaadin-combo-box host opened default"] = 
+`<vaadin-combo-box
+  focused=""
+  opened=""
+>
+  <label
+    for="input-vaadin-combo-box-4"
+    id="label-vaadin-combo-box-0"
+    slot="label"
+  >
+  </label>
+  <div
+    hidden=""
+    id="error-message-vaadin-combo-box-2"
+    slot="error-message"
+  >
+  </div>
+  <input
+    aria-autocomplete="list"
+    aria-controls="vaadin-combo-box-scroller-3"
+    aria-expanded="true"
+    autocapitalize="off"
+    autocomplete="off"
+    autocorrect="off"
+    id="input-vaadin-combo-box-4"
+    role="combobox"
+    slot="input"
+    spellcheck="false"
+  >
+</vaadin-combo-box>
+`;
+/* end snapshot vaadin-combo-box host opened default */
+
+snapshots["vaadin-combo-box host opened overlay"] = 
+`<vaadin-combo-box-overlay
+  dir="ltr"
+  id="overlay"
+  no-vertical-overlap=""
+  opened=""
+  start-aligned=""
+  top-aligned=""
+>
+  <vaadin-combo-box-scroller
+    aria-setsize="2"
+    id="vaadin-combo-box-scroller-3"
+    role="listbox"
+  >
+    <vaadin-combo-box-item
+      aria-posinset="1"
+      aria-selected="false"
+      id="vaadin-combo-box-item-0"
+      role="option"
+      tabindex="-1"
+    >
+      Item 1
+    </vaadin-combo-box-item>
+    <vaadin-combo-box-item
+      aria-posinset="2"
+      aria-selected="false"
+      id="vaadin-combo-box-item-1"
+      role="option"
+      tabindex="-1"
+    >
+      Item 2
+    </vaadin-combo-box-item>
+  </vaadin-combo-box-scroller>
+</vaadin-combo-box-overlay>
+`;
+/* end snapshot vaadin-combo-box host opened overlay */
+
+snapshots["vaadin-combo-box host opened theme overlay"] = 
+`<vaadin-combo-box-overlay
+  dir="ltr"
+  id="overlay"
+  no-vertical-overlap=""
+  opened=""
+  start-aligned=""
+  theme="align-right"
+  top-aligned=""
+>
+  <vaadin-combo-box-scroller
+    aria-setsize="2"
+    id="vaadin-combo-box-scroller-3"
+    role="listbox"
+  >
+    <vaadin-combo-box-item
+      aria-posinset="1"
+      aria-selected="false"
+      id="vaadin-combo-box-item-0"
+      role="option"
+      tabindex="-1"
+    >
+      Item 1
+    </vaadin-combo-box-item>
+    <vaadin-combo-box-item
+      aria-posinset="2"
+      aria-selected="false"
+      id="vaadin-combo-box-item-1"
+      role="option"
+      tabindex="-1"
+    >
+      Item 2
+    </vaadin-combo-box-item>
+  </vaadin-combo-box-scroller>
+</vaadin-combo-box-overlay>
+`;
+/* end snapshot vaadin-combo-box host opened theme overlay */
+
 snapshots["vaadin-combo-box shadow default"] = 
 `<div class="vaadin-combo-box-container">
   <div part="label">
diff --git a/packages/combo-box/test/dom/combo-box.test.js b/packages/combo-box/test/dom/combo-box.test.js
index 46773531d73..b2c73d122b0 100644
--- a/packages/combo-box/test/dom/combo-box.test.js
+++ b/packages/combo-box/test/dom/combo-box.test.js
@@ -1,5 +1,5 @@
 import { expect } from '@esm-bundle/chai';
-import { aTimeout, fixtureSync } from '@vaadin/testing-helpers';
+import { aTimeout, fixtureSync, oneEvent } from '@vaadin/testing-helpers';
 import '../../src/vaadin-combo-box.js';
 import { resetUniqueId } from '@vaadin/component-base/src/unique-id-utils.js';
 
@@ -42,6 +42,33 @@ describe('vaadin-combo-box', () => {
       await aTimeout(0);
       await expect(comboBox).dom.to.equalSnapshot();
     });
+
+    describe('opened', () => {
+      const SNAPSHOT_CONFIG = {
+        // Some inline CSS styles related to the overlay's position
+        // may slightly change depending on the environment, so ignore them.
+        ignoreAttributes: ['style'],
+      };
+
+      beforeEach(async () => {
+        comboBox.items = ['Item 1', 'Item 2'];
+        comboBox.open();
+        await oneEvent(comboBox.$.overlay, 'vaadin-overlay-open');
+      });
+
+      it('default', async () => {
+        await expect(comboBox).dom.to.equalSnapshot(SNAPSHOT_CONFIG);
+      });
+
+      it('overlay', async () => {
+        await expect(comboBox.$.overlay).dom.to.equalSnapshot(SNAPSHOT_CONFIG);
+      });
+
+      it('theme overlay', async () => {
+        comboBox.setAttribute('theme', 'align-right');
+        await expect(comboBox.$.overlay).dom.to.equalSnapshot(SNAPSHOT_CONFIG);
+      });
+    });
   });
 
   describe('shadow', () => {