How do I make fun of dom elements when using mocha javascript?

Question

I use mocha to test JavaScript code. The code includes html and css and implements a chat application. As I understand it, Mocha can test JavaScript functions by matching the expected value with the return value of the function.

But what if I want to test functions that do not return a value? Functions that mainly relate to DOM elements. (For example, adding an image).

How exactly can I make fun of the DOM elements in mocha and then check if the functions succeed in generating the corresponding DOM elements?

I looked around and found that this is possible with selenium webdriver and jsdom. Is it possible to run this test only with Mocha and other additional interfaces?

Answer 1

JSDOM is convenient because it allows you to test the "real" DOM ​​implementation without the overhead in a web browser.

If you can run unit tests inside the browser , you can argue against the DOM in the same way:

describe("the super special button", () => {

  it("adds an image", (done) => {
    const button = document.querySelector(".js-super-special");
    button.click();

    // give the browser a chance to update the DOM
    setTimeout(() => {
      const image = document.querySelector(".js-image")

      // using assertion library, like chai
      expect(image).to.not.beNull();

      // or using a port of Node `assert` from a bundler like browserify:
      assert(image != null);

      done();
    })
  })
});