Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
#517@minor: Implement dialog element.
- Loading branch information
Showing
7 changed files
with
188 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
52 changes: 52 additions & 0 deletions
52
packages/happy-dom/src/nodes/html-dialog-element/HTMLDialogElement.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| import Event from '../../event/Event'; | ||
| import HTMLElement from '../html-element/HTMLElement'; | ||
| import IHTMLDialogElement from './IHTMLDialogElement'; | ||
|
|
||
| /** | ||
| * HTML Dialog Element. | ||
| * | ||
| * Reference: | ||
| * https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement. | ||
| */ | ||
| export default class HTMLDialogElement extends HTMLElement implements IHTMLDialogElement { | ||
| /** | ||
| * Returns returnValue. | ||
| * | ||
| * @returns ReturnValue. | ||
| */ | ||
| public returnValue: string; | ||
|
|
||
| /** | ||
| * Returns open. | ||
| * | ||
| * @returns Open. | ||
| */ | ||
| public get open(): boolean { | ||
| return this.hasAttributeNS(null, 'open'); | ||
| } | ||
|
|
||
| /** | ||
| * Closes the dialog. | ||
| * | ||
| * @param returnValue ReturnValue. | ||
| */ | ||
| public close(returnValue?: string): void { | ||
| this.removeAttributeNS(null, 'open'); | ||
| this.returnValue = returnValue; | ||
| this.dispatchEvent(new Event('close', { bubbles: false, cancelable: false })); | ||
| } | ||
|
|
||
| /** | ||
| * Shows the modal. | ||
| */ | ||
| public showModal(): void { | ||
| this.setAttributeNS(null, 'open', ''); | ||
| } | ||
|
|
||
| /** | ||
| * Shows the dialog. | ||
| */ | ||
| public show(): void { | ||
| this.setAttributeNS(null, 'open', ''); | ||
| } | ||
| } |
15 changes: 15 additions & 0 deletions
15
packages/happy-dom/src/nodes/html-dialog-element/IHTMLDialogElement.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| import IHTMLElement from '../html-element/IHTMLElement'; | ||
|
|
||
| /** | ||
| * HTML Dialog Element. | ||
| * | ||
| * Reference: | ||
| * https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement. | ||
| */ | ||
| export default interface IHTMLDialogElement extends IHTMLElement { | ||
| open: boolean; | ||
| returnValue: string; | ||
| close(returnValue?: string): void; | ||
| showModal(): void; | ||
| show(): void; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
110 changes: 110 additions & 0 deletions
110
packages/happy-dom/test/nodes/html-dialog-element/HTMLDialogElement.test.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,110 @@ | ||
| import { Event } from 'src'; | ||
| import Document from '../../../src/nodes/document/Document'; | ||
| import HTMLDialogElement from '../../../src/nodes/html-dialog-element/HTMLDialogElement'; | ||
| import Window from '../../../src/window/Window'; | ||
|
|
||
| describe('HTMLDialogElement', () => { | ||
| let window: Window; | ||
| let document: Document; | ||
| let element: HTMLDialogElement; | ||
|
|
||
| beforeEach(() => { | ||
| window = new Window(); | ||
| document = window.document; | ||
| element = <HTMLDialogElement>document.createElement('dialog'); | ||
| }); | ||
|
|
||
| describe('open', () => { | ||
| it('Should be closed by default', () => { | ||
| expect(element.open).toBe(false); | ||
| }); | ||
|
|
||
| it('Should be open when show has been called', () => { | ||
| element.show(); | ||
| expect(element.open).toBe(true); | ||
| }); | ||
|
|
||
| it('Should be open when showModal has been called', () => { | ||
| element.showModal(); | ||
| expect(element.open).toBe(true); | ||
| }); | ||
| }); | ||
|
|
||
| describe('returnValue', () => { | ||
| it('Should be undefined by default', () => { | ||
| expect(element.returnValue).toBe(undefined); | ||
| }); | ||
|
|
||
| it('Should be set when close has been called with a return value', () => { | ||
| element.close('foo'); | ||
| expect(element.returnValue).toBe('foo'); | ||
| }); | ||
|
|
||
| it('Should be possible to set manually', () => { | ||
| element.returnValue = 'foo'; | ||
| expect(element.returnValue).toBe('foo'); | ||
| }); | ||
| }); | ||
|
|
||
| describe('close', () => { | ||
| it('Should be possible to close an open dialog', () => { | ||
| element.show(); | ||
| element.close(); | ||
| expect(element.open).toBe(false); | ||
| expect(element.getAttributeNS(null, 'open')).toBe(null); | ||
| }); | ||
|
|
||
| it('Should be possible to close an open modal dialog', () => { | ||
| element.showModal(); | ||
| element.close(); | ||
| expect(element.open).toBe(false); | ||
| expect(element.getAttributeNS(null, 'open')).toBe(null); | ||
| }); | ||
|
|
||
| it('Should be possible to close the dialog with a return value', () => { | ||
| element.show(); | ||
| element.close('foo'); | ||
| expect(element.returnValue).toBe('foo'); | ||
| }); | ||
|
|
||
| it('Should be possible to close the modal dialog with a return value', () => { | ||
| element.showModal(); | ||
| element.close('foo'); | ||
| expect(element.returnValue).toBe('foo'); | ||
| }); | ||
|
|
||
| it('Should dispatch a close event', () => { | ||
| let dispatched: Event = null; | ||
| element.addEventListener('close', (event: Event) => (dispatched = event)); | ||
| element.show(); | ||
| element.close(); | ||
| expect(dispatched.cancelable).toBe(false); | ||
| expect(dispatched.bubbles).toBe(false); | ||
| }); | ||
|
|
||
| it('Should dispatch a close event when closing a modal', () => { | ||
| let dispatched: Event = null; | ||
| element.addEventListener('close', (event: Event) => (dispatched = event)); | ||
| element.showModal(); | ||
| element.close(); | ||
| expect(dispatched.cancelable).toBe(false); | ||
| expect(dispatched.bubbles).toBe(false); | ||
| }); | ||
| }); | ||
|
|
||
| describe('showModal', () => { | ||
| it('Should be possible to show a modal dialog', () => { | ||
| element.showModal(); | ||
| expect(element.open).toBe(true); | ||
| expect(element.getAttributeNS(null, 'open')).toBe(''); | ||
| }); | ||
| }); | ||
|
|
||
| describe('show', () => { | ||
| it('Should be possible to show a dialog', () => { | ||
| element.show(); | ||
| expect(element.open).toBe(true); | ||
| expect(element.getAttributeNS(null, 'open')).toBe(''); | ||
| }); | ||
| }); | ||
| }); |