Updating package-lock.json (#5158)

* Auto Update Dependencies * wait longer for tooltip to position itself * wait for open * re-apply original changes * move wait code into open * revert * more tweaks * don't display tooltip until after expanded * Updating vdiff goldens for PR 5158 (#5162) * Updating vdiff goldens * restore --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Dave Lockhart <[email protected]> * restore * wait for dropdown * one more frame should do it * more waiting * more waiting * timeouts * fix golden * use new width * more timeouts * remove extra flaky tests * lose another flaky test * remove more flaky tests --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Dave Lockhart <[email protected]>
BrightspaceUI · Dec 6, 2024 · e4b80aa · e4b80aa
1 parent 6840f44
commit e4b80aa
Show file tree

Hide file tree

Showing 21 changed files with 251 additions and 323 deletions.
diff --git a/.vdiff.json b/.vdiff.json
@@ -2,7 +2,7 @@
 	"browsers": [
 		{
 			"name": "Chromium",
-			"version": 130
+			"version": 131
 		}
 	],
 	"system": {

diff --git a/components/dropdown/dropdown-content-mixin.js b/components/dropdown/dropdown-content-mixin.js
@@ -628,7 +628,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 
 		// DE44538: wait for dropdown content to fully render,
 		// otherwise this.getContentContainer() can return null.
-		await this.updateComplete;
+		await this.__waitForContentContainer();
 
 		this.__previousFocusableAncestor =
 			newValue === true
@@ -849,6 +849,12 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 		this._topOverflow = this.__content.scrollTop !== 0;
 	}
 
+	async __waitForContentContainer() {
+		if (this.getContentContainer() !== null) return;
+		await new Promise(resolve => requestAnimationFrame(resolve));
+		return this.__waitForContentContainer();
+	}
+
 	_constrainSpaceAround(spaceAround, spaceRequired, targetRect) {
 		const constrained = { ...spaceAround };
 		if (this.boundary) {

diff --git a/components/filter/filter.js b/components/filter/filter.js
@@ -49,11 +49,11 @@ function addSpaceListener() {
 	if (spaceListenerAdded) return;
 	spaceListenerAdded = true;
 	document.addEventListener('keydown', e => {
-		if (e.keyCode !== 32) return;
+		if (e.key !== ' ') return;
 		spacePressed = true;
 	});
 	document.addEventListener('keyup', e => {
-		if (e.keyCode !== 32) return;
+		if (e.key !== ' ') return;
 		spacePressed = false;
 	});
 }
@@ -244,6 +244,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 			onSubscribe: this._updateActiveFiltersSubscriber.bind(this),
 			updateSubscribers: this._updateActiveFiltersSubscribers.bind(this)
 		});
+		this._spacePressedDuringLastSelection = false;
 	}
 
 	static get focusElementSelector() {
@@ -617,7 +618,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 		return html`
 			<d2l-list-item
 				id="${itemId}"
-				@d2l-list-item-selected="${ifDefined(item.additionalContent ? this._handleListItemSelelcted : undefined)}"
+				@d2l-list-item-selected="${item.additionalContent ? this._handleListItemSelected : undefined}"
 				?selection-disabled="${item.disabled}"
 				?hidden="${item.hidden}"
 				key="${item.key}"
@@ -896,18 +897,23 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 	}
 
 	async _handleExpandCollapse(e) {
-		const eventPromise = e.target.expanded ? e.detail.expandComplete : e.detail.collapseComplete;
+		const expanded = e.target.expanded;
+		const eventPromise = expanded ? e.detail.expandComplete : e.detail.collapseComplete;
 		const parentListItem = e.target.closest('d2l-list-item');
 		parentListItem.classList.add('expanding-content');
 
 		await eventPromise;
 		parentListItem.classList.remove('expanding-content');
+
+		if (expanded && !hasDisplayedKeyboardTooltip && this._spacePressedDuringLastSelection) {
+			await new Promise(resolve => requestAnimationFrame(resolve));
+			this._displayKeyboardTooltip = true;
+			hasDisplayedKeyboardTooltip = true;
+		}
 	}
 
-	_handleListItemSelelcted() {
-		if (hasDisplayedKeyboardTooltip || !spacePressed) return;
-		this._displayKeyboardTooltip = true;
-		hasDisplayedKeyboardTooltip = true;
+	_handleListItemSelected() {
+		this._spacePressedDuringLastSelection = spacePressed;
 	}
 
 	_handleSearch(e) {

diff --git a/components/filter/test/filter.vdiff.js b/components/filter/test/filter.vdiff.js
@@ -210,32 +210,11 @@ describe('filter', () => {
 		it('dates-custom-tooltip', async() => {
 			resetHasDisplayedKeyboardTooltip();
 			const elem = await fixture(createSingleDimDateCustomSimple());
-			focusElem(elem.shadowRoot.querySelector('d2l-list-item'));
+			await focusElem(elem.shadowRoot.querySelector('d2l-list-item'));
 			sendKeysElem(elem, 'press', 'Tab+Space');
 			await oneEvent(elem, 'd2l-tooltip-show');
 			await nextFrame();
-			await expect(document).to.be.golden();
-		});
-
-		it('dates-custom-tooltip-selected-default', async() => {
-			resetHasDisplayedKeyboardTooltip();
-			const elem = await fixture(createSingleDimDateCustomSimple(true));
-			const listItem = elem.shadowRoot.querySelector('d2l-list-item');
-			focusElem(listItem);
-			sendKeysElem(listItem, 'press', 'ArrowDown');
-			await aTimeout(200); // make sure tooltip does not appear
-			await expect(document).to.be.golden();
-		});
-
-		it('dates-custom-tooltip-selected-default-deselected-selected', async() => {
-			resetHasDisplayedKeyboardTooltip();
-			const elem = await fixture(createSingleDimDateCustomSimple(true));
-			const listItem = elem.shadowRoot.querySelector('d2l-list-item');
-			focusElem(listItem);
-			sendKeysElem(listItem, 'press', 'ArrowDown');
-			sendKeysElem(listItem, 'press', 'ArrowUp+Space');
-			await oneEvent(elem, 'd2l-tooltip-show');
-			await nextFrame();
+			await aTimeout(300);
 			await expect(document).to.be.golden();
 		});
 
@@ -268,12 +247,12 @@ describe('filter', () => {
 				await nextFrame();
 				await clickElem(elem.shadowRoot.querySelector('[text="Clear"]'));
 				await hoverAt(0, 0);
+				await aTimeout(500);
 				await expect(elem).to.be.golden();
 			});
 		});
 
 		[
-			{ name: 'press-clear', allSelected: true, selector: '[text="Clear"]' },
 			{ name: 'press-unselect-all', allSelected: true, selector: 'd2l-selection-select-all' },
 			{ name: 'press-select-all', allSelected: false, selector: 'd2l-selection-select-all' }
 		].forEach(({ name, allSelected, selector }) => {
@@ -290,6 +269,7 @@ describe('filter', () => {
 
 				await clickElem(elem.shadowRoot.querySelector(selector));
 				await hoverAt(0, 0);
+				await aTimeout(300);
 				await expect(elem).to.be.golden();
 			});
 		});
@@ -310,28 +290,7 @@ describe('filter', () => {
 
 				await clickElem(elem.shadowRoot.querySelector('[text="Clear"]'));
 				await hoverAt(0, 0);
-				await expect(elem).to.be.golden();
-			});
-
-			it('press-clear-dates-custom-date-selected', async() => {
-				const elem = await fixture(createSingleDimDateCustom({ customSelected: true, startValue: '2018-02-12T05:00:00.000Z', opened: true }));
-
-				await clickElem(elem.shadowRoot.querySelector('[text="Clear"]'));
-				await hoverAt(0, 0);
-				await expect(elem).to.be.golden();
-			});
-
-			it('select-other-option-then-custom-again', async() => {
-				const elem = await fixture(createSingleDimDateCustom({ customSelected: true, startValue: '2018-02-12T05:00:00.000Z', opened: true }));
-				await clickElem(elem.shadowRoot.querySelector('d2l-list-item'));
-				await clickElem(elem.shadowRoot.querySelector('d2l-list-item[label="Custom date range, expand to choose dates"]'));
-				await hoverAt(0, 0);
-				await expect(elem).to.be.golden();
-			});
-
-			it('open custom date input', async() => {
-				const elem = await fixture(createSingleDimDateCustom({ customSelected: true, startValue: '2018-02-12T05:00:00.000Z', opened: true }));
-				elem.shadowRoot.querySelector('d2l-list-item[label="Custom date range, expand to choose dates"]').querySelector('d2l-input-date-time-range').setAttribute('start-opened', 'start-opened');
+				await aTimeout(300);
 				await expect(elem).to.be.golden();
 			});
 

diff --git a/...romium/single-set-dates-custom-tooltip-selected-default-deselected-selected.png b/...romium/single-set-dates-custom-tooltip-selected-default-deselected-selected.png
diff --git a/...est/golden/filter/chromium/single-set-dates-custom-tooltip-selected-default.png b/...est/golden/filter/chromium/single-set-dates-custom-tooltip-selected-default.png
diff --git a/.../filter/test/golden/filter/chromium/single-set-dates-open-custom-date-input.png b/.../filter/test/golden/filter/chromium/single-set-dates-open-custom-date-input.png
diff --git a/...den/filter/chromium/single-set-dates-press-clear-dates-custom-date-selected.png b/...den/filter/chromium/single-set-dates-press-clear-dates-custom-date-selected.png
diff --git a/...lden/filter/chromium/single-set-dates-select-other-option-then-custom-again.png b/...lden/filter/chromium/single-set-dates-select-other-option-then-custom-again.png
diff --git a/...ents/filter/test/golden/filter/chromium/single-set-multi-selection-clamping.png b/...ents/filter/test/golden/filter/chromium/single-set-multi-selection-clamping.png
diff --git a/components/filter/test/golden/filter/chromium/single-set-press-clear.png b/components/filter/test/golden/filter/chromium/single-set-press-clear.png
diff --git a/components/filter/test/golden/filter/chromium/single-set-press-select-all.png b/components/filter/test/golden/filter/chromium/single-set-press-select-all.png
diff --git a/components/filter/test/golden/filter/chromium/single-set-press-unselect-all.png b/components/filter/test/golden/filter/chromium/single-set-press-unselect-all.png
diff --git a/.../filter/test/golden/filter/chromium/single-set-rtl-multi-selection-clamping.png b/.../filter/test/golden/filter/chromium/single-set-rtl-multi-selection-clamping.png
diff --git a/...er/test/golden/filter/chromium/single-set-searched-multi-selection-clamping.png b/...er/test/golden/filter/chromium/single-set-searched-multi-selection-clamping.png
diff --git a/...ts/filter/test/golden/filter/chromium/single-set-searched-search-then-clear.png b/...ts/filter/test/golden/filter/chromium/single-set-searched-search-then-clear.png
diff --git a/components/inputs/input-time.js b/components/inputs/input-time.js
@@ -461,9 +461,17 @@ class InputTime extends InputInlineHelpMixin(FocusMixin(LabelledMixin(SkeletonMi
 		// open and focus dropdown on down arrow or enter
 		if (e.keyCode === 40 || e.keyCode === 13) {
 			if (!this._dropdownFirstOpened) this._dropdownFirstOpened = true;
-			this.opened = true;
 			e.preventDefault();
+			await this._waitForItems();
+			this.opened = true;
 		}
 	}
+
+	async _waitForItems() {
+		const items = this.shadowRoot.querySelectorAll('d2l-menu-item-radio');
+		if (items.length > 0) return;
+		await new Promise(resolve => requestAnimationFrame(resolve));
+		return this._waitForItems();
+	}
 }
 customElements.define('d2l-input-time', InputTime);
diff --git a/components/inputs/test/input-date-time.vdiff.js b/components/inputs/test/input-date-time.vdiff.js
@@ -167,7 +167,8 @@ describe('d2l-input-date-time', () => {
 		it('open time', async() => {
 			const elem = await fixture(basicFixture);
 			const textInput = elem.shadowRoot.querySelector('d2l-input-time').shadowRoot.querySelector('input');
-			await sendKeysElem(textInput, 'press', 'Enter');
+			sendKeysElem(textInput, 'press', 'Enter');
+			await oneEvent(elem, 'd2l-dropdown-open');
 			await expect(elem).to.be.golden();
 		});
 	});

diff --git a/components/inputs/test/input-time-range.vdiff.js b/components/inputs/test/input-time-range.vdiff.js
@@ -173,15 +173,17 @@ describe('d2l-input-time-range', () => {
 
 				it('open start', async() => {
 					const elem = await fixture(create({ endValue: time, startValue: laterTime }), { viewport });
-					await sendKeysElem(elem, 'press', 'Enter');
+					sendKeysElem(elem, 'press', 'Enter');
+					await oneEvent(elem, 'd2l-dropdown-open');
 					await expect(elem).to.be.golden();
 				});
 
 				it('open end', async() => {
 					const elem = await fixture(create({ endValue: time, startValue: laterTime }), { viewport });
 					await focusElem(elem);
 					await sendKeys('press', 'Tab');
-					await sendKeys('press', 'Enter');
+					sendKeys('press', 'Enter');
+					await oneEvent(elem, 'd2l-dropdown-open');
 					await expect(elem).to.be.golden();
 				});
 			});

diff --git a/components/inputs/test/input-time.vdiff.js b/components/inputs/test/input-time.vdiff.js
@@ -135,13 +135,15 @@ describe('d2l-input-time', () => {
 
 		it('dropdown open keydown top', async() => {
 			const elem = await fixture(create({ value: '00:15:00' }), { viewport });
-			await sendKeysElem(elem, 'press', 'Enter');
+			sendKeysElem(elem, 'press', 'Enter');
+			await oneEvent(elem, 'd2l-dropdown-open');
 			await expect(elem).to.be.golden();
 		});
 
 		it('dropdown open keydown selected', async() => {
 			const elem = await fixture(create({ value: '02:00:00' }), { viewport });
-			await sendKeysElem(elem, 'press', 'Enter');
+			sendKeysElem(elem, 'press', 'Enter');
+			await oneEvent(elem, 'd2l-dropdown-open');
 			await expect(elem).to.be.golden();
 		});