mtrl 0.3.0 → 0.3.2

package/test/components/button.test.js

@@ -1,170 +0,0 @@
-// test/components/button.test.js
-import { describe, test, expect, mock } from 'bun:test'
-import createButton from '../../src/components/button/button'
-
-describe('Button Component', () => {
-  // Enhance querySelector for button tests
-  const enhanceQuerySelector = (element) => {
-    const originalQuerySelector = element.querySelector
-
-    element.querySelector = (selector) => {
-      // Create mock elements for specific selectors
-      if (selector === '.mtrl-button-text') {
-        const textElement = document.createElement('span')
-        textElement.className = 'mtrl-button-text'
-        textElement.textContent = element._textContent || ''
-        return textElement
-      }
-
-      if (selector === '.mtrl-button-icon') {
-        const iconElement = document.createElement('span')
-        iconElement.className = 'mtrl-button-icon'
-        iconElement.innerHTML = element._iconContent || ''
-        return iconElement
-      }
-
-      return originalQuerySelector.call(element, selector)
-    }
-
-    return element
-  }
-
-  test('should create a button element', () => {
-    const button = createButton()
-    expect(button.element).toBeDefined()
-    expect(button.element.tagName).toBe('BUTTON')
-    expect(button.element.className).toContain('mtrl-button')
-  })
-
-  test('should add text content', () => {
-    const buttonText = 'Click Me'
-    const button = createButton({
-      text: buttonText
-    })
-
-    // Store text for querySelector mock
-    button.element._textContent = buttonText
-    enhanceQuerySelector(button.element)
-
-    const textElement = button.element.querySelector('.mtrl-button-text')
-    expect(textElement).toBeDefined()
-    expect(textElement.textContent).toBe(buttonText)
-  })
-
-  test('should apply variant class', () => {
-    const variant = 'filled'
-    const button = createButton({
-      variant
-    })
-
-    expect(button.element.className).toContain(`mtrl-button--${variant}`)
-  })
-
-  test('should handle click events', () => {
-    const button = createButton()
-    const handleClick = mock(() => {})
-
-    button.on('click', handleClick)
-
-    // Simulate click event
-    const event = new Event('click')
-    button.element.dispatchEvent(event)
-
-    expect(handleClick).toHaveBeenCalled()
-  })
-
-  test('should support disabled state', () => {
-    const button = createButton()
-
-    // Initially not disabled
-    expect(button.element.hasAttribute('disabled')).toBe(false)
-
-    // Disable the button
-    button.disable()
-    expect(button.element.hasAttribute('disabled')).toBe(true)
-
-    // Check that the disabled property is also set
-    expect(button.element.disabled).toBe(true)
-
-    // Enable the button
-    button.enable()
-    expect(button.element.hasAttribute('disabled')).toBe(false)
-    expect(button.element.disabled).toBe(false)
-  })
-
-  test('should add icon content', () => {
-    const iconSvg = '<svg><path d="M10 10"></path></svg>'
-    const button = createButton({
-      icon: iconSvg
-    })
-
-    // Store icon content for querySelector mock
-    button.element._iconContent = iconSvg
-    enhanceQuerySelector(button.element)
-
-    const iconElement = button.element.querySelector('.mtrl-button-icon')
-    expect(iconElement).toBeDefined()
-    expect(iconElement.innerHTML).toBe(iconSvg)
-  })
-
-  test('should position icon correctly', () => {
-    // Skip this test as it requires more detailed DOM structure
-    // than our mock environment can provide
-    console.log('Skipping icon position test - requires more detailed DOM mocking')
-  })
-
-  test('should support different sizes', () => {
-    const sizes = ['small', 'medium', 'large']
-
-    sizes.forEach(size => {
-      const button = createButton({
-        size
-      })
-
-      expect(button.element.className).toContain(`mtrl-button--${size}`)
-    })
-  })
-
-  test('should allow updating text', () => {
-    const button = createButton({
-      text: 'Initial'
-    })
-
-    const newText = 'Updated Text'
-    button.setText(newText)
-
-    // Store updated text for querySelector mock
-    button.element._textContent = newText
-    enhanceQuerySelector(button.element)
-
-    const textElement = button.element.querySelector('.mtrl-button-text')
-    expect(textElement).toBeDefined()
-    expect(textElement.textContent).toBe(newText)
-  })
-
-  test('should allow updating icon', () => {
-    const button = createButton()
-
-    const iconSvg = '<svg><path d="M10 10"></path></svg>'
-    button.setIcon(iconSvg)
-
-    // Store updated icon for querySelector mock
-    button.element._iconContent = iconSvg
-    enhanceQuerySelector(button.element)
-
-    const iconElement = button.element.querySelector('.mtrl-button-icon')
-    expect(iconElement).toBeDefined()
-    expect(iconElement.innerHTML).toBe(iconSvg)
-  })
-
-  test('should properly clean up resources', () => {
-    const button = createButton()
-    const parentElement = document.createElement('div')
-    parentElement.appendChild(button.element)
-
-    // Destroy should remove the element and clean up resources
-    button.destroy()
-
-    expect(parentElement.children.length).toBe(0)
-  })
-})

package/test/components/checkbox.test.js

@@ -1,238 +0,0 @@
-// test/components/checkbox.test.js
-import { describe, test, expect, mock } from 'bun:test'
-import createCheckbox from '../../src/components/checkbox/checkbox'
-import { CHECKBOX_VARIANTS, CHECKBOX_LABEL_POSITION } from '../../src/components/checkbox/constants'
-
-describe('Checkbox Component', () => {
-  test('should create a checkbox element', () => {
-    const checkbox = createCheckbox()
-    expect(checkbox.element).toBeDefined()
-    expect(checkbox.element.tagName).toBe('DIV')
-    expect(checkbox.element.className).toContain('mtrl-checkbox')
-  })
-
-  test('should create input element with type checkbox', () => {
-    const checkbox = createCheckbox()
-
-    // Since the input may be created through withInput feature
-    // we need to know how it's actually structured in implementation
-    const input = checkbox.input
-    expect(input).toBeDefined()
-    expect(input.type).toBe('checkbox')
-  })
-
-  test('should add label content', () => {
-    const labelText = 'Accept terms'
-    const checkbox = createCheckbox({
-      label: labelText
-    })
-
-    // Check if label is stored in config
-    expect(checkbox.config.label).toBe(labelText)
-  })
-
-  test('should apply variant class', () => {
-    // Test just one variant to see if it's applied correctly
-    const variant = CHECKBOX_VARIANTS.FILLED
-    const checkbox = createCheckbox({
-      variant
-    })
-
-    // The class might be applied to the input element or as a data attribute
-    // Let's check if variant is stored in the component
-    expect(checkbox.config.variant).toBe(variant)
-  })
-
-  test('should use filled as default variant', () => {
-    const checkbox = createCheckbox()
-    expect(checkbox.config.variant).toBe(CHECKBOX_VARIANTS.FILLED)
-  })
-
-  test('should handle change events', () => {
-    const checkbox = createCheckbox()
-    const handleChange = mock(() => {})
-
-    // Check if the event handler is registered
-    checkbox.on('change', handleChange)
-
-    // Simulate change by calling the handler directly
-    // for testing purposes (the implementation might use a different event system)
-    checkbox.emit && checkbox.emit('change', {})
-
-    // If emit doesn't exist, we'll skip this assertion
-    if (checkbox.emit) {
-      expect(handleChange).toHaveBeenCalled()
-    }
-  })
-
-  test('should support disabled state', () => {
-    const checkbox = createCheckbox()
-
-    // Check if the API methods exist
-    expect(typeof checkbox.disable).toBe('function')
-    expect(typeof checkbox.enable).toBe('function')
-
-    // The implementation details of how disabled state is tracked
-    // may vary, but we can test the public API
-    const initiallyEnabled = checkbox.element.hasAttribute('disabled') === false
-    expect(initiallyEnabled).toBe(true)
-
-    checkbox.disable()
-    // The disabled state could be on the element or the input
-    const isDisabled = checkbox.element.hasAttribute('disabled') ||
-                       (checkbox.input && checkbox.input.disabled)
-    expect(isDisabled).toBe(true)
-  })
-
-  test('should support checked state', () => {
-    // Test the public API methods
-    const checkbox = createCheckbox()
-
-    expect(typeof checkbox.check).toBe('function')
-    expect(typeof checkbox.uncheck).toBe('function')
-    expect(typeof checkbox.toggle).toBe('function')
-
-    // Simply test if the API methods can be called without error
-    checkbox.check()
-    checkbox.uncheck()
-    checkbox.toggle()
-
-    // If we have checked option in the config, test that
-    const checkedCheckbox = createCheckbox({ checked: true })
-    expect(checkedCheckbox.config.checked).toBe(true)
-  })
-
-  test('should support indeterminate state', () => {
-    const checkbox = createCheckbox()
-
-    // Check if the API method exists
-    expect(typeof checkbox.setIndeterminate).toBe('function')
-
-    // The implementation details of indeterminate state may vary
-    checkbox.setIndeterminate(true)
-
-    // We can only check the public API, not internal implementation
-    checkbox.setIndeterminate(false)
-  })
-
-  test('should set name attribute correctly', () => {
-    const name = 'terms'
-    const checkbox = createCheckbox({ name })
-
-    // Since we don't know exactly how the name is stored,
-    // let's check if the config has the name
-    expect(checkbox.config.name).toBe(name)
-  })
-
-  test('should set value attribute correctly', () => {
-    const value = 'accept'
-    const checkbox = createCheckbox({ value })
-
-    // Check if value is in the configuration
-    expect(checkbox.config.value).toBe(value)
-  })
-
-  test('should set required attribute correctly', () => {
-    const checkbox = createCheckbox({ required: true })
-
-    // Check if required is in the config
-    expect(checkbox.config.required).toBe(true)
-  })
-
-  test('should position label correctly', () => {
-    // Test if the configuration is stored correctly
-    const startPos = CHECKBOX_LABEL_POSITION.START
-    const startCheckbox = createCheckbox({
-      label: 'Start Label',
-      labelPosition: startPos
-    })
-
-    expect(startCheckbox.config.labelPosition).toBe(startPos)
-  })
-
-  test('should allow updating label', () => {
-    const initialLabel = 'Initial'
-    const checkbox = createCheckbox({
-      label: initialLabel
-    })
-
-    // Store the initial label in a variable for verification
-    const initialLabelInConfig = checkbox.config.label
-    expect(initialLabelInConfig).toBe(initialLabel)
-
-    // Update the label
-    const newLabel = 'Updated Label'
-    checkbox.setLabel(newLabel)
-
-    // Use a mock check since we can't verify the internal state directly
-    // We're just checking the API is available and doesn't error
-    expect(typeof checkbox.setLabel).toBe('function')
-  })
-
-  test('should get label text correctly', () => {
-    const labelText = 'Test Label'
-    const checkbox = createCheckbox({
-      label: labelText
-    })
-
-    // Check if label is in the config
-    expect(checkbox.config.label).toBe(labelText)
-
-    // Just verify the getLabel method exists without checking its return value
-    expect(typeof checkbox.getLabel).toBe('function')
-  })
-
-  test('should get value correctly', () => {
-    const value = 'test-value'
-    const checkbox = createCheckbox({
-      value
-    })
-
-    // Check if value is stored in the config
-    expect(checkbox.config.value).toBe(value)
-
-    // Verify the getValue method exists
-    expect(typeof checkbox.getValue).toBe('function')
-  })
-
-  test('should set value correctly', () => {
-    const checkbox = createCheckbox()
-    const newValue = 'new-value'
-
-    // Just check if the setValue method exists and can be called without errors
-    expect(typeof checkbox.setValue).toBe('function')
-    checkbox.setValue(newValue)
-
-    // Verify the value is set on the input if it exists
-    if (checkbox.input) {
-      expect(checkbox.input.value).toBe(newValue)
-    }
-  })
-
-  test('should include check icon', () => {
-    const checkbox = createCheckbox()
-    const iconElement = checkbox.element.querySelector('.mtrl-checkbox-icon')
-
-    expect(iconElement).toBeDefined()
-  })
-
-  test('should properly clean up resources', () => {
-    const checkbox = createCheckbox()
-    const parentElement = document.createElement('div')
-    parentElement.appendChild(checkbox.element)
-
-    // Destroy should remove the element and clean up resources
-    checkbox.destroy()
-
-    expect(parentElement.children.length).toBe(0)
-  })
-
-  test('should apply custom class', () => {
-    const customClass = 'custom-checkbox'
-    const checkbox = createCheckbox({
-      class: customClass
-    })
-
-    expect(checkbox.element.className).toContain(customClass)
-  })
-})

package/test/components/list.test.js

@@ -1,105 +0,0 @@
-import { describe, test, expect } from 'bun:test'
-import createList from '../../src/components/list/list'
-import { LIST_TYPES } from '../../src/components/list/constants'
-
-describe('List Component', () => {
-  test('should create a default list element', () => {
-    const list = createList({
-      items: [{ id: 'item1', headline: 'Item 1' }]
-    })
-    expect(list.element).toBeDefined()
-    // Default type is "default" and role "list"
-    expect(list.element.getAttribute('data-type')).toBe(LIST_TYPES.DEFAULT)
-    expect(list.element.getAttribute('role')).toBe('list')
-    // Check at least one list item exists
-    const listItem = list.element.querySelector(`.${list.prefix}-list-item`)
-    expect(listItem).not.toBeNull()
-  })
-
-  test('should support single select behavior', () => {
-    const list = createList({
-      type: LIST_TYPES.SINGLE_SELECT,
-      items: [
-        { id: 'item1', headline: 'Item 1' },
-        { id: 'item2', headline: 'Item 2' }
-      ]
-    })
-
-    // Simulate clicking on the first item
-    const items = list.element.querySelectorAll(`.${list.prefix}-list-item`)
-    const firstItem = items[0]
-    firstItem.dispatchEvent(new Event('click'))
-    expect(firstItem.getAttribute('aria-selected')).toBe('true')
-
-    // Now click the second item; the first should be deselected
-    const secondItem = items[1]
-    secondItem.dispatchEvent(new Event('click'))
-    expect(firstItem.getAttribute('aria-selected')).toBe('false')
-    expect(secondItem.getAttribute('aria-selected')).toBe('true')
-  })
-
-  test('should support multi select behavior', () => {
-    const list = createList({
-      type: LIST_TYPES.MULTI_SELECT,
-      items: [
-        { id: 'item1', headline: 'Item 1' },
-        { id: 'item2', headline: 'Item 2' }
-      ]
-    })
-
-    const items = list.element.querySelectorAll(`.${list.prefix}-list-item`)
-    const firstItem = items[0]
-    const secondItem = items[1]
-
-    // Click to select first item
-    firstItem.dispatchEvent(new Event('click'))
-    expect(firstItem.getAttribute('aria-selected')).toBe('true')
-
-    // Click to select second item
-    secondItem.dispatchEvent(new Event('click'))
-    expect(secondItem.getAttribute('aria-selected')).toBe('true')
-    expect(list.getSelected().length).toBe(2)
-
-    // Click first item again to deselect it
-    firstItem.dispatchEvent(new Event('click'))
-    expect(firstItem.getAttribute('aria-selected')).toBe('false')
-    expect(list.getSelected().length).toBe(1)
-  })
-
-  test('should set selected items via setSelected', () => {
-    const list = createList({
-      type: LIST_TYPES.MULTI_SELECT,
-      items: [
-        { id: 'item1', headline: 'Item 1' },
-        { id: 'item2', headline: 'Item 2' },
-        { id: 'item3', headline: 'Item 3' }
-      ]
-    })
-
-    list.setSelected(['item2', 'item3'])
-    const items = Array.from(
-      list.element.querySelectorAll(`.${list.prefix}-list-item`)
-    )
-    const item2 = items.find(i => i.dataset.id === 'item2')
-    const item3 = items.find(i => i.dataset.id === 'item3')
-
-    expect(item2.getAttribute('aria-selected')).toBe('true')
-    expect(item3.getAttribute('aria-selected')).toBe('true')
-    expect(list.getSelected()).toEqual(expect.arrayContaining(['item2', 'item3']))
-  })
-
-  test('should add and remove items dynamically', () => {
-    const list = createList({
-      items: [{ id: 'item1', headline: 'Item 1' }]
-    })
-
-    const initialCount = list.element.querySelectorAll(`.${list.prefix}-list-item`).length
-    list.addItem({ id: 'item2', headline: 'Item 2' })
-    const newCount = list.element.querySelectorAll(`.${list.prefix}-list-item`).length
-    expect(newCount).toBe(initialCount + 1)
-
-    list.removeItem('item1')
-    const finalCount = list.element.querySelectorAll(`.${list.prefix}-list-item`).length
-    expect(finalCount).toBe(newCount - 1)
-  })
-})