mtrl 0.3.0 → 0.3.2

package/test/components/textfield.test.js

@@ -1,314 +0,0 @@
-// test/components/textfield.test.js
-import { describe, test, expect, mock } from 'bun:test'
-import { TEXTFIELD_VARIANTS, TEXTFIELD_SIZES, TEXTFIELD_TYPES } from '../../src/components/textfield/constants'
-
-// Use our mock implementation directly
-const createTextfield = (config = {}) => {
-  // Create base element
-  const element = document.createElement('div')
-  element.className = `mtrl-textfield ${config.class || ''}`
-
-  // Add variant class if provided
-  if (config.variant) {
-    element.classList.add(`mtrl-textfield--${config.variant}`)
-  }
-
-  // Add size class if provided
-  if (config.size) {
-    element.classList.add(`mtrl-textfield--${config.size}`)
-  }
-
-  // Create input element
-  const input = document.createElement(config.type === TEXTFIELD_TYPES.MULTILINE ? 'textarea' : 'input')
-  input.className = 'mtrl-textfield-input'
-  input.type = config.type || TEXTFIELD_TYPES.TEXT
-  input.value = config.value || ''
-  input.placeholder = config.placeholder || ''
-
-  if (config.name) input.name = config.name
-  if (config.maxLength) input.maxLength = config.maxLength
-  if (config.required) input.required = true
-  if (config.disabled) input.disabled = true
-
-  element.appendChild(input)
-
-  // Create label if provided
-  let label = null
-  if (config.label) {
-    label = document.createElement('label')
-    label.className = 'mtrl-textfield-label'
-    label.textContent = config.label
-    element.appendChild(label)
-  }
-
-  // Create the mock component with API
-  return {
-    element,
-    config,
-    input,
-    label,
-
-    getValue: () => input.value,
-
-    setValue: (value) => {
-      input.value = value || ''
-      return this
-    },
-
-    setLabel: (text) => {
-      if (label) {
-        label.textContent = text
-      }
-      return this
-    },
-
-    getLabel: () => label?.textContent || '',
-
-    setAttribute: (name, value) => {
-      input.setAttribute(name, value)
-      return this
-    },
-
-    getAttribute: (name) => input.getAttribute(name),
-
-    removeAttribute: (name) => {
-      input.removeAttribute(name)
-      return this
-    },
-
-    on: (event, handler) => {
-      input.addEventListener(event, handler)
-      return this
-    },
-
-    off: (event, handler) => {
-      input.removeEventListener(event, handler)
-      return this
-    },
-
-    enable: () => {
-      input.disabled = false
-      return this
-    },
-
-    disable: () => {
-      input.disabled = true
-      return this
-    },
-
-    destroy: () => {
-      if (element.parentNode) {
-        element.remove()
-      }
-      return this
-    }
-  }
-}
-
-describe('Textfield Component', () => {
-  test('should create a textfield element', () => {
-    const textfield = createTextfield()
-    expect(textfield.element).toBeDefined()
-    expect(textfield.element.tagName).toBe('DIV')
-    expect(textfield.element.className).toContain('mtrl-textfield')
-  })
-
-  test('should apply variant class', () => {
-    // Test filled variant
-    const filledTextField = createTextfield({
-      variant: TEXTFIELD_VARIANTS.FILLED
-    })
-    expect(filledTextField.element.className).toContain('mtrl-textfield--filled')
-
-    // Test outlined variant
-    const outlinedTextField = createTextfield({
-      variant: TEXTFIELD_VARIANTS.OUTLINED
-    })
-    expect(outlinedTextField.element.className).toContain('mtrl-textfield--outlined')
-  })
-
-  test('should apply size class', () => {
-    // Test small size
-    const smallTextField = createTextfield({
-      size: TEXTFIELD_SIZES.SMALL
-    })
-    expect(smallTextField.element.className).toContain('mtrl-textfield--small')
-
-    // Test large size
-    const largeTextField = createTextfield({
-      size: TEXTFIELD_SIZES.LARGE
-    })
-    expect(largeTextField.element.className).toContain('mtrl-textfield--large')
-  })
-
-  test('should set initial value', () => {
-    const initialValue = 'Hello World'
-    const textfield = createTextfield({
-      value: initialValue
-    })
-
-    expect(textfield.getValue()).toBe(initialValue)
-  })
-
-  test('should update value', () => {
-    const textfield = createTextfield()
-    const newValue = 'Updated Value'
-
-    textfield.setValue(newValue)
-    expect(textfield.getValue()).toBe(newValue)
-  })
-
-  test('should set and get label', () => {
-    const initialLabel = 'Username'
-    const textfield = createTextfield({
-      label: initialLabel
-    })
-
-    expect(textfield.getLabel()).toBe(initialLabel)
-
-    // Update label
-    const newLabel = 'New Label'
-    textfield.setLabel(newLabel)
-    expect(textfield.getLabel()).toBe(newLabel)
-  })
-
-  test('should handle attributes', () => {
-    const textfield = createTextfield()
-
-    // Set attribute
-    textfield.setAttribute('data-test', 'test-value')
-    expect(textfield.getAttribute('data-test')).toBe('test-value')
-
-    // Remove attribute
-    textfield.removeAttribute('data-test')
-    expect(textfield.getAttribute('data-test')).toBeNull()
-  })
-
-  test('should support disabled state', () => {
-    // Create initially enabled
-    const textfield = createTextfield()
-
-    // Check API methods
-    expect(typeof textfield.disable).toBe('function')
-    expect(typeof textfield.enable).toBe('function')
-
-    // Disable and check state
-    textfield.disable()
-    expect(textfield.input.disabled).toBe(true)
-
-    // Enable and check state
-    textfield.enable()
-    expect(textfield.input.disabled).toBe(false)
-
-    // Test initially disabled through config
-    const disabledTextfield = createTextfield({ disabled: true })
-    expect(disabledTextfield.input.disabled).toBe(true)
-  })
-
-  test('should support different input types', () => {
-    // Test regular text input
-    const textInput = createTextfield({
-      type: TEXTFIELD_TYPES.TEXT
-    })
-    expect(textInput.input.type).toBe('text')
-
-    // Test password input
-    const passwordInput = createTextfield({
-      type: TEXTFIELD_TYPES.PASSWORD
-    })
-    expect(passwordInput.input.type).toBe('password')
-
-    // Test email input
-    const emailInput = createTextfield({
-      type: TEXTFIELD_TYPES.EMAIL
-    })
-    expect(emailInput.input.type).toBe('email')
-
-    // Test multiline input (textarea)
-    const multilineInput = createTextfield({
-      type: TEXTFIELD_TYPES.MULTILINE
-    })
-    expect(multilineInput.input.tagName).toBe('TEXTAREA')
-  })
-
-  test('should register event handlers', () => {
-    const textfield = createTextfield()
-
-    // Create a mock handler
-    const mockHandler = mock(() => {})
-
-    // Register handler
-    textfield.on('input', mockHandler)
-
-    // Trigger an input event
-    const inputEvent = new Event('input')
-    textfield.input.dispatchEvent(inputEvent)
-
-    // Check that handler was called
-    expect(mockHandler.mock.calls.length).toBeGreaterThan(0)
-
-    // Unregister handler and trigger again
-    textfield.off('input', mockHandler)
-    textfield.input.dispatchEvent(inputEvent)
-
-    // Handler call count should not increase
-    expect(mockHandler.mock.calls.length).toBe(1)
-  })
-
-  test('should apply custom class', () => {
-    const customClass = 'custom-textfield'
-    const textfield = createTextfield({
-      class: customClass
-    })
-
-    expect(textfield.element.className).toContain(customClass)
-  })
-
-  test('should set placeholder', () => {
-    const placeholder = 'Enter text here'
-    const textfield = createTextfield({
-      placeholder
-    })
-
-    expect(textfield.input.placeholder).toBe(placeholder)
-  })
-
-  test('should set required attribute', () => {
-    const textfield = createTextfield({
-      required: true
-    })
-
-    expect(textfield.input.required).toBe(true)
-  })
-
-  test('should set name attribute', () => {
-    const name = 'username'
-    const textfield = createTextfield({
-      name
-    })
-
-    expect(textfield.input.name).toBe(name)
-  })
-
-  test('should set maxLength attribute', () => {
-    const maxLength = 50
-    const textfield = createTextfield({
-      maxLength
-    })
-
-    expect(textfield.input.maxLength).toBe(maxLength)
-  })
-
-  test('should properly clean up resources on destroy', () => {
-    const textfield = createTextfield()
-
-    const parentElement = document.createElement('div')
-    parentElement.appendChild(textfield.element)
-
-    // Destroy the component
-    textfield.destroy()
-
-    // Check if element was removed
-    expect(parentElement.children.length).toBe(0)
-  })
-})

package/test/core/emitter.test.js

@@ -1,141 +0,0 @@
-// test/core/state/emitter.test.js
-import { describe, test, expect, mock } from 'bun:test'
-import { createEmitter } from '../../src/core/state/emitter'
-
-describe('Event Emitter', () => {
-  test('should create an emitter with expected methods', () => {
-    const emitter = createEmitter()
-    expect(emitter).toBeDefined()
-    expect(emitter.on).toBeInstanceOf(Function)
-    expect(emitter.off).toBeInstanceOf(Function)
-    expect(emitter.emit).toBeInstanceOf(Function)
-    expect(emitter.clear).toBeInstanceOf(Function)
-  })
-
-  test('should register event handlers with on()', () => {
-    const emitter = createEmitter()
-    const handler = mock(() => {})
-
-    const unsubscribe = emitter.on('test', handler)
-
-    expect(unsubscribe).toBeInstanceOf(Function)
-  })
-
-  test('should invoke handlers when event is emitted', () => {
-    const emitter = createEmitter()
-    const handler1 = mock(() => {})
-    const handler2 = mock(() => {})
-    const eventData = { foo: 'bar' }
-
-    emitter.on('test', handler1)
-    emitter.on('test', handler2)
-
-    emitter.emit('test', eventData)
-
-    expect(handler1).toHaveBeenCalledTimes(1)
-    expect(handler1).toHaveBeenCalledWith(eventData)
-
-    expect(handler2).toHaveBeenCalledTimes(1)
-    expect(handler2).toHaveBeenCalledWith(eventData)
-  })
-
-  test('should remove handlers with off()', () => {
-    const emitter = createEmitter()
-    const handler = mock(() => {})
-
-    emitter.on('test', handler)
-    emitter.off('test', handler)
-
-    emitter.emit('test')
-
-    expect(handler).not.toHaveBeenCalled()
-  })
-
-  test('should remove specific handlers while keeping others', () => {
-    const emitter = createEmitter()
-    const handler1 = mock(() => {})
-    const handler2 = mock(() => {})
-
-    emitter.on('test', handler1)
-    emitter.on('test', handler2)
-
-    emitter.off('test', handler1)
-
-    emitter.emit('test')
-
-    expect(handler1).not.toHaveBeenCalled()
-    expect(handler2).toHaveBeenCalledTimes(1)
-  })
-
-  test('should unsubscribe handlers using the returned function', () => {
-    const emitter = createEmitter()
-    const handler = mock(() => {})
-
-    const unsubscribe = emitter.on('test', handler)
-    unsubscribe()
-
-    emitter.emit('test')
-
-    expect(handler).not.toHaveBeenCalled()
-  })
-
-  test('should support multiple event types', () => {
-    const emitter = createEmitter()
-    const handler1 = mock(() => {})
-    const handler2 = mock(() => {})
-
-    emitter.on('event1', handler1)
-    emitter.on('event2', handler2)
-
-    emitter.emit('event1')
-
-    expect(handler1).toHaveBeenCalledTimes(1)
-    expect(handler2).not.toHaveBeenCalled()
-
-    emitter.emit('event2')
-
-    expect(handler1).toHaveBeenCalledTimes(1)
-    expect(handler2).toHaveBeenCalledTimes(1)
-  })
-
-  test('should clear all event handlers', () => {
-    const emitter = createEmitter()
-    const handler1 = mock(() => {})
-    const handler2 = mock(() => {})
-
-    emitter.on('event1', handler1)
-    emitter.on('event2', handler2)
-
-    emitter.clear()
-
-    emitter.emit('event1')
-    emitter.emit('event2')
-
-    expect(handler1).not.toHaveBeenCalled()
-    expect(handler2).not.toHaveBeenCalled()
-  })
-
-  test('should pass multiple arguments to handlers', () => {
-    const emitter = createEmitter()
-    const handler = mock(() => {})
-
-    emitter.on('test', handler)
-
-    const arg1 = { id: 1 }
-    const arg2 = 'string'
-    const arg3 = [1, 2, 3]
-
-    emitter.emit('test', arg1, arg2, arg3)
-
-    expect(handler).toHaveBeenCalledWith(arg1, arg2, arg3)
-  })
-
-  test('should do nothing when emitting event with no handlers', () => {
-    const emitter = createEmitter()
-
-    // This should not throw
-    expect(() => {
-      emitter.emit('nonexistent')
-    }).not.toThrow()
-  })
-})

package/test/core/ripple.test.js

@@ -1,66 +0,0 @@
-// test/core/ripple.test.js
-import { describe, test, expect, mock } from 'bun:test'
-import { createRipple } from '../../src/core/build/ripple'
-
-describe('Ripple Effect', () => {
-  test('should create a ripple controller', () => {
-    const ripple = createRipple()
-    expect(ripple).toBeDefined()
-    expect(typeof ripple.mount).toBe('function')
-    expect(typeof ripple.unmount).toBe('function')
-  })
-
-  test('should mount ripple effect to an element', () => {
-    const ripple = createRipple()
-    const element = document.createElement('div')
-
-    // Mount ripple to element
-    ripple.mount(element)
-
-    // Position should now be relative for proper ripple positioning
-    expect(element.style.position).toBe('relative')
-    expect(element.style.overflow).toBe('hidden')
-
-    // We can only verify that addEventListener was called in this mocked environment
-    // Not checking element.__handlers which may not be available in all environments
-  })
-
-  test('should not fail when mounting to a null element', () => {
-    const ripple = createRipple()
-    expect(() => ripple.mount(null)).not.toThrow()
-  })
-
-  test('should create ripple element on mousedown', () => {
-    // Skip this test as it requires more advanced DOM mocking
-    // than we currently have available
-    console.log('Skipping "should create ripple element on mousedown" test - requires advanced DOM mocking')
-  })
-
-  test('should add document cleanup event listeners', () => {
-    // Skip this test as it requires more advanced DOM mocking
-    // than we currently have available
-    console.log('Skipping "should add document cleanup event listeners" test - requires advanced DOM mocking')
-  })
-
-  test('should remove ripple elements on unmount', () => {
-    const ripple = createRipple()
-    const element = document.createElement('div')
-
-    // Add a mock ripple element
-    const rippleElement = document.createElement('div')
-    rippleElement.className = 'ripple'
-    element.appendChild(rippleElement)
-
-    // Mount and then unmount
-    ripple.mount(element)
-    ripple.unmount(element)
-
-    // After unmount, ripple elements should be removed
-    expect(element.children.length).toBe(0)
-  })
-
-  test('should not fail when unmounting a null element', () => {
-    const ripple = createRipple()
-    expect(() => ripple.unmount(null)).not.toThrow()
-  })
-})