From 32e0b007acf9c85b8f1089ba5403dc59cd80cd08 Mon Sep 17 00:00:00 2001
From: Jonathan Belcher <belcherj@gmail.com>
Date: Mon, 23 Sep 2019 11:49:23 -0400
Subject: [PATCH 1/2] Add tests and clean up css

---
 CHANGELOG.md                                  |  1 +
 .../checkbox/__snapshots__/test.js.snap       | 57 +++++++++++++++++++
 lib/components/checkbox/style.scss            |  4 +-
 lib/components/checkbox/test.js               | 20 +++++++
 4 files changed, 80 insertions(+), 2 deletions(-)
 create mode 100644 lib/components/checkbox/__snapshots__/test.js.snap
 create mode 100644 lib/components/checkbox/test.js

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e2da87d11..0c3cc8c03 100644
--- a/CHANGELOG.md
+++ b/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)
 
diff --git a/lib/components/checkbox/__snapshots__/test.js.snap b/lib/components/checkbox/__snapshots__/test.js.snap
new file mode 100644
index 000000000..318294abc
--- /dev/null
+++ b/lib/components/checkbox/__snapshots__/test.js.snap
@@ -0,0 +1,57 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders Checkbox correctly when checked 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>
+`;
+
+exports[`renders Checkbox correctly when not checked 1`] = `
+<span
+  aria-checked={true}
+  className="checkbox"
+  role="checkbox"
+  tabIndex="0"
+>
+  <span
+    aria-hidden="true"
+    className="checkbox__icon"
+  >
+    <svg
+      className="icon-checkmark"
+      height="24px"
+      viewBox="0 0 24 24"
+      width="24px"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M11,17.768l-4.884-4.884l1.768-1.768L11,14.232l8.658-8.658C17.823,3.391,15.075,2,12,2C6.477,2,2,6.477,2,12 s4.477,10,10,10s10-4.477,10-10c0-1.528-0.353-2.971-0.966-4.266L11,17.768z"
+      />
+    </svg>
+  </span>
+</span>
+`;
diff --git a/lib/components/checkbox/style.scss b/lib/components/checkbox/style.scss
index 5ef636149..99456b543 100644
--- a/lib/components/checkbox/style.scss
+++ b/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;
   }
 }
diff --git a/lib/components/checkbox/test.js b/lib/components/checkbox/test.js
new file mode 100644
index 000000000..b8b428c5d
--- /dev/null
+++ b/lib/components/checkbox/test.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import Checkbox from './';
+import renderer from 'react-test-renderer';
+
+it('renders Checkbox correctly when checked', () => {
+  const tree = renderer.create(<Checkbox checked={false}></Checkbox>).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders Checkbox correctly when not checked', () => {
+  const tree = renderer.create(<Checkbox checked={true}></Checkbox>).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+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();
+});

From 40a4b8b2746054b4b9d0eac03cda715a17754a47 Mon Sep 17 00:00:00 2001
From: Jonathan Belcher <belcherj@gmail.com>
Date: Mon, 23 Sep 2019 14:17:53 -0400
Subject: [PATCH 2/2] Make tests better

---
 .../checkbox/__snapshots__/test.js.snap       | 28 +------------------
 lib/components/checkbox/test.js               | 20 +++++++++----
 2 files changed, 16 insertions(+), 32 deletions(-)

diff --git a/lib/components/checkbox/__snapshots__/test.js.snap b/lib/components/checkbox/__snapshots__/test.js.snap
index 318294abc..53e6c6c10 100644
--- a/lib/components/checkbox/__snapshots__/test.js.snap
+++ b/lib/components/checkbox/__snapshots__/test.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders Checkbox correctly when checked 1`] = `
+exports[`hasn't had its output unintentionally altered 1`] = `
 <span
   aria-checked={false}
   className="checkbox"
@@ -29,29 +29,3 @@ exports[`renders Checkbox correctly when checked 1`] = `
   </span>
 </span>
 `;
-
-exports[`renders Checkbox correctly when not checked 1`] = `
-<span
-  aria-checked={true}
-  className="checkbox"
-  role="checkbox"
-  tabIndex="0"
->
-  <span
-    aria-hidden="true"
-    className="checkbox__icon"
-  >
-    <svg
-      className="icon-checkmark"
-      height="24px"
-      viewBox="0 0 24 24"
-      width="24px"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M11,17.768l-4.884-4.884l1.768-1.768L11,14.232l8.658-8.658C17.823,3.391,15.075,2,12,2C6.477,2,2,6.477,2,12 s4.477,10,10,10s10-4.477,10-10c0-1.528-0.353-2.971-0.966-4.266L11,17.768z"
-      />
-    </svg>
-  </span>
-</span>
-`;
diff --git a/lib/components/checkbox/test.js b/lib/components/checkbox/test.js
index b8b428c5d..48e0e4456 100644
--- a/lib/components/checkbox/test.js
+++ b/lib/components/checkbox/test.js
@@ -1,15 +1,25 @@
-import React from 'react';
 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('renders Checkbox correctly when checked', () => {
+it("hasn't had its output unintentionally altered", () => {
   const tree = renderer.create(<Checkbox checked={false}></Checkbox>).toJSON();
   expect(tree).toMatchSnapshot();
 });
 
-it('renders Checkbox correctly when not checked', () => {
-  const tree = renderer.create(<Checkbox checked={true}></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', () => {