diff --git a/.changeset/rotten-pianos-serve.md b/.changeset/rotten-pianos-serve.md new file mode 100644 index 0000000000000..7a1efa499899b --- /dev/null +++ b/.changeset/rotten-pianos-serve.md @@ -0,0 +1,5 @@ +--- +"@rocket.chat/meteor": patch +--- + +Fixes issue where department autocomplete did not render options with checkboxes when configured diff --git a/apps/meteor/client/components/AutoCompleteDepartmentMultiple.spec.tsx b/apps/meteor/client/components/AutoCompleteDepartmentMultiple.spec.tsx new file mode 100644 index 0000000000000..a66f0789b79a6 --- /dev/null +++ b/apps/meteor/client/components/AutoCompleteDepartmentMultiple.spec.tsx @@ -0,0 +1,50 @@ +import { MockedAppRootBuilder } from '@rocket.chat/mock-providers/dist/MockedAppRootBuilder'; +import { render, screen, waitFor, within } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import { VirtuosoMockContext } from 'react-virtuoso'; + +import AutoCompleteDepartmentMultiple from './AutoCompleteDepartmentMultiple'; +import { createFakeDepartment } from '../../tests/mocks/data'; + +const mockGetDepartments = jest.fn(); +const appRoot = new MockedAppRootBuilder() + .withEndpoint('GET', '/v1/livechat/department', mockGetDepartments) + .wrap((children) => ( + {children} + )); + +it('should render autocomplete with checkbox', async () => { + mockGetDepartments.mockResolvedValueOnce({ + departments: [createFakeDepartment({ name: 'Test Department' })], + count: 1, + offset: 0, + total: 1, + }); + + render(, { wrapper: appRoot.build() }); + + await userEvent.click(screen.getByRole('listbox')); + + await waitFor(() => { + const checkbox = within(screen.getByRole('option', { name: 'Test Department' })).getByRole('checkbox'); + expect(checkbox).toBeInTheDocument(); + }); +}); + +it('should render autocomplete without checkbox', async () => { + mockGetDepartments.mockResolvedValueOnce({ + departments: [createFakeDepartment({ name: 'Test Department' })], + count: 1, + offset: 0, + total: 1, + }); + + render(, { wrapper: appRoot.build() }); + + await userEvent.click(screen.getByRole('listbox')); + + await waitFor(() => { + const checkbox = within(screen.getByRole('option', { name: 'Test Department' })).queryByRole('checkbox'); + expect(checkbox).not.toBeInTheDocument(); + }); +}); diff --git a/apps/meteor/client/components/AutoCompleteDepartmentMultiple.tsx b/apps/meteor/client/components/AutoCompleteDepartmentMultiple.tsx index 43c7e096e3db0..b6ae590e3f76d 100644 --- a/apps/meteor/client/components/AutoCompleteDepartmentMultiple.tsx +++ b/apps/meteor/client/components/AutoCompleteDepartmentMultiple.tsx @@ -26,7 +26,7 @@ const AutoCompleteDepartmentMultiple = ({ onlyMyDepartments = false, showArchived = false, enabled = false, - withCheckbox = true, + withCheckbox = false, excludeId, unitId, onChange = () => undefined, @@ -55,11 +55,13 @@ const AutoCompleteDepartmentMultiple = ({ const renderItem = ({ label, value, ...props }: ComponentProps): ReactElement => { if (withCheckbox) { - {label}} - selected={value ? selectedValues.has(value) : false} - />; + return ( + {label}} + selected={value ? selectedValues.has(value) : false} + /> + ); } return