catalog/test/test.browser.ts

import { expect, tap } from '@git.zone/tstest/tapbundle';

import * as socialioCatalog from '../ts_web/index.js';

tap.test('render combox component', async () => {
  // Create and add combox
  const combox = new socialioCatalog.SioCombox();
  combox.style.position = 'relative';
  combox.style.width = '800px';
  combox.style.height = '600px';
  document.body.appendChild(combox);
  
  await combox.updateComplete;
  
  expect(combox).toBeInstanceOf(socialioCatalog.SioCombox);
  
  // Check that the component rendered its content
  const container = combox.shadowRoot.querySelector('.container');
  expect(container).toBeTruthy();
  
  const conversationSelector = combox.shadowRoot.querySelector('sio-conversation-selector');
  expect(conversationSelector).toBeTruthy();
  
  const conversationView = combox.shadowRoot.querySelector('sio-conversation-view');
  expect(conversationView).toBeTruthy();
  
  console.log('Combox component rendered successfully with all main elements');
  
  document.body.removeChild(combox);
});

tap.test('render fab component', async () => {
  // Create and add fab
  const fab = new socialioCatalog.SioFab();
  document.body.appendChild(fab);
  
  await fab.updateComplete;
  expect(fab).toBeInstanceOf(socialioCatalog.SioFab);
  
  // Check main elements
  const mainbox = fab.shadowRoot.querySelector('#mainbox');
  expect(mainbox).toBeTruthy();
  
  console.log('FAB component rendered successfully');
  
  document.body.removeChild(fab);
});

tap.test('render image lightbox component', async () => {
  // Create and add lightbox
  const lightbox = new socialioCatalog.SioImageLightbox();
  document.body.appendChild(lightbox);
  
  await lightbox.updateComplete;
  expect(lightbox).toBeInstanceOf(socialioCatalog.SioImageLightbox);
  
  // Check main elements
  const overlay = lightbox.shadowRoot.querySelector('.overlay');
  expect(overlay).toBeTruthy();
  
  const container = lightbox.shadowRoot.querySelector('.container');
  expect(container).toBeTruthy();
  
  // Test opening with an image
  await lightbox.open({
    url: 'https://picsum.photos/800/600',
    name: 'Test Image',
    size: 123456
  });
  
  await lightbox.updateComplete;
  expect(lightbox.isOpen).toEqual(true);
  
  // Test opening with a PDF
  await lightbox.open({
    url: 'data:application/pdf;base64,JVBERi0xLjMKJeLjz9MKMSAwIG9iago8PAovVHlwZSAvQ2F0YWxvZwovT3V0bGluZXMgMiAwIFIKL1BhZ2VzIDMgMCBSCj4+CmVuZG9iagoyIDAgb2JqCjw8Ci9UeXBlIC9PdXRsaW5lcwovQ291bnQgMAo+PgplbmRvYmoKMyAwIG9iago8PAovVHlwZSAvUGFnZXMKL0NvdW50IDEKL0tpZHMgWzQgMCBSXQo+PgplbmRvYmoKNCAwIG9iago8PAovVHlwZSAvUGFnZQovUGFyZW50IDMgMCBSCi9NZWRpYUJveCBbMCAwIDYxMiA3OTJdCi9Db250ZW50cyA1IDAgUgovUmVzb3VyY2VzIDw8Ci9Gb250IDw8Ci9GMSA2IDAgUgo+Pgo+Pgo+PgplbmRvYmoKNSAwIG9iago8PAovTGVuZ3RoIDQ0Cj4+CnN0cmVhbQpCVApxCjcwIDUwIFRECi9GMSAxMiBUZgooSGVsbG8gV29ybGQpIFRqCkVUClEKZW5kc3RyZWFtCmVuZG9iago2IDAgb2JqCjw8Ci9UeXBlIC9Gb250Ci9TdWJ0eXBlIC9UeXBlMQovQmFzZUZvbnQgL1RpbWVzLVJvbWFuCj4+CmVuZG9iagp4cmVmCjAgNwowMDAwMDAwMDAwIDY1NTM1IGYgCjAwMDAwMDAwMDkgMDAwMDAgbiAKMDAwMDAwMDA3NCAwMDAwMCBuIAowMDAwMDAwMTIwIDAwMDAwIG4gCjAwMDAwMDAxNzkgMDAwMDAgbiAKMDAwMDAwMDM2NCAwMDAwMCBuIAowMDAwMDAwNDY2IDAwMDAwIG4gCnRyYWlsZXIKPDwKL1NpemUgNwovUm9vdCAxIDAgUgo+PgpzdGFydHhyZWYKNTY1CiUlRU9G',
    name: 'test.pdf',
    type: 'application/pdf',
    size: 565
  });
  
  await lightbox.updateComplete;
  
  // Check that PDF viewer is rendered
  const pdfViewer = lightbox.shadowRoot.querySelector('sio-pdf-viewer');
  expect(pdfViewer).toBeTruthy();
  
  console.log('Image lightbox component rendered successfully with both image and PDF support');
  
  document.body.removeChild(lightbox);
});

tap.test('render dropdown menu component', async () => {
  // Create and add dropdown menu
  const dropdown = new socialioCatalog.SioDropdownMenu();
  dropdown.items = [
    { id: 'option1', label: 'Option 1', icon: 'settings' },
    { id: 'option2', label: 'Option 2', icon: 'user' },
    { id: 'divider', label: '', divider: true },
    { id: 'delete', label: 'Delete', icon: 'trash', destructive: true }
  ];
  document.body.appendChild(dropdown);
  
  await dropdown.updateComplete;
  expect(dropdown).toBeInstanceOf(socialioCatalog.SioDropdownMenu);
  
  // Check main elements
  const trigger = dropdown.shadowRoot.querySelector('.trigger');
  expect(trigger).toBeTruthy();
  
  const dropdownElement = dropdown.shadowRoot.querySelector('.dropdown');
  expect(dropdownElement).toBeTruthy();
  
  // Check menu items
  const menuItems = dropdown.shadowRoot.querySelectorAll('.menu-item');
  expect(menuItems.length).toEqual(3); // 3 items (excluding divider)
  
  console.log('Dropdown menu component rendered successfully');
  
  document.body.removeChild(dropdown);
});

tap.test('render pdf viewer component', async () => {
  // Create and add PDF viewer
  const pdfViewer = new socialioCatalog.SioPdfViewer();
  pdfViewer.style.width = '600px';
  pdfViewer.style.height = '400px';
  pdfViewer.url = 'data:application/pdf;base64,JVBERi0xLjMKJeLjz9MKMSAwIG9iago8PAovVHlwZSAvQ2F0YWxvZwovT3V0bGluZXMgMiAwIFIKL1BhZ2VzIDMgMCBSCj4+CmVuZG9iagoyIDAgb2JqCjw8Ci9UeXBlIC9PdXRsaW5lcwovQ291bnQgMAo+PgplbmRvYmoKMyAwIG9iago8PAovVHlwZSAvUGFnZXMKL0NvdW50IDEKL0tpZHMgWzQgMCBSXQo+PgplbmRvYmoKNCAwIG9iago8PAovVHlwZSAvUGFnZQovUGFyZW50IDMgMCBSCi9NZWRpYUJveCBbMCAwIDYxMiA3OTJdCi9Db250ZW50cyA1IDAgUgovUmVzb3VyY2VzIDw8Ci9Gb250IDw8Ci9GMSA2IDAgUgo+Pgo+Pgo+PgplbmRvYmoKNSAwIG9iago8PAovTGVuZ3RoIDQ0Cj4+CnN0cmVhbQpCVApxCjcwIDUwIFRECi9GMSAxMiBUZgooSGVsbG8gV29ybGQpIFRqCkVUClEKZW5kc3RyZWFtCmVuZG9iago2IDAgb2JqCjw8Ci9UeXBlIC9Gb250Ci9TdWJ0eXBlIC9UeXBlMQovQmFzZUZvbnQgL1RpbWVzLVJvbWFuCj4+CmVuZG9iagp4cmVmCjAgNwowMDAwMDAwMDAwIDY1NTM1IGYgCjAwMDAwMDAwMDkgMDAwMDAgbiAKMDAwMDAwMDA3NCAwMDAwMCBuIAowMDAwMDAwMTIwIDAwMDAwIG4gCjAwMDAwMDAxNzkgMDAwMDAgbiAKMDAwMDAwMDM2NCAwMDAwMCBuIAowMDAwMDAwNDY2IDAwMDAwIG4gCnRyYWlsZXIKPDwKL1NpemUgNwovUm9vdCAxIDAgUgo+PgpzdGFydHhyZWYKNTY1CiUlRU9G';
  pdfViewer.fileName = 'test.pdf';
  document.body.appendChild(pdfViewer);
  
  await pdfViewer.updateComplete;
  expect(pdfViewer).toBeInstanceOf(socialioCatalog.SioPdfViewer);
  
  // Check main elements
  const container = pdfViewer.shadowRoot.querySelector('.container');
  expect(container).toBeTruthy();
  
  // PDF viewer uses canvas after loading, not iframe
  // Just verify the component rendered correctly
  expect(pdfViewer.url).toEqual('data:application/pdf;base64,JVBERi0xLjMKJeLjz9MKMSAwIG9iago8PAovVHlwZSAvQ2F0YWxvZwovT3V0bGluZXMgMiAwIFIKL1BhZ2VzIDMgMCBSCj4+CmVuZG9iagoyIDAgb2JqCjw8Ci9UeXBlIC9PdXRsaW5lcwovQ291bnQgMAo+PgplbmRvYmoKMyAwIG9iago8PAovVHlwZSAvUGFnZXMKL0NvdW50IDEKL0tpZHMgWzQgMCBSXQo+PgplbmRvYmoKNCAwIG9iago8PAovVHlwZSAvUGFnZQovUGFyZW50IDMgMCBSCi9NZWRpYUJveCBbMCAwIDYxMiA3OTJdCi9Db250ZW50cyA1IDAgUgovUmVzb3VyY2VzIDw8Ci9Gb250IDw8Ci9GMSA2IDAgUgo+Pgo+Pgo+PgplbmRvYmoKNSAwIG9iago8PAovTGVuZ3RoIDQ0Cj4+CnN0cmVhbQpCVApxCjcwIDUwIFRECi9GMSAxMiBUZgooSGVsbG8gV29ybGQpIFRqCkVUClEKZW5kc3RyZWFtCmVuZG9iago2IDAgb2JqCjw8Ci9UeXBlIC9Gb250Ci9TdWJ0eXBlIC9UeXBlMQovQmFzZUZvbnQgL1RpbWVzLVJvbWFuCj4+CmVuZG9iagp4cmVmCjAgNwowMDAwMDAwMDAwIDY1NTM1IGYgCjAwMDAwMDAwMDkgMDAwMDAgbiAKMDAwMDAwMDA3NCAwMDAwMCBuIAowMDAwMDAwMTIwIDAwMDAwIG4gCjAwMDAwMDAxNzkgMDAwMDAgbiAKMDAwMDAwMDM2NCAwMDAwMCBuIAowMDAwMDAwNDY2IDAwMDAwIG4gCnRyYWlsZXIKPDwKL1NpemUgNwovUm9vdCAxIDAgUgo+PgpzdGFydHhyZWYKNTY1CiUlRU9G');
  expect(pdfViewer.fileName).toEqual('test.pdf');
  
  console.log('PDF viewer component rendered successfully');
  
  document.body.removeChild(pdfViewer);
});

tap.start();