Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
#0@minor: Add support for HTMLButtonElement.
- Loading branch information
Showing
4 changed files
with
188 additions
and
1 deletion.
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
82 changes: 82 additions & 0 deletions
82
packages/happy-dom/src/nodes/html-button-element/HTMLButtonElement.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,82 @@ | ||
import HTMLElement from '../html-element/HTMLElement'; | ||
import IHTMLButtonElement from './IHTMLButtonElement'; | ||
|
||
/** | ||
* HTML Button Element. | ||
* | ||
* Reference: | ||
* https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement. | ||
*/ | ||
export default class HTMLButtonElement extends HTMLElement implements IHTMLButtonElement { | ||
/** | ||
* Returns value. | ||
* | ||
* @returns Value. | ||
*/ | ||
public get value(): string { | ||
return this.getAttributeNS(null, 'value'); | ||
} | ||
|
||
/** | ||
* Sets value. | ||
* | ||
* @param value Value. | ||
*/ | ||
public set value(value: string) { | ||
this.setAttributeNS(null, 'value', value); | ||
} | ||
|
||
/** | ||
* Returns disabled. | ||
* | ||
* @returns Disabled. | ||
*/ | ||
public get disabled(): boolean { | ||
return this.getAttributeNS(null, 'disabled') !== null; | ||
} | ||
|
||
/** | ||
* Sets disabled. | ||
* | ||
* @param disabled Disabled. | ||
*/ | ||
public set disabled(disabled: boolean) { | ||
if (!disabled) { | ||
this.removeAttributeNS(null, 'disabled'); | ||
} else { | ||
this.setAttributeNS(null, 'disabled', ''); | ||
} | ||
} | ||
|
||
/** | ||
* Returns type | ||
* | ||
* @returns Type | ||
*/ | ||
public get type(): string { | ||
return this.sanitizeType(this.getAttributeNS(null, 'type')); | ||
} | ||
|
||
/** | ||
* Sets type | ||
* | ||
* @param v Type | ||
*/ | ||
public set type(v: string) { | ||
this.setAttributeNS(null, 'type', this.sanitizeType(v)); | ||
} | ||
|
||
/** | ||
* | ||
* @param type | ||
*/ | ||
private sanitizeType(type: string): string { | ||
type = (type && type.toLowerCase()) || 'submit'; | ||
|
||
if (!['submit', 'reset', 'button', 'menu'].includes(type)) { | ||
type = 'submit'; | ||
} | ||
|
||
return type; | ||
} | ||
} |
13 changes: 13 additions & 0 deletions
13
packages/happy-dom/src/nodes/html-button-element/IHTMLButtonElement.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,13 @@ | ||
import IHTMLElement from '../html-element/IHTMLElement'; | ||
|
||
/** | ||
* HTML Button Element. | ||
* | ||
* Reference: | ||
* https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement. | ||
*/ | ||
export default interface IHTMLButtonElement extends IHTMLElement { | ||
type: string; | ||
disabled: boolean; | ||
value: string; | ||
} |
91 changes: 91 additions & 0 deletions
91
packages/happy-dom/test/nodes/html-button-element/HTMLButtonElement.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,91 @@ | ||
import Window from '../../../src/window/Window'; | ||
import Document from '../../../src/nodes/document/Document'; | ||
import HTMLButtonElement from '../../../src/nodes/html-button-element/HTMLButtonElement'; | ||
|
||
describe('HTMLButtonElement', () => { | ||
let window: Window; | ||
let document: Document; | ||
let element: HTMLButtonElement; | ||
|
||
beforeEach(() => { | ||
window = new Window(); | ||
document = window.document; | ||
element = <HTMLButtonElement>document.createElement('button'); | ||
}); | ||
|
||
describe('get value()', () => { | ||
it(`Returns the attribute "value".`, () => { | ||
element.setAttribute('value', 'VALUE'); | ||
expect(element.value).toBe('VALUE'); | ||
}); | ||
}); | ||
|
||
describe('set value()', () => { | ||
it(`Sets the attribute "value".`, () => { | ||
element.value = 'VALUE'; | ||
expect(element.getAttribute('value')).toBe('VALUE'); | ||
}); | ||
}); | ||
|
||
describe(`get disabled()`, () => { | ||
it('Returns attribute value.', () => { | ||
expect(element.disabled).toBe(false); | ||
element.setAttribute('disabled', ''); | ||
expect(element.disabled).toBe(true); | ||
}); | ||
}); | ||
|
||
describe(`set disabled()`, () => { | ||
it('Sets attribute value.', () => { | ||
element.disabled = true; | ||
expect(element.getAttribute('disabled')).toBe(''); | ||
}); | ||
}); | ||
|
||
describe('get type()', () => { | ||
it(`Defaults to "submit".`, () => { | ||
expect(element.type).toBe('submit'); | ||
}); | ||
|
||
it(`Returns the attribute "type".`, () => { | ||
element.setAttribute('type', 'menu'); | ||
expect(element.type).toBe('menu'); | ||
}); | ||
|
||
it(`Sanitizes the value before returning.`, () => { | ||
element.setAttribute('type', 'reset'); | ||
expect(element.type).toBe('reset'); | ||
|
||
element.setAttribute('type', 'button'); | ||
expect(element.type).toBe('button'); | ||
|
||
element.setAttribute('type', 'submit'); | ||
expect(element.type).toBe('submit'); | ||
|
||
element.setAttribute('type', 'MeNu'); | ||
expect(element.type).toBe('menu'); | ||
|
||
element.setAttribute('type', 'foobar'); | ||
expect(element.type).toBe('submit'); | ||
}); | ||
}); | ||
|
||
describe('set type()', () => { | ||
it(`Sets the attribute "type" after sanitizing.`, () => { | ||
element.type = 'SuBmIt'; | ||
expect(element.getAttribute('type')).toBe('submit'); | ||
|
||
element.type = 'reset'; | ||
expect(element.getAttribute('type')).toBe('reset'); | ||
|
||
element.type = 'button'; | ||
expect(element.getAttribute('type')).toBe('button'); | ||
|
||
element.type = 'menu'; | ||
expect(element.getAttribute('type')).toBe('menu'); | ||
|
||
element.type = null; | ||
expect(element.getAttribute('type')).toBe('submit'); | ||
}); | ||
}); | ||
}); |