使用 Jasmine 测试 Java Script 应用程序答案

【问题标题】：Testing Java Script app using Jasmine使用 Jasmine 测试 Java Script 应用程序
【发布时间】：2015-09-09 19:53:13
【问题描述】：

我已经使用 Sencha Architect 构建了一个应用程序，并计划使用 Jasmine 对其进行测试。我对 Sencha Architect 和 Jasmine 还很陌生。为了让我测试应用程序，我是否需要在我的 HTML 索引文件中添加 ExtJS 库/CSS？我已经在我的 HTML 索引文件中添加了所有 Jasmine 框架 CSS 和 JS 文件以及 Jasmine 测试用例文件。

谢谢大家。

【问题讨论】：

App folder is not loading in Ext.appliation when i try to test using jasmine 的可能重复项

标签： javascript extjs jasmine

【解决方案1】：

我将通过使用 Sencha Cmd 5.、ExtJs 5. 的工作测试指导您完成快速设置，并希望您只需 8 个步骤即可使用 Sencha 工作区。

首先使用Sencha Cmd 创建一个新工作区。如果您已经有工作区，则可以跳过此步骤。

sencha generate workspace \path\to\the\folder
使用Sencha Cmd 创建一个新的ExtJs 应用程序。

cd \path\to\the\workspace sencha -sdk \path\to\the\sdk generate app Jasmine jasmine
然后在 app 文件夹中创建一个名为 app-test 的新文件夹。
下载独立版Jasmine
解压并将lib文件夹复制到您之前创建的app-test文件夹中。
创建一个 html 文件 index-test.html 并将其放在您的应用文件夹中：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Jasmine Test</title>

	<link rel="shortcut icon" type="image/png" href="app-test/lib/jasmine-2.3.4/jasmine_favicon.png">
	<link rel="stylesheet" href="app-test/lib/jasmine-2.3.4/jasmine.css">

	<script src="app-test/lib/jasmine-2.3.4/jasmine.js"></script>
	<script src="app-test/lib/jasmine-2.3.4/jasmine-html.js"></script>
	<script src="app-test/lib/jasmine-2.3.4/boot.js"></script>

	<!-- include source files here... -->
	<script src="../ext/build/ext-all-debug.js"></script>

	<!-- include spec files here... -->
	<script src="app-test.js"></script>
</head>
<body>
	<div id="test"></div>
</body>
</html>

创建一个 javascript 文件 app-test.js 并将其放在您的应用文件夹中：

Ext.Loader.setConfig({
    enabled: true
});

Ext.application({
	name: 'Jasmine',
	extend: 'Jasmine.Application',
	autoCreateViewport: false
});

describe('Jasmine.view.main.Main', function() {
	//reusable scoped variable
	var mainView = null;

	// setup / teardown
	beforeEach(function() {
		// create a fresh main view for every test to avoid test pollution
		mainView = Ext.create('Jasmine.view.main.Main'/*, {
			renderTo : 'test' //see index-test.html to see where this is defined
		}*/);
	});

	afterEach(function() {
		// destroy the main view after every test so we don't pollute the environment
		mainView.destroy();
	});

	it('should inherit from Ext.container.Container', function() {
		expect(mainView.isXType('container')).toEqual(true);
	});

	it('should be configured as a border layout', function() {
		expect(mainView.getLayout().type).toEqual('border');
	});
});

在浏览器中打开 index-test.html 并查看结果

额外资源：
http://www.ladysign-apps.com/developer/setup-jasmine-tdd-with-for-ext-js/
https://www.sencha.com/blog/automating-unit-tests/
https://github.com/SenchaProSvcs/UnitTestDemo
http://docs.sencha.com/extjs/4.2.0/#!/guide/testing
http://docs.sencha.com/extjs/4.2.0/#!/guide/testing_controllers
https://jasmine.github.io/2.3/introduction.html

【讨论】：