A typical SinonJS test example, include stub, Ajax test, fakeTimer etc.

sinon-test-example.js

/*global describe, beforeEach, afterEach, it */
'use strict';
(function () {
  describe('Phone Message Validator Plugin', function () {
    beforeEach(function() {
      var fixture = [
        '<form method="post" action=".">',
          '<button>Get Verify Code</button>',
          '<span class="message hide">message sent, wait <span class="countdown"></span>',
          '<input class="code" type="text"/>',
        '</form>'
      ].join('');
      this.$fixture = $(fixture).appendTo('body');

      this.$fetch = this.$fixture.find('button');
      this.$message = this.$fixture.find('.message');
      this.$countdown = this.$fixture.find('.countdown');

      this.messageValidator = new MessageValidator({
        fetchEl: this.$fetch,
        messageEl: this.$message,
        countdownEl: this.$countdownEl
      });
    });

    afterEach(function() {
      this.$fixture.remove();
    });

    it('should disable fetch button when clicked', function() {
      this.$fetch.click();

      expect(this.$fetch.hasClass(this.messageValidator.disableClass)).to.be.true;
    });

    it('should show countdown message when clicked fetch button', function() {
      this.$fetch.click();

      expect(this.$message.is(':visible')).to.be.true;
    });

    describe('Fetch Action', function() {
      var stub;

      beforeEach(function() {
        stub = sinon.stub(jQuery, 'post');
      });

      afterEach(function() {
        jQuery.post.restore();
      });

      it('should send a fetch action when clicked fetch button', function() {
        this.$fetch.click();

        sinon.assert.calledWithMatch(stub, this.messageValidator.url);
      });

      it('should not send a fetch action when click disabled fetch button', function() {
        this.$fetch.click();
        this.$fetch.click();

        sinon.assert.calledOnce(stub);
      });

      it('should send not send with unvalid phone number', function() {
        this.messageValidator.$phone = $('<input type="text" value="12345"/>');

        var alertStub = sinon.stub(window, 'alert');

        this.$fetch.click();

        sinon.assert.notCalled(stub);
        sinon.assert.calledWithMatch(alertStub, '请输入正确的手机号!');

        window.alert.restore();
      });

      it('should send send with valid phone number', function() {
        this.messageValidator.$phone = $('<input type="text" value="13588888888"/>');

        this.$fetch.click();

        sinon.assert.calledWith(stub, this.messageValidator.url, { phone: '13588888888'});
      });
    });

    describe('Countdown', function() {
      var clock;
      beforeEach(function() {
        clock = sinon.useFakeTimers();
      });

      afterEach(function() {
        clock.restore();
      });

      it('should enable fetch button after countdown', function() {
        this.$fetch.click();

        clock.tick(this.messageValidator.duration * 1000);

        expect(this.$fetch.hasClass(this.messageValidator.disableClass)).to.be.false;
      });

      it('should hide countdown message after countdown', function() {
        this.$fetch.click();

        clock.tick(this.messageValidator.duration * 1000);

        expect(this.$message.is(':visible')).to.be.false;
      });
    });
  });
})();