als-document/browser-tests/node.js

A powerful HTML parser & DOM manipulation library for both backend and frontend.

describe('Constructor and Basic Properties', () => {

   it('Creates an element', () => {
      const node = new Node('div');
      assert(node instanceof Node, "Element was not created correctly");
   });

   it('Checks the setting of element properties: tagName, attributes, parent, etc.', () => {
      const rootNode = new Node('ROOT');
      const divNode = new Node('div', { class: 'container' }, rootNode);

      assert(divNode.tagName.toLowerCase().toLowerCase() === 'div', "Tag name is correct");
      assert(divNode.attributes.class === 'container', "Attributes are correct");
      assert(divNode.parent === rootNode, "Parent node is correct");
   });

   it('Adds a new element to the parent\'s childNodes', () => {
      const rootNode = new Node('ROOT');
      const childNode = new Node('child', {}, rootNode);

      assert(rootNode.childNodes.includes(childNode), "New element was added to parent's childNodes");
   });

});

describe('DOM Search and Navigation', () => {

   it('Gets the previous and next element', () => {
      const rootNode = new Node('ROOT');
      const div1 = new Node('div', {}, rootNode);
      const div2 = new Node('div', {}, rootNode);

      assert(div2.previousElementSibling === div1, "Previous sibling is correct");
      assert(div2.nextElementSibling === null, "Next sibling is correct");
   });

   it('Gets the list of ancestors', () => {
      const rootNode = new Node('ROOT');
      const firstLevel = new Node('first', {}, rootNode);
      const secondLevel = new Node('second', {}, firstLevel);
      const thirdLevel = new Node('third', {}, secondLevel);

      const ancestors = thirdLevel.ancestors;

      assert(ancestors.length === 2, "The number of ancestors is correct");
      assert(ancestors[0] === firstLevel, "First ancestor is correct");
      assert(ancestors[1] === secondLevel, "Second ancestor is correct");
   });

   it('Searches for elements using different methods', () => {
      const rootNode = new Node('ROOT');
      const div1 = new Node('div', { class: 'test', id: 'first' }, rootNode);
      const div2 = new Node('div', { class: 'test' }, rootNode);
      const p = new Node('p', {}, rootNode);

      const divs = rootNode.getElementsByTagName('div');
      assert(divs.length === 2, "getElementsByTagName did find correct number of divs");

      const testClassNodes = rootNode.getElementsByClassName('test');
      assert(testClassNodes.length === 2, "getElementsByClassName did find correct number of .test elements");

      const firstDiv = rootNode.getElementById('first');
      assert(firstDiv === div1, "getElementById did find the correct element");

      const firstQuery = rootNode.querySelector('.test');
      assert(firstQuery === div1, "querySelector did return the first matching element");

      const allQuery = rootNode.querySelectorAll('.test');
      assert(allQuery.length === 2 && allQuery[0] === div1 && allQuery[1] === div2, "querySelectorAll did not find all matching elements");
   });
});

describe('Attribute Operations', () => {

   it('Gets, sets, and removes attributes', () => {
      const attrNode = new Node('div');
      attrNode.setAttribute('data-test', 'testValue');

      assert(attrNode.getAttribute('data-test') === 'testValue', "getAttribute/setAttribute is correct");

      attrNode.removeAttribute('data-test');
      assert(!attrNode.getAttribute('data-test'), "removeAttribute is correct");
   });

   it('Handles classList', () => {
      const nodeWithClasses = new Node('div', { class: 'class1 class2' });
      // Assertion to check if classList contains the right classes
      assert(nodeWithClasses.classList.contains('class1'), "The classList contain 'class1'");
      assert(nodeWithClasses.classList.contains('class2'), "The classList contain 'class2'");
   
      // Modifying classList and checking
      nodeWithClasses.classList.add('class3');
      assert(nodeWithClasses.classList.contains('class3'), "The classList contain 'class3' after addition");
   
      nodeWithClasses.classList.remove('class1');
      assert(!nodeWithClasses.classList.contains('class1'), "The classList doesn't contains 'class1' after removal");
   });
   
   it('Handles style', () => {
      const nodeWithStyle = new Node('div', { style: 'color: red; font-size: 16px;' });
      // Assertions to check if style is correctly set
      assert(nodeWithStyle.style.color === 'red', "The style property color is correctly set or retrieved");
      assert(nodeWithStyle.style.fontSize === '16px', "The style property fontSize is correctly set or retrieved");
   });

});

describe('Content Manipulation', () => {

   it('Adds and removes child elements', () => {
      const rootNode = new Node('ROOT');
      const childNode = new Node('child');
      rootNode.appendChild(childNode);

      assert(rootNode.childNodes.includes(childNode), "Child node was added");

      childNode.remove();
      assert(!rootNode.childNodes.includes(childNode), "Child node was removed");
   });


   it('Inserts content adjacent to an element', () => {
      const rootNode = new Node('div');
      const childNode = new Node('p', {}, rootNode);

      childNode.insertAdjacentElement('beforebegin', new Node('span'));
      expect(rootNode.childNodes[0].tagName.toLowerCase()).equalTo('span');
      
      childNode.insertAdjacentElement('afterend', new Node('a'));
      expect(rootNode.childNodes[2].tagName.toLowerCase()).equalTo('a');
      
      childNode.insertAdjacentHTML('beforebegin', '<strong></strong>');
      expect(rootNode.childNodes[1].tagName.toLowerCase()).equalTo('strong');

      childNode.insertAdjacentText('afterend', 'Some text');
      expect(typeof rootNode.childNodes[3].nodeValue).equalTo('string');
      expect(rootNode.childNodes[3].nodeValue).equalTo('Some text');
   });

   it('Gets and sets innerHTML and outerHTML', () => {
      const rootNode = new Node('div');
      new Node('p', {id: 'test'}, rootNode);
      
      expect(rootNode.innerHTML).equalTo('<p id="test"></p>');
      
      const newNode = new Node('span');
      newNode.innerHTML = '<a href="#">Link</a>';
      expect(newNode.childNodes[0].tagName.toLowerCase()).equalTo('a');

      newNode.childNodes[0].outerHTML = '<div><strong>New content</strong></div>';
      expect(newNode.childNodes[0].childNodes[0].tagName.toLowerCase()).equalTo('strong');
   });

   it('Works with text content', () => {
      const rootNode = new Node('div');
      new Node('p', {}, rootNode).textContent = 'Hello World';
      
      expect(rootNode.textContent).equalTo('Hello World');
      rootNode.textContent = 'Changed Text';
      expect(rootNode.textContent).equalTo('Changed Text');
      expect(rootNode.childNodes.length).equalTo(1);
      expect(rootNode.childNodes[0]).equalTo('Changed Text');
   });

});

describe('Other Methods and Properties', () => {

   it('Gets the list of child elements', () => {
      const rootNode = new Node('div');
   
      // Добавление дочерних элементов
      new Node('p', {}, rootNode);
      new Node('span', {}, rootNode);
      new Node('a', {}, rootNode);
     
      rootNode.appendChild('Some text'); // Добавляем текстовый узел
   
      // Проверяем, что у корневого элемента теперь 4 дочерних узла (3 элемента + 1 текстовый узел)
      expect(rootNode.childNodes.length).equalTo(4);
   
      // Проверяем свойство children
      expect(rootNode.children.length).equalTo(3);
      expect(rootNode.children[0].tagName.toLowerCase()).equalTo('p');
      expect(rootNode.children[1].tagName.toLowerCase()).equalTo('span');
      expect(rootNode.children[2].tagName.toLowerCase()).equalTo('a');
   });
   
   it('Gets the parent element', () => {
      const rootNode = new Node('ROOT');
      const childNode = new Node('child', {}, rootNode);

      assert(childNode.parentNode === rootNode, "Parent node is correct");
   });

});