Unable to Access HTMLElement

Question

I have some code where I convert an HTML string to Document using DOM Parser. And then traverse the DOM to find an element depending on the class name.

helper.js

export function stringToHTML(htmlString) {
  const parser = new DOMParser();
  const doc = parser.parseFromString(htmlString, 'text/html');
  return doc.body; 
}

export function getTextBoxInfo(htmlContent) {
  const textBox = {
    element: null,
    index: null
  };

  htmlContent.getElementsByClassName('document-content')[0].children.forEach((ele, index) => {
    if (ele.getAttribute('class').includes('freetext')) {
      textBox.element = freeTextElement;
      textBox.index = index;
    }
  });

  return textBox;
}

helper.test.js

describe('The getTextBoxInfo function', () => {
    it('returns an object with text box element and its position', () => {
        const htmlString = `<div class="document-content">
            <div class="content" id="bfb53c88"> Heading </div>
            <div class="freetext" contenteditable="true"> Content </div>
        </div>`;
        const htmlContent = helper.stringToHTML(htmlString);

        const textBox = helper.getTextBoxInfo(htmlContent);
        expect(true).toBe(true);
    });
});

It works fine with the source code. Document converted by DOM Parser is,

Converted as Document

But the output is different during unit testing(JEST),

Converted differently

As a result the spec is failing with the below error,

TypeError: Cannot read property 'children' of undefined

at the line - htmlContent.getElementsByClassName('document-content')[0].children

and I am unable to write the tests.

Answer 1

Instead of forEach, use normal for-loop or for-of loop as you are getting children as HTMLCollection

const children = htmlContent.getElementsByClassName('document-content')[0].children;
    for (let item of children) {
        console.log(item);
    }

Reference - For loop for HTMLCollection elements