Using Chai to test value of HTML element

chai expect
expect fail chai
chai js
mocha chai interview questions
chai assert
chai compare dates
use chai in browser
chai-dom document is not defined

I'm learning Mocha and Chai and am trying to write a test to check the value of the H1 tag on a page. I have the test below which attempts to do this in three of ways:

const expect  = require('chai').expect;
const assert = require('chai').assert;
const request = require('request');
const chaiHttp = require('chai-http');
const app = require('../../app');
const chai = require('chai');
chai.use(require('chai-dom'));
chai.use(chaiHttp);

//first attempt
describe('Story Homepage', function(){
  it('Should have an H1 of My Home Page', function(){
  chai.request(app)
  .get('/', function (){
     expect(document.querySelector('h1')).should.have.text('My Home Page');
     });
  })
});

//second attempt
describe('Story Page Tests', function () {
it('Homepage H1 is My Home Page', function(done) { 
    chai.request(app)
    .get('/', function(done){
      expect(document.querySelector('h1').should.have.text('My Home Page'));
      done(); 
    })
  });
});


//third attempt
describe('Story Page Tests', function () {
  it('Homepage H1 is My Home Page', function(done) { 
      chai.request(app)
      .get('/')
      .end(function(err, res) {
        expect(document.querySelector('h1').should.have.text('My Home Page'));
      done();                               
    });
  });
});

I've attempted to use the chai-dom extension in the way described here https://github.com/nathanboktae/chai-dom#texttext to do this. However: The first test passes but should not pass (the on the page is not the same as asserted by the test)

The second of the tests reports an error Error: Timeout of 15000ms exceeded. For async tests and hooks, ensure "done()" is called; if returning a Promise, ensure it resolves. but I think that I am using done correctly above.

The third test reports an error Uncaught ReferenceError: document is not defined which seems logical but I'm not really sure how to resolve it.

Does anyone offer advice on how to do this correctly?

Your 3rd attempt is written correctly from an asynchronous mocha test perspective, but you have a fundamental issue in that you are running your tests in Node.js as I can tell, and you are writing an assertion code as if it were in the browser.

If you are doing an HTTP request from node and getting back an HTML response, there is no browser in the picture at all, which means no DOM API and no document object thus your document is not defined error.

If you want to do unit testing in the browser. There are many, many ways to do this, but try a simple tutorial like this to get started.

chai-dom, Assert that the HTMLElement has the given attribute, using getAttribute . Optionally, assert a particular value as well. The return value is available for chaining. document. querySelector('h1').should.have.trimmed.text('chai-tests'). document. Jani Hartikainen gets you started with unit testing your JavaScript — an important, but often overlooked part of development — using Mocha and Chai.

Hello @Stuart I'm working on something similar and I had almost the same issue. From what I've tried so far I found the JS-DOM in combination with chai-dom for quite useful. So having a simple html constructor for creating an element like this:

function HtmlElement(el) {
  this.element = (el instanceof HTMLElement) ? el : document.createElement(el);
}

HtmlElement.create = function create(el) {
  return new HtmlElement(el);
};

HtmlElement.prototype.addId = function addId(id) {
  this.element.id = id || '';
  return this;
};

...and further in the tests:

describe("Checks element methods presence on the prototype", function(){
    it('should have addClass method', function () {
    const ul = (new HtmlElement('ul').addId('some'));
    console.log(ul.element);
    ul.element.should.equal(`<ul id="some"></ul>`);
  });
});

should pass.

chai-dom, Chai is a BDD / TDD assertion library for [node](http://nodejs.org) and the browser that can be delightfully paired with any javascript testing framework. Note that jquery. js and chai. js can be inserted one before another (order does not matter here). Use the assertions with chai’s expect or should assertions. Assertions attr (name [, value]) Assert that the first element of the selection has the given attribute, using . attr (). Optionally, assert a particular value as well.

I used node-html-parser and would recommend you do the same: https://www.npmjs.com/package/node-html-parser

Here is my code:

import {parse} from 'node-html-parser';
import {expect} from 'chai';
import {describe, it, before} from 'mocha';
import request from 'supertest';

describe('Page Tests', async function () {
  let page = null;

  before(async function(){
    const response = await request(server).get(workingTestUrl);

    page = parse(response.text);
  })

  it('Should give a person page at test url', async function () {
    const obituarySection = page.querySelector('#main-obituary');

    expect(obituarySection).to.exist;
  }); 
});

Unit Test Your JavaScript Using Mocha and Chai, If you want to test code in the browser, run npm install mocha chai --save-dev; If you want Node.js unit tests can be run using the command mocha , assuming you've DOCTYPE html> <html> <head> <title>Mocha Tests</title> <link Then , we check the class is included in the value using an assertion. We depend on one more Chai library chai-as-promised to test promises; Installation: npm install --save-dev chai-as-promised. In callback function test, the spec needs to inform Mocha about test completion by calling done() method but in case of promise, we just need to return the promise and Mocha will watch the promise by itself for test

Testing Node.js Code with Mocha and Chai, Throughout this article, we'll focus on the BDD style using Chai's expect interface. Mocha is a testing framework for Node.js that gives you the flexibility to run Math #abs() ✓ should return positive value of given number 1 passing (9ms). Forked from chai-jquery to use for those of us freed of jQuery’s baggage. Assertions attr (name [, value]) attribute (name [, value]) Assert that the HTMLElement has the given attribute, using getAttribute. Optionally, assert a particular value as well. The return value is available for chaining.

Chai.js cheatsheet, One-page guide to Chai.js. strictEqual(actual, expected) // compare with === assert. expect(object) .to.equal(expected) .to.eql(expected) // deep equality� expect(x).to.be.equal(y) 〉 assert.equal(x, y) 〉 .to.be.true 〉 jQuery, assertions, TDD and BDD, and other Chai examples. · One-page guide to Chai.js

Get Started Quickly and Easily Testing With Mocha and Chai, Then you could do worse than go for testing with Mocha and Chai. Mocha is a unit testing library that runs both on Node.js and in the browser, allowing it(' should return -1 when the value is not present', function() { Just opening the index.html file in your browser won't work, because most browsers� Chai has several interfaces that allow the developer to choose the most comfortable. The chain-capable BDD styles provide an expressive language & readable style, while the TDD assert style provides a more classical feel.

Comments
  • Many thanks for taking the time to post this. Will go through that tutorial.
  • There is nothing said about testing HTML in that tutorial.
  • Please take a look at this answer before doing the last assertion as it throws an error during the type/serialization misunderstanding