test: added jest test case for checkboxtree

tests/testdata/test_addons/package_global_config_everything/globalConfig.json

@@ -1576,6 +1576,7 @@
                             "type": "CheckboxTree",
                             "label": "Event Filters",
                             "field": "apis",
+                            "required": true,
                             "options": {
                                 "groups": [
                                     {

ui/src/components/CheckboxTree/CheckboxTree.test.tsx

@@ -0,0 +1,111 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import CheckboxTree from './CheckboxTree';
+import { MODE_CREATE } from '../../constants/modes';
+import { CheckboxTreeProps } from './types';
+
+const handleChange = jest.fn();
+
+const defaultCheckboxProps: CheckboxTreeProps = {
+    mode: MODE_CREATE,
+    field: 'apis',
+    value: 'rowUnderGroup1,requiredField',
+    label: 'CheckboxTree',
+    controlOptions: {
+        groups: [
+            {
+                label: 'Group 1',
+                options: {
+                    isExpandable: true,
+                    expand: true,
+                },
+                fields: ['rowUnderGroup1'],
+            },
+            {
+                label: 'Group 3',
+                options: {
+                    isExpandable: true,
+                    expand: true,
+                },
+                fields: ['requiredField', '160validation'],
+            },
+        ],
+        rows: [
+            {
+                field: 'rowWithoutGroup',
+                checkbox: {
+                    label: 'Row without group',
+                    defaultValue: false,
+                },
+            },
+            {
+                field: 'rowUnderGroup1',
+                checkbox: {
+                    label: 'Row under Group 1',
+                    defaultValue: false,
+                },
+            },
+            {
+                field: 'requiredField',
+                checkbox: {
+                    label: 'Required field',
+                    defaultValue: false,
+                },
+            },
+            {
+                field: '160validation',
+                checkbox: {
+                    label: 'from 1 to 60 validation',
+                },
+            },
+        ],
+    },
+    handleChange,
+};
+
+const renderCheckboxTree = (additionalProps?: Partial<CheckboxTreeProps>) => {
+    const props = { ...defaultCheckboxProps, ...additionalProps };
+    render(<CheckboxTree {...props} />);
+};
+
+describe('CheckboxTree Component', () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('renders all rows and groups correctly', () => {
+        renderCheckboxTree();
+
+        // Verify groups
+        expect(screen.getByText('Group 1')).toBeInTheDocument();
+        expect(screen.getByText('Group 3')).toBeInTheDocument();
+
+        // Verify rows
+        expect(screen.getByLabelText('Row without group')).toBeInTheDocument();
+        expect(screen.getByLabelText('Row under Group 1')).toBeInTheDocument();
+        expect(screen.getByLabelText('Required field')).toBeInTheDocument();
+        expect(screen.getByLabelText('from 1 to 60 validation')).toBeInTheDocument();
+    });
+
+    it('handles "Select All" and "Clear All" functionality', async () => {
+        renderCheckboxTree();
+        const user = userEvent.setup();
+
+        // "Select All"
+        const selectAllButton = screen.getByText('Select All');
+        await user.click(selectAllButton);
+
+        const allCheckboxes = screen.getAllByRole('checkbox');
+        allCheckboxes.forEach((checkbox) => expect(checkbox).toBeChecked());
+
+        expect(handleChange).toHaveBeenCalledTimes(1);
+
+        // "Clear All"
+        const clearAllButton = screen.getByText('Clear All');
+        await user.click(clearAllButton);
+
+        allCheckboxes.forEach((checkbox) => expect(checkbox).not.toBeChecked());
+        expect(handleChange).toHaveBeenCalledTimes(2);
+    });
+});

ui/src/components/CheckboxTree/CheckboxTree.utils.test.ts

@@ -0,0 +1,159 @@
+import {
+    isGroupWithRows,
+    getFlattenRowsWithGroups,
+    getNewCheckboxValues,
+    getCheckedCheckboxesCount,
+    getDefaultValues,
+} from './CheckboxTree.utils';
+import { GroupWithRows, Row, ValueByField } from './types';
+
+describe('isGroupWithRows', () => {
+    test('should return true if the item is a group with rows', () => {
+        const group: GroupWithRows = {
+            label: 'Group 1',
+            options: { isExpandable: true, expand: true },
+            fields: ['row1'],
+            rows: [],
+        };
+        expect(isGroupWithRows(group)).toBe(true);
+    });
+
+    test('should return false if the item is a row', () => {
+        const row: Row = {
+            field: 'row1',
+            checkbox: { label: 'Row 1' },
+        };
+        expect(isGroupWithRows(row)).toBe(false);
+    });
+});
+
+describe('getFlattenRowsWithGroups', () => {
+    const controlOptions = {
+        groups: [
+            {
+                label: 'Group 1',
+                options: { isExpandable: true, expand: true },
+                fields: ['row1', 'row2'],
+            },
+        ],
+        rows: [
+            { field: 'row1', checkbox: { label: 'Row 1' } },
+            { field: 'row2', checkbox: { label: 'Row 2' } },
+            { field: 'row3', checkbox: { label: 'Row 3' } },
+        ],
+    };
+
+    test('should flatten rows and group rows under their respective groups', () => {
+        const result = getFlattenRowsWithGroups(controlOptions);
+
+        expect(result).toHaveLength(2);
+        const group = result[0] as GroupWithRows;
+        expect(isGroupWithRows(group)).toBe(true);
+        expect(group.label).toBe('Group 1');
+        expect(group.rows).toHaveLength(2);
+        expect(group.rows[0].field).toBe('row1');
+        expect(group.rows[1].field).toBe('row2');
+
+        const row = result[1] as Row;
+        expect(isGroupWithRows(row)).toBe(false);
+        expect(row.field).toBe('row3');
+    });
+
+    test('should add rows directly if they do not belong to any group', () => {
+        const controlOptionsWithoutGroups = {
+            groups: [],
+            rows: [{ field: 'row1', checkbox: { label: 'Row 1' } }],
+        };
+        const result = getFlattenRowsWithGroups(controlOptionsWithoutGroups);
+
+        expect(result).toHaveLength(1);
+        expect(result[0]).toEqual(controlOptionsWithoutGroups.rows[0]);
+    });
+});
+
+describe('getNewCheckboxValues', () => {
+    test('should update the checkbox value for a given field', () => {
+        const values: ValueByField = new Map([
+            ['field1', { checkbox: true }],
+            ['field2', { checkbox: false }],
+        ]);
+        const newValue = { field: 'field2', checkbox: true };
+        const result = getNewCheckboxValues(values, newValue);
+
+        expect(result.get('field1')?.checkbox).toBe(true);
+        expect(result.get('field2')?.checkbox).toBe(true);
+    });
+});
+
+describe('getCheckedCheckboxesCount', () => {
+    test('should return the count of checked checkboxes in a group', () => {
+        const group: GroupWithRows = {
+            label: 'Group 1',
+            options: { isExpandable: true, expand: true },
+            fields: ['row1', 'row2', 'row3'],
+            rows: [
+                { field: 'row1', checkbox: { label: 'Row 1' } },
+                { field: 'row2', checkbox: { label: 'Row 2' } },
+                { field: 'row3', checkbox: { label: 'Row 3' } },
+            ],
+        };
+        const values: ValueByField = new Map([
+            ['row1', { checkbox: true }],
+            ['row2', { checkbox: false }],
+            ['row3', { checkbox: true }],
+        ]);
+
+        const result = getCheckedCheckboxesCount(group, values);
+        expect(result).toBe(2);
+    });
+
+    test('should return 0 if no checkboxes are checked', () => {
+        const group: GroupWithRows = {
+            label: 'Group 1',
+            options: { isExpandable: true, expand: true },
+            fields: ['row1', 'row2'],
+            rows: [
+                { field: 'row1', checkbox: { label: 'Row 1' } },
+                { field: 'row2', checkbox: { label: 'Row 2' } },
+            ],
+        };
+        const values: ValueByField = new Map([
+            ['row1', { checkbox: false }],
+            ['row2', { checkbox: false }],
+        ]);
+
+        const result = getCheckedCheckboxesCount(group, values);
+        expect(result).toBe(0);
+    });
+});
+
+describe('getDefaultValues', () => {
+    test('should return a map with default checkbox values for each row', () => {
+        const rows: Row[] = [
+            { field: 'row1', checkbox: { label: 'Row 1', defaultValue: true } },
+            { field: 'row2', checkbox: { label: 'Row 2', defaultValue: false } },
+        ];
+
+        const result = getDefaultValues(rows);
+
+        expect(result.get('row1')?.checkbox).toBe(true);
+        expect(result.get('row2')?.checkbox).toBe(false);
+    });
+
+    test('should exclude rows without a defaultValue', () => {
+        const rows: Row[] = [
+            { field: 'row1', checkbox: { label: 'Row 1', defaultValue: true } },
+            { field: 'row2', checkbox: { label: 'Row 2' } }, // No defaultValue
+        ];
+
+        const result = getDefaultValues(rows);
+
+        expect(result.has('row1')).toBe(true);
+        expect(result.has('row2')).toBe(false);
+    });
+
+    test('should handle an empty rows array', () => {
+        const result = getDefaultValues([]);
+        expect(result.size).toBe(0);
+    });
+});

ui/src/components/CheckboxTree/stories/CheckboxTree.stories.tsx

@@ -17,6 +17,7 @@ export const Base: Story = {
         mode: MODE_EDIT,
         field: 'api',
         value: 'collect_collaboration,collect_file,collect_task',
+        label: 'checkboxtree',
         controlOptions: {
             rows: [
                 {
@@ -48,6 +49,7 @@ export const Multiline: Story = {
         mode: MODE_EDIT,
         field: 'api',
         value: 'neigh,like',
+        label: 'checkboxtree',
         controlOptions: {
             rows: [
                 {

ui/src/components/CheckboxTree/utils.test.tsx

@@ -0,0 +1,84 @@
+import { parseValue, packValue } from './utils';
+import { ValueByField } from './types';
+
+describe('parseValue', () => {
+    test('should return an empty map if collection is undefined', () => {
+        const result = parseValue();
+        expect(result).toBeInstanceOf(Map);
+        expect(result.size).toBe(0);
+    });
+
+    test('should return an empty map if collection is an empty string', () => {
+        const result = parseValue('');
+        expect(result).toBeInstanceOf(Map);
+        expect(result.size).toBe(0);
+    });
+
+    test('should parse a comma-separated string into a map', () => {
+        const collection = 'field1, field2,field3';
+        const result = parseValue(collection);
+
+        expect(result).toBeInstanceOf(Map);
+        expect(result.size).toBe(3);
+        expect(result.get('field1')).toEqual({ checkbox: true });
+        expect(result.get('field2')).toEqual({ checkbox: true });
+        expect(result.get('field3')).toEqual({ checkbox: true });
+    });
+
+    test('should trim whitespace from field names', () => {
+        const collection = '  field1  ,  field2 ,field3  ';
+        const result = parseValue(collection);
+
+        expect(result.size).toBe(3);
+        expect(result.has('field1')).toBe(true);
+        expect(result.has('field2')).toBe(true);
+        expect(result.has('field3')).toBe(true);
+    });
+});
+
+describe('packValue', () => {
+    test('should return an empty string if the map is empty', () => {
+        const map: ValueByField = new Map();
+        const result = packValue(map);
+        expect(result).toBe('');
+    });
+
+    test('should return a comma-separated string for map entries with checkbox set to true', () => {
+        const map: ValueByField = new Map([
+            ['field1', { checkbox: true }],
+            ['field2', { checkbox: true }],
+            ['field3', { checkbox: true }],
+        ]);
+        const result = packValue(map);
+        expect(result).toBe('field1,field2,field3');
+    });
+
+    test('should exclude entries with checkbox set to false', () => {
+        const map: ValueByField = new Map([
+            ['field1', { checkbox: true }],
+            ['field2', { checkbox: false }],
+            ['field3', { checkbox: true }],
+        ]);
+        const result = packValue(map);
+        expect(result).toBe('field1,field3');
+    });
+
+    test('should handle maps with no valid checkbox entries', () => {
+        const map: ValueByField = new Map([
+            ['field1', { checkbox: false }],
+            ['field2', { checkbox: false }],
+        ]);
+        const result = packValue(map);
+        expect(result).toBe('');
+    });
+
+    test('should handle maps with mixed keys and ignore invalid ones', () => {
+        const map: ValueByField = new Map([
+            ['field1', { checkbox: true }],
+            ['field2', { checkbox: true }],
+            ['field3', { invalid: true } as any],
+        ]);
+        const result = packValue(map);
+        expect(result).toBe('field1,field2');
+    });
+});