A better way to handle async tests in jasmine 2

Question

This is an example of three of my tests...

  describe('Enabled button (no disabled attribute)', function () {
    var el, clicked = false;

    beforeEach(function (done) {
      // Create the tag
      el = document.createElement('rui-button')
      el.innerHTML = 'Test Button';
      document.body.appendChild(el)

      el.addEventListener('click', function () {
        clicked = true;
        done();
      });

      // Mount the tag
      tag = riot.mount('rui-button')[0]
      expect(tag).toBeDefined();
      expect(tag.isMounted).toBe(true);
      tag.update();

      el.childNodes[0].click();
    });

    it('should be disabled', function () {
      expect(el.getAttribute('data-disabled')).toEqual('false');
      expect(clicked).toEqual(true);

      var style = window.getComputedStyle(el.childNodes[0]);
      expect(style.cursor).toEqual('pointer');
      expect(style.opacity).toEqual('1')
    });
  });

  describe('Enabled button (disabled="{ false }")', function () {
    var el, clicked = false;

    beforeEach(function (done) {
      // Create the tag
      el = document.createElement('rui-button')
      el.innerHTML = 'Test Button';
      el.setAttribute('disabled', '{ false }');
      document.body.appendChild(el)

      el.addEventListener('click', function () {
        clicked = true;
        done();
      });

      // Mount the tag
      tag = riot.mount('rui-button')[0]
      expect(tag).toBeDefined();
      expect(tag.isMounted).toBe(true);
      tag.update();

      el.childNodes[0].click();
    });

    it('should be disabled', function () {
      expect(el.getAttribute('data-disabled')).toEqual('false');
      expect(clicked).toEqual(true);

      var style = window.getComputedStyle(el.childNodes[0]);
      expect(style.cursor).toEqual('pointer');
      expect(style.opacity).toEqual('1')
    });
  });

  describe('Disabled button (disabled)', function () {
    var el, clicked = false;

    beforeEach(function (done) {
      // Create the tag
      el = document.createElement('rui-button')
      el.innerHTML = 'Test Button';
      el.setAttribute('disabled', '');
      document.body.appendChild(el)

      el.addEventListener('click', function () {
        clicked = true;
        done();
      });

      // Mount the tag
      tag = riot.mount('rui-button')[0]
      expect(tag).toBeDefined();
      expect(tag.isMounted).toBe(true);
      tag.update();

      el.childNodes[0].click();
    });

    it('should be disabled', function () {
      expect(el.getAttribute('data-disabled')).toEqual('true');
      expect(clicked).toEqual(false);

      var style = window.getComputedStyle(el.childNodes[0]);
      expect(style.cursor).toEqual('not-allowed');
      expect(style.opacity).not.toEqual('1')
    });
  });

As you can see each test consists of a describe, a beforeEach and the it. This is a lot to me and when the test fails, I get some useless timeout error.

Here is what I get when the tests work:

Enabled button (no disabled attribute)
  ✓ should be enabled
Enabled button (disabled="{ false }")
  ✓ should be enabled
Disabled button (disabled)
  ✗ should be disabled
Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.

It fails anyway, the test passed but the timeout caused a fail. I'm trying to test that the click event didn't happen. Also it's 6 lines, two for each test. I really would much rather have this:

✓ Enabled button (no disabled attribute)
✓ Enabled button (disabled="{ false }")
✓ Disabled button (disabled)

I need to have the negative test work, the testing for the lack of a click.

When the test does really fail, I get this, the same timeout crud along with the valid failure reason.

  ✗ should be enabled
Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.

Expected false to equal true.
    at Object.<anonymous> (ui-button.spec.js:89:23)

Is there some way to test for the lack of an event? Is there some other, better way, I can write my spec file? I only listed 3 tests here but I have a lot more.

Answer 1

You have two options.

1. Easier one is to add negative test into describe where there is no beforeEach where click handler executes done() callback. You obviously can't click on disabled HTML element.

2. Change your beforeEach for example like this (crucial is to execute done() callback at some point in beforeEach):

beforeEach(function (done) {
  // Create the tag
  el = document.createElement('rui-button')
  el.innerHTML = 'Test Button';
  el.setAttribute('disabled', '');
  document.body.appendChild(el)

  el.addEventListener('click', function () {
    clicked = true;
    done();
  });

  // Mount the tag
  tag = riot.mount('rui-button')[0]
  expect(tag).toBeDefined();
  expect(tag.isMounted).toBe(true);
  tag.update();

  if (el.getAttribute('data-disabled')) {
    done();
  } else {
    el.childNodes[0].click();      
  }
});