I have build an app using Sencha Architect and planning to test it using Jasmine. I am fairly new to Sencha Architect and Jasmine. In order for me to test the app, do I need to add the ExtJS Libraries/CSS in my HTML index file? I already add all the Jasmine frameworks CSS and JS files together with the Jasmine Test Case File in my HTML index file.
Thanks guys.
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.
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
Create a new ExtJs app using Sencha Cmd.
cd \path\to\the\workspace
sencha -sdk \path\to\the\sdk generate app Jasmine jasmine
Then create a new folder called app-test within the app folder.
lib folder into the app-test folder you created before.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>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');
});
});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