jsdom example

wizard-spec.js

const tu = require('../tu');  // tu == test utils
const expect = tu.expect;
const withDocument = tu.withDocument;

const componentHtmlAndScript = {
    html: `
        <textarea id="editableArea"></textarea>
        <div id="counter"></div>
    `,
    // load the JS module under test
    hopModules: 'Hop/components/remaining-chars-counter'
};

describe('Remaining Chars Counter', () => {
    it('should count down remaining chars', withDocument(componentHtmlAndScript, ($ /*, win, doc*/) => {
        // given
        // skipped: initialization of the JS module under test...
        
        const $editableArea = $('#editableArea');
        const $counter = $('#counter');

        // when
        $editableArea.val('123').trigger("input");
        // then
        expect($counter.text()).to.equal('remaining: 7 chars');

        // when
        $editableArea.val('123456789').trigger("input");
        // then
        expect($counter.text()).to.equal('remaining: 1 char');

        // when
        $editableArea.val('12345').trigger("input");
        // then
        expect($counter.text()).to.equal('remaining: 5 chars');

        // etc.
    }));
});