@domql/element 3.4.4 → 3.4.6

package/event/__tests__/canRenderTag.test.js

@@ -0,0 +1,50 @@
+import { canRenderTag } from '../can'
+
+// Mock the error registry
+global.ERRORS_REGISTRY = {
+  en: {
+    HTMLInvalidTag: {
+      description: 'Invalid HTML tag provided'
+    }
+  }
+}
+
+describe('canRenderTag', () => {
+  describe('valid tags', () => {
+    test('should return true for div tag', () => {
+      expect(canRenderTag('div')).toBe(true)
+    })
+
+    test('should default to div and return true when tag is undefined', () => {
+      expect(canRenderTag(undefined)).toBe(true)
+    })
+
+    test('should default to div and return true when tag is null', () => {
+      expect(canRenderTag(null)).toBe(true)
+    })
+
+    test('should return true for common HTML tags', () => {
+      const commonTags = ['p', 'span', 'button', 'input', 'a']
+      commonTags.forEach(tag => {
+        expect(canRenderTag(tag)).toBe(true)
+      })
+    })
+
+    test('should use custom error description from registry', () => {
+      // Arrange
+      global.ERRORS_REGISTRY = {
+        en: {
+          HTMLInvalidTag: {
+            description: 'Custom error description'
+          }
+        }
+      }
+
+      // Act
+      const result = canRenderTag('invalid-tag')
+
+      // Assert
+      expect(result).toBeInstanceOf(Error)
+    })
+  })
+})

package/event/__tests__/index.test.js

@@ -0,0 +1,39 @@
+import * as moduleExports from '../index'
+
+describe('Module exports', () => {
+  // Expected exports from on.js
+  test('should export on.js functions', () => {
+    expect(moduleExports).toHaveProperty('applyEvent')
+    expect(typeof moduleExports.applyEvent).toBe('function')
+
+    expect(moduleExports).toHaveProperty('triggerEventOn')
+    expect(typeof moduleExports.triggerEventOn).toBe('function')
+
+    expect(moduleExports).toHaveProperty('applyEventUpdate')
+    expect(typeof moduleExports.applyEventUpdate).toBe('function')
+
+    expect(moduleExports).toHaveProperty('triggerEventOnUpdate')
+    expect(typeof moduleExports.triggerEventOnUpdate).toBe('function')
+
+    expect(moduleExports).toHaveProperty('applyEventsOnNode')
+    expect(typeof moduleExports.applyEventsOnNode).toBe('function')
+  })
+
+  // Expected exports from can.js
+  test('should export can.js functions', () => {
+    expect(moduleExports).toHaveProperty('canRenderTag')
+    expect(typeof moduleExports.canRenderTag).toBe('function')
+  })
+
+  // Expected exports from animationFrame.js
+  test('should export animationFrame.js functions', () => {
+    expect(moduleExports).toHaveProperty('initAnimationFrame')
+    expect(typeof moduleExports.initAnimationFrame).toBe('function')
+
+    expect(moduleExports).toHaveProperty('registerFrameListener')
+    expect(typeof moduleExports.registerFrameListener).toBe('function')
+
+    expect(moduleExports).toHaveProperty('applyAnimationFrame')
+    expect(typeof moduleExports.applyAnimationFrame).toBe('function')
+  })
+})

package/event/__tests__/initAnimationFrame.test.js

@@ -0,0 +1,156 @@
+import { jest } from '@jest/globals'
+import { initAnimationFrame } from '../animationFrame'
+
+describe('initAnimationFrame', () => {
+  let requestAnimationFrameCallback
+  let frameListeners
+  let mockElement
+  let mockOnFrame
+
+  beforeEach(() => {
+    // Store callback instead of executing it immediately
+    window.requestAnimationFrame = jest.fn(cb => {
+      requestAnimationFrameCallback = cb
+      return 1 // Return a dummy frame ID
+    })
+
+    // Mock console.warn to avoid test output noise
+    console.warn = jest.fn()
+
+    // Create mock element with required structure
+    mockOnFrame = jest.fn()
+    mockElement = {
+      node: document.createElement('div'),
+      parent: {
+        node: document.createElement('div')
+      },
+      props: {
+        onFrame: mockOnFrame
+      },
+      onFrame: mockOnFrame, // Add direct onFrame property to the element
+      state: { foo: 'bar' },
+      context: { baz: 'qux' }
+    }
+
+    // Append child to parent for contains() to work
+    mockElement.parent.node.appendChild(mockElement.node)
+
+    // Initialize frameListeners
+    frameListeners = initAnimationFrame()
+  })
+
+  afterEach(() => {
+    // Clean up DOM
+    if (mockElement.parent.node.parentNode) {
+      mockElement.parent.node.parentNode.removeChild(mockElement.parent.node)
+    }
+  })
+
+  describe('initialization', () => {
+    test('should return an empty Set', () => {
+      expect(frameListeners).toBeInstanceOf(Set)
+      expect(frameListeners.size).toBe(0)
+    })
+
+    test('should request first animation frame', () => {
+      expect(window.requestAnimationFrame).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  describe('frame processing', () => {
+    test('should call onFrame with correct arguments when element is in DOM', () => {
+      // Arrange
+      frameListeners.add(mockElement)
+
+      // Act - trigger a single frame
+      requestAnimationFrameCallback()
+
+      // Assert
+      expect(mockOnFrame).toHaveBeenCalledWith(
+        mockElement,
+        mockElement.state,
+        mockElement.context
+      )
+    })
+
+    test('should use on.frame if available instead of onFrame', () => {
+      // Arrange
+      const onFrameHandler = jest.fn()
+      mockElement.on = { frame: onFrameHandler }
+      frameListeners.add(mockElement)
+
+      // Act - trigger a single frame
+      requestAnimationFrameCallback()
+
+      // Assert
+      expect(onFrameHandler).toHaveBeenCalledWith(
+        mockElement,
+        mockElement.state,
+        mockElement.context
+      )
+      expect(mockOnFrame).not.toHaveBeenCalled()
+    })
+
+    test('should remove element if not in DOM', () => {
+      // Arrange
+      frameListeners.add(mockElement)
+      mockElement.parent.node.removeChild(mockElement.node)
+
+      // Act - trigger a single frame
+      requestAnimationFrameCallback()
+
+      // Assert
+      expect(frameListeners.has(mockElement)).toBe(false)
+      expect(frameListeners.size).toBe(0)
+    })
+
+    test('should catch and warn on onFrame errors', () => {
+      // Arrange
+      const error = new Error('Test error')
+      mockElement.onFrame = jest.fn(() => {
+        throw error
+      })
+      frameListeners.add(mockElement)
+
+      // Act - trigger a single frame
+      requestAnimationFrameCallback()
+
+      // Assert
+      expect(console.warn).toHaveBeenCalledWith(error)
+      // Element should still be in the set despite the error
+      expect(frameListeners.has(mockElement)).toBe(true)
+    })
+
+    test('should process multiple elements in the set', () => {
+      // Arrange
+      const mockElement2 = {
+        ...mockElement,
+        node: document.createElement('div'),
+        props: { onFrame: jest.fn() },
+        onFrame: jest.fn() // Add direct onFrame property to mockElement2
+      }
+      mockElement.parent.node.appendChild(mockElement2.node)
+
+      frameListeners.add(mockElement)
+      frameListeners.add(mockElement2)
+
+      // Act - trigger a single frame
+      requestAnimationFrameCallback()
+
+      // Assert
+      expect(mockOnFrame).toHaveBeenCalled()
+      expect(mockElement2.onFrame).toHaveBeenCalled()
+      expect(frameListeners.size).toBe(2)
+    })
+  })
+
+  describe('animation loop', () => {
+    test('should request next animation frame after processing', () => {
+      // Act - trigger a single frame
+      requestAnimationFrameCallback()
+
+      // Assert - should have requested the next frame
+      expect(window.requestAnimationFrame).toHaveBeenCalledTimes(2)
+    })
+  })
+})

package/event/__tests__/registerFrameListener.test.js

@@ -0,0 +1,97 @@
+import { registerFrameListener } from '../animationFrame'
+
+describe('registerFrameListener', () => {
+  let mockElement
+  let mockFrameListeners
+
+  beforeEach(() => {
+    // Reset mockFrameListeners before each test
+    mockFrameListeners = new Set()
+
+    // Create a mock element with the required structure
+    mockElement = {
+      __ref: {
+        root: {
+          data: {
+            frameListeners: mockFrameListeners
+          }
+        }
+      }
+    }
+  })
+
+  describe('successful cases', () => {
+    test('should add element to frameListeners when not already present', () => {
+      // Arrange
+      expect(mockFrameListeners.size).toBe(0)
+
+      // Act
+      registerFrameListener(mockElement)
+
+      // Assert
+      expect(mockFrameListeners.size).toBe(1)
+      expect(mockFrameListeners.has(mockElement)).toBe(true)
+    })
+
+    test('should not add element to frameListeners when already present', () => {
+      // Arrange
+      mockFrameListeners.add(mockElement)
+      expect(mockFrameListeners.size).toBe(1)
+
+      // Act
+      registerFrameListener(mockElement)
+
+      // Assert
+      expect(mockFrameListeners.size).toBe(1)
+      expect(mockFrameListeners.has(mockElement)).toBe(true)
+    })
+
+    test('should handle case when frameListeners is undefined', () => {
+      // Arrange
+      mockElement.__ref.root.data.frameListeners = undefined
+
+      // Act & Assert
+      expect(() => {
+        registerFrameListener(mockElement)
+      }).not.toThrow()
+    })
+  })
+
+  describe('error cases', () => {
+    test('should throw error when element is null', () => {
+      expect(() => {
+        registerFrameListener(null)
+      }).toThrow('Element reference is invalid')
+    })
+
+    test('should throw error when element is undefined', () => {
+      expect(() => {
+        registerFrameListener(undefined)
+      }).toThrow('Element reference is invalid')
+    })
+
+    test('should throw error when element.__ref is undefined', () => {
+      const invalidElement = {}
+
+      expect(() => {
+        registerFrameListener(invalidElement)
+      }).toThrow('Element reference is invalid')
+    })
+
+    test('should throw error when ref.root is undefined', () => {
+      mockElement.__ref.root = undefined
+
+      expect(() => {
+        registerFrameListener(mockElement)
+      }).toThrow('Root reference is invalid')
+    })
+
+    test('should throw error when ref.root.data is undefined', () => {
+      mockElement.__ref.root.data = undefined
+
+      expect(() => {
+        registerFrameListener(mockElement)
+      }).toThrow('Data are undefined')
+    })
+  })
+})

package/event/__tests__/store.test.js

@@ -0,0 +1,93 @@
+import eventRegistry from '../store'
+
+describe('eventRegistry', () => {
+  test('should have the correct initial structure', () => {
+    expect(eventRegistry).toEqual({
+      click: [],
+      render: []
+    })
+  })
+
+  test('should have empty arrays as initial values', () => {
+    expect(Array.isArray(eventRegistry.click)).toBe(true)
+    expect(Array.isArray(eventRegistry.render)).toBe(true)
+    expect(eventRegistry.click.length).toBe(0)
+    expect(eventRegistry.render.length).toBe(0)
+  })
+
+  test('should allow adding items to click array', () => {
+    // Arrange
+    const clickHandler = () => {}
+
+    // Act
+    eventRegistry.click.push(clickHandler)
+
+    // Assert
+    expect(eventRegistry.click).toContain(clickHandler)
+    expect(eventRegistry.click.length).toBe(1)
+
+    // Cleanup
+    eventRegistry.click.length = 0
+  })
+
+  test('should allow adding items to render array', () => {
+    // Arrange
+    const renderHandler = () => {}
+
+    // Act
+    eventRegistry.render.push(renderHandler)
+
+    // Assert
+    expect(eventRegistry.render).toContain(renderHandler)
+    expect(eventRegistry.render.length).toBe(1)
+
+    // Cleanup
+    eventRegistry.render.length = 0
+  })
+
+  test('should maintain separate arrays for different events', () => {
+    // Arrange
+    const clickHandler = () => {}
+    const renderHandler = () => {}
+
+    // Act
+    eventRegistry.click.push(clickHandler)
+    eventRegistry.render.push(renderHandler)
+
+    // Assert
+    expect(eventRegistry.click).toContain(clickHandler)
+    expect(eventRegistry.click).not.toContain(renderHandler)
+    expect(eventRegistry.render).toContain(renderHandler)
+    expect(eventRegistry.render).not.toContain(clickHandler)
+
+    // Cleanup
+    eventRegistry.click.length = 0
+    eventRegistry.render.length = 0
+  })
+
+  test('should allow array operations on event arrays', () => {
+    // Test various array operations
+    const handler1 = () => {}
+    const handler2 = () => {}
+
+    // Push
+    eventRegistry.click.push(handler1)
+    expect(eventRegistry.click).toContain(handler1)
+
+    // Push multiple
+    eventRegistry.click.push(handler2)
+    expect(eventRegistry.click).toEqual([handler1, handler2])
+
+    // Pop
+    const popped = eventRegistry.click.pop()
+    expect(popped).toBe(handler2)
+    expect(eventRegistry.click).toEqual([handler1])
+
+    // Cleanup
+    eventRegistry.click.length = 0
+  })
+
+  test('should have independent arrays', () => {
+    expect(eventRegistry.click).not.toBe(eventRegistry.render)
+  })
+})

package/event/__tests__/triggerEventOn.test.js

@@ -0,0 +1,195 @@
+import { jest } from '@jest/globals'
+import { triggerEventOn } from '../on'
+
+describe('triggerEventOn', () => {
+  let mockElement
+  let mockEventHandler
+  let mockOptions
+
+  beforeEach(() => {
+    mockEventHandler = jest.fn().mockReturnValue('eventResult')
+    mockOptions = { option1: 'value1' }
+
+    mockElement = {
+      state: { elementState: 'test' },
+      context: { elementContext: 'test' },
+      on: {},
+      props: {}
+    }
+  })
+
+  describe('event resolution', () => {
+    test('should trigger event from on property', () => {
+      // Arrange
+      mockElement.on.click = mockEventHandler
+
+      // Act
+      const result = triggerEventOn('click', mockElement, mockOptions)
+
+      // Assert
+      expect(result).toBe('eventResult')
+      expect(mockEventHandler).toHaveBeenCalledWith(
+        mockElement,
+        mockElement.state,
+        mockElement.context,
+        mockOptions
+      )
+    })
+
+    test('should trigger event from props using camelCase', () => {
+      // Arrange
+      mockElement.props.onClick = mockEventHandler
+
+      // Act
+      const result = triggerEventOn('click', mockElement, mockOptions)
+
+      // Assert
+      expect(result).toBe('eventResult')
+      expect(mockEventHandler).toHaveBeenCalledWith(
+        mockElement,
+        mockElement.state,
+        mockElement.context,
+        mockOptions
+      )
+    })
+
+    test('should prioritize on property over props', () => {
+      // Arrange
+      const onEventHandler = jest.fn().mockReturnValue('onResult')
+      const propsEventHandler = jest.fn().mockReturnValue('propsResult')
+
+      mockElement.on.click = onEventHandler
+      mockElement.props.onClick = propsEventHandler
+
+      // Act
+      const result = triggerEventOn('click', mockElement, mockOptions)
+
+      // Assert
+      expect(result).toBe('onResult')
+      expect(onEventHandler).toHaveBeenCalled()
+      expect(propsEventHandler).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('event parameters', () => {
+    test('should pass state and context correctly', () => {
+      // Arrange
+      mockElement.on.click = mockEventHandler
+      mockElement.state = { custom: 'state' }
+      mockElement.context = { custom: 'context' }
+
+      // Act
+      triggerEventOn('click', mockElement, mockOptions)
+
+      // Assert
+      expect(mockEventHandler).toHaveBeenCalledWith(
+        mockElement,
+        mockElement.state,
+        mockElement.context,
+        mockOptions
+      )
+    })
+
+    test('should handle missing state and context', () => {
+      // Arrange
+      mockElement = {
+        on: { click: mockEventHandler }
+      }
+
+      // Act
+      triggerEventOn('click', mockElement, mockOptions)
+
+      // Assert
+      expect(mockEventHandler).toHaveBeenCalledWith(
+        mockElement,
+        undefined,
+        undefined,
+        mockOptions
+      )
+    })
+
+    test('should handle missing options', () => {
+      // Arrange
+      mockElement.on.click = mockEventHandler
+
+      // Act
+      triggerEventOn('click', mockElement)
+
+      // Assert
+      expect(mockEventHandler).toHaveBeenCalledWith(
+        mockElement,
+        mockElement.state,
+        mockElement.context,
+        undefined
+      )
+    })
+  })
+
+  describe('event naming', () => {
+    test('should handle various event names correctly', () => {
+      const eventTests = [
+        { input: 'mouseenter', prop: 'onMouseenter' },
+        { input: 'mouseleave', prop: 'onMouseleave' },
+        { input: 'submit', prop: 'onSubmit' },
+        { input: 'change', prop: 'onChange' }
+      ]
+
+      for (const { input, prop } of eventTests) {
+        // Arrange
+        mockElement.props[prop] = mockEventHandler
+
+        // Act
+        triggerEventOn(input, mockElement, mockOptions)
+
+        // Assert
+        expect(mockEventHandler).toHaveBeenCalledWith(
+          mockElement,
+          mockElement.state,
+          mockElement.context,
+          mockOptions
+        )
+
+        // Reset for next test
+        mockElement.props[prop] = undefined
+        mockEventHandler.mockClear()
+      }
+    })
+  })
+
+  describe('edge cases', () => {
+    test('should return undefined when no event handler exists', () => {
+      // Act
+      const result = triggerEventOn('click', mockElement, mockOptions)
+
+      // Assert
+      expect(result).toBeUndefined()
+    })
+
+    test('should handle error thrown in event handler', () => {
+      // Arrange
+      const error = new Error('Event handler error')
+      mockElement.on.click = jest.fn(() => {
+        throw error
+      })
+
+      // Act & Assert
+      expect(() => triggerEventOn('click', mockElement, mockOptions)).toThrow(
+        'Event handler error'
+      )
+    })
+
+    test('should handle undefined element', () => {
+      // Assert
+      expect(() => triggerEventOn('click', undefined, mockOptions)).toThrow(
+        'Element is required'
+      )
+    })
+
+    test('should handle null element', () => {
+      // Assert
+      expect(() => triggerEventOn('click', null, mockOptions)).toThrow(
+        'Element is required'
+      )
+    })
+  })
+})