vendredi 2 septembre 2016

Testing DOM, Phantom, Sinon, Mocha - How to check if element was clicked

I need test if text on the button was change, after click. But I can't find anywhere - how to do it.

Please help :(,

I run test

mocha-phantomjs TestRunner.html

My code is :

TestRunner.html

 <!doctype html>
 <html>
    <head>
    <title>Tests</title>
    <link rel="stylesheet" href="mocha.css" />
</head>
<body>
    <div id="mocha"></div>
    <button data-text="SomeText"> Button </button>

    <script src="myscript.js"></script>

    <script src="mocha.js"></script>
    <script src="chai.js"></script>
    <script src="sinon-1.10.2.js"></script>
    <script>
        mocha.ui('bdd');
        mocha.reporter('html');
        var expect = chai.expect;
    </script>
    <script src="tests.js"></script>
    <script>
        mocha.run();
    </script>
</body>

myscript.js

var button = document.querySelector('button');

 button.addEventListener('click' , function(){
     this.innerText = this.dataset.text;
 });

test.js

describe("Change text on button", function () {

    var clickElement = function (el){
       var ev = document.createEvent("MouseEvent");
       ev.initMouseEvent(
         "click",
         true /* bubble */, true /* cancelable */,
         window, null,
         0, 0, 0, 0, /* coordinates */
         false, false, false, false, /* modifier keys */
         0 /*left*/, null
       );
       el.dispatchEvent(ev);
   };

    var button = document.querySelector('button');

    before(function(){
       clickElement(button);
    })

   it("Click on button - change text: 'SomeText'",        
         function () {
             expect(button.innerText).to.equal("SomeText");
   });

});

Aucun commentaire:

Enregistrer un commentaire