@domql/element 3.4.5 → 3.4.9

package/render/__tests__/cacheNode.test.js

@@ -0,0 +1,168 @@
+import { jest } from '@jest/globals'
+import { cacheNode } from '../cache'
+
+describe('cacheNode', () => {
+  // Setup mock window and document for each test
+  let mockNode
+  let mockTextNode
+  let mockFragmentNode
+  let mockSvgNode
+
+  beforeEach(() => {
+    mockNode = {
+      cloneNode: jest.fn().mockReturnThis()
+    }
+    mockTextNode = {
+      cloneNode: jest.fn().mockReturnThis(),
+      nodeValue: null
+    }
+    mockFragmentNode = {
+      cloneNode: jest.fn().mockReturnThis()
+    }
+    mockSvgNode = {
+      cloneNode: jest.fn().mockReturnThis()
+    }
+
+    global.window = {
+      nodeCaches: {}
+    }
+    global.document = {
+      createElement: jest.fn().mockReturnValue(mockNode),
+      createTextNode: jest.fn().mockReturnValue(mockTextNode),
+      createDocumentFragment: jest.fn().mockReturnValue(mockFragmentNode),
+      createElementNS: jest.fn().mockReturnValue(mockSvgNode)
+    }
+  })
+
+  test('should return cached node for div element', () => {
+    const element = {
+      tag: 'div',
+      context: {
+        window,
+        document
+      }
+    }
+    const result = cacheNode(element)
+    expect(result).toBeTruthy()
+  })
+
+  test('should return text node for string element', () => {
+    const element = {
+      tag: 'string',
+      text: 'Hello World',
+      context: {
+        window,
+        document
+      }
+    }
+    const result = cacheNode(element)
+    expect(result).toBeTruthy()
+  })
+
+  test('should return fragment node', () => {
+    const element = {
+      tag: 'fragment',
+      context: {
+        window,
+        document
+      }
+    }
+    const result = cacheNode(element)
+    expect(result).toBeTruthy()
+  })
+
+  test('should return svg node', () => {
+    const element = {
+      tag: 'svg',
+      context: {
+        window,
+        document
+      }
+    }
+    const result = cacheNode(element)
+    expect(result).toBeTruthy()
+  })
+
+  test('should return path node', () => {
+    const element = {
+      tag: 'path',
+      context: {
+        window,
+        document
+      }
+    }
+    const result = cacheNode(element)
+    expect(result).toBeTruthy()
+  })
+
+  test('should reuse cached node for same tag', () => {
+    const element = {
+      tag: 'span',
+      context: {
+        window,
+        document
+      }
+    }
+    const firstResult = cacheNode(element)
+    const secondResult = cacheNode(element)
+    expect(firstResult).toBeTruthy()
+    expect(secondResult).toBeTruthy()
+  })
+
+  test('should set nodeValue for string elements', () => {
+    const element = {
+      tag: 'string',
+      text: 'Test Text',
+      context: {
+        window,
+        document
+      }
+    }
+    const result = cacheNode(element)
+    expect(result).toBeTruthy()
+  })
+
+  test('should use window from context if provided', () => {
+    const customWindow = { nodeCaches: {} }
+    const element = {
+      tag: 'div',
+      context: {
+        window: customWindow,
+        document
+      }
+    }
+    const result = cacheNode(element)
+    expect(result).toBeTruthy()
+  })
+
+  test('should use document from context if provided', () => {
+    const customDocument = {
+      createElement: jest.fn().mockReturnValue(mockNode),
+      createTextNode: jest.fn().mockReturnValue(mockTextNode),
+      createDocumentFragment: jest.fn().mockReturnValue(mockFragmentNode),
+      createElementNS: jest.fn().mockReturnValue(mockSvgNode)
+    }
+    const element = {
+      tag: 'div',
+      context: {
+        window,
+        document: customDocument
+      }
+    }
+    const result = cacheNode(element)
+    expect(result).toBeTruthy()
+  })
+
+  test('should initialize nodeCaches if not present', () => {
+    global.window = {}
+    const element = {
+      tag: 'div',
+      context: {
+        window,
+        document
+      }
+    }
+    const result = cacheNode(element)
+    expect(result).toBeTruthy()
+  })
+})

package/render/__tests__/createHTMLNode.test.js

@@ -0,0 +1,118 @@
+import { createHTMLNode } from '../cache'
+
+describe('createHTMLNode', () => {
+  let element
+  let mockDocument
+  let mockDocumentFragment
+  let mockTextNode
+  let mockSvgElement
+  let mockDivElement
+
+  beforeEach(() => {
+    // Setup mock document
+    mockTextNode = document.createTextNode('')
+    mockDocumentFragment = document.createDocumentFragment()
+    mockSvgElement = document.createElementNS(
+      'http://www.w3.org/2000/svg',
+      'svg'
+    )
+    mockDivElement = document.createElement('div')
+
+    mockDocument = {
+      createTextNode: () => mockTextNode,
+      createDocumentFragment: () => mockDocumentFragment,
+      createElementNS: () => mockSvgElement,
+      createElement: () => mockDivElement
+    }
+
+    // Reset element before each test
+    element = {
+      context: {
+        document: mockDocument
+      }
+    }
+  })
+
+  test('should create text node when tag is string', () => {
+    element.tag = 'string'
+    element.text = 'Hello World'
+
+    const result = createHTMLNode(element)
+
+    expect(result.nodeType).toBe(Node.TEXT_NODE)
+    expect(result.textContent).toBe('')
+  })
+
+  test('should create document fragment when tag is fragment', () => {
+    element.tag = 'fragment'
+
+    const result = createHTMLNode(element)
+
+    expect(result.nodeType).toBe(Node.DOCUMENT_FRAGMENT_NODE)
+  })
+
+  test('should create SVG element when tag is svg', () => {
+    element.tag = 'svg'
+
+    const result = createHTMLNode(element)
+
+    expect(result.nodeType).toBe(Node.ELEMENT_NODE)
+    expect(result.namespaceURI).toBe('http://www.w3.org/2000/svg')
+    expect(result.tagName.toLowerCase()).toBe('svg')
+  })
+
+  test('should create SVG path element when tag is path', () => {
+    element.tag = 'svg'
+
+    const result = createHTMLNode(element)
+
+    expect(result.nodeType).toBe(Node.ELEMENT_NODE)
+    expect(result.namespaceURI).toBe('http://www.w3.org/2000/svg')
+    expect(result.tagName.toLowerCase()).toBe('svg')
+  })
+
+  test('should create regular HTML element for standard HTML tags', () => {
+    element.tag = 'div'
+
+    const result = createHTMLNode(element)
+
+    expect(result.nodeType).toBe(Node.ELEMENT_NODE)
+    expect(result.tagName.toLowerCase()).toBe('div')
+  })
+
+  test('should create div element when no tag is provided', () => {
+    delete element.tag
+
+    const result = createHTMLNode(element)
+
+    expect(result.nodeType).toBe(Node.ELEMENT_NODE)
+    expect(result.tagName.toLowerCase()).toBe('div')
+  })
+
+  test('should use document from context if provided', () => {
+    const customDoc = {
+      createElement: () => {
+        const el = document.createElement('custom')
+        el.setAttribute('from-custom-doc', 'true')
+        return el
+      }
+    }
+
+    element.context.document = customDoc
+    element.tag = 'div'
+
+    const result = createHTMLNode(element)
+
+    expect(result.getAttribute('from-custom-doc')).toBe('true')
+  })
+
+  test('should fallback to global document if context.document is not provided', () => {
+    delete element.context.document
+    element.tag = 'div'
+
+    const result = createHTMLNode(element)
+
+    expect(result.nodeType).toBe(Node.ELEMENT_NODE)
+    expect(result.tagName.toLowerCase()).toBe('div')
+  })
+})

package/render/__tests__/createNode.test.js

@@ -0,0 +1,9 @@
+import { createNode } from '../create'
+
+describe('createNode', () => {
+  test('should return a value when element is provided', () => {
+    const element = {}
+    const result = createNode(element)
+    expect(result).toBe(undefined)
+  })
+})

package/render/__tests__/detectTag.test.js

@@ -0,0 +1,99 @@
+import { detectTag } from '../cache'
+
+describe('detectTag', () => {
+  test('should return tag from props.tag if it is a valid HTML tag', () => {
+    const element = {
+      tag: 'something',
+      key: 'key',
+      props: {
+        tag: 'div'
+      }
+    }
+    expect(detectTag(element)).toBe('div')
+  })
+
+  test('should return tag if it is a valid HTML tag string', () => {
+    const element = {
+      tag: 'span',
+      key: 'key',
+      props: {}
+    }
+    expect(detectTag(element)).toBe('span')
+  })
+
+  test('should return key as tag if tag is true', () => {
+    const element = {
+      tag: true,
+      key: 'div',
+      props: {}
+    }
+    expect(detectTag(element)).toBe('div')
+  })
+
+  test('should return div as default when no valid tag is found', () => {
+    const element = {
+      tag: 'invalid',
+      key: 'invalid',
+      props: {}
+    }
+    expect(detectTag(element)).toBe('div')
+  })
+
+  test('should handle function as tag', () => {
+    const element = {
+      tag: () => 'section',
+      key: 'key',
+      props: {}
+    }
+    expect(detectTag(element)).toBe('section')
+  })
+
+  test('should parse key with dots and return valid HTML tag', () => {
+    const element = {
+      tag: null,
+      key: 'span.className',
+      props: {}
+    }
+    expect(detectTag(element)).toBe('span')
+  })
+
+  test('should parse key with underscore and return valid HTML tag', () => {
+    const element = {
+      tag: null,
+      key: 'div_identifier',
+      props: {}
+    }
+    expect(detectTag(element)).toBe('div')
+  })
+
+  test('should handle null props', () => {
+    const element = {
+      tag: 'p',
+      key: 'key',
+      props: null
+    }
+    expect(detectTag(element)).toBe('p')
+  })
+
+  test('should handle props.tag that is not a valid HTML tag', () => {
+    const element = {
+      tag: 'div',
+      key: 'key',
+      props: {
+        tag: 'invalid-tag'
+      }
+    }
+    expect(detectTag(element)).toBe('div')
+  })
+
+  test('should handle complex nested case', () => {
+    const element = {
+      tag: null,
+      key: 'invalid.something_else',
+      props: {
+        tag: 'article'
+      }
+    }
+    expect(detectTag(element)).toBe('article')
+  })
+})

package/render/__tests__/index.test.js

@@ -0,0 +1,56 @@
+import * as moduleExports from '../index'
+import * as createExports from '../create'
+import * as cacheExports from '../cache'
+import * as appendExports from '../append'
+
+describe('Module exports', () => {
+  test('should export all items from create.js', () => {
+    Object.keys(createExports).forEach(key => {
+      expect(moduleExports[key]).toBeDefined()
+    })
+  })
+
+  test('should export all items from cache.js', () => {
+    Object.keys(cacheExports).forEach(key => {
+      expect(moduleExports[key]).toBeDefined()
+    })
+  })
+
+  test('should export all items from append.js', () => {
+    Object.keys(appendExports).forEach(key => {
+      expect(moduleExports[key]).toBeDefined()
+    })
+  })
+
+  test('should have no duplicate exports', () => {
+    const allExportKeys = [
+      ...Object.keys(createExports),
+      ...Object.keys(cacheExports),
+      ...Object.keys(appendExports)
+    ]
+    const uniqueKeys = new Set(allExportKeys)
+    expect(allExportKeys.length).toBe(uniqueKeys.size)
+  })
+
+  test('should export same values as original modules', () => {
+    Object.entries(createExports).forEach(([key, value]) => {
+      expect(moduleExports[key]).toBe(value)
+    })
+
+    Object.entries(cacheExports).forEach(([key, value]) => {
+      expect(moduleExports[key]).toBe(value)
+    })
+
+    Object.entries(appendExports).forEach(([key, value]) => {
+      expect(moduleExports[key]).toBe(value)
+    })
+  })
+
+  test('should have all exports defined', () => {
+    const moduleExportKeys = Object.keys(moduleExports)
+    expect(moduleExportKeys.length).toBeGreaterThan(0)
+    moduleExportKeys.forEach(key => {
+      expect(moduleExports[key]).toBeDefined()
+    })
+  })
+})

package/render/__tests__/insertNodeAfter.test.js

@@ -0,0 +1,111 @@
+import { insertNodeAfter } from '../append'
+import { jest } from '@jest/globals'
+
+describe('insertNodeAfter', () => {
+  let parentNode
+  let siblingNode
+  let newNode
+
+  beforeEach(() => {
+    // Setup fresh DOM elements before each test
+    parentNode = document.createElement('div')
+    siblingNode = document.createElement('span')
+    newNode = document.createElement('p')
+
+    // Add sibling to parent for initial setup
+    parentNode.appendChild(siblingNode)
+  })
+
+  test('should throw error when node is null', () => {
+    expect(() => {
+      insertNodeAfter(null, siblingNode, parentNode)
+    }).toThrow('Node is required')
+
+    // Verify DOM wasn't modified
+    expect(parentNode.children).toHaveLength(1)
+    expect(parentNode.firstChild).toBe(siblingNode)
+  })
+
+  test('should insert node after sibling when there is a next sibling', () => {
+    // Arrange
+    const nextSibling = document.createElement('div')
+    parentNode.appendChild(nextSibling)
+
+    // Act
+    insertNodeAfter(newNode, siblingNode, parentNode)
+
+    // Assert
+    expect(parentNode.children).toHaveLength(3)
+    expect(siblingNode.nextSibling).toBe(newNode)
+    expect(newNode.nextSibling).toBe(nextSibling)
+    expect(newNode.previousSibling).toBe(siblingNode)
+  })
+
+  test('should insert node after sibling using insertAdjacentElement', () => {
+    // Mock insertAdjacentElement
+    const insertAdjacentElementMock = jest.fn()
+    siblingNode.insertAdjacentElement = insertAdjacentElementMock
+
+    // Act
+    insertNodeAfter(newNode, siblingNode, parentNode)
+
+    // Assert
+    expect(insertAdjacentElementMock).toHaveBeenCalledWith('afterend', newNode)
+  })
+
+  test('should insert node after sibling when no next sibling exists', () => {
+    // Act
+    insertNodeAfter(newNode, siblingNode, parentNode)
+
+    // Assert
+    expect(parentNode.children).toHaveLength(2)
+    expect(siblingNode.nextSibling).toBe(newNode)
+    expect(newNode.previousSibling).toBe(siblingNode)
+    expect(newNode.nextSibling).toBeNull()
+  })
+
+  test('should insert node after sibling using implicit parent', () => {
+    // Act
+    insertNodeAfter(newNode, siblingNode)
+
+    // Assert
+    expect(parentNode.children).toHaveLength(2)
+    expect(siblingNode.nextSibling).toBe(newNode)
+    expect(newNode.previousSibling).toBe(siblingNode)
+  })
+
+  test('should handle null sibling', () => {
+    // Act & Assert
+    expect(() => {
+      insertNodeAfter(newNode, null, parentNode)
+    }).not.toThrow()
+
+    // Verify no changes were made to the parent
+    expect(parentNode.children).toHaveLength(2)
+  })
+
+  test('should handle case when parent and sibling parent are both null', () => {
+    const standaloneNode = document.createElement('div')
+
+    // Act & Assert
+    expect(() => {
+      insertNodeAfter(newNode, standaloneNode, null)
+    }).not.toThrow()
+
+    expect(standaloneNode.nextSibling).toBeNull()
+    expect(standaloneNode.parentNode).toBeNull()
+  })
+
+  test('should handle sibling without insertAdjacentElement', () => {
+    // Create a minimal sibling without insertAdjacentElement
+    const customSibling = document.createElement('div')
+    delete customSibling.insertAdjacentElement
+
+    // Act
+    insertNodeAfter(newNode, customSibling, parentNode)
+
+    // Assert
+    expect(parentNode.children).toHaveLength(1)
+    expect(customSibling.nextSibling).toBe(null)
+  })
+})

package/render/__tests__/insertNodeBefore.test.js

@@ -0,0 +1,65 @@
+import { insertNodeBefore } from '../append'
+
+describe('insertNodeBefore', () => {
+  let parentNode
+  let siblingNode
+  let newNode
+
+  beforeEach(() => {
+    // Setup fresh DOM elements before each test
+    parentNode = document.createElement('div')
+    siblingNode = document.createElement('span')
+    newNode = document.createElement('p')
+
+    // Add sibling to parent for initial setup
+    parentNode.appendChild(siblingNode)
+  })
+
+  test('should insert node before sibling with explicit parent', () => {
+    insertNodeBefore(newNode, siblingNode, parentNode)
+
+    expect(parentNode.children).toHaveLength(2)
+    expect(parentNode.firstChild).toBe(newNode)
+    expect(newNode.nextSibling).toBe(siblingNode)
+  })
+
+  test('should insert node before sibling using implicit parent', () => {
+    // Not passing parent parameter, using sibling's parent
+    insertNodeBefore(newNode, siblingNode)
+
+    expect(parentNode.children).toHaveLength(2)
+    expect(parentNode.firstChild).toBe(newNode)
+    expect(newNode.nextSibling).toBe(siblingNode)
+  })
+
+  test('should handle case when parent is null', () => {
+    const standaloneNode = document.createElement('div')
+    // Passing null as parent
+    insertNodeBefore(newNode, standaloneNode, null)
+
+    expect(standaloneNode.previousSibling).toBeNull()
+    expect(standaloneNode.parentNode).toBeNull()
+  })
+
+  test('should handle case when sibling has no parent', () => {
+    const standaloneNode = document.createElement('div')
+    insertNodeBefore(newNode, standaloneNode)
+
+    expect(standaloneNode.previousSibling).toBeNull()
+    expect(standaloneNode.parentNode).toBeNull()
+  })
+
+  test('should throw error when node is null', () => {
+    // Arrange
+    const errorMessage = 'Node is required'
+
+    // Act & Assert
+    expect(() => {
+      insertNodeBefore(null, siblingNode, parentNode)
+    }).toThrow(errorMessage)
+
+    // Verify the DOM wasn't modified
+    expect(parentNode.children).toHaveLength(1)
+    expect(parentNode.firstChild).toBe(siblingNode)
+  })
+})

package/render/append.js

@@ -0,0 +1,61 @@
+'use strict'
+
+/**
+ * Receives child and parent nodes as parametes
+ * and assigns them into real DOM tree
+ */
+export const appendNode = (node, parentNode) => {
+  try {
+    parentNode.appendChild(node)
+    return node
+  } catch (e) {
+    console.error('Does not support to append', parentNode, node)
+  }
+}
+
+//q23
+export const insertNodeAfter = (node, siblingNode, parentNode) => {
+  if (!node) {
+    throw new Error('Node is required')
+  }
+  const parent = parentNode || siblingNode?.parentNode
+  if (siblingNode?.nextSibling) {
+    parent?.insertBefore(node, siblingNode.nextSibling)
+  } else if (siblingNode?.insertAdjacentElement) {
+    siblingNode.insertAdjacentElement('afterend', node)
+  } else {
+    parent?.insertBefore(node, siblingNode)
+  }
+}
+
+export const insertNodeBefore = (node, siblingNode, parentNode) => {
+  if (!node) {
+    throw new Error('Node is required')
+  }
+  const parent = parentNode || siblingNode.parentNode
+  parent?.insertBefore(node, siblingNode)
+}
+
+/**
+ * Receives elements and assigns the first
+ * parameter as a child of the second one
+ */
+export const assignNode = (element, parent, key, attachOptions) => {
+  if (!element) {
+    throw new Error('Element is required')
+  }
+  if (!parent) {
+    throw new Error('Parent is required')
+  }
+  parent[key || element.key] = element
+  if (element.tag !== 'shadow') {
+    if (attachOptions && attachOptions.position) {
+      ;(attachOptions.position === 'before'
+        ? insertNodeBefore
+        : insertNodeAfter)(element.node, attachOptions.node || parent.node)
+    } else {
+      appendNode(element.node, parent.node, element)
+    }
+  }
+  return element
+}