@aleph-alpha/chat-kit 6.6.0 → 6.7.0

package/src/components/base/CkToolApproval/CkToolApproval.spec.ts

@@ -0,0 +1,680 @@
+import CkToolApproval from './CkToolApproval.vue';
+import { provideChatKitLabels } from '../../../handlers/useChatKitLabels';
+import type { CkToolApprovalRequest, CkToolApprovalStatus } from './types';
+import userEvent from '@testing-library/user-event';
+import { render, screen, within } from '@testing-library/vue';
+import {
+  defineComponent,
+  h,
+  nextTick,
+  reactive,
+  ref,
+  type PropType,
+} from 'vue';
+
+const REQUEST_ID = 'mcpr_68d3a1f0c2b4';
+const GROUP_NAME = 'Update work items Polarion';
+
+const request: CkToolApprovalRequest = {
+  id: REQUEST_ID,
+  connector: 'polarion',
+  connectorLabel: 'Polarion',
+  toolName: 'update_work_items',
+  arguments: {
+    project_id: 'MCPT',
+    items: [{ work_item_id: 'MCPT-042', priority: '70.0' }],
+  },
+};
+
+const gmailRequest: CkToolApprovalRequest = {
+  id: 'mcpr_9f2e7c1d0a3b',
+  connector: 'gmail',
+  connectorLabel: 'Gmail',
+  connectorIcon: 'mail',
+  toolName: 'send_message',
+  toolTitle: 'Send email',
+  arguments: { to: ['team@example.com'] },
+};
+
+const WorkItemsBody = defineComponent({
+  props: {
+    request: {
+      type: Object as PropType<CkToolApprovalRequest>,
+      required: true,
+    },
+  },
+  setup(props) {
+    return () => h('p', `Custom body for ${props.request.toolName}`);
+  },
+});
+
+function card() {
+  return within(screen.getByRole('group', { name: GROUP_NAME }));
+}
+
+function allowButton() {
+  return screen.getByRole('button', { name: 'Allow' });
+}
+
+function denyButton() {
+  return screen.getByRole('button', { name: 'Deny' });
+}
+
+function circularArguments(): Record<string, unknown> {
+  const args: Record<string, unknown> = { project_id: 'MCPT' };
+  args.self = args;
+  return args;
+}
+
+describe('CkToolApproval', () => {
+  describe('pending', () => {
+    it('shows the action, the connector and the arguments as JSON', () => {
+      render(CkToolApproval, { props: { request, status: 'pending' } });
+
+      expect(card().getByText('Update work items')).toBeInTheDocument();
+      expect(card().getByText('Polarion')).toBeInTheDocument();
+      expect(
+        screen.getByRole('group', { name: GROUP_NAME }).textContent,
+      ).toContain('"work_item_id": "MCPT-042"');
+    });
+
+    it('does not repeat the raw tool name once the header names the action', () => {
+      render(CkToolApproval, { props: { request, status: 'pending' } });
+
+      expect(screen.queryByText('update_work_items')).not.toBeInTheDocument();
+    });
+
+    it("prefers the request's toolTitle over the derived one", () => {
+      render(CkToolApproval, {
+        props: { request: gmailRequest, status: 'pending' },
+      });
+
+      expect(screen.getByText('Send email')).toBeInTheDocument();
+      expect(screen.queryByText('Send message')).not.toBeInTheDocument();
+    });
+
+    it('hides the connector chip when the request has no connectorLabel', () => {
+      render(CkToolApproval, {
+        props: {
+          request: { ...request, connectorLabel: undefined },
+          status: 'pending',
+        },
+      });
+
+      expect(screen.queryByText('Polarion')).not.toBeInTheDocument();
+      expect(screen.getByText('Update work items')).toBeInTheDocument();
+    });
+
+    it('exposes the card as a group named by its action and connector', () => {
+      render(CkToolApproval, { props: { request, status: 'pending' } });
+
+      expect(
+        screen.getByRole('group', { name: GROUP_NAME }),
+      ).toBeInTheDocument();
+    });
+
+    // Icons are decorative (aria-hidden), so they have no accessible handle;
+    // like CkCitationCard's spec, these check the class lucide renders.
+    it.each(['pending', 'denied'] as const)(
+      'puts a class from the host on the %s card',
+      (status) => {
+        render(CkToolApproval, {
+          props: { request, status },
+          attrs: { class: 'mt-4' },
+        });
+
+        expect(screen.getByRole('group', { name: GROUP_NAME })).toHaveClass(
+          'mt-4',
+        );
+      },
+    );
+
+    it('shows the default app-window icon in the connector chip', () => {
+      const { container } = render(CkToolApproval, {
+        props: { request, status: 'pending' },
+      });
+
+      expect(container.querySelector('.lucide-app-window')).toBeInTheDocument();
+    });
+
+    it("uses the request's connectorIcon in the chip", () => {
+      const { container } = render(CkToolApproval, {
+        props: { request: gmailRequest, status: 'pending' },
+      });
+
+      expect(container.querySelector('.lucide-mail')).toBeInTheDocument();
+      expect(
+        container.querySelector('.lucide-app-window'),
+      ).not.toBeInTheDocument();
+    });
+
+    it('lets the connector-icon slot replace the chip icon with a logo', () => {
+      render(CkToolApproval, {
+        props: { request, status: 'pending' },
+        slots: {
+          'connector-icon': () => h('img', { alt: 'Polarion logo' }),
+        },
+      });
+
+      expect(screen.getByAltText('Polarion logo')).toBeInTheDocument();
+    });
+
+    it('emits allow with the request id when Allow is clicked', async () => {
+      const user = userEvent.setup();
+      const { emitted } = render(CkToolApproval, {
+        props: { request, status: 'pending' },
+      });
+
+      await user.click(allowButton());
+
+      expect(emitted('allow')).toEqual([[REQUEST_ID]]);
+      expect(emitted('deny')).toBeUndefined();
+    });
+
+    it('emits deny with the request id when Deny is clicked', async () => {
+      const user = userEvent.setup();
+      const { emitted } = render(CkToolApproval, {
+        props: { request, status: 'pending' },
+      });
+
+      await user.click(denyButton());
+
+      expect(emitted('deny')).toEqual([[REQUEST_ID]]);
+      expect(emitted('allow')).toBeUndefined();
+    });
+
+    it('renders the custom body registered for the connector and tool instead of JSON', () => {
+      render(CkToolApproval, {
+        props: {
+          request,
+          status: 'pending',
+          bodyComponents: { polarion: { update_work_items: WorkItemsBody } },
+        },
+      });
+
+      expect(
+        card().getByText('Custom body for update_work_items'),
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole('group', { name: GROUP_NAME }).textContent,
+      ).not.toContain('"work_item_id"');
+    });
+
+    it('falls back to JSON when only a different tool of the connector is registered', () => {
+      render(CkToolApproval, {
+        props: {
+          request,
+          status: 'pending',
+          bodyComponents: { polarion: { create_document: WorkItemsBody } },
+        },
+      });
+
+      expect(screen.queryByText(/Custom body/)).not.toBeInTheDocument();
+      expect(
+        screen.getByRole('group', { name: GROUP_NAME }).textContent,
+      ).toContain('"work_item_id": "MCPT-042"');
+    });
+
+    it('renders a body map passed in reactive state without a Vue warning', () => {
+      const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+      const bodies = reactive({
+        polarion: { update_work_items: WorkItemsBody },
+      });
+
+      render(CkToolApproval, {
+        props: { request, status: 'pending', bodyComponents: bodies },
+      });
+
+      expect(
+        screen.getByText('Custom body for update_work_items'),
+      ).toBeInTheDocument();
+      expect(warn).not.toHaveBeenCalled();
+      warn.mockRestore();
+    });
+  });
+
+  describe('robustness', () => {
+    it('falls back to JSON when a custom body crashes, so nothing is approved blind', async () => {
+      const error = vi.spyOn(console, 'error').mockImplementation(() => {});
+      const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+      const BrokenBody = defineComponent({
+        props: {
+          request: {
+            type: Object as PropType<CkToolApprovalRequest>,
+            required: true,
+          },
+        },
+        setup() {
+          return () => {
+            throw new Error('unexpected arguments');
+          };
+        },
+      });
+
+      render(CkToolApproval, {
+        props: {
+          request,
+          status: 'pending',
+          bodyComponents: { polarion: { update_work_items: BrokenBody } },
+        },
+      });
+      await nextTick();
+
+      expect(
+        screen.getByRole('group', { name: GROUP_NAME }).textContent,
+      ).toContain('"work_item_id": "MCPT-042"');
+      expect(error).toHaveBeenCalledWith(
+        expect.stringContaining('[CkToolApproval]'),
+        expect.any(Error),
+      );
+      error.mockRestore();
+      warn.mockRestore();
+    });
+
+    it('ignores built-in object keys when looking up a custom body', () => {
+      render(CkToolApproval, {
+        props: {
+          request: { ...request, toolName: 'constructor' },
+          status: 'pending',
+          bodyComponents: { polarion: { update_work_items: WorkItemsBody } },
+        },
+      });
+
+      expect(
+        screen.getByRole('group', { name: 'Constructor Polarion' }).textContent,
+      ).toContain('"project_id": "MCPT"');
+    });
+
+    it('shortens very large arguments and says so', () => {
+      render(CkToolApproval, {
+        props: {
+          request: { ...request, arguments: { file: 'x'.repeat(100_000) } },
+          status: 'pending',
+        },
+      });
+
+      const text = screen.getByRole('group', { name: GROUP_NAME }).textContent;
+      expect(text?.length).toBeLessThan(30_000);
+      expect(
+        screen.getByText('Arguments shortened for display'),
+      ).toBeInTheDocument();
+    });
+
+    it.each([
+      ['a bigint', { count: BigInt(1) }],
+      ['a circular reference', circularArguments()],
+    ])('keeps Allow off when arguments with %s cannot be shown', (_, args) => {
+      const error = vi.spyOn(console, 'error').mockImplementation(() => {});
+
+      render(CkToolApproval, {
+        props: { request: { ...request, arguments: args }, status: 'pending' },
+      });
+
+      expect(
+        card().getByText("These arguments can't be shown"),
+      ).toBeInTheDocument();
+      expect(allowButton()).toBeDisabled();
+      expect(denyButton()).toBeEnabled();
+      expect(error).toHaveBeenCalledWith(
+        expect.stringContaining('[CkToolApproval]'),
+        expect.any(TypeError),
+      );
+      error.mockRestore();
+    });
+
+    it('treats an unknown status from a JavaScript host as failed instead of crashing', () => {
+      const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+
+      render(CkToolApproval, {
+        props: {
+          request,
+          status: 'expired' as unknown as CkToolApprovalStatus,
+        },
+      });
+
+      expect(card().getByText('Failed')).toBeInTheDocument();
+      expect(warn).toHaveBeenCalled();
+      warn.mockRestore();
+    });
+
+    it('keeps a logo from the connector-icon slot out of the card name', () => {
+      render(CkToolApproval, {
+        props: { request, status: 'pending' },
+        slots: {
+          'connector-icon': () => h('img', { alt: 'Polarion logo' }),
+        },
+      });
+
+      expect(
+        screen.getByRole('group', { name: GROUP_NAME }),
+      ).toBeInTheDocument();
+    });
+  });
+
+  describe('button lock', () => {
+    it('locks both buttons after the first click so only one answer is sent', async () => {
+      const user = userEvent.setup();
+      const { emitted } = render(CkToolApproval, {
+        props: { request, status: 'pending' },
+      });
+
+      await user.click(allowButton());
+      await user.click(allowButton());
+      await user.click(denyButton());
+
+      expect(allowButton()).toBeDisabled();
+      expect(denyButton()).toBeDisabled();
+      expect(emitted('allow')).toEqual([[REQUEST_ID]]);
+      expect(emitted('deny')).toBeUndefined();
+    });
+
+    it('unlocks for a new request', async () => {
+      const user = userEvent.setup();
+      const { rerender } = render(CkToolApproval, {
+        props: { request, status: 'pending' },
+      });
+      await user.click(allowButton());
+
+      await rerender({
+        request: { ...request, id: 'mcpr_next' },
+        status: 'pending',
+      });
+
+      expect(allowButton()).toBeEnabled();
+      expect(denyButton()).toBeEnabled();
+    });
+
+    it('stays locked when the host passes a fresh copy of the same request', async () => {
+      const user = userEvent.setup();
+      const { rerender } = render(CkToolApproval, {
+        props: { request, status: 'pending' },
+      });
+      await user.click(allowButton());
+
+      await rerender({ request: { ...request }, status: 'pending' });
+
+      expect(allowButton()).toBeDisabled();
+      expect(denyButton()).toBeDisabled();
+    });
+
+    it('unlocks when the same request comes back to pending', async () => {
+      const user = userEvent.setup();
+      const { rerender } = render(CkToolApproval, {
+        props: { request, status: 'pending' },
+      });
+      await user.click(allowButton());
+
+      await rerender({ request, status: 'failed' });
+      await rerender({ request, status: 'pending' });
+
+      expect(allowButton()).toBeEnabled();
+    });
+
+    it('lets the host unlock after a failed send so the user can retry', async () => {
+      const user = userEvent.setup();
+      const approval = ref<InstanceType<typeof CkToolApproval>>();
+      const Host = defineComponent({
+        setup() {
+          return () =>
+            h(CkToolApproval, { ref: approval, request, status: 'pending' });
+        },
+      });
+      render(Host);
+      await user.click(allowButton());
+      expect(allowButton()).toBeDisabled();
+
+      approval.value?.unlock();
+      await Promise.resolve();
+
+      expect(allowButton()).toBeEnabled();
+    });
+  });
+
+  describe('decided', () => {
+    it('collapses an allowed request to one row with the summary and an Allowed badge', () => {
+      render(CkToolApproval, {
+        props: { request, status: 'allowed', summary: '2 work items updated' },
+      });
+
+      expect(
+        card().getByText('Approved by you · 2 work items updated'),
+      ).toBeInTheDocument();
+      expect(card().getByText('Allowed')).toBeInTheDocument();
+      expect(card().getByText('Update work items')).toBeInTheDocument();
+      expect(card().getByText('Polarion')).toBeInTheDocument();
+      expect(screen.queryByRole('button')).not.toBeInTheDocument();
+      expect(
+        screen.getByRole('group', { name: GROUP_NAME }).textContent,
+      ).not.toContain('"work_item_id"');
+    });
+
+    it('keeps the toolTitle and connector icon in the result row', () => {
+      const { container } = render(CkToolApproval, {
+        props: { request: gmailRequest, status: 'allowed' },
+      });
+
+      expect(screen.getByText('Send email')).toBeInTheDocument();
+      expect(container.querySelector('.lucide-mail')).toBeInTheDocument();
+    });
+
+    it('keeps the decided row a named group described by its result', () => {
+      render(CkToolApproval, { props: { request, status: 'denied' } });
+
+      const group = screen.getByRole('group', { name: GROUP_NAME });
+      expect(group).toHaveAccessibleDescription(
+        'Denied by you · Nothing was updated',
+      );
+    });
+
+    it('shows only the outcome when an allowed request has no summary', () => {
+      render(CkToolApproval, { props: { request, status: 'allowed' } });
+
+      expect(screen.getByText('Approved by you')).toBeInTheDocument();
+    });
+
+    it.each([
+      ['denied', 'Denied by you · Nothing was updated', 'Denied'],
+      ['failed', 'Failed · Nothing was updated', 'Failed'],
+      ['skipped', 'Skipped · Nothing was updated', 'Skipped'],
+    ] as const)(
+      'shows a %s request with its result line and badge',
+      (status, line, badge) => {
+        render(CkToolApproval, { props: { request, status } });
+
+        expect(card().getByText(line)).toBeInTheDocument();
+        expect(card().getByText(badge)).toBeInTheDocument();
+        expect(screen.queryByRole('button')).not.toBeInTheDocument();
+      },
+    );
+
+    it('marks a skipped request with the skip-forward icon', () => {
+      const { container } = render(CkToolApproval, {
+        props: { request, status: 'skipped' },
+      });
+
+      expect(
+        container.querySelector('.lucide-skip-forward'),
+      ).toBeInTheDocument();
+    });
+
+    it.each([
+      ['denied', 'Denied by you · Nothing was sent'],
+      ['failed', 'Failed · Nothing was sent'],
+      ['skipped', 'Skipped · Nothing was sent'],
+    ] as const)(
+      'uses the host summary as the detail of a %s request',
+      (status, line) => {
+        render(CkToolApproval, {
+          props: { request, status, summary: 'Nothing was sent' },
+        });
+
+        expect(screen.getByText(line)).toBeInTheDocument();
+      },
+    );
+
+    it.each(['denied', 'failed', 'skipped'] as const)(
+      'shows no detail on a %s request when the host passes an empty summary',
+      (status) => {
+        render(CkToolApproval, { props: { request, status, summary: '' } });
+
+        expect(
+          screen.getByRole('group', { name: GROUP_NAME }),
+        ).not.toHaveTextContent('Nothing was updated');
+      },
+    );
+  });
+
+  describe('from pending to decided', () => {
+    function hostWithStatus() {
+      const status = ref<CkToolApprovalStatus>('pending');
+      const Host = defineComponent({
+        setup() {
+          return () =>
+            h(CkToolApproval, {
+              request,
+              status: status.value,
+              summary: '2 work items updated',
+              onAllow: () => {
+                status.value = 'allowed';
+              },
+            });
+        },
+      });
+      return { Host, status };
+    }
+
+    it('collapses the same card to the result row once the host decides', async () => {
+      const user = userEvent.setup();
+      const { Host } = hostWithStatus();
+      render(Host);
+
+      await user.click(allowButton());
+
+      expect(
+        card().getByText('Approved by you · 2 work items updated'),
+      ).toBeInTheDocument();
+      expect(screen.queryByRole('button')).not.toBeInTheDocument();
+    });
+
+    it('moves focus to the result row when the clicked button disappears', async () => {
+      const user = userEvent.setup();
+      const { Host } = hostWithStatus();
+      render(Host);
+
+      await user.click(allowButton());
+
+      expect(screen.getByRole('group', { name: GROUP_NAME })).toHaveFocus();
+    });
+
+    it('keeps focus in the card while the decision is being sent', async () => {
+      const user = userEvent.setup();
+      render(CkToolApproval, { props: { request, status: 'pending' } });
+
+      await user.click(allowButton());
+
+      expect(screen.getByRole('group', { name: GROUP_NAME })).toHaveFocus();
+    });
+
+    it('announces the outcome when focus was elsewhere', async () => {
+      const { Host, status } = hostWithStatus();
+      const { container } = render(Host);
+      const announcer = container.querySelector('[aria-live="polite"]');
+      expect(announcer).toHaveTextContent('');
+
+      status.value = 'denied';
+      await nextTick();
+
+      expect(announcer).toHaveTextContent(
+        'Denied by you · 2 work items updated',
+      );
+    });
+
+    it('does not announce twice when focus moves to the result', async () => {
+      const user = userEvent.setup();
+      const { Host } = hostWithStatus();
+      const { container } = render(Host);
+
+      await user.click(allowButton());
+
+      expect(container.querySelector('[aria-live="polite"]')).toHaveTextContent(
+        '',
+      );
+    });
+
+    it('does not take focus when the card was not focused', async () => {
+      const { Host, status } = hostWithStatus();
+      render(Host);
+
+      status.value = 'allowed';
+      await Promise.resolve();
+      await Promise.resolve();
+
+      expect(document.body).toHaveFocus();
+    });
+  });
+
+  describe('labels', () => {
+    it('labels the copy button of the JSON block', () => {
+      const Host = defineComponent({
+        setup() {
+          provideChatKitLabels(() => ({ codeEditorCopy: 'Code kopieren' }));
+          return () => h(CkToolApproval, { request, status: 'pending' });
+        },
+      });
+
+      render(Host);
+
+      expect(
+        screen.getByRole('button', { name: 'Code kopieren' }),
+      ).toBeInTheDocument();
+    });
+
+    it('keeps the English default when a label is explicitly undefined', () => {
+      const Host = defineComponent({
+        setup() {
+          provideChatKitLabels(() => ({ toolApprovalAllow: undefined }));
+          return () => h(CkToolApproval, { request, status: 'pending' });
+        },
+      });
+
+      render(Host);
+
+      expect(allowButton()).toBeInTheDocument();
+    });
+
+    it('reads every visible text from the provided labels', () => {
+      const Host = defineComponent({
+        props: { status: { type: String, required: true } },
+        setup(props) {
+          provideChatKitLabels(() => ({
+            toolApprovalAllow: 'Erlauben',
+            toolApprovalDeny: 'Ablehnen',
+            toolApprovalDeniedResult: 'Von dir abgelehnt',
+            toolApprovalNothingChanged: 'Nichts wurde geändert',
+            toolApprovalDeniedBadge: 'Abgelehnt',
+          }));
+          return () =>
+            h(CkToolApproval, {
+              request,
+              status: props.status as CkToolApprovalStatus,
+            });
+        },
+      });
+
+      const { rerender } = render(Host, { props: { status: 'pending' } });
+      expect(
+        screen.getByRole('button', { name: 'Erlauben' }),
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole('button', { name: 'Ablehnen' }),
+      ).toBeInTheDocument();
+
+      return rerender({ status: 'denied' }).then(() => {
+        expect(
+          card().getByText('Von dir abgelehnt · Nichts wurde geändert'),
+        ).toBeInTheDocument();
+        expect(screen.getByText('Abgelehnt')).toBeInTheDocument();
+      });
+    });
+  });
+});