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);
  
  console.log('Image lightbox component rendered successfully');
  
  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.start();