diff --git a/packages/core/src/components/button/button.spec.ts b/packages/core/src/components/button/button.spec.ts index a21fe43dc..10f4343fc 100644 --- a/packages/core/src/components/button/button.spec.ts +++ b/packages/core/src/components/button/button.spec.ts @@ -1,4 +1,5 @@ import { newSpecPage } from '@stencil/core/testing' + import { AtomButton } from './button' describe('AtomButton', () => { @@ -140,8 +141,10 @@ describe('AtomButton', () => { await page.waitForChanges() const formEl = page.body.querySelector('form') as HTMLFormElement + formEl.requestSubmit = jest.fn const buttonEl = page.root?.shadowRoot?.querySelector('ion-button') + jest.spyOn(formEl, 'requestSubmit') buttonEl?.click() @@ -157,8 +160,10 @@ describe('AtomButton', () => { await page.waitForChanges() const formEl = page.body.querySelector('form') as HTMLFormElement + formEl.reset = jest.fn() const buttonEl = page.root?.shadowRoot?.querySelector('ion-button') + jest.spyOn(formEl, 'reset') buttonEl?.click() @@ -173,11 +178,35 @@ describe('AtomButton', () => { await page.waitForChanges() const formEl = page.body.querySelector('form') as HTMLFormElement + formEl.reset = jest.fn() const buttonEl = page.root?.shadowRoot?.querySelector('ion-button') + jest.spyOn(formEl, 'reset') buttonEl?.click() expect(formEl.reset).not.toHaveBeenCalled() }) + + it('should allow default event when is link', async () => { + const button = new AtomButton() + + button.href = 'http://example.com' + button.download = 'name_file' + button.target = '_blank' + + const event = new MouseEvent('click', { + bubbles: true, + cancelable: true, + }) + + jest.spyOn(event, 'preventDefault') + jest.spyOn(event, 'stopPropagation') + + //@ts-expect-error - Testing private method + button.handleClick(event) + + expect(event.preventDefault).not.toHaveBeenCalled() + expect(event.stopPropagation).not.toHaveBeenCalled() + }) }) diff --git a/packages/core/src/components/button/button.tsx b/packages/core/src/components/button/button.tsx index 64ad517eb..f02737b2c 100644 --- a/packages/core/src/components/button/button.tsx +++ b/packages/core/src/components/button/button.tsx @@ -38,7 +38,13 @@ export class AtomButton { submit: 'requestSubmit', } + private get isLink() { + return this.href || this.download || this.target + } + private handleClick = (event) => { + if (this.isLink) return + event.preventDefault() event.stopPropagation() diff --git a/packages/core/src/components/button/stories/button.core.stories.tsx b/packages/core/src/components/button/stories/button.core.stories.tsx index e65a10073..b1e060f17 100644 --- a/packages/core/src/components/button/stories/button.core.stories.tsx +++ b/packages/core/src/components/button/stories/button.core.stories.tsx @@ -115,3 +115,45 @@ export const IconAndText: StoryObj = { ...Primary.args, }, } + +export const Link: StoryObj = { + render: (args) => html` + + ${args.label} + + `, + args: { + ...Primary.args, + href: undefined, + download: undefined, + target: undefined, + }, + argTypes: { + href: { + options: ['Download', 'Navigate'], + mapping: { + Download: '/custom/jsm.svg', + Navigate: 'https://www.juntossomosmais.com.br', + }, + }, + download: { + control: 'text', + }, + target: { + options: ['_blank', '_self', '_parent', '_top'], + }, + }, +} diff --git a/packages/core/src/components/button/stories/button.react.stories.tsx b/packages/core/src/components/button/stories/button.react.stories.tsx index 63e1b6212..02351ce83 100644 --- a/packages/core/src/components/button/stories/button.react.stories.tsx +++ b/packages/core/src/components/button/stories/button.react.stories.tsx @@ -114,3 +114,45 @@ export const IconAndText: StoryObj = { ...Primary.args, }, } + +export const Link: StoryObj = { + render: (args: any) => ( + + {args.label} + + ), + args: { + ...Primary.args, + href: undefined, + download: undefined, + target: undefined, + }, + argTypes: { + href: { + options: ['Download', 'Navigate'], + mapping: { + Download: '/custom/jsm.svg', + Navigate: 'https://www.juntossomosmais.com.br', + }, + }, + download: { + control: 'text', + }, + target: { + options: ['_blank', '_self', '_parent', '_top'], + }, + }, +}