Form tests - Phase 1

src/components/form/checkbox/__snapshots__/checkbox.test.js.snap

@@ -20,3 +20,89 @@ exports[`EuiCheckbox is rendered 1`] = `
   </div>
 </div>
 `;
+
+exports[`EuiCheckbox props check is rendered 1`] = `
+<div
+  class="euiCheckbox"
+>
+  <input
+    checked=""
+    class="euiCheckbox__input"
+    id="id"
+    type="checkbox"
+  />
+  <div
+    class="euiCheckbox__square"
+  >
+    <div
+      class="euiCheckbox__check"
+    />
+  </div>
+</div>
+`;
+
+exports[`EuiCheckbox props disabled disabled is rendered 1`] = `
+<div
+  class="euiCheckbox"
+>
+  <input
+    class="euiCheckbox__input"
+    disabled=""
+    id="id"
+    type="checkbox"
+  />
+  <div
+    class="euiCheckbox__square"
+  >
+    <div
+      class="euiCheckbox__check"
+    />
+  </div>
+</div>
+`;
+
+exports[`EuiCheckbox props label is rendered 1`] = `
+<div
+  class="euiCheckbox"
+>
+  <input
+    class="euiCheckbox__input"
+    id="id"
+    type="checkbox"
+  />
+  <div
+    class="euiCheckbox__square"
+  >
+    <div
+      class="euiCheckbox__check"
+    />
+  </div>
+  <label
+    class="euiCheckbox__label"
+    for="id"
+  >
+    <span>
+      Label
+    </span>
+  </label>
+</div>
+`;
+
+exports[`EuiCheckbox props type inList is rendered 1`] = `
+<div
+  class="euiCheckbox euiCheckbox--inList"
+>
+  <input
+    class="euiCheckbox__input"
+    id="id"
+    type="checkbox"
+  />
+  <div
+    class="euiCheckbox__square"
+  >
+    <div
+      class="euiCheckbox__check"
+    />
+  </div>
+</div>
+`;

src/components/form/checkbox/__snapshots__/checkbox_group.test.js.snap

@@ -1,9 +1,58 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`EuiCheckboxGroup is rendered 1`] = `
+exports[`EuiCheckboxGroup (mocked checkbox) disabled is rendered 1`] = `
+<div>
+  <eui_checkbox
+    checked=""
+    class="euiCheckboxGroup__item"
+    disabled=""
+    id="1"
+    label="kibana"
+  />
+  <eui_checkbox
+    class="euiCheckboxGroup__item"
+    disabled=""
+    id="2"
+    label="elastic"
+  />
+</div>
+`;
+
+exports[`EuiCheckboxGroup (mocked checkbox) idToSelectedMap is rendered 1`] = `
+<div>
+  <eui_checkbox
+    checked=""
+    class="euiCheckboxGroup__item"
+    id="1"
+    label="kibana"
+  />
+  <eui_checkbox
+    class="euiCheckboxGroup__item"
+    id="2"
+    label="elastic"
+  />
+</div>
+`;
+
+exports[`EuiCheckboxGroup (mocked checkbox) is rendered 1`] = `
 <div
   aria-label="aria-label"
   class="testClass1 testClass2"
   data-test-subj="test subject string"
 />
 `;
+
+exports[`EuiCheckboxGroup (mocked checkbox) options are rendered 1`] = `
+<div>
+  <eui_checkbox
+    class="euiCheckboxGroup__item"
+    id="1"
+    label="kibana"
+  />
+  <eui_checkbox
+    class="euiCheckboxGroup__item"
+    id="2"
+    label="elastic"
+  />
+</div>
+`;

src/components/form/checkbox/checkbox.test.js

@@ -1,16 +1,103 @@
 import React from 'react';
 import { render } from 'enzyme';
-import { requiredProps } from '../../../test/required_props';
+import {
+  requiredProps,
+  startThrowingReactWarnings,
+  stopThrowingReactWarnings,
+} from '../../../test';
 
-import { EuiCheckbox } from './checkbox';
+import {
+  EuiCheckbox,
+  TYPES,
+} from './checkbox';
+
+beforeAll(startThrowingReactWarnings);
+afterAll(stopThrowingReactWarnings);
+
+const checkboxRequiredProps = {
+  id: 'id',
+  onChange: () => {},
+};
 
 describe('EuiCheckbox', () => {
   test('is rendered', () => {
     const component = render(
-      <EuiCheckbox id="id" onChange={() => {}} {...requiredProps} />
+      <EuiCheckbox
+        id="id"
+        onChange={() => {}}
+        {...requiredProps}
+      />
     );
 
     expect(component)
       .toMatchSnapshot();
   });
+
+  describe('props', () => {
+    test('id is required', () => {
+      expect(
+        () => <EuiCheckbox checked={true} onChange={() => {}}/>
+      ).toThrow();
+    });
+
+    test('onChange is required', () => {
+      expect(
+        () => <EuiCheckbox id="id" checked={true}/>
+      ).toThrow();
+    });
+
+    test('check is rendered', () => {
+      const component = render(
+        <EuiCheckbox
+          {...checkboxRequiredProps}
+          checked
+        />
+      );
+
+      expect(component)
+        .toMatchSnapshot();
+    });
+
+    test('label is rendered', () => {
+      const component = render(
+        <EuiCheckbox
+          {...checkboxRequiredProps}
+          label={<span>Label</span>}
+        />
+      );
+
+      expect(component)
+        .toMatchSnapshot();
+    });
+
+    describe('type', () => {
+      TYPES.forEach(value => {
+        test(`${value} is rendered`, () => {
+          const component = render(
+            <EuiCheckbox
+              {...checkboxRequiredProps}
+              type={value}
+            />
+          );
+
+          expect(component)
+            .toMatchSnapshot();
+        });
+      });
+    });
+
+    describe('disabled', () => {
+      test(`disabled is rendered`, () => {
+        const component = render(
+          <EuiCheckbox
+            {...checkboxRequiredProps}
+            disabled
+          />
+        );
+
+        expect(component)
+          .toMatchSnapshot();
+      });
+    });
+  });
 });

src/components/form/checkbox/checkbox_group.behavior.test.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import sinon from 'sinon';
+
+import { EuiCheckboxGroup } from './checkbox_group';
+
+// This exists because we need to run the following tests
+// without mocking the Checkbox component, such as testing
+// an interaction that is handled by the Checkbox component.
+describe('EuiCheckboxGroup behavior', () => {
+  test('id is bound to onChange', () => {
+    const onChangeHandler = sinon.stub();
+    const component = mount(
+      <EuiCheckboxGroup
+        options={[
+          { id: '1', label: 'kibana', disabled: false },
+        ]}
+        idToSelectedMap={{
+          '1': true,
+        }}
+        onChange={onChangeHandler}
+      />
+    );
+
+    component.find('input[type="checkbox"]').simulate('change');
+    sinon.assert.calledWith(onChangeHandler, '1');
+  });
+});

src/components/form/checkbox/checkbox_group.test.js

@@ -4,7 +4,9 @@ import { requiredProps } from '../../../test/required_props';
 
 import { EuiCheckboxGroup } from './checkbox_group';
 
-describe('EuiCheckboxGroup', () => {
+jest.mock('./checkbox', () => ({ EuiCheckbox: 'eui_checkbox' }));
+
+describe('EuiCheckboxGroup (mocked checkbox)', () => {
   test('is rendered', () => {
     const component = render(
       <EuiCheckboxGroup onChange={() => {}} {...requiredProps} />
@@ -13,4 +15,58 @@ describe('EuiCheckboxGroup', () => {
     expect(component)
       .toMatchSnapshot();
   });
+
+  test('options are rendered', () => {
+    const component = render(
+      <EuiCheckboxGroup
+        options={[
+          { id: '1', label: 'kibana' },
+          { id: '2', label: 'elastic' },
+        ]}
+        onChange={() => {}}
+      />
+    );
+
+    expect(component)
+      .toMatchSnapshot();
+  });
+
+  test('idToSelectedMap is rendered', () => {
+    const component = render(
+      <EuiCheckboxGroup
+        options={[
+          { id: '1', label: 'kibana' },
+          { id: '2', label: 'elastic' },
+        ]}
+        idToSelectedMap={{
+          '1': true,
+          '2': false,
+        }}
+        onChange={() => {}}
+      />
+    );
+
+    expect(component)
+      .toMatchSnapshot();
+  });
+
+  test('disabled is rendered', () => {
+    const component = render(
+      <EuiCheckboxGroup
+        options={[
+          { id: '1', label: 'kibana' },
+          { id: '2', label: 'elastic' },
+        ]}
+        idToSelectedMap={{
+          '1': true,
+          '2': false,
+        }}
+        onChange={() => {}}
+        disabled
+      />
+    );
+
+    expect(component)
+      .toMatchSnapshot();
+  });
 });