diff --git a/e2e/src/web/specs/auth.e2e-spec.ts b/e2e/src/web/specs/auth.e2e-spec.ts index ebafbf1f67..b616a365cf 100644 --- a/e2e/src/web/specs/auth.e2e-spec.ts +++ b/e2e/src/web/specs/auth.e2e-spec.ts @@ -13,7 +13,7 @@ test.describe('Registration', () => { test('admin registration', async ({ page }) => { // welcome await page.goto('/'); - await page.getByRole('button', { name: 'Getting Started' }).click(); + await page.getByRole('link', { name: 'Getting Started' }).click(); // register await expect(page).toHaveTitle(/Admin Registration/); diff --git a/web/src/lib/components/elements/buttons/__test__/button.spec.ts b/web/src/lib/components/elements/buttons/__test__/button.spec.ts new file mode 100644 index 0000000000..0539315c57 --- /dev/null +++ b/web/src/lib/components/elements/buttons/__test__/button.spec.ts @@ -0,0 +1,20 @@ +import Button from '$lib/components/elements/buttons/button.svelte'; +import { render, screen } from '@testing-library/svelte'; + +describe('Button component', () => { + it('should render as a button', () => { + render(Button); + const button = screen.getByRole('button'); + expect(button).toBeInTheDocument(); + expect(button).toHaveAttribute('type', 'button'); + expect(button).not.toHaveAttribute('href'); + }); + + it('should render as a link if href prop is set', () => { + render(Button, { props: { href: '/test' } }); + const link = screen.getByRole('link'); + expect(link).toBeInTheDocument(); + expect(link).toHaveAttribute('href', '/test'); + expect(link).not.toHaveAttribute('type'); + }); +}); diff --git a/web/src/lib/components/elements/buttons/__test__/circle-icon-button.spec.ts b/web/src/lib/components/elements/buttons/__test__/circle-icon-button.spec.ts new file mode 100644 index 0000000000..eef4508c4e --- /dev/null +++ b/web/src/lib/components/elements/buttons/__test__/circle-icon-button.spec.ts @@ -0,0 +1,29 @@ +import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte'; +import { render, screen } from '@testing-library/svelte'; + +describe('CircleIconButton component', () => { + it('should render as a button', () => { + render(CircleIconButton, { icon: '', title: 'test' }); + const button = screen.getByRole('button'); + expect(button).toBeInTheDocument(); + expect(button).toHaveAttribute('type', 'button'); + expect(button).not.toHaveAttribute('href'); + expect(button).toHaveAttribute('title', 'test'); + }); + + it('should render as a link if href prop is set', () => { + render(CircleIconButton, { props: { href: '/test', icon: '', title: 'test' } }); + const link = screen.getByRole('link'); + expect(link).toBeInTheDocument(); + expect(link).toHaveAttribute('href', '/test'); + expect(link).not.toHaveAttribute('type'); + }); + + it('should render icon inside button', () => { + render(CircleIconButton, { icon: '', title: 'test' }); + const button = screen.getByRole('button'); + const icon = button.querySelector('svg'); + expect(icon).toBeInTheDocument(); + expect(icon).toHaveAttribute('aria-label', 'test'); + }); +}); diff --git a/web/src/lib/components/elements/buttons/button.svelte b/web/src/lib/components/elements/buttons/button.svelte index ce90a8f00f..cdd7463445 100644 --- a/web/src/lib/components/elements/buttons/button.svelte +++ b/web/src/lib/components/elements/buttons/button.svelte @@ -1,5 +1,6 @@ - + - + diff --git a/web/src/lib/components/elements/buttons/circle-icon-button.svelte b/web/src/lib/components/elements/buttons/circle-icon-button.svelte index 1d444ae73c..76f962f107 100644 --- a/web/src/lib/components/elements/buttons/circle-icon-button.svelte +++ b/web/src/lib/components/elements/buttons/circle-icon-button.svelte @@ -1,18 +1,48 @@ - + - + diff --git a/web/src/lib/components/elements/buttons/link-button.svelte b/web/src/lib/components/elements/buttons/link-button.svelte index 6911fd2fc5..b8e81f4469 100644 --- a/web/src/lib/components/elements/buttons/link-button.svelte +++ b/web/src/lib/components/elements/buttons/link-button.svelte @@ -1,16 +1,22 @@ - + diff --git a/web/src/lib/components/elements/buttons/skip-link.svelte b/web/src/lib/components/elements/buttons/skip-link.svelte index 8a304469d7..ae587a72aa 100644 --- a/web/src/lib/components/elements/buttons/skip-link.svelte +++ b/web/src/lib/components/elements/buttons/skip-link.svelte @@ -17,7 +17,7 @@ (isFocused = true)} on:blur={() => (isFocused = false)} diff --git a/web/src/lib/components/shared-components/context-menu/button-context-menu.svelte b/web/src/lib/components/shared-components/context-menu/button-context-menu.svelte index 10d9bd8158..8e6a1fd4fd 100644 --- a/web/src/lib/components/shared-components/context-menu/button-context-menu.svelte +++ b/web/src/lib/components/shared-components/context-menu/button-context-menu.svelte @@ -1,5 +1,8 @@