diff --git a/button/filled-button_test.ts b/button/filled-button_test.ts new file mode 100644 index 0000000000..2d6d9e7965 --- /dev/null +++ b/button/filled-button_test.ts @@ -0,0 +1,73 @@ +// import 'jasmine'; (google3-only) + +import {html} from 'lit'; + +import {Environment} from '../testing/environment.js'; +import {createTokenTests} from '../testing/tokens.js'; + +import {MdFilledButton} from './filled-button.js'; +import {ButtonHarness} from './harness.js'; + +describe('', () => { + const env = new Environment(); + + describe('.styles', () => { + createTokenTests(MdFilledButton.styles); + }); + + describe('form associated', () => { + async function setupTest() { + const root = + env.render(html`
`); + const element = root.querySelector('md-filled-button'); + if (!element) { + throw new Error(`Could not query rendered `); + } + const form = root.querySelector('form'); + if (!form) throw new Error(`Could not query form`); + + await env.waitForStability(); + + return {harness: new ButtonHarness(element), form}; + } + + it('button with type submit can submit a form', async () => { + const {harness, form} = await setupTest(); + harness.element.type = 'submit'; + + spyOn(form, 'requestSubmit'); + spyOn(form, 'reset'); + await harness.clickWithMouse(); + + expect(form.requestSubmit).toHaveBeenCalled(); + expect(form.reset).not.toHaveBeenCalled(); + }); + + it('button with type reset can reset a form', async () => { + const {harness, form} = await setupTest(); + harness.element.type = 'reset'; + + spyOn(form, 'requestSubmit'); + spyOn(form, 'reset'); + await harness.clickWithMouse(); + + expect(form.requestSubmit).not.toHaveBeenCalled(); + expect(form.reset).toHaveBeenCalled(); + }); + + it('submit can be cancelled with preventDefault', async () => { + const {harness, form} = await setupTest(); + harness.element.type = 'submit'; + + spyOn(form, 'requestSubmit'); + + harness.element.addEventListener('click', e => { + e.preventDefault(); + }, {once: true}); + + await harness.clickWithMouse(); + + expect(form.requestSubmit).not.toHaveBeenCalled(); + }); + }); +}); diff --git a/button/lib/button.ts b/button/lib/button.ts index 653f5396e9..fbdfbd3203 100644 --- a/button/lib/button.ts +++ b/button/lib/button.ts @@ -62,13 +62,6 @@ export abstract class Button extends LitElement { */ @property({type: Boolean, attribute: 'has-icon'}) hasIcon = false; - /** - * Whether `preventDefault()` should be called on the underlying button. - * Useful for preventing certain native functionalities like preventing form - * submissions. - */ - @property({type: Boolean}) preventClickDefault = false; - /** * Specifies the type of button, used for controlling forms. When type * is `submit`, the containing form is submitted; when it is `reset` the @@ -190,9 +183,6 @@ export abstract class Button extends LitElement { if (this.isRedispatchingEvent) { return; } - if (this.preventClickDefault) { - e.preventDefault(); - } // based on type, trigger form action. const {type, internals: {form}} = this; if (!form) {