0

これは私の 3 つのテストの例です...

  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')
    });
  });

ご覧のとおり、各テストは a describe、 a 、beforeEachおよび で構成されていitます。これは私にとって大変なことであり、テストが失敗すると、役に立たないタイムアウト エラーが発生します。

テストが機能したときに得られるものは次のとおりです。

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.

とにかく失敗します。テストは成功しましたが、タイムアウトにより失敗しました。クリックイベントが発生しなかったことをテストしようとしています。また、各テストに 2 行ずつ、6 行です。私は本当にこれが欲しいです:

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

否定的なテスト、つまりクリックがないことをテストする必要があります。

テストが実際に失敗すると、同じタイムアウト crud と有効な失敗理由が表示されます。

  ✗ 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)

イベントがないことをテストする方法はありますか? スペックファイルを書くことができる他のより良い方法はありますか?ここでは 3 つのテストのみをリストしましたが、さらに多くのテストがあります。

4

1 に答える 1