Add tests, format code and fix browser warning (#6)

createnl · Jan 6, 2020 · 50680bf · 50680bf
1 parent ebe353a
commit 50680bf
Show file tree

Hide file tree

Showing 26 changed files with 1,836 additions and 363 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,29 @@
+module.exports = {
+  "parser": "@typescript-eslint/parser",
+  "env": {
+    "browser": true,
+    "es6": true
+  },
+  "extends": [
+    "plugin:@typescript-eslint/recommended",
+  ],
+  "globals": {
+    "Atomics": "readonly",
+    "SharedArrayBuffer": "readonly"
+  },
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 2018,
+    "sourceType": "module",
+    "project": "./tsconfig.json"
+  },
+  "plugins": [
+    "react",
+    "react-hooks",
+    "@typescript-eslint",
+  ],
+  "rules": {
+  }
+};
diff --git a/__tests__/AllCheckboxEventTests.tsx b/__tests__/AllCheckboxEventTests.tsx
@@ -1,50 +1,51 @@
-import {cleanup, fireEvent, render} from '@testing-library/react';
-import React from 'react';
+import {cleanup, fireEvent, render} from "@testing-library/react";
+import React from "react";
 import {AllCheckerCheckbox, Checkbox, CheckboxGroup} from "../src";
+import CheckboxGroupContext from "../src/CheckboxGroupContext";
 
 // automatically unmount and cleanup DOM after the test is finished.
 afterEach(cleanup);
 
-it('Unchecked allCheckerCheckbox will check on click', () => {
+it("Unchecked allCheckerCheckbox will check on click", () => {
     const component = render(
         <CheckboxGroup>
             <AllCheckerCheckbox id={"test-checkbox"} data-testid="test-checkbox" />
-        </CheckboxGroup>
+        </CheckboxGroup>,
     );
 
-    const checkbox = component.getByTestId('test-checkbox') as HTMLInputElement;
+    const checkbox = component.getByTestId("test-checkbox") as HTMLInputElement;
 
     expect(checkbox.checked).toEqual(false);
     fireEvent.click(checkbox);
     expect(checkbox.checked).toEqual(true);
 });
 
-it('Checked allCheckerCheckbox will uncheck on click', () => {
+it("Checked allCheckerCheckbox will uncheck on click", () => {
     const component = render(
         <CheckboxGroup defaultChecked>
             <AllCheckerCheckbox id={"test-checkbox"} data-testid="test-checkbox" />
-        </CheckboxGroup>
+        </CheckboxGroup>,
     );
 
-    const checkbox = component.getByTestId('test-checkbox') as HTMLInputElement;
+    const checkbox = component.getByTestId("test-checkbox") as HTMLInputElement;
 
     expect(checkbox.checked).toEqual(true);
     fireEvent.click(checkbox);
     expect(checkbox.checked).toEqual(false);
 });
 
-it('All checkboxes will check on allCheckboxesChecker click', () => {
+it("All checkboxes will check on allCheckboxesChecker click", () => {
     const component = render(
         <CheckboxGroup>
             <AllCheckerCheckbox id={"all-checker-checkbox"} data-testid="all-checker-checkbox" />
             <Checkbox id={"test-checkbox-1"} data-testid="test-checkbox-1" />
             <Checkbox id={"test-checkbox-2"} data-testid="test-checkbox-2" />
-        </CheckboxGroup>
+        </CheckboxGroup>,
     );
 
-    const allCheckerCheckbox = component.getByTestId('all-checker-checkbox') as HTMLInputElement;
-    const checkbox1 = component.getByTestId('test-checkbox-1') as HTMLInputElement;
-    const checkbox2 = component.getByTestId('test-checkbox-2') as HTMLInputElement;
+    const allCheckerCheckbox = component.getByTestId("all-checker-checkbox") as HTMLInputElement;
+    const checkbox1 = component.getByTestId("test-checkbox-1") as HTMLInputElement;
+    const checkbox2 = component.getByTestId("test-checkbox-2") as HTMLInputElement;
 
     expect(checkbox1.checked).toEqual(false);
     expect(checkbox2.checked).toEqual(false);
@@ -53,18 +54,18 @@ it('All checkboxes will check on allCheckboxesChecker click', () => {
     expect(checkbox2.checked).toEqual(true);
 });
 
-it('All checkboxes will uncheck on allCheckboxesChecker click', () => {
+it("All checkboxes will uncheck on allCheckboxesChecker click", () => {
     const component = render(
         <CheckboxGroup>
             <AllCheckerCheckbox id={"all-checker-checkbox"} data-testid="all-checker-checkbox" />
             <Checkbox id={"test-checkbox-1"} data-testid="test-checkbox-1" checked/>
             <Checkbox id={"test-checkbox-2"} data-testid="test-checkbox-2" checked/>
-        </CheckboxGroup>
+        </CheckboxGroup>,
     );
 
-    const allCheckerCheckbox = component.getByTestId('all-checker-checkbox') as HTMLInputElement;
-    const checkbox1 = component.getByTestId('test-checkbox-1') as HTMLInputElement;
-    const checkbox2 = component.getByTestId('test-checkbox-2') as HTMLInputElement;
+    const allCheckerCheckbox = component.getByTestId("all-checker-checkbox") as HTMLInputElement;
+    const checkbox1 = component.getByTestId("test-checkbox-1") as HTMLInputElement;
+    const checkbox2 = component.getByTestId("test-checkbox-2") as HTMLInputElement;
 
     expect(checkbox1.checked).toEqual(true);
     expect(checkbox2.checked).toEqual(true);
@@ -73,21 +74,20 @@ it('All checkboxes will uncheck on allCheckboxesChecker click', () => {
     expect(checkbox2.checked).toEqual(false);
 });
 
-
-it('All allCheckerCheckboxes will uncheck when not all checkboxes are checked', () => {
+it("All allCheckerCheckboxes will uncheck when not all checkboxes are checked", () => {
     const component = render(
         <CheckboxGroup>
             <AllCheckerCheckbox id={"all-checker-checkbox-1"} data-testid="all-checker-checkbox-1" />
             <Checkbox id={"test-checkbox-1"} data-testid="test-checkbox" checked/>
             <Checkbox id={"test-checkbox-2"} checked/>
             <Checkbox id={"test-checkbox-3"} checked/>
             <AllCheckerCheckbox id={"all-checker-checkbox-2"} data-testid="all-checker-checkbox-2" />
-        </CheckboxGroup>
+        </CheckboxGroup>,
     );
 
-    const allCheckerCheckbox1 = component.getByTestId('all-checker-checkbox-1') as HTMLInputElement;
-    const allCheckerCheckbox2 = component.getByTestId('all-checker-checkbox-2') as HTMLInputElement;
-    const checkbox = component.getByTestId('test-checkbox') as HTMLInputElement;
+    const allCheckerCheckbox1 = component.getByTestId("all-checker-checkbox-1") as HTMLInputElement;
+    const allCheckerCheckbox2 = component.getByTestId("all-checker-checkbox-2") as HTMLInputElement;
+    const checkbox = component.getByTestId("test-checkbox") as HTMLInputElement;
 
     expect(allCheckerCheckbox1.checked).toEqual(true);
     expect(allCheckerCheckbox2.checked).toEqual(true);
@@ -96,22 +96,22 @@ it('All allCheckerCheckboxes will uncheck when not all checkboxes are checked',
     expect(allCheckerCheckbox2.checked).toEqual(false);
 });
 
-it('All allCheckerCheckboxes will check when all checkboxes are checked', () => {
+it("All allCheckerCheckboxes will check when all checkboxes are checked", () => {
     const component = render(
         <CheckboxGroup>
             <AllCheckerCheckbox id={"all-checker-checkbox-1"} data-testid="all-checker-checkbox-1" />
             <Checkbox id={"test-checkbox-1"} data-testid="test-checkbox-1" />
             <Checkbox id={"test-checkbox-2"} data-testid="test-checkbox-2" />
             <Checkbox id={"test-checkbox-3"} data-testid="test-checkbox-3" />
             <AllCheckerCheckbox id={"all-checker-checkbox-2"} data-testid="all-checker-checkbox-2" />
-        </CheckboxGroup>
+        </CheckboxGroup>,
     );
 
-    const allCheckerCheckbox1 = component.getByTestId('all-checker-checkbox-1') as HTMLInputElement;
-    const allCheckerCheckbox2 = component.getByTestId('all-checker-checkbox-2') as HTMLInputElement;
-    const checkbox1 = component.getByTestId('test-checkbox-1') as HTMLInputElement;
-    const checkbox2 = component.getByTestId('test-checkbox-2') as HTMLInputElement;
-    const checkbox3 = component.getByTestId('test-checkbox-3') as HTMLInputElement;
+    const allCheckerCheckbox1 = component.getByTestId("all-checker-checkbox-1") as HTMLInputElement;
+    const allCheckerCheckbox2 = component.getByTestId("all-checker-checkbox-2") as HTMLInputElement;
+    const checkbox1 = component.getByTestId("test-checkbox-1") as HTMLInputElement;
+    const checkbox2 = component.getByTestId("test-checkbox-2") as HTMLInputElement;
+    const checkbox3 = component.getByTestId("test-checkbox-3") as HTMLInputElement;
 
     expect(allCheckerCheckbox1.checked).toEqual(false);
     expect(allCheckerCheckbox2.checked).toEqual(false);
@@ -122,7 +122,7 @@ it('All allCheckerCheckboxes will check when all checkboxes are checked', () =>
     expect(allCheckerCheckbox2.checked).toEqual(true);
 });
 
-it('Click on allCheckerCheckbox will trigger onChange on checkboxGroup', () => {
+it("Click on allCheckerCheckbox will trigger onChange on checkboxGroup", () => {
     const testOnChange = jest.fn();
 
     const component = render(
@@ -132,28 +132,75 @@ it('Click on allCheckerCheckbox will trigger onChange on checkboxGroup', () => {
             <Checkbox id={"test-checkbox-2"} data-testid="test-checkbox-2" />
             <Checkbox id={"test-checkbox-3"} data-testid="test-checkbox-3" />
             <AllCheckerCheckbox id={"all-checker-checkbox-2"} data-testid="all-checker-checkbox-2" />
-        </CheckboxGroup>
+        </CheckboxGroup>,
     );
     setTimeout(() => {
-        const allCheckerCheckbox1 = component.getByTestId('all-checker-checkbox-1') as HTMLInputElement;
+        const allCheckerCheckbox1 = component.getByTestId("all-checker-checkbox-1") as HTMLInputElement;
         fireEvent.click(allCheckerCheckbox1);
         expect(testOnChange.mock.calls.length).toBe(1);
     }, 251);
 });
 
-it('Click will trigger onChange on allCheckerCheckbox', () => {
+it("Click will trigger onChange on allCheckerCheckbox", () => {
     const testOnChange = jest.fn();
 
     const component = render(
         <CheckboxGroup>
             <AllCheckerCheckbox id={"test-checkbox"} data-testid="test-checkbox" onChange={testOnChange} />
-        </CheckboxGroup>
+        </CheckboxGroup>,
+    );
+
+    const checkbox1 = component.getByTestId("test-checkbox") as HTMLInputElement;
+
+    fireEvent.click(checkbox1);
+    expect(testOnChange.mock.calls.length).toBe(1);
+});
+
+it("Click will trigger onChange on allCheckerCheckbox", () => {
+    const testOnChange = jest.fn();
+
+    const component = render(
+        <CheckboxGroup>
+            <AllCheckerCheckbox id={"test-checkbox"} data-testid="test-checkbox" onChange={testOnChange} />
+        </CheckboxGroup>,
     );
 
-    const checkbox1 = component.getByTestId('test-checkbox') as HTMLInputElement;
+    const checkbox1 = component.getByTestId("test-checkbox") as HTMLInputElement;
 
     fireEvent.click(checkbox1);
     expect(testOnChange.mock.calls.length).toBe(1);
 });
 
+it("onAllCheckerCheckboxChange with unknown id will do nothing", (done) => {
+    const testOnChange = jest.fn();
+    const mockedAllCheckerCheckboxes = new Map();
 
+    const mock = () => (
+        <CheckboxGroup onChange={testOnChange}>
+            <CheckboxGroupContext.Consumer>
+                {(props) => {
+                    return (
+                        <CheckboxGroupContext.Provider value={{
+                            ...props,
+                            allCheckerCheckboxes: mockedAllCheckerCheckboxes,
+                        }}>
+                            <AllCheckerCheckbox id={"test-checkbox"} data-testid="all-checker-checkbox-1" />
+                        </CheckboxGroupContext.Provider>
+                    );
+                }}
+            </CheckboxGroupContext.Consumer>
+        </CheckboxGroup>
+    );
+
+    const component = render(mock());
+    const checkbox1 = component.getByTestId("all-checker-checkbox-1") as HTMLInputElement;
+    expect(mockedAllCheckerCheckboxes.has("test-checkbox")).toBe(true);
+    mockedAllCheckerCheckboxes.clear();
+    expect(mockedAllCheckerCheckboxes.has("test-checkbox")).toBe(false);
+    fireEvent.change(checkbox1);
+
+    setTimeout(() => {
+        expect(testOnChange.mock.calls.length).toBe(0);
+        done();
+    }, 251);
+});
diff --git a/__tests__/CheckboxNoneCheckerCheckboxTest.tsx b/__tests__/CheckboxNoneCheckerCheckboxTest.tsx
@@ -1,12 +1,11 @@
-import {cleanup, render} from '@testing-library/react';
-import React from 'react';
-import {NoneCheckerCheckbox, Checkbox, CheckboxGroup} from "../src";
+import {cleanup, render} from "@testing-library/react";
+import React from "react";
+import {Checkbox, CheckboxGroup, NoneCheckerCheckbox} from "../src";
 
 // automatically unmount and cleanup DOM after the test is finished.
 afterEach(cleanup);
 
-
-it('NoneCheckerCheckbox will be checked when all checkboxes are not checked by attribute', () => {
+it("NoneCheckerCheckbox will be checked when all checkboxes are not checked by attribute", () => {
     const component = render(
         <CheckboxGroup>
             <NoneCheckerCheckbox id="none-checker-1" data-testid="none-checker-1"/>
@@ -15,19 +14,19 @@ it('NoneCheckerCheckbox will be checked when all checkboxes are not checked by a
             <NoneCheckerCheckbox id="none-checker-2" data-testid="none-checker-2"/>
             <Checkbox id="test-checkbox-3" data-testid="test-checkbox-3"/>
             <NoneCheckerCheckbox id="none-checker-3" data-testid="none-checker-3"/>
-        </CheckboxGroup>
+        </CheckboxGroup>,
     );
 
-    const allChecker1 = component.getByTestId('none-checker-1') as HTMLInputElement;
-    const allChecker2 = component.getByTestId('none-checker-2') as HTMLInputElement;
-    const allChecker3 = component.getByTestId('none-checker-3') as HTMLInputElement;
+    const allChecker1 = component.getByTestId("none-checker-1") as HTMLInputElement;
+    const allChecker2 = component.getByTestId("none-checker-2") as HTMLInputElement;
+    const allChecker3 = component.getByTestId("none-checker-3") as HTMLInputElement;
 
     expect(allChecker1.checked).toEqual(true);
     expect(allChecker2.checked).toEqual(true);
     expect(allChecker3.checked).toEqual(true);
 });
 
-it('NoneCheckerCheckbox will NOT be checked when SOME checkboxes are checked by attribute', () => {
+it("NoneCheckerCheckbox will NOT be checked when SOME checkboxes are checked by attribute", () => {
     const component = render(
         <CheckboxGroup>
             <NoneCheckerCheckbox id="none-checker-1" data-testid="none-checker-1"/>
@@ -36,19 +35,19 @@ it('NoneCheckerCheckbox will NOT be checked when SOME checkboxes are checked by
             <NoneCheckerCheckbox id="none-checker-2" data-testid="none-checker-2"/>
             <Checkbox id="test-checkbox-3" data-testid="test-checkbox-3" checked/>
             <NoneCheckerCheckbox id="none-checker-3" data-testid="none-checker-3"/>
-        </CheckboxGroup>
+        </CheckboxGroup>,
     );
 
-    const allChecker1 = component.getByTestId('none-checker-1') as HTMLInputElement;
-    const allChecker2 = component.getByTestId('none-checker-2') as HTMLInputElement;
-    const allChecker3 = component.getByTestId('none-checker-3') as HTMLInputElement;
+    const allChecker1 = component.getByTestId("none-checker-1") as HTMLInputElement;
+    const allChecker2 = component.getByTestId("none-checker-2") as HTMLInputElement;
+    const allChecker3 = component.getByTestId("none-checker-3") as HTMLInputElement;
 
     expect(allChecker1.checked).toEqual(false);
     expect(allChecker2.checked).toEqual(false);
     expect(allChecker3.checked).toEqual(false);
 });
 
-it('NoneCheckerCheckbox will NOT be checked when ALL checkboxes are checked by attribute', () => {
+it("NoneCheckerCheckbox will NOT be checked when ALL checkboxes are checked by attribute", () => {
     const component = render(
         <CheckboxGroup>
             <NoneCheckerCheckbox id="none-checker-1" data-testid="none-checker-1"/>
@@ -57,19 +56,19 @@ it('NoneCheckerCheckbox will NOT be checked when ALL checkboxes are checked by a
             <NoneCheckerCheckbox id="none-checker-2" data-testid="none-checker-2"/>
             <Checkbox id="test-checkbox-3" data-testid="test-checkbox-3" checked/>
             <NoneCheckerCheckbox id="none-checker-3" data-testid="none-checker-3"/>
-        </CheckboxGroup>
+        </CheckboxGroup>,
     );
 
-    const allChecker1 = component.getByTestId('none-checker-1') as HTMLInputElement;
-    const allChecker2 = component.getByTestId('none-checker-2') as HTMLInputElement;
-    const allChecker3 = component.getByTestId('none-checker-3') as HTMLInputElement;
+    const allChecker1 = component.getByTestId("none-checker-1") as HTMLInputElement;
+    const allChecker2 = component.getByTestId("none-checker-2") as HTMLInputElement;
+    const allChecker3 = component.getByTestId("none-checker-3") as HTMLInputElement;
 
     expect(allChecker1.checked).toEqual(false);
     expect(allChecker2.checked).toEqual(false);
     expect(allChecker3.checked).toEqual(false);
 });
 
-it('NoneCheckerCheckbox will NOT be checked when checkbox group is defaultChecked', () => {
+it("NoneCheckerCheckbox will NOT be checked when checkbox group is defaultChecked", () => {
     const component = render(
         <CheckboxGroup defaultChecked>
             <NoneCheckerCheckbox id="none-checker-1" data-testid="none-checker-1"/>
@@ -78,12 +77,12 @@ it('NoneCheckerCheckbox will NOT be checked when checkbox group is defaultChecke
             <NoneCheckerCheckbox id="none-checker-2" data-testid="none-checker-2"/>
             <Checkbox id="test-checkbox-3" data-testid="test-checkbox-3"/>
             <NoneCheckerCheckbox id="none-checker-3" data-testid="none-checker-3"/>
-        </CheckboxGroup>
+        </CheckboxGroup>,
     );
 
-    const allChecker1 = component.getByTestId('none-checker-1') as HTMLInputElement;
-    const allChecker2 = component.getByTestId('none-checker-2') as HTMLInputElement;
-    const allChecker3 = component.getByTestId('none-checker-3') as HTMLInputElement;
+    const allChecker1 = component.getByTestId("none-checker-1") as HTMLInputElement;
+    const allChecker2 = component.getByTestId("none-checker-2") as HTMLInputElement;
+    const allChecker3 = component.getByTestId("none-checker-3") as HTMLInputElement;
 
     expect(allChecker1.checked).toEqual(false);
     expect(allChecker2.checked).toEqual(false);