Как выполнить модульный тест HTML, отображаемый из JSON?

Question

У меня возникли небольшие проблемы с определением того, как выполнить UNIT-тестирование с JEST и vanilla JS, так как nothign действительно подключается к сети.

Я вызываю конечную точку API и затем отображаю эти данные как HTML - наборUL / LI и подменю, если есть подменю.

Как бы вы разбили эту функцию на модульное тестирование - я даже не совсем уверен, с чего начать

Здесьэто данные

   "items":[
      {
         "label":"Work",
         "url":"#/work",
         "items":[
         ]
      },
      {
         "label":"About",
         "url":"#/about",
         "items":[
            {
               "label":"What we do",
               "url":"#/about/what-we-do"
            },
            {
               "label":"How we work",
               "url":"#/about/how-we-work"
            },
            {
               "label":"Leadership",
               "url":"#/about/leadership"
            }
         ]
      },
      {
         "label":"foo",
         "url":"#/foo",
         "items":[
            {
               "label":"Client Services",
               "url":"#/foo/client"
            },
            {
               "label":"Creative",
               "url":"#/foo/creative"
            },
            {
               "label":"Motion & Media",
               "url":"#/foo/motion"
            }


         ]
      }

   ]
}

Вот функция, которую я вызываю для создания элементов DOM. Она немного грязная, но по сути создает теги привязки и Ul / Li.

  createNavigationMenu: function (data) {
    return data.map((item) => {
      const listElement = document.createElement('li');
      const listElementAnchor = document.createElement('a');
      const subMenuContainer = document.createElement('ul');
      const chevron = document.createElement('span');

      listElementAnchor.setAttribute("href", `${item.url}`);
      listElementAnchor.setAttribute("class", 'navigation__primary-menu-anchor');
      listElementAnchor.innerHTML = item.label;

      listElement.setAttribute("class", "navigation__primary-menu-item");
      listElement.appendChild(listElementAnchor);
      this.navigationContainer.append(listElement);

      subMenuContainer.setAttribute("class", "navigation__submenu");
      item.items.length ? listElement.append(subMenuContainer) : null
      chevron.setAttribute("class", "arrow");
      item.items.length ? listElementAnchor.append(chevron) : null

      return item.items.map(submenuItem => {
        const subMenuContainerItem = document.createElement('li');
        const subMenuContainerItemAnchor = document.createElement('a');
        subMenuContainerItemAnchor.setAttribute("href", `/${submenuItem.url}`);
        subMenuContainerItemAnchor.setAttribute("class", 'navigation__submenu-menu-anchor');
        subMenuContainerItemAnchor.innerHTML = submenuItem.label;
        subMenuContainerItem.setAttribute("class", "navigation__submenu-menu-item");

        subMenuContainerItem.append(subMenuContainerItemAnchor)
        listElement.append(subMenuContainer);
        subMenuContainer.append(subMenuContainerItem)

      })
    })
  }

Я пробовал это с JSDOM, но, похоже, не работает

const data = {
  "items": [
    {
      "label": "Work",
      "url": "#/work",
      "items": [
      ]
    }
  ]
}
const markup = `<ul id="navigation__primary-menu" class="navigation__primary-menu">
  <li>
    <h1 class="navigation__primary-logo">HUGE </h1> <span id="iconSpan" class="saved"> </span>
  </li>
  <li class="navigation__primary-list-item"></li>
  <li class="navigation__primary-menu-item"><a href="#/work" class="navigation__primary-menu-anchor">Work</a></li>
</ul>`


describe('should map data correctly', () => {
  test('markup entered', () => {
    const { windpw } = new JSDOM(markup);
    const nav = Controller.createNavigationMenu(data)
    expect(dom.serialize()).toMatch(nav)

  });
});

Answer 1

Этот ответ только для ознакомления.Он не будет «просто работать».

Ваш запрос сложный - тесты обычно пишутся в Node (на стороне сервера), а вы говорите об использовании документа и DOM (на стороне клиента).

Я бы предложил посмотреть https://github.com/jsdom/jsdom, который позволяет вам эмулировать документ в Node.

Затем из их документов что-то вроде:

const dom = new JSDOM();

и обновитьваш генератор выглядит следующим образом:

createNavigationMenu: function (data, dom) { //pass in your dom object here
  return data.map((item) => {
    const listElement = dom.createElement('li');
    .... //replace all documents with dom

Передавайте свой специальный dom в функцию генератора при выполнении тестов и передавайте настоящий документ в другое время.

Наконец, в вашем тесте (на примере шутки)):

describe('dom test', () => {
  it('should render like this', () => {
    expect(dom.serialize()).toMatchSnapshot()
  }
}

Кроме того, манипуляции с DOM обычно необходимы только в наше время, если вы пытаетесь быть очень умным.Я настоятельно рекомендую (если вы еще не рассматривали это) попытаться использовать структуру, которая значительно облегчит вашу жизнь.Я использую React, который также поставляется с дополнительным бонусом тестирующих фреймворков, которые позволяют вам тестировать рендеринг.Другие рамки доступны.