From a202c44a0f9bc48c8271715fb000ef65aa1850ce Mon Sep 17 00:00:00 2001
From: Paul Armstrong <paul@spaceyak.com>
Date: Thu, 11 Feb 2021 14:13:30 -0800
Subject: [PATCH] test(web): Button

---
 web/src/components/Button.jsx                |  4 ---
 web/src/components/__tests__/Button.test.jsx | 36 ++++++++++++++++++++
 2 files changed, 36 insertions(+), 4 deletions(-)
 create mode 100644 web/src/components/__tests__/Button.test.jsx

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(
+      <Button>
+        <div>hello</div>
+        <div>hi</div>
+      </Button>
+    );
+    expect(screen.queryByText('hello')).toBeInTheDocument();
+    expect(screen.queryByText('hi')).toBeInTheDocument();
+  });
+
+  test('includes focus, active, and hover classes when enabled', async () => {
+    render(<Button>click me</Button>);
+
+    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(<Button disabled>click me</Button>);
+
+    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);
+  });
+});