@memori.ai/memori-react 8.15.1 → 8.16.0

package/src/components/MediaWidget/MediaItemWidget.test.tsx

@@ -1,7 +1,26 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import { medium, sessionID } from '../../mocks/data';
 import MediaItemWidget from './MediaItemWidget';
+import type { Medium } from '@memori.ai/memori-api-client/dist/types';
+
+beforeAll(() => {
+  if (typeof window !== 'undefined' && !window.IntersectionObserver) {
+    (window as unknown as { IntersectionObserver: unknown }).IntersectionObserver = jest.fn().mockImplementation(() => ({
+      observe: jest.fn(),
+      unobserve: jest.fn(),
+      disconnect: jest.fn(),
+    }));
+  }
+  if (typeof global !== 'undefined' && !globalThis.IntersectionObserver) {
+    (globalThis as unknown as { IntersectionObserver: unknown }).IntersectionObserver = jest.fn().mockImplementation(() => ({
+      observe: jest.fn(),
+      unobserve: jest.fn(),
+      disconnect: jest.fn(),
+    }));
+  }
+});
 
 it('renders MediaItemWidget unchanged with no media', () => {
   const { container } = render(
@@ -158,3 +177,72 @@ it('renders MediaItemWidget unchanged with rgb color', () => {
   );
   expect(container).toMatchSnapshot();
 });
+
+// --- Document cards & unified media list ---
+
+it('renders PDF as document card with title and PDF badge', () => {
+  const pdfItem: Medium & { type?: string } = {
+    mediumID: 'pdf-1',
+    mimeType: 'application/pdf',
+    title: 'Report',
+    url: 'https://example.com/report.pdf',
+    type: 'document',
+  };
+  const { container } = render(
+    <MediaItemWidget items={[pdfItem]} sessionID={sessionID} />
+  );
+  expect(screen.getByText('Report')).toBeInTheDocument();
+  expect(screen.getByText('PDF')).toBeInTheDocument();
+  expect(container.querySelector('.memori-media-item--document-link')).toBeInTheDocument();
+});
+
+it('renders HTML link as document card with Link badge when url present', () => {
+  const linkItem: Medium & { type?: string } = {
+    mediumID: 'link-1',
+    mimeType: 'text/html',
+    title: 'Memori',
+    url: 'https://memori.ai',
+    type: 'document',
+  };
+  render(
+    <MediaItemWidget items={[linkItem]} sessionID={sessionID} />
+  );
+  expect(screen.getByText('Memori')).toBeInTheDocument();
+  expect(screen.getByText('Link')).toBeInTheDocument();
+});
+
+it('opens MediaPreviewModal when clicking document attachment card', () => {
+  const docItem: Medium & { type?: string } = {
+    mediumID: 'doc-att-1',
+    mimeType: 'application/pdf',
+    title: 'Extracted Doc',
+    content: 'Extracted text content',
+    properties: { isDocumentAttachment: true },
+    type: 'document',
+  };
+  render(
+    <MediaItemWidget items={[docItem]} sessionID={sessionID} />
+  );
+  const card = screen.getByText('Extracted Doc').closest('[role="button"]');
+  expect(card).toBeInTheDocument();
+  fireEvent.click(card!);
+  expect(screen.getByText('Extracted text content')).toBeInTheDocument();
+});
+
+it('opens MediaPreviewModal when clicking image with mediumID', () => {
+  const imgItem: Medium & { type?: string } = {
+    ...medium,
+    mediumID: 'img-modal-1',
+    mimeType: 'image/jpeg',
+    title: 'Game Cover',
+    url: 'https://api.lorem.space/image/game?w=150&h=220&hash=8B7BCDC2',
+  };
+  const { container } = render(
+    <MediaItemWidget items={[imgItem]} sessionID={sessionID} />
+  );
+  const imageLink = container.querySelector('.memori-media-item--image-link');
+  expect(imageLink).toBeInTheDocument();
+  fireEvent.click(imageLink!);
+  const modalImage = document.querySelector('.memori-content-preview-modal--image');
+  expect(modalImage).toBeInTheDocument();
+});