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

Question

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>

Are you not using Sencha CMD? If you are, there is no need to use `Ext.Loader`. Also, does the issue still occur without Jasmine? — Greendrake, Aug 11 '15 at 05:16
I don't have any problem while building with sencha cmd ... If I want to use jasmine I have to create a html and additional js file app-test to run my test cases.In that case I can't build ..I want load all the classes so that I am using ext.loader — Surya Prakash Tumma, Aug 11 '15 at 05:19

score 6 · Accepted Answer · answered Aug 13 '15 at 19:51

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.
Download the standalone version of Jasmine
Unzip it and copy the lib folder into the app-test folder you created before.
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>

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

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

Thank you for your response ..You have missed my exact question ...I have to implement in an existing app which is created using sencha cmd already . I have to test my existing classes . But those files are getting loaded — Surya Prakash Tumma, Aug 13 '15 at 22:31
If you uncomment the code in the `beforeEach` and let the application be rendered to `'test'` you see that the complete application is rendered. Otherwise the problem is in your app, not in the way you set it up. With my post I wanted to prove that it works correctly when start from the beginning. — Tarabass, Aug 14 '15 at 06:03

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

1 Answers1

Linked