jasmine学习

发表于

Jasmine 入门

Jasmine 的四个核心概念: 分组(Suites)、用例(Specs)、期望(Expectations)、匹配(Matchers).

开始捣鼓

例子1:

1
2
3
4
5
6
7
8
9
10
function add(a){
	return a+=10;
}

describe("A suite", function() {
	it("contains spec with an expectation", function() {
		var a = add(10);
		expect(a).toEqual(20);
	});
});

describe 用于定义这组测试的标题
it 用于定义某个具体测试的标题

例子2:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function getVal(a){
	return a || 20;
}

describe('getVal函数测试', function() {
	it('contains spec with an expectation', function(){
		var a = getVal(10);
		var b = getVal(0);
		var c = getVal('');
		var d = getVal(null);

		expect(a).toBe(10);
		expect(b).toBe(20);
		expect(c).toBe(20);
		expect(d).toBe(20);
	});
});

例子2:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//匹配邮箱
var reg = /[\w\.]+@\w+\.(com|cn|net)/;

describe('正则匹配邮箱', function(){
	it('匹配邮箱', function() {
		var a = '976962324@qq.com',
			b = 'xiesenzhengyi@gmail.com',
			c = 'xiesen01@outlook.com',
			d = 'xiesen.01@hahaha.net';

		expect(a).toMatch(reg);
		expect(b).toMatch(reg);
		expect(c).toMatch(reg);
		expect(d).toMatch(reg);
	});
});

一些常用的方法

1
2
3
4
5
6
7
8
beforeEach
afterEach
beforeAll
afterAll
toBeTruthy
toBeFalsy
toBeNull
toBeUndefined

异步

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
describe("Asynchronous specs", function() {
	var value;

	beforeEach(function(done) {
		setTimeout(function() {
		  value = 0;
		  done();
		}, 1000);
	});

	it("should support async execution of test preparation and expectations", function(done) {
		value++;
		setTimeout(function() {
			expect(value).toBeGreaterThan(0);
			//done();
		}, 2000);
	});
});

beforeEach 方法接受 done 表示等异步方法执行完，再调用测试用例 it
同样 it 方法中接受 done 可用于在异步节后执行测试用例

在 angular 中使用 jasmine

  1. 安装依赖
1
2
3
npm install -g karma-cli
npm install --save-dev karma karma-jasmine jasmine-core karma-chrome-launcher
npm install --save-dev angular angular-mocks

注意：如果全局装有 karma 和 jasmine，最好删除

  1. 生成 karma.conf.js
1
karma init

一路按照提示即可

  1. 第一个测试
    karma.conf.js
1
2
3
4
5
6
files: [
    'node_modules/angular/angular.js',
    'node_modules/angular-mocks/angular-mocks.js',
    'js/greeting.js',
    'test/getGreeting.spec.js'
]

js/greeting.js

1
2
3
4
5
6
7
8
9
10
11
angular.module('demo', [])
.factory('greeter', function() {
  return {
    getFullName: function(firstname, lastname){
    	return firstname + lastname;
    },
    getGreeting: function(name) {
      return "Hello " + name;
    }
  };
})

test/getGreeting.spec.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
describe("getGreeting", function() {
  var greeter;
  beforeEach(module('demo'));
  beforeEach(inject(function(_greeter_) { //这里可以注入依赖
    greeter = _greeter_;
  }));

  it("says Hello to me", function() {
    expect(greeter.getGreeting("Dave")).toEqual("Hello Dave");
  });

  it("should return fullname", function() {
    expect(greeter.getFullName('xwill', 'madeit')).toEqual("xwillmadeit");
  });
});

总结一下大致步骤

  • Import the module that contains the service you’re testing.
  • Inject the service you’re testing, and save it for later use. You may also want to set up mocks or spies at this point.
  • Write the tests. Each one should ideally follow the pattern of Given/When/Then, an idea from BDD (Behavior-Driven Development)：
  1. Given some particular state of my app
    set up state, mock or spy functions if necessary
  2. When I call some method
    call the method you’re testing
  3. Then that method behaves in a certain way
    verify the method did the right thing