Clever Geek Handbook

Running jasmine test before running .click ()

I am just playing with a basic ruby ​​app that changes the html direction attribute on button click. Its work fine on the JQuery side, but in my test case it works even when .click () are triggers. Here are my files.

display.html.erb

<p>
<%= button_tag 'Convert', id: 'test', remote: 'true' %>
</p>

Jquery: conversion.js

$(document).ready(function(){
  $('#test').on('click', setHtmlStyle);
});
var setHtmlStyle = function(){
var $style = $('html');
$style.attr('dir', $style.attr('dir') === 'rtl' ? 'ltr' : 'rtl');
};
Run codeHide result


Spec: conversion_spec.js

describe('#test', function (){
  beforeEach(function(){
    loadFixtures('conversion.html');
  });
  describe('Clicking test button', function(){
    it('should have an attribute', function(){
      $('#test').click();
      expect($('html').attr('dir')).toBe('rtl');
    });
  });
Run codeHide result


Fixture: conversion.html

<html>
<input type='button' name='Convert' id='test'>
</html>

Here is the error message when I run my tests:

Failure/Error: Expected 'ltr' to be 'rtl'.

Any help or suggestions would be greatly appreciated. Thank.

+3


source to share


3 answers


I changed my code to make sure the .click () function works.



$(document).ready(function(){
  $(document).on('click', '#test', setHtmlStyle);
});

var setHtmlStyle = function(){
  var $style = $('html');
  $style.attr('dir', $style.attr('dir') === 'rtl' ? 'ltr' : 'rtl');
};
+1


source


The problem is attr ('dir') is undefined, its value is 'undefined', if you set the explicitly set tag attribute to 'rlt' or 'ltr' it will have the string value you have set it ...

$style.attr('dir', $style.attr('dir') === 'rtl' && typeof $style.attr('dir') !== "undefined" ? 'ltr' : 'rtl');



undefined

0


source


I just tried my code and got it working with the following simple modification (in addition to a quick workaround of the jasmine-jquery-rails shell to load fixtures):

...

$ ('# test') press ();

changes to

setHtmlStyle ();

This did the test correctly.

Jasmine is a unit testing tool for low-level JavaScript code with DOM elements hidden from view at runtime. This way execution click()

with jQuery has no effect.

What it means, unlike Selenium or Capybara, Jasmine's goal is to help the developer with testing / testing low-level JavaScript logic blocks like computation and some light DOM manipulation.

A quick jump from this is you write your tests against low-level JavaScript methods that do the work for user interactions, but not for methods that include click () etc. This will help you get a fast feedback loop when testing small functionality. In other words, it was about the "in" phase outside - when testing BDD.

The exit phase should be addressed through integration testing (full end-to-end end-to-end testing) using tools such as Selenium, Capybara, and Cucumber.

Hope you find this helpful. If you have any more questions, let me know in the comments.

Here is a nice follow-up presentation on the topic that breaks down the difference between end-to-end integration and a view-oriented test in javascript: BDD with JS

However, I highly recommend talking to an experienced developer at Outside-In BDD and how he breaks down the process into end-to-end integration tests (Cucumber), browser javascript unit tests (Jasmine), and low-level backend (like RSpec). You can push me to CodeMentor: https://www.codementor.io/andymaleh

0


source






More articles:


All Articles