CODEWITHSUNDEEP
javascriptjqueryqunit
wxcoder
wxcoder

Reputation: 655

Triggering JavaScript events in Qunit tests

I am trying to test that when a user clicks in my form the existing error message will go away. For some reason the last test is failing and i'm not sure why. I'm fairly new to jQuery and Qunit.

test.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Javascript tests</title>
    <link rel="stylesheet" href="qunit.css">
</head>

<body>
<div id="qunit"></div>
<div id="qunit-fixture">

    <form>
        <input name="text" />
        <div class="has-error">Error text</div> 
    </form>
</div>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="qunit.js"></script>
<script src="../list.js"></script>
<script type="text/javascript">

 test("errors should be hidden on key press", function() {
     $('input[name="text"]').trigger('keypress');
     equal($('.has-error').is(':visible'), false);
});

 test("errors not be hidden unless there is a keypress", function() {
      equal($('.has-error').is(':visible'), true);
 });

test("errors should be hidden on click", function() {
     $('input[name="text"]').click();
     equal($('.has-error').is(':visible'), false);
 });

</script>

</body>
</html>

list.js

 jQuery(document).ready(function ($) {
     $('input[name="text"]').on('keypress', function() {
         $('.has-error').hide();
     });

     $('input[name="text"]').on('click', function() {
         $('.has-error').hide();

     });
 })

Upvotes: 1

Views: 3654

Answers (2)

naveen.panwar
naveen.panwar

Reputation: 403

This is how I got this working.

/* ./inventory.js */
var hide_error = function () {
  $('input').on("keypress", function() {
    $( ".has-error" ).hide();
  });
}

/* ./tess.js */
QUnit.module( "module A ", {
  before: hide_error
});

QUnit.test("errors not be hidden unless keypresses", function ( assert ) {
  assert.equal( $('.has-error').is(':visible'), true, "Not Hidden" );
});

QUnit.test("errors should be hidden on keypresses", function ( assert ) {
  $('input').trigger("keypress");
  assert.equal( $(".has-error").is(':visible'), false, "Hidden" );
});
<link href="https://code.jquery.com/qunit/qunit-2.0.0.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://code.jquery.com/qunit/qunit-2.0.0.js"></script>

<div id="qunit"></div>
<div id="qunit-fixture">
  <form>
	  <input name="text">
	  <div class="has-error">Error Text</div>
  </form>
</div>

<script src="./inventory.js"></script>
<script src="./tests.js"></script>

Upvotes: 1

Said Kholov
Said Kholov

Reputation: 2486

function setupModule() {
    $('input[name="text"]').on('click', function() {
         $('.has-error').hide();
    })
    $('input[name="text"]').on('keypress', function() {
        $('.has-error').hide();
    });
}

module('tests', {setup:setupModule});

test("errors should be hidden on key press", function() {
     $('input[name="text"]').trigger('keypress')
     equal($('.has-error').is(':visible'), false);
});

 test("errors not be hidden unless there is a keypress", function() {
     equal($('.has-error').is(':visible'), true);
 });


test("errors should be hidden on click", function() {
     $('input[name="text"]').click()
     equal($('.has-error').is(':visible'),false);
 });

http://jsfiddle.net/u3v08v1e/13/

Upvotes: 2

Related Questions