App folder is not loading in Ext.appliation when i try to test using jasmine

风流意气都作罢 提交于 2019-12-05 00:32:26

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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!