test(web): Button

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}
  >

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);
+ });
+});