mtrl 0.3.0 → 0.3.1

package/test/components/menu.test.js

@@ -1,385 +0,0 @@
-// test/components/menu.test.js
-import { describe, test, expect, mock, beforeEach, afterEach } from 'bun:test'
-import createMenu from '../../src/components/menu/menu'
-import { MENU_ALIGN, MENU_VERTICAL_ALIGN, MENU_EVENTS, MENU_ITEM_TYPES } from '../../src/components/menu/constants'
-
-// Mock DOM APIs that aren't available in the test environment
-beforeEach(() => {
-  // Mock Element.prototype methods
-  Element.prototype.getBoundingClientRect = function () {
-    return {
-      width: 100,
-      height: 100,
-      top: 0,
-      left: 0,
-      right: 100,
-      bottom: 100
-    }
-  }
-
-  Element.prototype.closest = function (selector) {
-    return null // Simple mock that returns null by default
-  }
-
-  Element.prototype.matches = function (selector) {
-    return false // Simple mock that returns false by default
-  }
-
-  // Save original createElement to restore later
-  const originalCreateElement = document.createElement
-  document.createElement = function (tag) {
-    const element = originalCreateElement.call(document, tag)
-
-    // Add closest method for our tests
-    element.closest = function (selector) {
-      if (selector.includes('menu-item')) {
-        return this.classList && this.classList.contains('mtrl-menu-item') ? this : null
-      }
-      return null
-    }
-
-    // Add matches method for our tests
-    element.matches = function (selector) {
-      if (selector === ':hover') return false
-      return this.classList && this.classList.contains(selector.replace('.', ''))
-    }
-
-    // Mock the querySelectorAll method
-    element.querySelectorAll = function (selector) {
-      return [] // Return empty array by default
-    }
-
-    // Mock the querySelector method
-    element.querySelector = function (selector) {
-      return null // Return null by default
-    }
-
-    return element
-  }
-
-  // Mock window properties
-  global.window = {
-    ...global.window,
-    innerWidth: 1024,
-    innerHeight: 768
-  }
-
-  // Mock event listeners
-  if (!global.eventListeners) {
-    global.eventListeners = new Map()
-  }
-
-  const originalAddEventListener = Element.prototype.addEventListener
-  Element.prototype.addEventListener = function (event, handler) {
-    if (!global.eventListeners.has(this)) {
-      global.eventListeners.set(this, new Map())
-    }
-    if (!global.eventListeners.get(this).has(event)) {
-      global.eventListeners.get(this).set(event, new Set())
-    }
-    global.eventListeners.get(this).get(event).add(handler)
-
-    // Call original if it exists
-    if (originalAddEventListener) {
-      originalAddEventListener.call(this, event, handler)
-    }
-  }
-
-  const originalRemoveEventListener = Element.prototype.removeEventListener
-  Element.prototype.removeEventListener = function (event, handler) {
-    if (global.eventListeners.has(this) &&
-        global.eventListeners.get(this).has(event)) {
-      global.eventListeners.get(this).get(event).delete(handler)
-    }
-
-    // Call original if it exists
-    if (originalRemoveEventListener) {
-      originalRemoveEventListener.call(this, event, handler)
-    }
-  }
-
-  // Mock offsetHeight/offsetWidth
-  Object.defineProperty(Element.prototype, 'offsetHeight', {
-    configurable: true,
-    get: function () { return 100 }
-  })
-
-  Object.defineProperty(Element.prototype, 'offsetWidth', {
-    configurable: true,
-    get: function () { return 100 }
-  })
-})
-
-afterEach(() => {
-  // Clean up our mocks
-  delete Element.prototype.getBoundingClientRect
-  delete Element.prototype.closest
-  delete Element.prototype.matches
-
-  document.createElement = document.createElement.__originalFunction || document.createElement
-
-  // Clear event listeners
-  if (global.eventListeners) {
-    global.eventListeners.clear()
-  }
-})
-
-describe('Menu Component', () => {
-  // Sample menu items for testing
-  const testItems = [
-    {
-      name: 'copy',
-      text: 'Copy'
-    },
-    {
-      name: 'paste',
-      text: 'Paste'
-    },
-    {
-      type: 'divider'
-    },
-    {
-      name: 'delete',
-      text: 'Delete',
-      disabled: true
-    }
-  ]
-
-  // Sample nested menu items
-  const nestedTestItems = [
-    {
-      name: 'file',
-      text: 'File',
-      items: [
-        {
-          name: 'new',
-          text: 'New'
-        },
-        {
-          name: 'open',
-          text: 'Open'
-        }
-      ]
-    },
-    {
-      name: 'edit',
-      text: 'Edit',
-      items: [
-        {
-          name: 'copy',
-          text: 'Copy'
-        },
-        {
-          name: 'paste',
-          text: 'Paste'
-        }
-      ]
-    }
-  ]
-
-  test('should create a menu element', () => {
-    const menu = createMenu()
-
-    expect(menu.element).toBeDefined()
-    expect(menu.element.tagName).toBe('DIV')
-    expect(menu.element.className).toContain('mtrl-menu')
-    expect(menu.element.getAttribute('role')).toBe('menu')
-  })
-
-  test('should apply custom class', () => {
-    const customClass = 'custom-menu'
-    const menu = createMenu({
-      class: customClass
-    })
-
-    expect(menu.element.className).toContain(customClass)
-  })
-
-  test('should add initial items', () => {
-    const menu = createMenu({
-      items: testItems
-    })
-
-    // Check if items methods exist
-    expect(typeof menu.getItems).toBe('function')
-
-    // Get items and verify we have a Map
-    const items = menu.getItems()
-    expect(items instanceof Map).toBe(true)
-
-    // Verify item names in map
-    expect(items.has('copy')).toBe(true)
-    expect(items.has('paste')).toBe(true)
-    expect(items.has('delete')).toBe(true)
-  })
-
-  test('should have show/hide methods', () => {
-    const menu = createMenu()
-
-    // Check for API methods
-    expect(typeof menu.show).toBe('function')
-    expect(typeof menu.hide).toBe('function')
-    expect(typeof menu.isVisible).toBe('function')
-
-    // Test visibility state
-    expect(menu.isVisible()).toBe(false)
-
-    // Show menu
-    menu.show()
-    expect(menu.isVisible()).toBe(true)
-    expect(menu.element.classList.contains('mtrl-menu--visible')).toBe(true)
-
-    // Hide menu
-    menu.hide()
-
-    // Note: Due to animations, isVisible() might still return true immediately after hide()
-    // In a real environment, we'd wait for transitions to complete
-  })
-
-  test('should have positioning methods', () => {
-    const menu = createMenu()
-    const target = document.createElement('button')
-
-    // Check for API method
-    expect(typeof menu.position).toBe('function')
-
-    // Test with different alignments
-    const positionConfigs = [
-      { align: MENU_ALIGN.LEFT, vAlign: MENU_VERTICAL_ALIGN.TOP },
-      { align: MENU_ALIGN.RIGHT, vAlign: MENU_VERTICAL_ALIGN.BOTTOM },
-      { align: MENU_ALIGN.CENTER, vAlign: MENU_VERTICAL_ALIGN.MIDDLE }
-    ]
-
-    positionConfigs.forEach(config => {
-      try {
-        menu.position(target, config)
-        // If we reach here, no error was thrown
-        expect(true).toBe(true)
-      } catch (error) {
-        // If an error occurs, the test should fail
-        expect(error).toBeUndefined()
-      }
-    })
-  })
-
-  test('should add item dynamically', () => {
-    const menu = createMenu()
-
-    // Check for API method
-    expect(typeof menu.addItem).toBe('function')
-
-    // Test adding an item
-    const newItem = {
-      name: 'newItem',
-      text: 'New Item'
-    }
-
-    menu.addItem(newItem)
-
-    // Verify item was added
-    const items = menu.getItems()
-    expect(items.has('newItem')).toBe(true)
-  })
-
-  test('should remove item dynamically', () => {
-    const menu = createMenu({
-      items: testItems
-    })
-
-    // Check for API method
-    expect(typeof menu.removeItem).toBe('function')
-
-    // Test removing an item
-    menu.removeItem('copy')
-
-    // Verify item was removed
-    const items = menu.getItems()
-    expect(items.has('copy')).toBe(false)
-  })
-
-  test('should register event handlers', () => {
-    const menu = createMenu()
-
-    // Check for API methods
-    expect(typeof menu.on).toBe('function')
-    expect(typeof menu.off).toBe('function')
-
-    // Create a mock handler
-    const mockHandler = mock(() => {})
-
-    // Register handler
-    menu.on(MENU_EVENTS.SELECT, mockHandler)
-
-    // We can't easily test if the handler is called in this environment
-    // But we can check that the method works without error
-    expect(mockHandler.mock.calls.length).toBe(0)
-
-    // Unregister handler
-    menu.off(MENU_EVENTS.SELECT, mockHandler)
-  })
-
-  test('should create nested menus for items with children', () => {
-    // This test would be more complex in a real environment
-    // For now, just verify the basic menu creation works with nested items
-
-    const menu = createMenu({
-      items: nestedTestItems
-    })
-
-    // Verify parent items exist
-    const items = menu.getItems()
-    expect(items.has('file')).toBe(true)
-    expect(items.has('edit')).toBe(true)
-
-    // We can't easily test the submenu creation here
-    // But we can check that the parent items are created without error
-  })
-
-  test('should properly clean up resources on destroy', () => {
-    const menu = createMenu()
-
-    // Check for API method
-    expect(typeof menu.destroy).toBe('function')
-
-    const parentElement = document.createElement('div')
-    parentElement.appendChild(menu.element)
-
-    // Destroy the component
-    menu.destroy()
-
-    // Check if element was removed
-    expect(parentElement.children.length).toBe(0)
-  })
-
-  test('should support keyboard navigation', () => {
-    // Skip detailed keyboard navigation tests due to test environment limitations
-    // Just verify the API methods exist
-
-    const menu = createMenu()
-
-    // Show the menu to initialize keyboard handlers
-    menu.show()
-
-    // In a real environment, we would dispatch keydown events and check results
-    // But here we just verify the basic setup happens without errors
-
-    // Hide and clean up
-    menu.hide()
-  })
-
-  test('should handle outside clicks', () => {
-    // This would typically close the menu
-    // We can't fully test this behavior in the current environment
-
-    const menu = createMenu()
-    menu.show()
-
-    // In a real environment, we would:
-    // 1. Create a click event outside the menu
-    // 2. Dispatch it
-    // 3. Verify menu is hidden
-
-    // For now, just ensure our menu API method is called without error
-    menu.hide()
-  })
-})

package/test/components/navigation.test.js

@@ -1,227 +0,0 @@
-// test/components/navigation.test.js
-import { describe, test, expect, mock, beforeEach, afterEach } from 'bun:test'
-import createNavigation from '../../src/components/navigation/index'
-import { NAV_VARIANTS, NAV_POSITIONS } from '../../src/components/navigation/constants'
-
-// Mock DOM APIs that aren't available in the test environment
-beforeEach(() => {
-  // Mock closest method on elements
-  Element.prototype.closest = function (selector) {
-    return null // Simple mock that returns null
-  }
-
-  // Expand our mock to handle specific test cases
-  const originalCreateElement = document.createElement
-  document.createElement = function (tag) {
-    const element = originalCreateElement.call(document, tag)
-
-    // Add closest method for our tests
-    element.closest = function (selector) {
-      return null // Default to null
-    }
-
-    // Mock the querySelectorAll method
-    element.querySelectorAll = function (selector) {
-      return [] // Return empty array by default
-    }
-
-    // Mock the querySelector method
-    element.querySelector = function (selector) {
-      return null // Return null by default
-    }
-
-    return element
-  }
-})
-
-afterEach(() => {
-  // Clean up our mocks
-  delete Element.prototype.closest
-  document.createElement = document.createElement.__originalFunction || document.createElement
-})
-
-describe('Navigation Component', () => {
-  // Sample items for testing
-  const testItems = [
-    {
-      id: 'home',
-      icon: '<svg viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>',
-      label: 'Home'
-    },
-    {
-      id: 'favorites',
-      icon: '<svg viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>',
-      label: 'Favorites'
-    },
-    {
-      id: 'settings',
-      icon: '<svg viewBox="0 0 24 24"><path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/></svg>',
-      label: 'Settings'
-    }
-  ]
-
-  // Sample items with nesting for drawer tests
-  const nestedItems = [
-    {
-      id: 'dashboard',
-      icon: '<svg viewBox="0 0 24 24"><path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"/></svg>',
-      label: 'Dashboard'
-    },
-    {
-      id: 'content',
-      icon: '<svg viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>',
-      label: 'Content',
-      items: [
-        {
-          id: 'articles',
-          icon: '<svg viewBox="0 0 24 24"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/></svg>',
-          label: 'Articles'
-        },
-        {
-          id: 'media',
-          icon: '<svg viewBox="0 0 24 24"><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/></svg>',
-          label: 'Media'
-        }
-      ]
-    }
-  ]
-
-  test('should create a navigation element', () => {
-    const nav = createNavigation()
-
-    expect(nav.element).toBeDefined()
-    expect(nav.element.tagName).toBe('NAV')
-    expect(nav.element.className).toContain('mtrl-nav')
-  })
-
-  test('should apply variant class', () => {
-    // Test one variant
-    const variant = NAV_VARIANTS.RAIL
-    const nav = createNavigation({
-      variant
-    })
-
-    expect(nav.config.variant).toBe(variant)
-  })
-
-  test('should apply position class', () => {
-    // Test one position
-    const position = NAV_POSITIONS.LEFT
-    const nav = createNavigation({
-      position
-    })
-
-    expect(nav.config.position).toBe(position)
-  })
-
-  test('should add initial items', () => {
-    // Mock getItemPath to avoid closest() issues
-    const originalGetItemPath = Function.prototype.toString
-    Function.prototype.toString = function () {
-      if (this.name === 'getItemPath') {
-        return 'function getItemPath() { return []; }'
-      }
-      return originalGetItemPath.apply(this)
-    }
-
-    const nav = createNavigation({
-      items: testItems
-    })
-
-    // Check if items map exists
-    expect(nav.items).toBeDefined()
-
-    // Restore original function
-    Function.prototype.toString = originalGetItemPath
-  })
-
-  test('should set active item', () => {
-    // Skip this test for now due to DOM issues
-    // We would need much more extensive mocking to make it work
-    console.log('Skipping "should set active item" test due to DOM API limitations in test environment')
-  })
-
-  test('should add item dynamically', () => {
-    const nav = createNavigation()
-
-    // Add an item
-    const newItem = {
-      id: 'profile',
-      icon: '<svg viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>',
-      label: 'Profile'
-    }
-
-    // Just verify the method exists and can be called
-    expect(typeof nav.addItem).toBe('function')
-
-    try {
-      nav.addItem(newItem)
-    } catch (error) {
-      // We might get errors due to DOM API limitations
-      // Just check if we have the API method
-    }
-  })
-
-  test('should remove item dynamically', () => {
-    // Just verify the method exists
-    const nav = createNavigation()
-    expect(typeof nav.removeItem).toBe('function')
-  })
-
-  test('should handle nested items correctly', () => {
-    // Skip this test for now due to DOM issues
-    console.log('Skipping "should handle nested items correctly" test due to DOM API limitations in test environment')
-  })
-
-  test('should support disabled state', () => {
-    const nav = createNavigation()
-
-    // Check API methods
-    expect(typeof nav.disable).toBe('function')
-    expect(typeof nav.enable).toBe('function')
-
-    // Test the API methods
-    nav.disable()
-    nav.enable()
-
-    // Test initially disabled through config
-    const disabledNav = createNavigation({ disabled: true })
-    expect(disabledNav.config.disabled).toBe(true)
-  })
-
-  test('should register event handlers', () => {
-    const nav = createNavigation()
-
-    // Verify event API exists
-    expect(typeof nav.on).toBe('function')
-    expect(typeof nav.off).toBe('function')
-  })
-
-  test('should get item by id', () => {
-    // Just verify the method exists
-    const nav = createNavigation()
-    expect(typeof nav.getItem).toBe('function')
-  })
-
-  test('should apply custom class', () => {
-    const customClass = 'custom-nav'
-    const nav = createNavigation({
-      class: customClass
-    })
-
-    expect(nav.element.className).toContain(customClass)
-  })
-
-  test('should properly clean up resources on destroy', () => {
-    const nav = createNavigation()
-
-    const parentElement = document.createElement('div')
-    parentElement.appendChild(nav.element)
-
-    // Destroy the component
-    nav.destroy()
-
-    // Check if element was removed
-    expect(parentElement.children.length).toBe(0)
-  })
-})