Merge pull request #1580 from Automattic/update/cleanup-checkbox-comp…

…onent

Add Tests to Checkbox component

CHANGELOG.md

@@ -3,6 +3,7 @@
 ## Future Release
 
 - Updated Log in and Sign up form to match current styling
+- Added tests to Checkbox component
 
 ## [v1.7.0](https://github.com/Automattic/simplenote-electron/releases/tag/v1.7.0) (2019-08-12)
 

lib/components/checkbox/__snapshots__/test.js.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`hasn't had its output unintentionally altered 1`] = `
+<span
+  aria-checked={false}
+  className="checkbox"
+  role="checkbox"
+  tabIndex="0"
+>
+  <span
+    aria-hidden="true"
+    className="checkbox__icon"
+  >
+    <svg
+      className="icon-circle"
+      height="24px"
+      viewBox="0 0 24 24"
+      width="24px"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g
+        transform="translate(2 2)"
+      >
+        <path
+          d="m10 0c-5.523 0-10 4.477-10 10s4.477 10 10 10 10-4.477 10-10-4.477-10-10-10zm0 18.5c-4.694 0-8.5-3.806-8.5-8.5s3.806-8.5 8.5-8.5 8.5 3.806 8.5 8.5-3.806 8.5-8.5 8.5z"
+        />
+      </g>
+    </svg>
+  </span>
+</span>
+`;

lib/components/checkbox/style.scss

@@ -13,10 +13,10 @@
 .checkbox__icon {
   display: inline;
   position: relative;
-  top: -.09em;
+  top: -0.09em;
 
   svg {
-    width: 1.3em;
     height: 1.3em;
+    width: 1.3em;
   }
 }

lib/components/checkbox/test.js

@@ -0,0 +1,30 @@
+import Checkbox from './';
+import CheckmarkIcon from '../../icons/checkmark';
+import CircleIcon from '../../icons/circle';
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { shallow } from 'enzyme';
+
+it("hasn't had its output unintentionally altered", () => {
+  const tree = renderer.create(<Checkbox checked={false}></Checkbox>).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders the circle icon when unchecked', () => {
+  const checkbox = shallow(<Checkbox checked={false}></Checkbox>);
+  expect(checkbox.find(CircleIcon)).toHaveLength(1);
+  expect(checkbox.find(CheckmarkIcon)).toHaveLength(0);
+});
+
+it('renders the checkmark icon when checked', () => {
+  const checkbox = shallow(<Checkbox checked={true}></Checkbox>);
+  expect(checkbox.find(CircleIcon)).toHaveLength(0);
+  expect(checkbox.find(CheckmarkIcon)).toHaveLength(1);
+});
+
+it('should call onChange prop when span is clicked', () => {
+  const noop = jest.fn();
+  const output = renderer.create(<Checkbox onChange={noop}></Checkbox>);
+  output.root.findByType('span').props.onClick();
+  expect(noop).toHaveBeenCalled();
+});