Merge branch 'main' into dkilgore-eightfold/input-css-vars-and-color-…

…contrast-fixup
EightfoldAI · Jan 11, 2023 · 1769bd5 · 1769bd5
2 parents 9ad68d4 + b4a5dc2
commit 1769bd5
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 15 deletions.
diff --git a/src/components/CheckBox/CheckBox.test.tsx b/src/components/CheckBox/CheckBox.test.tsx
@@ -2,13 +2,13 @@ import React from 'react';
 import Enzyme, { mount } from 'enzyme';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import MatchMediaMock from 'jest-matchmedia-mock';
-import { CheckBox, SelectorSize } from './';
+import { CheckBox, CheckBoxGroup, SelectorSize } from './';
 
 Enzyme.configure({ adapter: new Adapter() });
 
 let matchMedia: any;
 
-describe('RadioButton', () => {
+describe('CheckBox', () => {
   beforeAll(() => {
     matchMedia = new MatchMediaMock();
   });
@@ -17,41 +17,96 @@ describe('RadioButton', () => {
     matchMedia.clear();
   });
 
-  it('CheckBox renders', () => {
+  test('CheckBox renders', () => {
     const wrapper = mount(<CheckBox checked={true} />);
     expect(
       wrapper.containsMatchingElement(<CheckBox checked={true} />)
     ).toEqual(true);
   });
 
-  it('Checkbox renders as toggle switch', () => {
+  test('Checkbox renders as toggle switch', () => {
     const wrapper = mount(<CheckBox checked={true} toggle />);
     expect(wrapper.find('.toggle')).toBeTruthy();
   });
 
-  it('simulate disabled CheckBox', () => {
+  test('simulate disabled CheckBox', () => {
     const wrapper = mount(<CheckBox disabled label="test label" />);
     wrapper.find('input').html().includes('disabled=""');
   });
 
-  it('CheckBox is large', () => {
+  test('CheckBox is large', () => {
     const wrapper = mount(
       <CheckBox size={SelectorSize.Large} label="test label" />
     );
     expect(wrapper.find('.selector-large')).toBeTruthy();
   });
 
-  it('CheckBox is medium', () => {
+  test('CheckBox is medium', () => {
     const wrapper = mount(
       <CheckBox size={SelectorSize.Medium} label="test label" />
     );
     expect(wrapper.find('.selector-medium')).toBeTruthy();
   });
 
-  it('CheckBox is small', () => {
+  test('CheckBox is small', () => {
     const wrapper = mount(
       <CheckBox size={SelectorSize.Small} label="test label" />
     );
     expect(wrapper.find('.selector-small')).toBeTruthy();
   });
+
+  test('CheckBoxGroup renders', () => {
+    const wrapper = mount(
+      <CheckBoxGroup
+        items={[
+          {
+            name: 'group',
+            value: 'First',
+            label: 'First',
+            id: 'test-1',
+          },
+          {
+            name: 'group',
+            value: 'Second',
+            label: 'Second',
+            id: 'test-2',
+          },
+          {
+            name: 'group',
+            value: 'Third',
+            label: 'Third',
+            id: 'test-3',
+          },
+        ]}
+        layout="vertical"
+      />
+    );
+    expect(
+      wrapper.containsMatchingElement(
+        <CheckBoxGroup
+          items={[
+            {
+              name: 'group',
+              value: 'First',
+              label: 'First',
+              id: 'test-1',
+            },
+            {
+              name: 'group',
+              value: 'Second',
+              label: 'Second',
+              id: 'test-2',
+            },
+            {
+              name: 'group',
+              value: 'Third',
+              label: 'Third',
+              id: 'test-3',
+            },
+          ]}
+          layout="vertical"
+        />
+      )
+    ).toEqual(true);
+  });
 });
diff --git a/src/components/CheckBox/CheckBoxGroup.tsx b/src/components/CheckBox/CheckBoxGroup.tsx
@@ -5,6 +5,7 @@ import { mergeClasses } from '../../shared/utilities';
 import {
   CheckBox,
   CheckboxGroupProps,
+  CheckboxValueType,
   LabelAlign,
   LabelPosition,
   SelectorSize,
@@ -106,14 +107,16 @@ export const CheckBoxGroup: FC<CheckboxGroupProps> = React.forwardRef(
             checked={value?.includes(item.value)}
             key={item.value}
             onChange={() => {
-              const optionIndex = value?.indexOf(item.value);
-              const newValue = [...value];
-              if (optionIndex === -1) {
-                newValue.push(item.value);
-              } else {
-                newValue.splice(optionIndex, 1);
+              if (value) {
+                const optionIndex: number = value.indexOf(item.value);
+                const newValue: CheckboxValueType[] = [...value];
+                if (optionIndex === -1) {
+                  newValue.push(item.value);
+                } else {
+                  newValue.splice(optionIndex, 1);
+                }
+                onChange?.(newValue);
               }
-              onChange?.(newValue);
             }}
             size={mergedSize}
           />