From 8a3a3bbaee506ea40b6a34dd0865777dd26a216d Mon Sep 17 00:00:00 2001
From: jorenbroekema <joren.broekema@gmail.com>
Date: Wed, 14 Oct 2020 16:27:54 +0200
Subject: [PATCH] chore: add more listbox regression tests

---
 packages/combobox/test/lion-combobox.test.js  |  1 -
 .../listbox/test-suites/ListboxMixin.suite.js | 42 +++++++++++++++----
 packages/listbox/types/ListboxMixinTypes.d.ts |  2 +-
 3 files changed, 35 insertions(+), 10 deletions(-)

diff --git a/packages/combobox/test/lion-combobox.test.js b/packages/combobox/test/lion-combobox.test.js
index f174d7b53..c9b8756f9 100644
--- a/packages/combobox/test/lion-combobox.test.js
+++ b/packages/combobox/test/lion-combobox.test.js
@@ -545,7 +545,6 @@ describe('lion-combobox', () => {
           <lion-option .choiceValue="${'10'}" checked>Item 1</lion-option>
         </lion-combobox>
       `));
-      // @ts-expect-error sinon not typed correctly?
       const spy = sinon.spy(el._selectionDisplayNode, 'onComboboxElementUpdated');
       el.requestUpdate('modelValue');
       await el.updateComplete;
diff --git a/packages/listbox/test-suites/ListboxMixin.suite.js b/packages/listbox/test-suites/ListboxMixin.suite.js
index 7a565a2ce..cf39c5a03 100644
--- a/packages/listbox/test-suites/ListboxMixin.suite.js
+++ b/packages/listbox/test-suites/ListboxMixin.suite.js
@@ -119,9 +119,14 @@ export function runListboxMixinSuite(customConfig = {}) {
           </${tag}>
         `);
         expect(el.checkedIndex).to.equal(2);
-        const spy = sinon.spy(el, 'requestUpdate');
+        const requestSpy = sinon.spy(el, 'requestUpdate');
+        const updatedSpy = sinon.spy(el, 'updated');
         el.setCheckedIndex(1);
-        expect(spy).to.have.been.calledWith('modelValue', 'other');
+        await el.updateComplete;
+        expect(requestSpy).to.have.been.calledWith('modelValue', 'other');
+        expect(updatedSpy).to.have.been.calledWith(
+          sinon.match.map.contains(new Map([['modelValue', 'other']])),
+        );
       });
 
       it('requests update for modelValue after click', async () => {
@@ -133,9 +138,14 @@ export function runListboxMixinSuite(customConfig = {}) {
           </${tag}>
         `);
         expect(el.checkedIndex).to.equal(2);
-        const spy = sinon.spy(el, 'requestUpdate');
+        const requestSpy = sinon.spy(el, 'requestUpdate');
+        const updatedSpy = sinon.spy(el, 'updated');
         el.formElements[0].click();
-        expect(spy).to.have.been.calledWith('modelValue', 'other');
+        await el.updateComplete;
+        expect(requestSpy).to.have.been.calledWith('modelValue', 'other');
+        expect(updatedSpy).to.have.been.calledWith(
+          sinon.match.map.contains(new Map([['modelValue', 'other']])),
+        );
       });
 
       it('requests update for modelValue when checkedIndex changes for multiple choice', async () => {
@@ -147,9 +157,17 @@ export function runListboxMixinSuite(customConfig = {}) {
           </${tag}>
         `);
         expect(el.checkedIndex).to.eql([2]);
-        const spy = sinon.spy(el, 'requestUpdate');
+        const requestSpy = sinon.spy(el, 'requestUpdate');
+        const updatedSpy = sinon.spy(el, 'updated');
         el.setCheckedIndex(1);
-        expect(spy).to.have.been.calledWith('modelValue', sinon.match.array.deepEquals(['other']));
+        await el.updateComplete;
+        expect(requestSpy).to.have.been.calledWith(
+          'modelValue',
+          sinon.match.array.deepEquals(['other']),
+        );
+        expect(updatedSpy).to.have.been.calledOnce;
+        // reference values vs real values suck :( had to do it like this, sinon matchers did not match because 'other' is inside an array so it's not a "real" match
+        expect([...updatedSpy.args[0][0].entries()]).to.deep.include(['modelValue', ['other']]);
       });
 
       it('requests update for modelValue after click for multiple choice', async () => {
@@ -161,9 +179,17 @@ export function runListboxMixinSuite(customConfig = {}) {
           </${tag}>
         `);
         expect(el.checkedIndex).to.eql([2]);
-        const spy = sinon.spy(el, 'requestUpdate');
+        const requestSpy = sinon.spy(el, 'requestUpdate');
+        const updatedSpy = sinon.spy(el, 'updated');
         el.formElements[0].click();
-        expect(spy).to.have.been.calledWith('modelValue', sinon.match.array.deepEquals(['other']));
+        await el.updateComplete;
+        expect(requestSpy).to.have.been.calledWith(
+          'modelValue',
+          sinon.match.array.deepEquals(['other']),
+        );
+        expect(updatedSpy).to.have.been.calledOnce;
+        // reference values vs real values suck :( had to do it like this, sinon matchers did not match because 'other' is inside an array so it's not a "real" match
+        expect([...updatedSpy.args[0][0].entries()]).to.deep.include(['modelValue', ['other']]);
       });
 
       it(`has a fieldName based on the label`, async () => {
diff --git a/packages/listbox/types/ListboxMixinTypes.d.ts b/packages/listbox/types/ListboxMixinTypes.d.ts
index 4c6ddfecc..a498ea0bd 100644
--- a/packages/listbox/types/ListboxMixinTypes.d.ts
+++ b/packages/listbox/types/ListboxMixinTypes.d.ts
@@ -79,7 +79,7 @@ export declare function ListboxImplementation<T extends Constructor<LitElement>>
   superclass: T,
 ): T &
   Constructor<ListboxHost> &
-  ListboxHost &
+  typeof ListboxHost &
   Constructor<ChoiceGroupHost> &
   typeof ChoiceGroupHost &
   Constructor<SlotHost> &