fix(web): avoid nesting buttons inside links (#11425)

2024-07-29 16:36:10 +02:00
parent 7bb7f63d57
commit 2e059bfbfd
15 changed files with 216 additions and 96 deletions
@@ -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');
+  });
+});
@@ -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');
+  });
+});