mtrl 0.0.2 → 0.0.3

package/test/components/snackbar.test.js

@@ -0,0 +1,234 @@
+// test/components/snackbar.test.js
+import { describe, test, expect, mock, spyOn, beforeEach, afterEach } from 'bun:test'
+import createSnackbar from '../../src/components/snackbar/snackbar'
+import { SNACKBAR_VARIANTS, SNACKBAR_POSITIONS } from '../../src/components/snackbar/constants'
+
+describe('Snackbar Component', () => {
+  let originalBody
+  let mockBodyAppendChild
+  let mockBodyRemoveChild
+
+  beforeEach(() => {
+    // Mock document.body methods for testing
+    originalBody = document.body
+    mockBodyAppendChild = mock(() => {})
+    mockBodyRemoveChild = mock(() => {})
+
+    Object.defineProperty(document, 'body', {
+      value: {
+        appendChild: mockBodyAppendChild,
+        removeChild: mockBodyRemoveChild,
+        children: []
+      },
+      writable: true
+    })
+  })
+
+  afterEach(() => {
+    // Restore original document.body
+    Object.defineProperty(document, 'body', {
+      value: originalBody,
+      writable: true
+    })
+  })
+
+  test('should create a snackbar element', () => {
+    const snackbar = createSnackbar({
+      message: 'Test message'
+    })
+
+    expect(snackbar.element).toBeDefined()
+    expect(snackbar.element.tagName).toBe('DIV')
+    expect(snackbar.element.className).toContain('mtrl-snackbar')
+  })
+
+  test('should apply variant class', () => {
+    const variant = SNACKBAR_VARIANTS.ACTION
+    const snackbar = createSnackbar({
+      message: 'Test message',
+      variant
+    })
+
+    expect(snackbar.config.variant).toBe(variant)
+  })
+
+  test('should use basic as default variant', () => {
+    const snackbar = createSnackbar({
+      message: 'Test message'
+    })
+
+    expect(snackbar.config.variant).toBe(SNACKBAR_VARIANTS.BASIC)
+  })
+
+  test('should apply position class', () => {
+    const position = SNACKBAR_POSITIONS.START
+    const snackbar = createSnackbar({
+      message: 'Test message',
+      position
+    })
+
+    expect(snackbar.config.position).toBe(position)
+  })
+
+  test('should use center as default position', () => {
+    const snackbar = createSnackbar({
+      message: 'Test message'
+    })
+
+    expect(snackbar.config.position).toBe(SNACKBAR_POSITIONS.CENTER)
+  })
+
+  test('should set message text', () => {
+    const message = 'Test message'
+    const snackbar = createSnackbar({
+      message
+    })
+
+    expect(snackbar.config.message).toBe(message)
+    expect(typeof snackbar.getMessage).toBe('function')
+  })
+
+  test('should add action button when specified', () => {
+    const action = 'Undo'
+    const snackbar = createSnackbar({
+      message: 'Action completed',
+      action
+    })
+
+    expect(snackbar.actionButton).toBeDefined()
+    expect(snackbar.actionButton.textContent).toBe(action)
+  })
+
+  test('should not add action button when not specified', () => {
+    const snackbar = createSnackbar({
+      message: 'Simple message'
+    })
+
+    expect(snackbar.actionButton).toBeUndefined()
+  })
+
+  test('should set default duration when not specified', () => {
+    const snackbar = createSnackbar({
+      message: 'Test message'
+    })
+
+    expect(snackbar.config.duration).toBe(4000)
+  })
+
+  test('should respect custom duration', () => {
+    const duration = 2000
+    const snackbar = createSnackbar({
+      message: 'Test message',
+      duration
+    })
+
+    expect(snackbar.config.duration).toBe(duration)
+  })
+
+  test('should allow duration of 0 (no auto-dismiss)', () => {
+    const snackbar = createSnackbar({
+      message: 'Test message',
+      duration: 0
+    })
+
+    expect(snackbar.config.duration).toBe(0)
+  })
+
+  test('should register event handlers', () => {
+    const snackbar = createSnackbar({
+      message: 'Test message'
+    })
+
+    // Verify event API exists
+    expect(typeof snackbar.on).toBe('function')
+    expect(typeof snackbar.off).toBe('function')
+
+    // Check event handling
+    const handler = mock(() => {})
+    snackbar.on('dismiss', handler)
+
+    // Trigger dismiss event
+    snackbar.emit && snackbar.emit('dismiss')
+
+    if (snackbar.emit) {
+      expect(handler).toHaveBeenCalled()
+    }
+  })
+
+  test('should expose show and hide methods', () => {
+    const snackbar = createSnackbar({
+      message: 'Test message'
+    })
+
+    expect(typeof snackbar.show).toBe('function')
+    expect(typeof snackbar.hide).toBe('function')
+  })
+
+  test('should allow updating message', () => {
+    const initialMessage = 'Initial message'
+    const snackbar = createSnackbar({
+      message: initialMessage
+    })
+
+    expect(snackbar.getMessage()).toBe(initialMessage)
+
+    const updatedMessage = 'Updated message'
+    snackbar.setMessage(updatedMessage)
+
+    expect(snackbar.getMessage()).toBe(updatedMessage)
+  })
+
+  test('should have dismiss timer functionality', () => {
+    const snackbar = createSnackbar({
+      message: 'Test message'
+    })
+
+    expect(snackbar.timer).toBeDefined()
+    expect(typeof snackbar.timer.start).toBe('function')
+    expect(typeof snackbar.timer.stop).toBe('function')
+  })
+
+  test('should have an API for position management', () => {
+    const snackbar = createSnackbar({
+      message: 'Test message'
+    })
+
+    expect(snackbar.position).toBeDefined()
+
+    if (snackbar.position) {
+      expect(typeof snackbar.position.getPosition).toBe('function')
+      expect(typeof snackbar.position.setPosition).toBe('function')
+    }
+  })
+
+  test('should clean up resources on destroy', () => {
+    const snackbar = createSnackbar({
+      message: 'Test message'
+    })
+
+    expect(typeof snackbar.destroy).toBe('function')
+
+    // Mock any internal methods that might be called during destroy
+    if (snackbar.timer) {
+      snackbar.timer.stop = mock(snackbar.timer.stop)
+    }
+
+    // Call destroy
+    snackbar.destroy()
+
+    // Check if timer was stopped
+    if (snackbar.timer && typeof snackbar.timer.stop === 'function') {
+      expect(snackbar.timer.stop).toHaveBeenCalled()
+    }
+  })
+
+  test('should apply custom class', () => {
+    const customClass = 'custom-snackbar'
+    const snackbar = createSnackbar({
+      message: 'Test message',
+      class: customClass
+    })
+
+    expect(snackbar.element.className).toContain(customClass)
+  })
+})

package/test/components/switch.test.js

@@ -0,0 +1,186 @@
+// test/components/switch.test.js
+import { describe, test, expect, mock } from 'bun:test'
+import createSwitch from '../../src/components/switch/switch'
+import { SWITCH_LABEL_POSITION } from '../../src/components/switch/constants'
+
+describe('Switch Component', () => {
+  test('should create a switch element', () => {
+    const switchComp = createSwitch()
+    expect(switchComp.element).toBeDefined()
+    expect(switchComp.element.tagName).toBe('DIV')
+    expect(switchComp.element.className).toContain('mtrl-switch')
+  })
+
+  test('should create input element with type checkbox', () => {
+    const switchComp = createSwitch()
+
+    // Check for input through direct property
+    expect(switchComp.input).toBeDefined()
+    expect(switchComp.input.type).toBe('checkbox')
+  })
+
+  test('should apply custom class', () => {
+    const customClass = 'custom-switch'
+    const switchComp = createSwitch({
+      class: customClass
+    })
+
+    expect(switchComp.element.className).toContain(customClass)
+  })
+
+  test('should add label content through config', () => {
+    const labelText = 'Toggle me'
+    const switchComp = createSwitch({
+      label: labelText
+    })
+
+    // Check config has label
+    expect(switchComp.config.label).toBe(labelText)
+  })
+
+  test('should position label correctly', () => {
+    // Test if the configuration is stored correctly
+    const startPos = SWITCH_LABEL_POSITION.START
+    const startSwitch = createSwitch({
+      label: 'Label at Start',
+      labelPosition: startPos
+    })
+
+    // Check label position in config
+    expect(startSwitch.config.labelPosition).toBe(startPos)
+
+    // Check class is applied
+    expect(startSwitch.element.className).toContain('mtrl-switch--label-start')
+
+    // Default position (end)
+    const endSwitch = createSwitch({
+      label: 'Label at End'
+    })
+
+    expect(endSwitch.element.className).toContain('mtrl-switch--label-end')
+  })
+
+  test('should handle change events', () => {
+    const switchComp = createSwitch()
+    const handleChange = mock(() => {})
+
+    // Check if the event handler is registered
+    switchComp.on('change', handleChange)
+
+    // Simulate change by calling the emit method if it exists
+    if (switchComp.emit) {
+      switchComp.emit('change', {})
+      expect(handleChange).toHaveBeenCalled()
+    }
+  })
+
+  test('should support disabled state', () => {
+    const switchComp = createSwitch()
+
+    // Check API methods
+    expect(typeof switchComp.disable).toBe('function')
+    expect(typeof switchComp.enable).toBe('function')
+
+    // Test the API methods without making assumptions about implementation
+    switchComp.disable()
+    switchComp.enable()
+
+    // Test initially disabled through config
+    const disabledSwitch = createSwitch({ disabled: true })
+    expect(disabledSwitch.config.disabled).toBe(true)
+  })
+
+  test('should support checked state', () => {
+    // Check API methods
+    const switchComp = createSwitch()
+    expect(typeof switchComp.check).toBe('function')
+    expect(typeof switchComp.uncheck).toBe('function')
+    expect(typeof switchComp.toggle).toBe('function')
+
+    // Initial unchecked state
+    const uncheckedSwitch = createSwitch()
+    expect(uncheckedSwitch.config.checked).toBeFalsy()
+
+    // Initial checked state
+    const checkedSwitch = createSwitch({ checked: true })
+    expect(checkedSwitch.config.checked).toBe(true)
+
+    // Verify methods execute without errors
+    switchComp.check()
+    switchComp.uncheck()
+    switchComp.toggle()
+  })
+
+  test('should set name attribute correctly', () => {
+    const name = 'theme-toggle'
+    const switchComp = createSwitch({ name })
+
+    // Check config
+    expect(switchComp.config.name).toBe(name)
+  })
+
+  test('should set value attribute correctly', () => {
+    const value = 'dark-mode'
+    const switchComp = createSwitch({ value })
+
+    // Check config
+    expect(switchComp.config.value).toBe(value)
+  })
+
+  test('should set required attribute correctly', () => {
+    const switchComp = createSwitch({ required: true })
+
+    // Check config
+    expect(switchComp.config.required).toBe(true)
+  })
+
+  test('should allow updating label', () => {
+    const initialLabel = 'Initial Label'
+    const switchComp = createSwitch({
+      label: initialLabel
+    })
+
+    // Check initial label in config
+    expect(switchComp.config.label).toBe(initialLabel)
+
+    // Check setLabel method exists
+    expect(typeof switchComp.setLabel).toBe('function')
+
+    // Update label
+    const newLabel = 'Updated Label'
+    switchComp.setLabel(newLabel)
+  })
+
+  test('should include track and thumb elements', () => {
+    const switchComp = createSwitch()
+
+    // Check for track - it might be directly accessible or through the DOM
+    const hasTrack = switchComp.track !== undefined ||
+                    switchComp.element.querySelector('.mtrl-switch-track') !== null
+
+    expect(hasTrack).toBe(true)
+  })
+
+  test('should have value getter and setter', () => {
+    const switchComp = createSwitch()
+
+    // Check API methods
+    expect(typeof switchComp.getValue).toBe('function')
+    expect(typeof switchComp.setValue).toBe('function')
+
+    // Set a value
+    const testValue = 'test-value'
+    switchComp.setValue(testValue)
+  })
+
+  test('should properly clean up resources', () => {
+    const switchComp = createSwitch()
+    const parentElement = document.createElement('div')
+    parentElement.appendChild(switchComp.element)
+
+    // Destroy should remove the element and clean up resources
+    switchComp.destroy()
+
+    expect(parentElement.children.length).toBe(0)
+  })
+})