add tests

package.json

@@ -160,8 +160,13 @@
     "@babel/eslint-parser": "^7.12.16",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@types/dateformat": "^3.0.1",
+    "@types/enzyme": "^3.10.8",
+    "@types/enzyme-adapter-react-16": "^1.0.6",
+    "@types/jasmine-enzyme": "^7.0.1",
     "babel-plugin-styled-components": "^1.10.7",
     "documentation": "12.3.0",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.6",
     "eslint": "^7.20.0",
     "eslint-plugin-jsx-control-statements": "^2.2.1",
     "eslint-plugin-react": "^7.19.0",
@@ -174,6 +179,7 @@
     "istanbul-instrumenter-loader": "^3.0.1",
     "jasmine-ajax": "^4.0.0",
     "jasmine-core": "^2.9.1",
+    "jasmine-enzyme": "^7.1.2",
     "karma": "^4.0.0",
     "karma-browserstack-launcher": "^1.4.0",
     "karma-chrome-launcher": "^2.0.0",

test/SpecMain.ts

@@ -4,6 +4,8 @@ import "jasmine-ajax";
 import { configure, spy } from "mobx";
 import i18next from "i18next";
 import registerCatalogMembers from "../lib/Models/registerCatalogMembers";
+import Enzyme from "enzyme";
+import Adapter from "enzyme-adapter-react-16";
 
 configure({
   enforceActions: true,
@@ -13,6 +15,8 @@ configure({
 
 registerCatalogMembers();
 
+Enzyme.configure({ adapter: new Adapter() });
+
 // Fail the test if a MobX computed property throws an exception.
 spy(event => {
   if (event.type === "error") {

test/Styled/CheckboxSpec.tsx

@@ -0,0 +1,72 @@
+import Checkbox from "./../../lib/Styled/Checkbox/Checkbox";
+import { mount } from "enzyme";
+import { ICheckboxProps } from "../../lib/Styled/Checkbox/types";
+import CheckboxIcon from "./../../lib/Styled/Checkbox/Elements/CheckboxIcon";
+import jasmineEnzyme from "jasmine-enzyme";
+import React from "react";
+
+describe("Checkbox", function() {
+  beforeEach(() => {
+    jasmineEnzyme();
+  });
+  const mountCheckbox = (overridingProps: ICheckboxProps) =>
+    mount(
+      <Checkbox label="" onChange={() => {}} name="stub" {...overridingProps} />
+    );
+
+  describe("basic", () => {
+    it("keeps isChecked as false when passing it as prop and calling onChange", () => {
+      const cb = mountCheckbox({ isChecked: false, onChange: undefined });
+      cb.find("input").simulate("change", { target: { checked: true } });
+      expect(cb.find("input").prop("checked")).toBe(false);
+    });
+
+    it("keeps isChecked as true when passing it as prop and calling onChange", () => {
+      const cb = mountCheckbox({ isChecked: true, onChange: undefined });
+      cb.find("input").simulate("change", { target: { checked: false } });
+      expect(cb.find("input").prop("checked")).toBe(true);
+    });
+
+    it("should be unchecked by default", () => {
+      const cb = mountCheckbox({ defaultChecked: false });
+      expect(cb.find("input[checked]").length === 1).toBe(true);
+    });
+
+    it("should call onchange on change", () => {
+      const spy = jasmine.createSpy();
+      const cb = mountCheckbox({ isChecked: false, onChange: spy });
+      cb.find("input").simulate("change", { target: { checked: true } });
+      expect(cb.find(Checkbox).prop("isChecked")).toBe(false);
+      expect(spy).toHaveBeenCalledTimes(1);
+    });
+
+    it("should call onchange once", () => {
+      const spy = jasmine.createSpy();
+      const cb = mountCheckbox({ onChange: spy });
+      cb.find("input").simulate("change");
+      expect(spy).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe("defaultChecked", () => {
+    it("should render defaultChecked", () => {
+      const cb = mountCheckbox({ defaultChecked: true });
+
+      const element = cb.find("input");
+      expect(element.prop("checked")).toBe(true);
+    });
+    it("should render defaultChecked={undefined}", () => {
+      const cb = mountCheckbox({});
+
+      const element = cb.find("input");
+      expect(element.prop("checked")).toBe(false);
+    });
+  });
+
+  describe("disabled", () => {
+    it("should show a not-allowed cursor", () => {
+      const cb = mountCheckbox({ isDisabled: true });
+      expect(cb.find("input")).toBeDisabled();
+    });
+  });
+});