fix(audio): add the draggable button back in infinity state (VIV-878) (…

…#1392)

components/audio/src/vwc-audio.ts

@@ -162,7 +162,7 @@ export class VWCAudio extends LitElement {
 				></vwc-icon>
 				</button>
 				${this.timestamp ? getTimeStampTemplate(this._playheadPosition, this._duration) : nothing}
-				${!this.noseek ? html`<vwc-scrub-bar noseek-button=${ifDefined(this._duration === Infinity ? 'true' : undefined)} @userScrubRequest="${({ detail }: { detail: number }) => this.currentTime = detail * this._duration}" class="scrubber"></vwc-scrub-bar>` : nothing}
+				${!this.noseek ? html`<vwc-scrub-bar style=${ifDefined(this._duration === Infinity ? 'pointer-events: none;' : undefined)} @userScrubRequest="${({ detail }: { detail: number }) => this.currentTime = detail * this._duration}" class="scrubber"></vwc-scrub-bar>` : nothing}
 			</div>
 		`;
 	}

components/audio/test/audio.test.js

@@ -89,16 +89,16 @@ describe('vwc-audio', () => {
 			expect(vwcAudioEl.shadowRoot.querySelector('vwc-scrub-bar')).not.to.exist;
 		});
 
-		it('should add noseek-button to the scrub-bar when duration is Infinity', async function () {
+		it('should disable the scrub-bar button when duration is Infinity', async function () {
 			const [vwcAudioEl] = addElements(textToDomToParent(`<vwc-audio></vwc-audio>`));
 			await waitNextTask();
 			Object.defineProperty(vwcAudioEl._audio, 'duration', {
 				get: () => Infinity
 			});
 			vwcAudioEl._audio.dispatchEvent(new Event('loadedmetadata'));
 			await waitNextTask();
-			expect(vwcAudioEl.shadowRoot.querySelector('vwc-scrub-bar').hasAttribute('noseek-button'))
-				.to.equal(true);
+			const scrubbar = vwcAudioEl.shadowRoot.querySelector('vwc-scrub-bar');
+			expect(scrubbar.style['pointer-events']).to.equal('none');
 		});
 	});
 

components/breadcrumb-item/test/breadcrumb-item.test.js

@@ -12,10 +12,29 @@ const COMPONENT_NAME = 'vwc-breadcrumb-item';
 
 describe('Breadcrumb-item', () => {
 	let addElement = isolatedElementsCreation();
-
+	let element;
+	beforeEach(async () => {
+		[element] = addElement(
+			textToDomToParent(`<${COMPONENT_NAME} text="text"></${COMPONENT_NAME}>`)
+		);
+		await waitNextTask();
+	});
 	it(`${COMPONENT_NAME} is defined as a custom element`, async () => {
 		assert.exists(
 			customElements.get(COMPONENT_NAME)
 		);
 	});
+
+	it('should have an anchor when href is set content', async () => {
+		element.href = 'https://www.google.com';
+		await new Promise(res => {
+			const interval = setInterval(() => {
+				if (element.shadowRoot.querySelector('a.control')) {
+					clearInterval(interval);
+					res();
+				}
+			});
+		});
+		expect(element.shadowRoot.querySelector('a.control')).to.exist;
+	});
 });

components/tags/src/vwc-tag-base.ts

@@ -74,12 +74,6 @@ export class VWCTagBase extends LitElement {
 		}
 	}
 
-	// protected firstUpdated(): void {
-	// 	if (this.selected) {
-	// 		this.handleRippleActivate();
-	// 	}
-	// }
-
 	protected renderRipple(): TemplateResult | string {
 		return this.shouldRenderRipple ?
 			html`<mwc-ripple class="ripple"></mwc-ripple>` : '';

components/tags/test/tag.test.js

@@ -2,9 +2,10 @@ import '../vwc-tag.js';
 import {
 	waitNextTask,
 	textToDomToParent,
-	isolatedElementsCreation
+	isolatedElementsCreation, waitInterval
 } from '../../../test/test-helpers.js';
 import { chaiDomDiff } from '@open-wc/semantic-dom-diff';
+import awaiting from 'kefir/src/two-sources/awaiting';
 
 chai.use(chaiDomDiff);
 
@@ -112,4 +113,28 @@ describe('Tag', () => {
 			expect(Array.from(document.body.children).includes(elementFromRemoveEvent)).to.equal(true);
 		});
 	});
+
+	describe('shouldRenderRipple', async function () {
+		const [actualElement] = (
+			textToDomToParent(`<${COMPONENT_NAME} selectable removable text="Tag Text">Button Text</${COMPONENT_NAME}>`)
+		);
+		actualElement.shouldRenderRipple = true;
+		actualElement.selectable = true;
+		actualElement.removable = true;
+		await actualElement.updateComplete;
+		await waitInterval(100);
+		const baseElement = actualElement.shadowRoot?.querySelector('.vwc-tag');
+		await baseElement?.updateComplete;
+		actualElement.focus();
+		actualElement.blur();
+		baseElement.focus();
+		await baseElement?.updateComplete;
+		baseElement.dispatchEvent(new MouseEvent('click'));
+		baseElement.dispatchEvent(new MouseEvent('mouseenter'));
+		baseElement.dispatchEvent(new MouseEvent('mouseleave'));
+		baseElement.dispatchEvent(new MouseEvent('mousedown'));
+		await waitInterval(10);
+		baseElement.dispatchEvent(new MouseEvent('mouseup'));
+		baseElement.dispatchEvent(new KeyboardEvent('keydown', { key: ' '}));
+	});
 });