当我尝试使用茉莉花测试时，App文件夹不会在Ext.appliation中加载 [英] App folder is not loading in Ext.appliation when i try to test using jasmine

问题描述

我正在尝试在我的应用程序（Ext js 5）中实现茉莉花进行单元测试。为此，我已经创建了应用程序测试文件。

  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（文件启动单元测试）我得到错误

 未捕获错误：[Ext.Loader]某些请求的文件加载失败。 
  

我尝试使用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 =快捷图标type =image / pnghref =test / jasmine / jasmine_favicon.png> 
< link rel =stylesheettype =text / csshref =test / jasmine / jasmine.css> 
< script type =text / javascriptsrc =test / jasmine / jasmine.js>< / script> 
< script type =text / javascriptsrc =test / jasmine / jasmine-html.js>< / script> 
< script type =text / javascriptsrc =test / jasmine / boot.js>< / script> 
<！ - 包括Ext Js文件和Css ...  - > 
< script src =ext / ext-all.js>< / script> 
<！ -  include spec files here ...  - > 
< script type =text / javascriptsrc =app-test.js>< / script> 
< script type =text / javascriptsrc =test / spec / DashboardSpec.js>< / script> 
 
 
 
< / head> 
 
 
< body> 
< / body> 
< / html> 
  

解决方案

我将引导您快速设置使用Sencha Cmd 5. 进行工作测试，ExtJs 5。，期望您只需8个步骤就可以使用Sencha工作区。

1. 首先使用 Sencha Cmd 创建一个新的工作区。如果你已经有一个工作区，你可以跳过这个步骤。

   
   
   

   sencha生成工作区\path\to\the\folder




2. 使用 ExtJs 应用程序Sencha Cmd 。

   
   
   

   cd \path\to\the\workspace
sencha -sdk \\ \\ path\to\the\sdk生成应用程序Jasmine jasmine




3. 然后创建一个名为 app-test



4. 下载独立版本的茉莉花


5. 解压缩并将 lib 文件夹复制到 index-test.html 并将其放在您的应用文件夹中：

 <！DOCTYPE html>< html>< head> < meta charset =utf-8> < title> Jasmine Test< / title> < link rel =快捷图标type =image / pnghref =app-test / lib / jasmine-2.3.4 / jasmine_favicon.png> < link rel =stylesheethref =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> <！ - 这里包含源文件...  - > < script src =../ ext / build / ext-all-debug.js>< / script> <！ -  include spec file here ...  - > < script src =app-test.js>< / script>< / head>< body> < div id =test>< / div>< / body>< / html>  

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

  Ext.Loader.setConfig（{enabled：true}）; Ext.application {name：'Jasmine'，extends：'Jasmine.Application'，autoCreateViewport：false}）; describe（'Jasmine.view.main.Main'，function（）{// reusable scoped variable var mainView = null; // setup / teardown beforeEach（function（）{//为每个测试创建一个新的主视图，以避免测试污染mainView = Ext.create（'Jasmine.view.main.Main'/ *，{renderTo：'test'// see index -test.html查看这个定义的位置} * /）;}）; afterEach（function（）{//在每次测试后销毁主视图，所以我们不污染环境mainView.destr oy（）;}）;它（'应该继承自Ext.container.Container'，function（）{expect（mainView.isXType（'container'））toEqual（true）; }）;它（'应该配置为边框布局'，function（）{expect（mainView.getLayout（）。type）.toEqual（'border'）;}）;}）;  

8. 在浏览器中打开index-test.html，结果

额外资源：



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

I am trying to implement jasmine in my application(Ext js 5)for unit testing. For that i have created app-test file.

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

When i run the application throught specrunner.html(File to start unit testing ) I am getting error

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

and I tried to set path using Ext.Loader.setPath('epmct','app'); still it is not working.

Please find my specrunner.html file code

    <!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>

解决方案

I will guide you through a quick setup with working tests using Sencha Cmd 5., ExtJs 5. and expecting you to use a Sencha workspace in just 8 steps.

1. First create a new workspace using Sencha Cmd. If you already have a workspace you can skip this step.

   sencha generate workspace \path\to\the\folder

2. Create a new ExtJs app using Sencha Cmd.

   cd \path\to\the\workspace sencha -sdk \path\to\the\sdk generate app Jasmine jasmine

3. Then create a new folder called app-test within the app folder.

4. Download the standalone version of Jasmine
5. Unzip it and copy the lib folder into the app-test folder you created before.
6. Create a html file index-test.html and place it in your app folder:

<!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>

7. Create a javascript file app-test.js and place it in your app folder:

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

8. Open index-test.html in a browser and see the results

Extra resources:
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

这篇关于当我尝试使用茉莉花测试时，App文件夹不会在Ext.appliation中加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！