Тестирование javascript, которое обновляет DOM

Question

Я новичок в веб-тестировании и хотел бы узнать, как я могу проверить javascript, который читает и обновляет DOM.

function otherFunction(string) {
// do some processing and return processed data
}

function domUpdater() {
  var string = document.getElementById("input").value;
  document.getElementById("output").innerHTML = otherFunction(string);
}

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

expect(otherFunction("input1")).to.be("expected1");
expect(otherFunction("input2")).to.be("expected2");

Мне не ясно, как я могу проверить функцию domUpdater, которая модифицирует DOM?

Answer 1

Я обычно использую jsdom, и в моем случае, так как я использую мокко, это выглядело бы так (используя jsdom-mocha ):

var jsdom = require('mocha-jsdom')
var expect = require('chai').expect

describe('mocha tests', function () {

  jsdom()

  it('has document', function () {
    var div = document.createElement('div')
    expect(div.nodeName).eql('DIV')
  })

})

Однако, если вы могу себе это позволить (тесты, как правило, занимают немного больше времени), я бы порекомендовал изучить запуск ваших тестов в браузере без головы, используя что-то вроде Puppeteer .

Быстрый поиск в Google дал это для как запустить jest с кукловодом :

1. Первая установка jest-puppeteer

yarn add --dev jest-puppeteer

Укажите пресет в конфигурации Jest:

{
 "preset": "jest-puppeteer"
}

Напишите свой тест

describe('Google', () => {
  beforeAll(async () => {
    await page.goto('https://google.com');
  });

  it('should be titled "Google"', async () => {
    await expect(page.title()).resolves.toMatch('Google');
  });
});