From 7ffbec7ce15c03c0373cb08cccdbc3bedfb54add Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Mon, 18 Nov 2024 14:44:57 +0100 Subject: [PATCH] add more tests --- .../lib/uui-card-block-type.test.ts | 31 ++++++++++++++---- .../lib/uui-card-content-node.test.ts | 14 ++++++-- .../uui-card-media/lib/uui-card-media.test.ts | 30 +++++++++++++---- .../uui-card-user/lib/uui-card-user.test.ts | 32 +++++++++++++++---- 4 files changed, 84 insertions(+), 23 deletions(-) diff --git a/packages/uui-card-block-type/lib/uui-card-block-type.test.ts b/packages/uui-card-block-type/lib/uui-card-block-type.test.ts index a930ef19b..e2386794a 100644 --- a/packages/uui-card-block-type/lib/uui-card-block-type.test.ts +++ b/packages/uui-card-block-type/lib/uui-card-block-type.test.ts @@ -79,7 +79,7 @@ describe('UUICardBlockTypeElement', () => { describe('events', () => { describe('open', () => { it('emits a open event when open-part is clicked', async () => { - const listener = oneEvent(element, UUICardEvent.OPEN, false); + const listener = oneEvent(element, UUICardEvent.OPEN); const infoElement: HTMLElement | null = element.shadowRoot!.querySelector('#open-part'); infoElement?.click(); @@ -93,13 +93,34 @@ describe('UUICardBlockTypeElement', () => { it('emits a selected event when selectable', async () => { element.selectable = true; await elementUpdated(element); - const listener = oneEvent(element, UUISelectableEvent.SELECTED, false); + const listener = oneEvent(element, UUISelectableEvent.SELECTED); element.click(); const event = await listener; expect(event).to.exist; expect(event.type).to.equal(UUISelectableEvent.SELECTED); expect(element.selected).to.be.true; }); + + it('can be selected with keyboard', async () => { + element.selectable = true; + await elementUpdated(element); + const listener = oneEvent(element, UUISelectableEvent.SELECTED); + element.dispatchEvent(new KeyboardEvent('keypress', { key: 'Enter' })); + const event = await listener; + expect(event).to.exist; + expect(event.type).to.equal(UUISelectableEvent.SELECTED); + expect(element.selected).to.be.true; + + const unselectedListener = oneEvent( + element, + UUISelectableEvent.DESELECTED, + ); + element.dispatchEvent(new KeyboardEvent('keypress', { key: 'Enter' })); + const event2 = await unselectedListener; + expect(event2).to.exist; + expect(event2.type).to.equal(UUISelectableEvent.DESELECTED); + expect(element.selected).to.be.false; + }); }); describe('deselect', () => { @@ -107,11 +128,7 @@ describe('UUICardBlockTypeElement', () => { element.selectable = true; element.selected = true; await elementUpdated(element); - const listener = oneEvent( - element, - UUISelectableEvent.DESELECTED, - false, - ); + const listener = oneEvent(element, UUISelectableEvent.DESELECTED); element.click(); const event = await listener; expect(event).to.exist; diff --git a/packages/uui-card-content-node/lib/uui-card-content-node.test.ts b/packages/uui-card-content-node/lib/uui-card-content-node.test.ts index 279b2c7b9..40fa3448b 100644 --- a/packages/uui-card-content-node/lib/uui-card-content-node.test.ts +++ b/packages/uui-card-content-node/lib/uui-card-content-node.test.ts @@ -75,7 +75,7 @@ describe('UUICardContentNodeElement', () => { describe('events', () => { describe('open', () => { it('emits a open event when info is clicked', async () => { - const listener = oneEvent(element, UUICardEvent.OPEN, false); + const listener = oneEvent(element, UUICardEvent.OPEN); const infoElement: HTMLElement | null = element.shadowRoot!.querySelector('#open-part'); infoElement?.click(); @@ -85,7 +85,7 @@ describe('UUICardContentNodeElement', () => { }); it('emits a open event when icon is clicked', async () => { - const listener = oneEvent(element, UUICardEvent.OPEN, false); + const listener = oneEvent(element, UUICardEvent.OPEN); const iconElement: HTMLElement | null = element.shadowRoot!.querySelector('#icon'); iconElement?.click(); @@ -116,6 +116,16 @@ describe('UUICardContentNodeElement', () => { expect(event).to.exist; expect(event.type).to.equal(UUISelectableEvent.SELECTED); expect(element.selected).to.be.true; + + const unselectedListener = oneEvent( + element, + UUISelectableEvent.DESELECTED, + ); + element.dispatchEvent(new KeyboardEvent('keypress', { key: 'Enter' })); + const event2 = await unselectedListener; + expect(event2).to.exist; + expect(event2.type).to.equal(UUISelectableEvent.DESELECTED); + expect(element.selected).to.be.false; }); }); diff --git a/packages/uui-card-media/lib/uui-card-media.test.ts b/packages/uui-card-media/lib/uui-card-media.test.ts index 902c483fa..e759aa831 100644 --- a/packages/uui-card-media/lib/uui-card-media.test.ts +++ b/packages/uui-card-media/lib/uui-card-media.test.ts @@ -78,7 +78,7 @@ describe('UUICardMediaElement', () => { describe('events', () => { describe('open', () => { it('emits a open event when open-part is clicked', async () => { - const listener = oneEvent(element, UUICardEvent.OPEN, false); + const listener = oneEvent(element, UUICardEvent.OPEN); const infoElement: HTMLElement | null = element.shadowRoot!.querySelector('#open-part'); infoElement?.click(); @@ -92,13 +92,33 @@ describe('UUICardMediaElement', () => { it('emits a selected event when selectable', async () => { element.selectable = true; await elementUpdated(element); - const listener = oneEvent(element, UUISelectableEvent.SELECTED, false); + const listener = oneEvent(element, UUISelectableEvent.SELECTED); element.click(); const event = await listener; expect(event).to.exist; expect(event.type).to.equal(UUISelectableEvent.SELECTED); expect(element.selected).to.be.true; }); + it('can be selected with keyboard', async () => { + element.selectable = true; + await elementUpdated(element); + const listener = oneEvent(element, UUISelectableEvent.SELECTED); + element.dispatchEvent(new KeyboardEvent('keypress', { key: 'Enter' })); + const event = await listener; + expect(event).to.exist; + expect(event.type).to.equal(UUISelectableEvent.SELECTED); + expect(element.selected).to.be.true; + + const unselectedListener = oneEvent( + element, + UUISelectableEvent.DESELECTED, + ); + element.dispatchEvent(new KeyboardEvent('keypress', { key: 'Enter' })); + const event2 = await unselectedListener; + expect(event2).to.exist; + expect(event2.type).to.equal(UUISelectableEvent.DESELECTED); + expect(element.selected).to.be.false; + }); }); describe('deselect', () => { @@ -106,11 +126,7 @@ describe('UUICardMediaElement', () => { element.selectable = true; element.selected = true; await elementUpdated(element); - const listener = oneEvent( - element, - UUISelectableEvent.DESELECTED, - false, - ); + const listener = oneEvent(element, UUISelectableEvent.DESELECTED); element.click(); const event = await listener; expect(event).to.exist; diff --git a/packages/uui-card-user/lib/uui-card-user.test.ts b/packages/uui-card-user/lib/uui-card-user.test.ts index c58ecaa47..679788bf5 100644 --- a/packages/uui-card-user/lib/uui-card-user.test.ts +++ b/packages/uui-card-user/lib/uui-card-user.test.ts @@ -77,7 +77,7 @@ describe('UUICardUserElement', () => { describe('events', () => { describe('open', () => { it('emits a open event when open-part is clicked', async () => { - const listener = oneEvent(element, UUICardEvent.OPEN, false); + const listener = oneEvent(element, UUICardEvent.OPEN); const infoElement: HTMLElement | null = element.shadowRoot!.querySelector('#open-part'); infoElement?.click(); @@ -91,13 +91,35 @@ describe('UUICardUserElement', () => { it('emits a selected event when selectable', async () => { element.selectable = true; await elementUpdated(element); - const listener = oneEvent(element, UUISelectableEvent.SELECTED, false); + const listener = oneEvent(element, UUISelectableEvent.SELECTED); element.click(); const event = await listener; expect(event).to.exist; expect(event.type).to.equal(UUISelectableEvent.SELECTED); expect(element.selected).to.be.true; }); + + it('can be selected with keyboard', async () => { + element.selectable = true; + await elementUpdated(element); + + const listener = oneEvent(element, UUISelectableEvent.SELECTED); + element.dispatchEvent(new KeyboardEvent('keypress', { key: 'Enter' })); + const event = await listener; + expect(event).to.exist; + expect(event.type).to.equal(UUISelectableEvent.SELECTED); + expect(element.selected).to.be.true; + + const unselectedListener = oneEvent( + element, + UUISelectableEvent.DESELECTED, + ); + element.dispatchEvent(new KeyboardEvent('keypress', { key: 'Enter' })); + const event2 = await unselectedListener; + expect(event2).to.exist; + expect(event2.type).to.equal(UUISelectableEvent.DESELECTED); + expect(element.selected).to.be.false; + }); }); describe('deselect', () => { @@ -105,11 +127,7 @@ describe('UUICardUserElement', () => { element.selectable = true; element.selected = true; await elementUpdated(element); - const listener = oneEvent( - element, - UUISelectableEvent.DESELECTED, - false, - ); + const listener = oneEvent(element, UUISelectableEvent.DESELECTED); element.click(); const event = await listener; expect(event).to.exist;