@api-client/ui 0.5.18 → 0.5.20

package/test/md/dialog/UiDialog.test.ts

@@ -441,5 +441,319 @@ describe('md', () => {
         })
       })
     })
+
+    describe('closing event', () => {
+      it('dispatches the closing event before close event when dismissing', async () => {
+        const element = await buttonFixture()
+        const closingSpy = sinon.spy()
+        const closeSpy = sinon.spy()
+        element.addEventListener('closing', closingSpy)
+        element.addEventListener('close', closeSpy)
+
+        const button = element.querySelector('ui-button[value="dismiss"]') as UiButton
+        button.click()
+
+        assert.isTrue(closingSpy.calledOnce, 'closing event was dispatched')
+        assert.isTrue(closeSpy.calledOnce, 'close event was dispatched')
+        assert.isTrue(closingSpy.calledBefore(closeSpy), 'closing event was dispatched before close event')
+      })
+
+      it('dispatches the closing event before close event when confirming', async () => {
+        const element = await buttonFixture()
+        const closingSpy = sinon.spy()
+        const closeSpy = sinon.spy()
+        element.addEventListener('closing', closingSpy)
+        element.addEventListener('close', closeSpy)
+
+        const button = element.querySelector('ui-button[value="confirm"]') as UiButton
+        button.click()
+
+        assert.isTrue(closingSpy.calledOnce, 'closing event was dispatched')
+        assert.isTrue(closeSpy.calledOnce, 'close event was dispatched')
+        assert.isTrue(closingSpy.calledBefore(closeSpy), 'closing event was dispatched before close event')
+      })
+
+      it('dispatches the closing event when pressing Escape', async () => {
+        const element = await buttonFixture()
+        const closingSpy = sinon.spy()
+        const closeSpy = sinon.spy()
+        element.addEventListener('closing', closingSpy)
+        element.addEventListener('close', closeSpy)
+
+        element.open = true
+        await element.updateComplete
+        const button = element.querySelector('ui-button')!
+        button.focus()
+        await UiMock.keyPress(element, 'Escape', { key: 'Escape' })
+
+        assert.isTrue(closingSpy.calledOnce, 'closing event was dispatched')
+        assert.isTrue(closeSpy.calledOnce, 'close event was dispatched')
+        assert.isTrue(closingSpy.calledBefore(closeSpy), 'closing event was dispatched before close event')
+      })
+
+      it('dispatches the closing event with correct detail for dismiss action', async () => {
+        const element = await buttonFixture()
+        const closingSpy = sinon.spy()
+        element.addEventListener('closing', closingSpy)
+
+        const button = element.querySelector('ui-button[value="dismiss"]') as UiButton
+        button.click()
+
+        assert.isTrue(closingSpy.calledOnce, 'closing event was dispatched')
+        const event = closingSpy.args[0][0] as CustomEvent<UiDialogClosingReason>
+        assert.isTrue(event.detail.cancelled, 'cancelled flag is true for dismiss action')
+        assert.isUndefined(event.detail.value, 'value is undefined when no dialogValue is set')
+      })
+
+      it('dispatches the closing event with correct detail for confirm action', async () => {
+        const element = await buttonFixture()
+        const closingSpy = sinon.spy()
+        element.addEventListener('closing', closingSpy)
+
+        const button = element.querySelector('ui-button[value="confirm"]') as UiButton
+        button.click()
+
+        assert.isTrue(closingSpy.calledOnce, 'closing event was dispatched')
+        const event = closingSpy.args[0][0] as CustomEvent<UiDialogClosingReason>
+        assert.isFalse(event.detail.cancelled, 'cancelled flag is false for confirm action')
+        assert.isUndefined(event.detail.value, 'value is undefined when no dialogValue is set')
+      })
+
+      it('includes dialogValue in closing event detail', async () => {
+        const element = await buttonFixture()
+        element.dialogValue = 'test-value'
+        const closingSpy = sinon.spy()
+        element.addEventListener('closing', closingSpy)
+
+        const button = element.querySelector('ui-button[value="confirm"]') as UiButton
+        button.click()
+
+        assert.isTrue(closingSpy.calledOnce, 'closing event was dispatched')
+        const event = closingSpy.args[0][0] as CustomEvent<UiDialogClosingReason>
+        assert.equal(event.detail.value, 'test-value', 'dialogValue is included in event detail')
+      })
+
+      it('prevents dialog closing when closing event is cancelled', async () => {
+        const element = await buttonFixture()
+        const closingSpy = sinon.spy()
+        const closeSpy = sinon.spy()
+
+        element.addEventListener('closing', (event) => {
+          closingSpy()
+          event.preventDefault() // Cancel the closing
+        })
+        element.addEventListener('close', closeSpy)
+
+        element.open = true
+        await element.updateComplete
+        assert.isTrue(element.open, 'dialog is initially open')
+
+        const button = element.querySelector('ui-button[value="dismiss"]') as UiButton
+        button.click()
+
+        assert.isTrue(closingSpy.calledOnce, 'closing event was dispatched')
+        assert.isFalse(closeSpy.called, 'close event was not dispatched')
+        assert.isTrue(element.open, 'dialog remains open when closing is prevented')
+      })
+
+      it('prevents dialog closing when confirming and closing event is cancelled', async () => {
+        const element = await buttonFixture()
+        const closingSpy = sinon.spy()
+        const closeSpy = sinon.spy()
+
+        element.addEventListener('closing', (event) => {
+          closingSpy()
+          event.preventDefault() // Cancel the closing
+        })
+        element.addEventListener('close', closeSpy)
+
+        element.open = true
+        await element.updateComplete
+        assert.isTrue(element.open, 'dialog is initially open')
+
+        const button = element.querySelector('ui-button[value="confirm"]') as UiButton
+        button.click()
+
+        assert.isTrue(closingSpy.calledOnce, 'closing event was dispatched')
+        assert.isFalse(closeSpy.called, 'close event was not dispatched')
+        assert.isTrue(element.open, 'dialog remains open when closing is prevented')
+      })
+
+      it('prevents dialog closing when pressing Escape and closing event is cancelled', async () => {
+        const element = await buttonFixture()
+        const closingSpy = sinon.spy()
+        const closeSpy = sinon.spy()
+
+        element.addEventListener('closing', (event) => {
+          closingSpy()
+          event.preventDefault() // Cancel the closing
+        })
+        element.addEventListener('close', closeSpy)
+
+        element.open = true
+        await element.updateComplete
+        assert.isTrue(element.open, 'dialog is initially open')
+
+        const button = element.querySelector('ui-button')!
+        button.focus()
+        await UiMock.keyPress(element, 'Escape', { key: 'Escape' })
+
+        assert.isTrue(closingSpy.calledOnce, 'closing event was dispatched')
+        assert.isFalse(closeSpy.called, 'close event was not dispatched')
+        assert.isTrue(element.open, 'dialog remains open when closing is prevented')
+      })
+
+      it('prevents native dialog close and reopens when closing event is cancelled', async () => {
+        const element = await modalFixture()
+        const closingSpy = sinon.spy()
+        const showModalSpy = sinon.spy(element.dialog, 'showModal')
+
+        element.addEventListener('closing', (event) => {
+          closingSpy()
+          event.preventDefault() // Cancel the closing
+        })
+
+        element.open = true
+        await element.updateComplete
+        assert.isTrue(element.open, 'dialog is initially open')
+        assert.isTrue(element.dialog.open, 'native dialog is open')
+
+        // Reset the spy count after initial open
+        showModalSpy.resetHistory()
+
+        // Simulate native dialog close event (e.g., clicking backdrop)
+        element.dialog.dispatchEvent(new Event('close'))
+
+        assert.isTrue(closingSpy.calledOnce, 'closing event was dispatched')
+        assert.isTrue(element.open, 'dialog remains open when closing is prevented')
+        assert.isTrue(showModalSpy.calledOnce, 'showModal was called to reopen the dialog')
+      })
+
+      it('verifies closing event properties', async () => {
+        const element = await buttonFixture()
+        let closingEvent: CustomEvent<UiDialogClosingReason>
+
+        element.addEventListener('closing', (event) => {
+          closingEvent = event as CustomEvent<UiDialogClosingReason>
+        })
+
+        const button = element.querySelector('ui-button[value="dismiss"]') as UiButton
+        button.click()
+
+        assert.isDefined(closingEvent!, 'closing event was dispatched')
+        assert.isTrue(closingEvent!.cancelable, 'closing event is cancelable')
+        assert.isFalse(closingEvent!.bubbles, 'closing event does not bubble')
+        assert.isFalse(closingEvent!.composed, 'closing event is not composed')
+        assert.equal(closingEvent!.type, 'closing', 'event type is "closing"')
+      })
+
+      it('works with imperative dismiss and confirm buttons', async () => {
+        const element = await basicFixture()
+        element.dismissLabel = 'Cancel'
+        element.confirmLabel = 'OK'
+        await element.updateComplete
+
+        const closingSpy = sinon.spy()
+        const closeSpy = sinon.spy()
+        element.addEventListener('closing', closingSpy)
+        element.addEventListener('close', closeSpy)
+
+        // Test dismiss button
+        const dismissButton = element.shadowRoot!.querySelector('.internal-button[value="dismiss"]') as UiButton
+        dismissButton.click()
+
+        assert.isTrue(closingSpy.calledOnce, 'closing event was dispatched for dismiss')
+        assert.isTrue(closeSpy.calledOnce, 'close event was dispatched for dismiss')
+
+        // Reset spies and test confirm button
+        closingSpy.resetHistory()
+        closeSpy.resetHistory()
+        element.open = true
+        await element.updateComplete
+
+        const confirmButton = element.shadowRoot!.querySelector('.internal-button[value="confirm"]') as UiButton
+        confirmButton.click()
+
+        assert.isTrue(closingSpy.calledOnce, 'closing event was dispatched for confirm')
+        assert.isTrue(closeSpy.calledOnce, 'close event was dispatched for confirm')
+      })
+
+      it('can prevent closing with imperative buttons', async () => {
+        const element = await basicFixture()
+        element.dismissLabel = 'Cancel'
+        await element.updateComplete
+
+        const closingSpy = sinon.spy()
+        const closeSpy = sinon.spy()
+
+        element.addEventListener('closing', (event) => {
+          closingSpy()
+          event.preventDefault()
+        })
+        element.addEventListener('close', closeSpy)
+
+        element.open = true
+        await element.updateComplete
+
+        const dismissButton = element.shadowRoot!.querySelector('.internal-button[value="dismiss"]') as UiButton
+        dismissButton.click()
+
+        assert.isTrue(closingSpy.calledOnce, 'closing event was dispatched')
+        assert.isFalse(closeSpy.called, 'close event was not dispatched')
+        assert.isTrue(element.open, 'dialog remains open')
+      })
+    })
+
+    describe('accessibility', () => {
+      it('meets accessibility standards in closed state', async () => {
+        const element = await basicFixture()
+        await assert.isAccessible(element)
+      })
+
+      it('meets accessibility standards when open', async () => {
+        const element = await basicFixture()
+        element.open = true
+        await element.updateComplete
+        await assert.isAccessible(element)
+      })
+
+      it('meets accessibility standards with modal dialog', async () => {
+        const element = await modalFixture()
+        element.open = true
+        await element.updateComplete
+        await assert.isAccessible(element)
+      })
+
+      it('meets accessibility standards with full content', async () => {
+        const element: UiDialog = await fixture(html`
+          <ui-dialog modal open>
+            <ui-icon slot="icon" icon="deleteOutline"></ui-icon>
+            <span slot="title">Delete confirmation</span>
+            <p>Are you sure you want to delete this item?</p>
+            <ui-button color="text" slot="button" value="dismiss">Cancel</ui-button>
+            <ui-button color="text" slot="button" value="confirm">Delete</ui-button>
+          </ui-dialog>
+        `)
+        await element.updateComplete
+        await assert.isAccessible(element)
+      })
+
+      it('maintains accessibility when closing is prevented', async () => {
+        const element = await buttonFixture()
+        element.addEventListener('closing', (event) => {
+          event.preventDefault()
+        })
+
+        element.open = true
+        await element.updateComplete
+
+        const button = element.querySelector('ui-button[value="dismiss"]') as UiButton
+        button.click()
+
+        // Dialog should remain open and accessible
+        assert.isTrue(element.open, 'dialog remains open')
+        await assert.isAccessible(element)
+      })
+    })
   })
 })