当我尝试使用 jasmine 进行测试时，App 文件夹未加载到 Ext.appliation答案

【问题标题】：App folder is not loading in Ext.appliation when i try to test using jasmine当我尝试使用 jasmine 进行测试时，App 文件夹未加载到 Ext.appliation
【发布时间】：2015-08-10 15:52:50
【问题描述】：

我正在尝试在我的应用程序（Ext js 5）中实现 jasmine 以进行单元测试。为此，我创建了 app-test 文件。

  Ext.require('Ext.app.Application');Ext.Loader.setConfig({enabled:true});
  Ext.onReady(function() {
      var  Application = Ext.create('Ext.app.Application', {
    name: 'epmct',
    appFolder:'app',
    launch: function() {
        Ext.create('epmct.view.vpp.dashboard.VppDashboardMainPage');
    }
    });
 });

当我通过 specrunner.html（文件开始单元测试）运行应用程序时，我收到错误

Uncaught Error: [Ext.Loader] Some requested files failed to load.

我尝试使用 Ext.Loader.setPath('epmct','app'); 设置路径还是不行。

请找到我的 specrunner.html 文件代码

    <!DOCTYPE html><html>
            <head>
          <meta charset="utf-8">
          <title>Jasmine Spec Runner v2.3.2</title>


          <link rel="shortcut icon" type="image/png" href="test/jasmine/jasmine_favicon.png">
          <link rel="stylesheet" type="text/css" href="test/jasmine/jasmine.css">
          <script type="text/javascript" src="test/jasmine/jasmine.js"></script>
          <script type="text/javascript" src="test/jasmine/jasmine-html.js"></script>
          <script type="text/javascript" src="test/jasmine/boot.js"></script>
          <!-- include Ext Js files and Css... -->
          <script src="ext/ext-all.js"></script>
          <!-- include spec files here... -->
            <script type="text/javascript" src="app-test.js"></script>
           <script type="text/javascript" src="test/spec/DashboardSpec.js"></script>



        </head>


        <body>
        </body>
        </html>

【问题讨论】：

你没有使用 Sencha CMD 吗？如果是，则无需使用Ext.Loader。另外，如果没有 Jasmine，问题是否仍然存在？
我在使用 sencha cmd 构建时没有任何问题......如果我想使用 jasmine，我必须创建一个 html 和其他 js 文件 app-test 来运行我的测试用例。在那如果我无法构建..我想加载所有类以便我使用 ext.loader

标签： javascript extjs extjs4 jasmine extjs5

【解决方案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

【讨论】：

感谢您的回复..您错过了我的确切问题...我必须在已经使用 sencha cmd 创建的现有应用程序中实现。我必须测试我现有的课程。但是这些文件正在加载
如果您取消注释beforeEach 中的代码并让应用程序呈现到'test'，您会看到完整的应用程序已呈现。否则问题出在您的应用程序中，而不是您设置它的方式上。通过我的帖子，我想证明它从一开始就可以正常工作。