add Jasmine AJAX tests for tagging.js

[jywarren]

Currently tagging is done in tag forms on any note (like this one) in a form; the HTML is here:

https://github.com/publiclab/plots2/blob/master/app/views/tag/_tagging.html.erb

And the javascript is here:

https://github.com/publiclab/plots2/blob/master/app/assets/javascripts/tagging.js

This code is not tested in our Jasmine testing framework, but I've stubbed a test out in this PR (#813, which will be merged soon), but disabled the tests. The tests are not complete, and changing xit() to it() will activate them, and they will fail.

This issue is a request for help with building out these tests to test our major javascript functions in tagging.js. It will require asynchronous AJAX calls in Jasmine.

Note that the server will normally respond with simply the tag_id of the successfully deleted tag, as in this line of server-side code. That's read by the ajax response handler here:

$('.tag-delete').bind('ajax:success', function(e, tid){
    $('#tag_' + tid).remove();
  });

See the following resources:

• https://github.com/publiclab/plots2#testing
• https://github.com/publiclab/plots2#phantomjs-for-javascript-tests
• https://jasmine.github.io/
• Jasmine Ajax: https://github.com/jasmine/jasmine-ajax
• existing ajax tests: https://github.com/publiclab/plots2/blob/master/spec/javascripts/plots2_spec.js#L30-L64

Please ask if you have questions, this is a bit complex but if you're hoping to learn about integration testing of JavaScript client-side code and its interaction with a server API, this is a good example!

[david-days]

I need to catch up on testing with Jasmine, and I've been out of the loop for too long. I'll take a look and see if I can wrap my head around it. If I can, I'll add proper javascript tests for the RESTful API.

[jywarren]

oh cool -- however, be aware that Jasmine tests never get to our server
code -- we test client-side interfaces against mocked API responses. But if
you have standard mock output that conforms to your API, you can test JS
code against that. Great!

On Mon, Sep 12, 2016 at 9:07 PM, David C Days notifications@github.com
wrote:

I need to catch up on testing with Jasmine, and I've been out of the loop
for too long. I'll take a look and see if I can wrap my head around it. If
I can, I'll add proper javascript tests for the RESTful API.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
#812 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AABfJ8G31pvMAAdmOQaESSgPmyXBQ_bPks5qpfdRgaJpZM4J7LxW
.

[jywarren]

I re-enabled the first of the two tests after finding a bug -- see this change: 91f5864#diff-21c596e0afdbbb7a1a6c95f3ad6c9d87R6

The newly activated (and passing) test is at 91f5864#diff-f27a7eeed9f169d823fb7849563a7878R22

But actually it's not really testing anything -- $('tags.label') needs to be $('#tags.label') to actually trigger a click.

Also, we could add a better check that the tag gets deleted properly there -- but it's an asynchronous change, so it could be complex to wait for it to happen.

But then the remaining JS test is to test adding a tag -- it's partially done but we don't actually expect anything to confirm it; again, this would be asynchronous, but the expectation could be based on counting:

  // this should test addTag(tagname, selector) from tagging.js, which is an ajax request
  xit("adds a tag", function(done) {

    var count = $('#tags.label').length;
    addTag('boss');

    el.bind('ajax:success', function(e, response){

    // drop the test expectations to the bottom of the task queue
    setTimeout(0, function() {

      // assert tag properly constructed here
      expect($('#tags.label').length).toBe(count + 1);

      done();

    });

  });

You could also add an expect($('#tags.label:last a.tag-name')).toBe('boss'); -- if I've written that jQuery selector correctly?

[jywarren]

Done because we long ago added system tests!!! ❤️