# Pull Request Template ## Description This PR fixes a crash where opening a conversation threw `TypeError: Cannot read properties of null (reading 'localeCompare')` and prevented the agent assignment dropdown from rendering. Since #14866, agent bots are included in the assignable agents list. `AgentBot#name` is not presence-validated, so system bots (account-less, global) can have a `null` name. Those nameless bots flowed into name-based operations that assumed a string, causing crashes and warnings across multiple surfaces: * **Assignment dropdown sort:** `getAgentsByAvailability` called `a.name.localeCompare(b.name)`, causing a `localeCompare` `TypeError`. * **Dropdown search:** `MultiselectDropdownItems` called `option.name.toLowerCase()`, causing a `toLowerCase` `TypeError`. * **Agent Bots settings:** `Avatar` received `name=null` for a `String` prop, triggering a Vue prop validation warning. ### What changed * Keep nameless agent bots in the assignment dropdown and render a `-` fallback label in `useAgentsList`. These are still valid, assignable-by-ID records: the assignable agents API includes accessible bots, and `Conversations::AssignmentService` assigns them by ID. Preserving them avoids hiding valid assignment targets. Bots are still included only when `includeAgentBots` is enabled. * Make the sort in `getAgentsByAvailability` null-safe by coercing missing names to an empty string (defense in depth). * Make the search filter in `MultiselectDropdownItems` null-safe (defense in depth). * Pass a null-safe `name` prop to `Avatar` in the Agent Bots settings list to eliminate the Vue prop validation warning. Fixes https://linear.app/chatwoot/issue/CW-7670/agent-assignment-dropdown-crashes-with-cannot-read-properties-of-null ## Type of change - [x] Bug fix (non-breaking change which fixes an issue) ## How Has This Been Tested? 1. Have a system agent bot (`name: null`) that is assignable to an inbox. 2. Open any conversation in that inbox. * The agent assignment dropdown renders without console errors. * The nameless bot is listed with a `-` label and can be assigned. 3. Go to **Settings → Agent Bots**. * The page renders without the `Avatar` prop validation warning. ## Checklist: - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my code - [x] I have commented on my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [x] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] Any dependent changes have been merged and published in downstream modules
148 lines
4.4 KiB
JavaScript
148 lines
4.4 KiB
JavaScript
import { useMapGetter } from 'dashboard/composables/store';
|
|
import * as agentHelper from 'dashboard/helper/agentHelper';
|
|
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
|
import { ref } from 'vue';
|
|
import { useAgentsList } from '../useAgentsList';
|
|
import { allAgentsData, formattedAgentsData } from './fixtures/agentFixtures';
|
|
|
|
// Mock vue-i18n
|
|
vi.mock('vue-i18n', () => ({
|
|
useI18n: () => ({
|
|
t: key => (key === 'AGENT_MGMT.MULTI_SELECTOR.LIST.NONE' ? 'None' : key),
|
|
}),
|
|
}));
|
|
|
|
vi.mock('dashboard/composables/store');
|
|
vi.mock('dashboard/helper/agentHelper');
|
|
|
|
// Create a mock None agent
|
|
const mockNoneAgent = {
|
|
confirmed: true,
|
|
name: 'None',
|
|
id: 0,
|
|
role: 'agent',
|
|
account_id: 0,
|
|
email: 'None',
|
|
};
|
|
|
|
const mockUseMapGetter = (overrides = {}) => {
|
|
const getAssignableAgents = vi.fn(() => allAgentsData);
|
|
const defaultGetters = {
|
|
getCurrentUser: ref(allAgentsData[0]),
|
|
getSelectedChat: ref({ inbox_id: 1, meta: { assignee: true } }),
|
|
getCurrentAccountId: ref(1),
|
|
'inboxAssignableAgents/getAssignableAgents': ref(getAssignableAgents),
|
|
};
|
|
|
|
const mergedGetters = { ...defaultGetters, ...overrides };
|
|
|
|
useMapGetter.mockImplementation(getter => mergedGetters[getter]);
|
|
};
|
|
|
|
describe('useAgentsList', () => {
|
|
beforeEach(() => {
|
|
vi.clearAllMocks();
|
|
agentHelper.getAgentsByUpdatedPresence.mockImplementation(agents => agents);
|
|
agentHelper.getSortedAgentsByAvailability.mockReturnValue(
|
|
formattedAgentsData.slice(1)
|
|
);
|
|
|
|
mockUseMapGetter();
|
|
});
|
|
|
|
it('returns agentsList and assignableAgents', () => {
|
|
const { agentsList, assignableAgents } = useAgentsList();
|
|
|
|
expect(assignableAgents.value).toEqual(allAgentsData);
|
|
expect(
|
|
useMapGetter('inboxAssignableAgents/getAssignableAgents').value
|
|
).toHaveBeenCalledWith(1, { includeAgentBots: false });
|
|
expect(agentsList.value[0]).toEqual(mockNoneAgent);
|
|
expect(agentsList.value.length).toBe(
|
|
formattedAgentsData.slice(1).length + 1
|
|
);
|
|
});
|
|
|
|
it('requests agent bots when explicitly included', () => {
|
|
const { agentsList, assignableAgents } = useAgentsList(true, {
|
|
includeAgentBots: true,
|
|
});
|
|
|
|
expect(assignableAgents.value).toEqual(allAgentsData);
|
|
expect(
|
|
useMapGetter('inboxAssignableAgents/getAssignableAgents').value
|
|
).toHaveBeenCalledWith(1, { includeAgentBots: true });
|
|
expect(agentsList.value[0]).toEqual(mockNoneAgent);
|
|
expect(agentsList.value.length).toBe(
|
|
formattedAgentsData.slice(1).length + 1
|
|
);
|
|
});
|
|
|
|
it('includes None agent when includeNoneAgent is true', () => {
|
|
const { agentsList } = useAgentsList(true);
|
|
|
|
expect(agentsList.value[0]).toEqual(mockNoneAgent);
|
|
expect(agentsList.value.length).toBe(
|
|
formattedAgentsData.slice(1).length + 1
|
|
);
|
|
});
|
|
|
|
it('excludes None agent when includeNoneAgent is false', () => {
|
|
const { agentsList } = useAgentsList(false);
|
|
|
|
expect(agentsList.value[0].id).not.toBe(0);
|
|
expect(agentsList.value.length).toBe(formattedAgentsData.slice(1).length);
|
|
});
|
|
|
|
it('keeps nameless agent bots and applies a fallback label', () => {
|
|
const namelessBot = {
|
|
id: 91,
|
|
name: null,
|
|
assignee_type: 'AgentBot',
|
|
availability_status: 'offline',
|
|
};
|
|
mockUseMapGetter({
|
|
'inboxAssignableAgents/getAssignableAgents': ref(() => [
|
|
...allAgentsData,
|
|
namelessBot,
|
|
]),
|
|
});
|
|
|
|
const { agentsList } = useAgentsList();
|
|
// access the computed to trigger evaluation
|
|
expect(agentsList.value).toBeDefined();
|
|
|
|
const passedAgents =
|
|
agentHelper.getAgentsByUpdatedPresence.mock.calls[0][0];
|
|
expect(passedAgents).toContainEqual({
|
|
...namelessBot,
|
|
name: '-',
|
|
});
|
|
});
|
|
|
|
it('handles empty assignable agents', () => {
|
|
mockUseMapGetter({
|
|
'inboxAssignableAgents/getAssignableAgents': ref(() => []),
|
|
});
|
|
agentHelper.getSortedAgentsByAvailability.mockReturnValue([]);
|
|
|
|
const { agentsList, assignableAgents } = useAgentsList();
|
|
|
|
expect(assignableAgents.value).toEqual([]);
|
|
expect(agentsList.value).toEqual([mockNoneAgent]);
|
|
});
|
|
|
|
it('handles missing inbox_id', () => {
|
|
mockUseMapGetter({
|
|
getSelectedChat: ref({ meta: { assignee: true } }),
|
|
'inboxAssignableAgents/getAssignableAgents': ref(() => []),
|
|
});
|
|
agentHelper.getSortedAgentsByAvailability.mockReturnValue([]);
|
|
|
|
const { agentsList, assignableAgents } = useAgentsList();
|
|
|
|
expect(assignableAgents.value).toEqual([]);
|
|
expect(agentsList.value).toEqual([mockNoneAgent]);
|
|
});
|
|
});
|