feat: add button tests

package.json

@@ -27,9 +27,9 @@
     "react": "^16.0.0"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.5.0",
-    "@testing-library/user-event": "^7.2.1",
+    "@testing-library/jest-dom": "^5.11.10",
+    "@testing-library/react": "^11.2.6",
+    "@testing-library/user-event": "^13.1.1",
     "@types/jest": "^25.1.4",
     "@types/node": "^12.12.38",
     "@types/react": "^16.9.27",

src/components/button/button.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Button } from './button'
-import { render } from '@testing-library/react'
+import { render, fireEvent } from '@testing-library/react'
 
 describe('Button', () => {
   test('should render correctly', () => {
@@ -17,9 +17,57 @@ describe('Button', () => {
     const node = getByTestId(testId)
     expect(node).toBeDefined()
   })
-  test('should render a spinner when `loading` is set to `true`', () => false)
-  test('should not be clickable when button is loading', () => false)
+  test('should render a prefixIcon', () => {
+    // Maybe I could switch to an actual icon later. That would involve me bringing in some other icon library
+    const testId = 'prefix'
+    const prefixIcon = <p data-testid={testId}>Prefix Icon</p>
+    const { getByTestId } = render(
+      <Button prefixIcon={prefixIcon}>Something</Button>
+    )
+    const node = getByTestId(testId)
+    expect(node).toBeDefined()
+  })
+
+  test('should render a sufixIcon', () => {
+    // Maybe I could switch to an actual icon later. That would involve me bringing in some other icon library
+    const testId = 'suffix'
+    const prefixIcon = <p data-testid={testId}>Prefix Icon</p>
+    const { getByTestId } = render(
+      <Button suffixIcon={prefixIcon}>Something</Button>
+    )
+    const node = getByTestId(testId)
+    expect(node).toBeDefined()
+  })
+
+  test('should render a spinner when `loading` is set to `true`', () => {})
+
+  test('should not be clickable when button is loading', () => {
+    let count = 0
+    const testId = 'btn'
+    const increment = () => count++
+    const { getByTestId } = render(
+      <Button data-testid={testId} loading onClick={() => increment()}>
+        Increment
+      </Button>
+    )
+
+    fireEvent.click(getByTestId(testId))
+    expect(count).toEqual(0)
+  })
+
+  test('should not be clickable when button is disabled', () => {
+    let count = 0
+    const testId = 'btn'
+    const increment = () => count++
+    const { getByTestId } = render(
+      <Button data-testid={testId} disabled onClick={() => increment()}>
+        Increment
+      </Button>
+    )
+
+    fireEvent.click(getByTestId(testId))
+    expect(count).toEqual(0)
+  })
   test('should render a link when `type` is set to link', () => false)
   test('should not render as link when href is undefined', () => false)
-  test('should render correct variant', () => false)
 })