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..53e6c6c10
--- /dev/null
+++ b/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`] = `
+
+
+
+
+
+`;
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..48e0e4456
--- /dev/null
+++ b/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().toJSON();
+ expect(tree).toMatchSnapshot();
+});
+
+it('renders the circle icon when unchecked', () => {
+ const checkbox = shallow();
+ expect(checkbox.find(CircleIcon)).toHaveLength(1);
+ expect(checkbox.find(CheckmarkIcon)).toHaveLength(0);
+});
+
+it('renders the checkmark icon when checked', () => {
+ const checkbox = shallow();
+ 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();
+ output.root.findByType('span').props.onClick();
+ expect(noop).toHaveBeenCalled();
+});