Dynamic ID generation

createnl · Jan 8, 2020 · f9b0319 · f9b0319
1 parent 50680bf
commit f9b0319
Show file tree

Hide file tree

Showing 34 changed files with 4,911 additions and 406 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -23,6 +23,7 @@ module.exports = {
     "react",
     "react-hooks",
     "@typescript-eslint",
+    "jest",
   ],
   "rules": {
   }

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -0,0 +1,27 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [1.1.0] - 2020-01-08
+### Added
+
+- UUID generator
+
+### Removed
+
+- Manual id declaration is now removed and generated automatically
+- Dynamic id setting tests
+
+
+## [1.0.0] - 2019-11-20
+
+### Added
+
+- The initial project
+- Test coverage
+
+[1.1.0]: https://github.com/createnl/grouped-checkboxes/releases/tag/1.1.0
+[1.0.0]: https://github.com/createnl/grouped-checkboxes/releases/tag/1.0.0
diff --git a/README.md b/README.md
@@ -33,17 +33,15 @@ const MyGroupedCheckboxes = (props) => {
 
     return (
         <CheckboxGroup onChange={onCheckboxChange}>
-          <AllCheckerCheckbox id="check-all" />
-          <Checkbox id="first-option" />
-          <Checkbox id="second-option" />
-          <Checkbox id="third-option" />
+          <AllCheckerCheckbox />
+          <Checkbox value="option-1"/>
+          <Checkbox value="option-2" />
+          <Checkbox value="option-3" />
         </CheckboxGroup>
     );
 };
 ```
-Note that:
-- `Checkbox` and `AllCheckerCheckbox` must be inside a `CheckboxGroup`
-- All checkboxes and allCheckerCheckboxes must have an unique id
+Note that `Checkbox` and `AllCheckerCheckbox` must be inside a `CheckboxGroup`
 
 ## Features
 - Multiple `AllCheckerCheckboxes` and `NoneCheckerCheckboxes` inside a group
@@ -58,16 +56,16 @@ Note that:
 ### Checking checkboxes
 ```jsx harmony
 <CheckboxGroup defaultChecked> // Set defaultChecked to check all by default
-  <AllCheckerCheckbox id="check-all" checked/> // Error: You cant contol allCheckerCheckboxes individually (will check automatically if necessary)
-  <Checkbox id="first-option" checked/> // Check individual checkboxes
+  <AllCheckerCheckbox checked/> // Error: You cant contol allCheckerCheckboxes individually (will check automatically if necessary)
+  <Checkbox value="anything" checked/> // Check individual checkboxes
 </CheckboxGroup>
 ```
 
 ### Disabling checkboxes
 ```jsx harmony
 <CheckboxGroup defaultDisabled> // Set defaultDisabled to disable all by default
-  <AllCheckerCheckbox id="check-all" disabled/> // Disable allCheckerCheckbox, will still check if all checkboxes are checked
-  <Checkbox id="first-option" disabled/> // Disable individual checkboxes
+  <AllCheckerCheckbox disabled/> // Disable allCheckerCheckbox, will still check if all checkboxes are checked
+  <Checkbox value="anything" disabled/> // Disable individual checkboxes
 </CheckboxGroup>
 ```
 
@@ -84,19 +82,19 @@ const PermissionsFrom = (props) => {
     return (
         <CheckboxGroup onChange={console.log}>
           <label>
-            <Checkbox id="tos" />
+            <Checkbox value="tos" />
             Terms and Conditions
           </label>
           <label>
-            <Checkbox id="privacy-policy" />
+            <Checkbox value="privacy-policy" />
             Privacy Policy
           </label>
           <label>
-            <Checkbox id="advertisements" />
+            <Checkbox value="advertisements" />
             Advertisements
           </label>
           <label>
-            <AllCheckerCheckbox id="check-all" />
+            <AllCheckerCheckbox />
             Agree to all
           </label>
         </CheckboxGroup>
@@ -110,17 +108,17 @@ The value of an onChange parameter looks like:
     {
         "checked": true,
         "disabled": false,
-        "id": "tos"
+        "value": "tos"
     },
     {
         "checked": true,
         "disabled": false,
-        "id": "privacy-policy"
+        "value": "privacy-policy"
     }, 
     {
         "checked": true,
         "disabled": false,
-        "id": "advertisements"
+        "value": "advertisements"
     }
 ]
 ```
@@ -143,19 +141,19 @@ const LunchDeclaration = (props) => {
         <CheckboxGroup onChange={console.log}>
           <h1>What did you eat for lunch?</h1>
           <label>
-            <Checkbox id="pizza" />
+            <Checkbox value="pizza" />
             Pizza
           </label>
           <label>
-            <Checkbox id="burger" />
+            <Checkbox value="burger" />
             Burger
           </label>
           <label>
-            <Checkbox id="fries" />
+            <Checkbox value="fries" />
             Fries
           </label>
           <label>
-            <NoneCheckerCheckbox id="nothing" />
+            <NoneCheckerCheckbox />
             Nothing
           </label>
         </CheckboxGroup>
@@ -168,17 +166,17 @@ The value of an onChange parameter looks like:
     {
         "checked": true,
         "disabled": false,
-        "id": "pizza"
+        "value": "pizza"
     },
     {
         "checked": true,
         "disabled": false,
-        "id": "burger"
+        "value": "burger"
     }, 
     {
         "checked": true,
         "disabled": false,
-        "id": "fries"
+        "value": "fries"
     }
 ]
 ```

diff --git a/__tests__/AllCheckboxEventTests.tsx b/__tests__/AllCheckboxEventTests.tsx
@@ -9,7 +9,7 @@ afterEach(cleanup);
 it("Unchecked allCheckerCheckbox will check on click", () => {
     const component = render(
         <CheckboxGroup>
-            <AllCheckerCheckbox id={"test-checkbox"} data-testid="test-checkbox" />
+            <AllCheckerCheckbox data-testid="test-checkbox" />
         </CheckboxGroup>,
     );
 
@@ -23,7 +23,7 @@ it("Unchecked allCheckerCheckbox will check on click", () => {
 it("Checked allCheckerCheckbox will uncheck on click", () => {
     const component = render(
         <CheckboxGroup defaultChecked>
-            <AllCheckerCheckbox id={"test-checkbox"} data-testid="test-checkbox" />
+            <AllCheckerCheckbox data-testid="test-checkbox" />
         </CheckboxGroup>,
     );
 
@@ -37,9 +37,9 @@ it("Checked allCheckerCheckbox will uncheck on 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" />
+            <AllCheckerCheckbox data-testid="all-checker-checkbox" />
+            <Checkbox data-testid="test-checkbox-1" />
+            <Checkbox data-testid="test-checkbox-2" />
         </CheckboxGroup>,
     );
 
@@ -57,9 +57,9 @@ it("All checkboxes will check 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/>
+            <AllCheckerCheckbox data-testid="all-checker-checkbox" />
+            <Checkbox data-testid="test-checkbox-1" checked/>
+            <Checkbox data-testid="test-checkbox-2" checked/>
         </CheckboxGroup>,
     );
 
@@ -77,11 +77,11 @@ it("All checkboxes will uncheck on allCheckboxesChecker click", () => {
 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" />
+            <AllCheckerCheckbox data-testid="all-checker-checkbox-1" />
+            <Checkbox data-testid="test-checkbox" checked/>
+            <Checkbox checked/>
+            <Checkbox checked/>
+            <AllCheckerCheckbox data-testid="all-checker-checkbox-2" />
         </CheckboxGroup>,
     );
 
@@ -99,11 +99,11 @@ it("All allCheckerCheckboxes will uncheck when not 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" />
+            <AllCheckerCheckbox data-testid="all-checker-checkbox-1" />
+            <Checkbox data-testid="test-checkbox-1" />
+            <Checkbox data-testid="test-checkbox-2" />
+            <Checkbox data-testid="test-checkbox-3" />
+            <AllCheckerCheckbox data-testid="all-checker-checkbox-2" />
         </CheckboxGroup>,
     );
 
@@ -127,11 +127,11 @@ it("Click on allCheckerCheckbox will trigger onChange on checkboxGroup", () => {
 
     const component = render(
         <CheckboxGroup onChange={testOnChange}>
-            <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" />
+            <AllCheckerCheckbox data-testid="all-checker-checkbox-1" />
+            <Checkbox data-testid="test-checkbox-1" />
+            <Checkbox data-testid="test-checkbox-2" />
+            <Checkbox data-testid="test-checkbox-3" />
+            <AllCheckerCheckbox data-testid="all-checker-checkbox-2" />
         </CheckboxGroup>,
     );
     setTimeout(() => {
@@ -146,7 +146,7 @@ it("Click will trigger onChange on allCheckerCheckbox", () => {
 
     const component = render(
         <CheckboxGroup>
-            <AllCheckerCheckbox id={"test-checkbox"} data-testid="test-checkbox" onChange={testOnChange} />
+            <AllCheckerCheckbox data-testid="test-checkbox" onChange={testOnChange} />
         </CheckboxGroup>,
     );
 
@@ -161,7 +161,7 @@ it("Click will trigger onChange on allCheckerCheckbox", () => {
 
     const component = render(
         <CheckboxGroup>
-            <AllCheckerCheckbox id={"test-checkbox"} data-testid="test-checkbox" onChange={testOnChange} />
+            <AllCheckerCheckbox data-testid="test-checkbox" onChange={testOnChange} />
         </CheckboxGroup>,
     );
 
@@ -184,7 +184,7 @@ it("onAllCheckerCheckboxChange with unknown id will do nothing", (done) => {
                             ...props,
                             allCheckerCheckboxes: mockedAllCheckerCheckboxes,
                         }}>
-                            <AllCheckerCheckbox id={"test-checkbox"} data-testid="all-checker-checkbox-1" />
+                            <AllCheckerCheckbox data-testid="all-checker-checkbox-1" />
                         </CheckboxGroupContext.Provider>
                     );
                 }}
@@ -194,9 +194,8 @@ it("onAllCheckerCheckboxChange with unknown id will do nothing", (done) => {
 
     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);
+    expect(mockedAllCheckerCheckboxes.size).toBe(0);
     fireEvent.change(checkbox1);
 
     setTimeout(() => {

diff --git a/__tests__/CheckboxAllCheckerCheckboxTest.tsx b/__tests__/CheckboxAllCheckerCheckboxTest.tsx
@@ -9,12 +9,12 @@ afterEach(cleanup);
 it('AllCheckerCheckbox will be checked when all checkboxes are checked by attribute', () => {
     const component = render(
         <CheckboxGroup>
-            <AllCheckerCheckbox id="all-checker-1" data-testid="all-checker-1"/>
-            <Checkbox id="test-checkbox-1" data-testid="test-checkbox-1" checked/>
-            <Checkbox id="test-checkbox-2" data-testid="test-checkbox-2" checked/>
-            <AllCheckerCheckbox id="all-checker-2" data-testid="all-checker-2"/>
-            <Checkbox id="test-checkbox-3" data-testid="test-checkbox-3" checked/>
-            <AllCheckerCheckbox id="all-checker-3" data-testid="all-checker-3"/>
+            <AllCheckerCheckbox data-testid="all-checker-1"/>
+            <Checkbox data-testid="test-checkbox-1" checked/>
+            <Checkbox data-testid="test-checkbox-2" checked/>
+            <AllCheckerCheckbox data-testid="all-checker-2"/>
+            <Checkbox data-testid="test-checkbox-3" checked/>
+            <AllCheckerCheckbox data-testid="all-checker-3"/>
         </CheckboxGroup>
     );
 
@@ -30,12 +30,12 @@ it('AllCheckerCheckbox will be checked when all checkboxes are checked by attrib
 it('AllCheckerCheckbox will NOT be checked when NOT all checkboxes are checked by attribute', () => {
     const component = render(
         <CheckboxGroup>
-            <AllCheckerCheckbox id="all-checker-1" data-testid="all-checker-1"/>
-            <Checkbox id="test-checkbox-1" data-testid="test-checkbox-1" checked/>
-            <Checkbox id="test-checkbox-2" data-testid="test-checkbox-2" />
-            <AllCheckerCheckbox id="all-checker-2" data-testid="all-checker-2"/>
-            <Checkbox id="test-checkbox-3" data-testid="test-checkbox-3" checked/>
-            <AllCheckerCheckbox id="all-checker-3" data-testid="all-checker-3"/>
+            <AllCheckerCheckbox data-testid="all-checker-1"/>
+            <Checkbox data-testid="test-checkbox-1" checked/>
+            <Checkbox data-testid="test-checkbox-2" />
+            <AllCheckerCheckbox data-testid="all-checker-2"/>
+            <Checkbox data-testid="test-checkbox-3" checked/>
+            <AllCheckerCheckbox data-testid="all-checker-3"/>
         </CheckboxGroup>
     );
 
@@ -51,12 +51,12 @@ it('AllCheckerCheckbox will NOT be checked when NOT all checkboxes are checked b
 it('AllCheckerCheckbox will NOT be checked when NO checkboxes are checked by attribute', () => {
     const component = render(
         <CheckboxGroup>
-            <AllCheckerCheckbox id="all-checker-1" data-testid="all-checker-1"/>
-            <Checkbox id="test-checkbox-1" data-testid="test-checkbox-1" />
-            <Checkbox id="test-checkbox-2" data-testid="test-checkbox-2" />
-            <AllCheckerCheckbox id="all-checker-2" data-testid="all-checker-2"/>
-            <Checkbox id="test-checkbox-3" data-testid="test-checkbox-3" />
-            <AllCheckerCheckbox id="all-checker-3" data-testid="all-checker-3"/>
+            <AllCheckerCheckbox data-testid="all-checker-1"/>
+            <Checkbox data-testid="test-checkbox-1" />
+            <Checkbox data-testid="test-checkbox-2" />
+            <AllCheckerCheckbox data-testid="all-checker-2"/>
+            <Checkbox data-testid="test-checkbox-3" />
+            <AllCheckerCheckbox data-testid="all-checker-3"/>
         </CheckboxGroup>
     );