diff --git a/web/src/components/Button.jsx b/web/src/components/Button.jsx
index 9b55b86c1..f773cb6b3 100644
--- a/web/src/components/Button.jsx
+++ b/web/src/components/Button.jsx
@@ -1,7 +1,5 @@
import { h } from 'preact';
-const noop = () => {};
-
const ButtonColors = {
blue: {
contained: 'bg-blue-500 focus:bg-blue-400 active:bg-blue-600 ring-blue-300',
@@ -50,7 +48,6 @@ export default function Button({
color = 'blue',
disabled = false,
href,
- onClick,
size,
type = 'contained',
...attrs
@@ -73,7 +70,6 @@ export default function Button({
aria-disabled={disabled ? 'true' : 'false'}
tabindex="0"
className={classes}
- onClick={onClick || noop}
href={href}
{...attrs}
>
diff --git a/web/src/components/__tests__/Button.test.jsx b/web/src/components/__tests__/Button.test.jsx
new file mode 100644
index 000000000..1278c6e6d
--- /dev/null
+++ b/web/src/components/__tests__/Button.test.jsx
@@ -0,0 +1,36 @@
+import { h } from 'preact';
+import Button from '../Button';
+import { render, screen } from '@testing-library/preact';
+
+describe('Button', () => {
+ test('renders children', async () => {
+ render(
+
+ );
+ expect(screen.queryByText('hello')).toBeInTheDocument();
+ expect(screen.queryByText('hi')).toBeInTheDocument();
+ });
+
+ test('includes focus, active, and hover classes when enabled', async () => {
+ render();
+
+ const classList = screen.queryByRole('button').classList;
+ expect(classList.contains('focus:outline-none')).toBe(true);
+ expect(classList.contains('focus:ring-2')).toBe(true);
+ expect(classList.contains('hover:shadow-md')).toBe(true);
+ expect(classList.contains('active:bg-blue-600')).toBe(true);
+ });
+
+ test('does not focus, active, and hover classes when enabled', async () => {
+ render();
+
+ const classList = screen.queryByRole('button').classList;
+ expect(classList.contains('focus:outline-none')).toBe(false);
+ expect(classList.contains('focus:ring-2')).toBe(false);
+ expect(classList.contains('hover:shadow-md')).toBe(false);
+ expect(classList.contains('active:bg-blue-600')).toBe(false);
+ });
+});