test: improve tests

__tests__/Button.test.tsx

@@ -1,13 +1,24 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 
 import { Button } from '../src';
 
 describe('Button', () => {
   it('should render primary Button', () => {
-    const { container } = render(<Button tint="primary">Label</Button>);
+    const onClick = jest.fn();
+
+    // TODO: refactor
+    const { container, getByText } = render(
+      <Button tint="primary" onClick={onClick}>
+        Label
+      </Button>
+    );
 
     expect(container).toMatchSnapshot();
+
+    fireEvent.click(getByText('Label'));
+
+    expect(onClick).toHaveBeenCalled();
   });
 
   it('should render secondary Button with destructive style', () => {
@@ -21,13 +32,20 @@ describe('Button', () => {
   });
 
   it('should render disabled tertiary Button', () => {
-    const { container } = render(
-      <Button tint="tertiary" disabled>
+    const onClick = jest.fn();
+
+    // TODO: refactor
+    const { container, getByText } = render(
+      <Button tint="tertiary" disabled onClick={onClick}>
         Label
       </Button>
     );
 
     expect(container).toMatchSnapshot();
+
+    fireEvent.click(getByText('Label'));
+
+    expect(onClick).not.toHaveBeenCalled();
   });
 
   it('should render Button with custom className', () => {

__tests__/Checkbox.test.tsx

@@ -1,51 +1,86 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 
 import { Checkbox } from '../src';
 
 describe('Checkbox', () => {
+  // TODO: check, uncheck
+  // TODO onChange
+
   it('should render unchecked Checkbox', () => {
-    const { container } = render(
-      <Checkbox id="uniqueId" readOnly>
+    const onClick = jest.fn();
+
+    const { container, getByText } = render(
+      <Checkbox id="uniqueId" readOnly onClick={onClick}>
         Label
       </Checkbox>
     );
 
     expect(container).toMatchSnapshot();
+
+    fireEvent.click(getByText('Label'));
+
+    // expect(onClick).not.toHaveBeenCalled();
+    expect(onClick).toHaveBeenCalled();
+
+    // TODO: onClick to have been called
+    // TODO: not to be checked
   });
 
   it('should render checked Checkbox', () => {
+    const onClick = jest.fn();
+
     const { container } = render(
-      <Checkbox id="uniqueId" readOnly checked>
+      <Checkbox id="uniqueId" readOnly checked onClick={onClick}>
         Label
       </Checkbox>
     );
 
     expect(container).toMatchSnapshot();
+
+    // fireEvent.click(getByText('Label'));
+
+    // expect(onClick).not.toHaveBeenCalled();
+
+    // TODO: onClick not to have been called
+    // TODO: to be checked
   });
 
   it('should render disabled Checkbox', () => {
-    const { container } = render(
+    const onClick = jest.fn();
+
+    const { container, getByText } = render(
       <Checkbox id="uniqueId" readOnly disabled>
         Label
       </Checkbox>
     );
 
     expect(container).toMatchSnapshot();
+
+    fireEvent.click(getByText('Label'));
+
+    expect(onClick).not.toHaveBeenCalled();
   });
 
   it('should render Checkbox with custom className values', () => {
-    const { container } = render(
+    const onClick = jest.fn();
+
+    const { container, getByText } = render(
       <Checkbox
         id="uniqueId"
         className="custom-class-name"
         containerProps={{ className: 'custom-class-name' }}
         labelProps={{ className: 'custom-class-name' }}
+        onClick={onClick}
       >
         Label
       </Checkbox>
     );
 
     expect(container).toMatchSnapshot();
+
+    fireEvent.click(getByText('Label'));
+
+    expect(onClick).toHaveBeenCalled();
   });
 });

__tests__/Disclosure.test.tsx

@@ -51,4 +51,7 @@ describe('Disclosure', () => {
 
     expect(container).toMatchSnapshot();
   });
+
+  // TODO onClick
+  // TODO default opened
 });

__tests__/IconButton.test.tsx

@@ -30,4 +30,7 @@ describe('IconButton', () => {
 
     expect(container).toMatchSnapshot();
   });
+
+  // TODO disabled
+  // TODO onClick
 });

__tests__/Input.test.tsx

@@ -45,4 +45,7 @@ describe('Input', () => {
 
     expect(container).toMatchSnapshot();
   });
+
+  // TODO onChange
+  // TODO disabled
 });

__tests__/OnboardingTip.test.tsx

@@ -25,6 +25,9 @@ describe('OnboardingTip', () => {
       </OnboardingTip>
     );
 
+    // TODO getByText
     expect(container).toMatchSnapshot();
   });
+
+  // TODO onClose
 });

__tests__/Radio.test.tsx

@@ -5,6 +5,7 @@ import { Radio } from '../src';
 
 describe('Radio', () => {
   it('should render Radio button', () => {
+    // TODO onChange
     const { container } = render(
       <Radio value="Value" id="radioButton1" name="radioGroup" readOnly>
         Radio button
@@ -25,6 +26,7 @@ describe('Radio', () => {
   });
 
   it('should render disabled Radio button', () => {
+    // TODO onChange
     const { container } = render(
       <Radio
         value="Value"

__tests__/SelectMenu.test.tsx

@@ -11,6 +11,8 @@ describe('SelectMenu', () => {
   ];
 
   it('should render SelectMenu', () => {
+    // TODO onSelect
+    // TODO default selected
     const { container } = render(
       <SelectMenu
         options={options}

__tests__/Switch.test.tsx

@@ -5,8 +5,9 @@ import { Switch } from '../src';
 
 describe('Switch', () => {
   it('should render Switch', () => {
+    // TODO onChange
     const { container } = render(
-      <Switch id="uniqueId" readOnly>
+      <Switch id="uniqueId" readOnly onChange={() => {}}>
         Label
       </Switch>
     );
@@ -15,8 +16,9 @@ describe('Switch', () => {
   });
 
   it('should render checked Switch', () => {
+    // TODO onChange
     const { container } = render(
-      <Switch id="uniqueId" readOnly checked>
+      <Switch id="uniqueId" readOnly checked onChange={() => {}}>
         Label
       </Switch>
     );
@@ -25,8 +27,9 @@ describe('Switch', () => {
   });
 
   it('should render disabled Switch', () => {
+    // TODO onChange
     const { container } = render(
-      <Switch id="uniqueId" readOnly disabled>
+      <Switch id="uniqueId" readOnly disabled onChange={() => {}}>
         Label
       </Switch>
     );

__tests__/Textarea.test.tsx

@@ -5,8 +5,9 @@ import { Textarea } from '../src';
 
 describe('Textarea', () => {
   it('should render Textarea', () => {
+    // TODO onChange
     const { container } = render(
-      <Textarea value="Initial value" rows={2} readOnly />
+      <Textarea value="Initial value" rows={2} readOnly onChange={() => {}} />
     );
 
     expect(container).toMatchSnapshot();
@@ -32,4 +33,13 @@ describe('Textarea', () => {
 
     expect(container).toMatchSnapshot();
   });
+
+  // TODO disabled
+  it('', () => {
+    const { container } = render(
+      <Textarea value="Initial value" rows={2} disabled />
+    );
+
+    expect(container).toMatchSnapshot();
+  });
 });

__tests__/__snapshots__/Textarea.test.tsx.snap

@@ -1,5 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Textarea  1`] = `
+<div>
+  <textarea
+    class="textarea"
+    disabled=""
+    rows="2"
+  >
+    Initial value
+  </textarea>
+</div>
+`;
+
 exports[`Textarea should render Textarea 1`] = `
 <div>
   <textarea