@aleph-alpha/chat-kit 2.2.0 → 3.0.0

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

@@ -1,5 +1,29 @@
 import CkPromptInput from './CkPromptInput.vue';
 import { render, screen, fireEvent } from '@testing-library/vue';
+import { defineComponent, nextTick, ref } from 'vue';
+
+// Mock the textarea's scrollHeight (jsdom always returns 0). The auto-grow +
+// multi-line latch logic in CkPromptInput depends on scrollHeight; tests that
+// exercise that path call this helper to stage a measured value.
+function mockScrollHeight(value: number): void {
+  Object.defineProperty(HTMLTextAreaElement.prototype, 'scrollHeight', {
+    configurable: true,
+    get() {
+      return value;
+    },
+  });
+}
+
+function restoreScrollHeight(): void {
+  // Re-installing a property descriptor with a getter returning 0 mirrors
+  // jsdom's default (`HTMLElement.scrollHeight` returns 0 by spec there).
+  Object.defineProperty(HTMLTextAreaElement.prototype, 'scrollHeight', {
+    configurable: true,
+    get() {
+      return 0;
+    },
+  });
+}
 
 describe('CkPromptInput', () => {
   describe('rendering', () => {
@@ -122,13 +146,10 @@ describe('CkPromptInput', () => {
       expect(screen.getByText('Express')).toBeInTheDocument();
     });
 
-    it('does not render toolbar-left container when slot is not provided', () => {
+    it('renders no toolbar buttons when slots are not provided', () => {
       const { container } = render(CkPromptInput);
 
-      const toolbarDivs = container.querySelectorAll(
-        'form > div:last-child > div',
-      );
-      expect(toolbarDivs[0]?.children.length).toBe(0);
+      expect(container.querySelectorAll('button')).toHaveLength(0);
     });
 
     it('renders toolbar-right slot content', () => {
@@ -139,13 +160,12 @@ describe('CkPromptInput', () => {
       expect(screen.getByText('Custom Send')).toBeInTheDocument();
     });
 
-    it('renders nothing in toolbar-right by default', () => {
-      const { container } = render(CkPromptInput);
+    it('renders toolbar-top slot content', () => {
+      render(CkPromptInput, {
+        slots: { 'toolbar-top': '<span>Toolbar-top content</span>' },
+      });
 
-      const toolbarRight = container.querySelector(
-        'form > div:last-child > div.ml-auto',
-      );
-      expect(toolbarRight?.children.length).toBe(0);
+      expect(screen.getByText('Toolbar-top content')).toBeInTheDocument();
     });
 
     it('renders footer slot content', () => {
@@ -178,4 +198,179 @@ describe('CkPromptInput', () => {
       expect(screen.getByRole('textbox')).toBeDisabled();
     });
   });
+
+  // The form switches between compact (single-row, rounded-3xl) and stacked
+  // (multi-row, rounded-2xl) layouts based on (a) the presence of the
+  // `toolbar-top` slot and (b) whether the textarea content exceeds one line.
+  // These tests regression-guard the slot reactivity fix and the multi-line
+  // latch threshold.
+  describe('layout transitions', () => {
+    afterEach(() => {
+      restoreScrollHeight();
+    });
+
+    it('reacts to toolbar-top slot becoming available after mount', async () => {
+      const Parent = defineComponent({
+        components: { CkPromptInput },
+        setup() {
+          return { show: ref(false) };
+        },
+        template: `
+          <div>
+            <button data-testid="toggle" @click="show = !show">toggle</button>
+            <CkPromptInput model-value="">
+              <template v-if="show" #toolbar-top>
+                <span data-testid="top">attached files</span>
+              </template>
+            </CkPromptInput>
+          </div>
+        `,
+      });
+      const { container } = render(Parent);
+
+      expect(container.querySelector('[data-testid="top"]')).toBeNull();
+      expect(container.querySelector('form')?.className).toContain(
+        'rounded-3xl',
+      );
+
+      await fireEvent.click(screen.getByTestId('toggle'));
+
+      // Parent re-render → `useSlots()` flips → computed re-evaluates → top
+      // row renders AND the form swaps to the smaller multi-row radius.
+      expect(
+        container.querySelector('[data-testid="top"]'),
+      ).toBeInTheDocument();
+      expect(container.querySelector('form')?.className).toContain(
+        'rounded-2xl',
+      );
+    });
+
+    it('also reacts to toolbar-top slot becoming unavailable', async () => {
+      const Parent = defineComponent({
+        components: { CkPromptInput },
+        setup() {
+          return { show: ref(true) };
+        },
+        template: `
+          <div>
+            <button data-testid="toggle" @click="show = !show">toggle</button>
+            <CkPromptInput model-value="">
+              <template v-if="show" #toolbar-top>
+                <span data-testid="top">attached files</span>
+              </template>
+            </CkPromptInput>
+          </div>
+        `,
+      });
+      const { container } = render(Parent);
+
+      expect(container.querySelector('form')?.className).toContain(
+        'rounded-2xl',
+      );
+
+      await fireEvent.click(screen.getByTestId('toggle'));
+
+      expect(container.querySelector('[data-testid="top"]')).toBeNull();
+      expect(container.querySelector('form')?.className).toContain(
+        'rounded-3xl',
+      );
+    });
+
+    it('latches to multi-line layout when scrollHeight exceeds 2× line-height', async () => {
+      mockScrollHeight(48); // exactly 2 × LINE_HEIGHT
+      const Parent = defineComponent({
+        components: { CkPromptInput },
+        setup() {
+          return { text: ref('one') };
+        },
+        template: `
+          <CkPromptInput :model-value="text" @update:model-value="text = $event" />
+        `,
+      });
+      const { container, rerender } = render(Parent);
+      // Initial render mounted with scrollHeight=48 but modelValue='one' (no
+      // newline) — single line latches to multi when scrollHeight ≥ 48.
+      await nextTick();
+      // The grid template should now include the input-on-top + toolbar-row
+      // shape used for multi-line mode.
+      const form = container.querySelector('form');
+      expect(form?.style.gridTemplateAreas).toContain('"left . right"');
+
+      // Rerender to a different value to confirm the latch persists.
+      await rerender({});
+      await nextTick();
+      expect(form?.style.gridTemplateAreas).toContain('"left . right"');
+    });
+
+    it('does NOT latch on borderline scrollHeight (single emoji-line @ 36 px)', async () => {
+      mockScrollHeight(36); // 1.5 × LINE_HEIGHT — emoji/CJK sub-pixel rendering
+      const Parent = defineComponent({
+        components: { CkPromptInput },
+        setup() {
+          return { text: ref('hi 👋') };
+        },
+        template: `<CkPromptInput :model-value="text" />`,
+      });
+      const { container } = render(Parent);
+      await nextTick();
+      // Single-line layout: textarea + toolbars on the same row.
+      const form = container.querySelector('form');
+      expect(form?.style.gridTemplateAreas).toContain('"left input right"');
+      expect(form?.style.gridTemplateAreas).not.toContain('"left . right"');
+    });
+
+    it('latches when the user inserts an explicit newline (Shift+Enter)', async () => {
+      mockScrollHeight(24); // jsdom never reports >24 reliably; rely on \n
+      const Parent = defineComponent({
+        components: { CkPromptInput },
+        setup() {
+          return { text: ref('line one') };
+        },
+        template: `
+          <CkPromptInput :model-value="text" @update:model-value="text = $event" />
+        `,
+      });
+      const { container } = render(Parent);
+      await nextTick();
+      const form = container.querySelector('form');
+      expect(form?.style.gridTemplateAreas).toContain('"left input right"');
+
+      // Now the modelValue contains a newline.
+      const ParentTwoLines = defineComponent({
+        components: { CkPromptInput },
+        setup() {
+          return { text: ref('line one\nline two') };
+        },
+        template: `<CkPromptInput :model-value="text" />`,
+      });
+      const { container: c2 } = render(ParentTwoLines);
+      await nextTick();
+      expect(c2.querySelector('form')?.style.gridTemplateAreas).toContain(
+        '"left . right"',
+      );
+    });
+
+    it('un-latches multi-line state when the field is emptied', async () => {
+      mockScrollHeight(48);
+      const Parent = defineComponent({
+        components: { CkPromptInput },
+        setup() {
+          return { text: ref('something') };
+        },
+        template: `
+          <CkPromptInput :model-value="text" @update:model-value="text = $event" />
+        `,
+      });
+      const { container, getByRole } = render(Parent);
+      await nextTick();
+      const form = container.querySelector('form');
+      expect(form?.style.gridTemplateAreas).toContain('"left . right"');
+
+      mockScrollHeight(24);
+      await fireEvent.update(getByRole('textbox'), '');
+      await nextTick();
+
+      expect(form?.style.gridTemplateAreas).toContain('"left input right"');
+    });
+  });
 });