3

Я хотел бы настроить подходящую тестовую среду для приложения Sencha Touch 2 с использованием жасмина.Как настроить порядок загрузки файлов приложений Sencha Touch при тестировании с помощью Jasmine

Я использовал первые три части этого урока для моих первых шагов:

Моя актуальная проблема следующая: две записи конфигурации для двух моих классов (один магазин и один вид) необходимо вызвать методы/свойства чтения моего основного объекта приложения respe ctively объект Ext.Viewport.

Бетон:

1.) один из моих магазинов считывает значение на основном пространстве моего приложения (MyAppName.app.backendUrl)

Ext.define('MyAppName.store.MyStore', { 
    extend: 'Ext.data.Store', 

    config: { 
     model: 'MyAppName.model.MyModel', 

     proxy: { 
      type: 'ajax', 
      url: MyAppName.app.backendUrl + '/data.json', 
      reader: 'json' 
     }, 

     autoLoad: true 
    } 
}); 

2.) один из моих взглядов делает вызов метод (Ext.Viewport.getOrientation()) на Ext.Viewport:

Ext.define('MyAppName.view.LoginView', { 
    extend: 'Ext.form.Panel', 
    alias: "widget.loginview", 
    config: { 
     title: 'Login', 
     items: [ 
      { 
       xtype: 'image', 
       src: Ext.Viewport.getOrientation() == 'portrait' ? '../../../img/login.png' : '../../../img/login-small.png', 
       style: Ext.Viewport.getOrientation() == 'portrait' ? 'width:80px;height:80px;margin:auto' : 'width:40px;height:40px;margin:auto' 
      } 
     ] 
    } 
}); 

К сожалению, это происходит сбой, потому что оба объекта (MyAppName и Ext.Viewport) еще не определены, когда эти вызовы выполняются. Это только в случае установки тестирования (как описано в учебном пособии, для тестирования есть только приложение app.js). Когда я запускаю фактическое приложение в браузере (через «нормальный» app.js), эта проблема не возникает.

Как это можно устранить (так: как я могу убедиться, что мои представления/файлы хранилища запущены ПОСЛЕ MyAppname.app и Ext.Viewport уже существуют)?

Большое спасибо.

ответ

1

Вы должны спецификации/JavaScripts/поддержка/jasmime.yml файлы, необходимые в правильном порядке:

src_files: 
    - touch/sencha-touch-all-debug.js # Load Sencha library 
    - spec/app.js     # Load our spec Ext.Application 
    - app/util/Urls.js #custom dependency 
    - app/**/*.js     # Load source files 
+0

Большое спасибо за подсказку. У меня есть следующий порядок в файле YML: - сенсорный/Сенча сенсорный-все-debug.js - спецификации/app.js - приложение/**/* JS Но моя проблема не является внешним. (кроме самой рамки Sencha, но это должно быть включено в первую строку «touch/sencha-touch-all-debug.js»), но тот факт, что такие вещи, как Ext.Viewport.getOrientation(), не работают при использовании их на уровне хэш-конфигурации (как описано в моем вопросе), потому что Ext еще не определен (в нем говорится: «Невозможно вызвать метод« getOrientation »неопределенного»). Я не понимаю, почему. – spaudanjo

+0

О, хорошо. Я думаю, что это потому, что viewport (и, следовательно, Ext.Viewport) создается только при вызове метода в Ext.application.Возможно, вам нужно запустить его вручную в тестах на жасмин. http://docs.sencha.com/touch/2.2.1/source/Application.html#Ext-app-Application здесь является исходным кодом для этого, если вы ищете «autoCreateViewport», вы увидите, что теперь это созданный во время запуска. Надеюсь, это поможет. –

2

я обнаружил, что работает Ext.application обычно открывается вид на том, что вы, как правило, не требуется в течение модульный тест - в противном случае вы решитесь на интеграционные испытания, поэтому я избегаю использования погрузчика разработки Sencha. Вместо этого я использую Karma для загрузки модульных тестов и файлов классов приложений. Эти файлы можно настроить в файле karma.conf.js (пример ниже).

Я адаптировал примеры из превосходных обучающих модулей для модулей из Pivotal Labs. Поскольку Karma имеет встроенный веб-сервер, вам не нужны Rails, Rake или pow, как описано в their 1st tutorial. Использование Karma означает, что вы можете легко интегрировать ваши модульные тесты с помощью инструментов Javascript, таких как IntelliJ IDEA или WebStorm, а также систем CI и облачных тестов, таких как https://saucelabs.com/. Вы также можете настроить его для просмотра ваших файлов кода и тестов автоматического повторного запуска при их обновлении. Вы также можете использовать karma-istanbul для анализа кода покрытия кода.

Используя трюк, который я узнал here, я запустил файл setup.js, который настроен в моем файле karma.conf.js для загрузки перед модульными тестами.Он создает поддельный объект приложения, так что контроллеры могут присваивать себя экземпляру приложения, и он намеренно не имеет метода launch(). Он также включает в себя код SpecHelper.js из примера Pivotal Labs.

// Create (but don't launch) the app 
Ext.application({name: 'MyAppName' }); 

Для теста вопрос вид блока, вы можете создать поддельные Ext.Viewport объект и добавить spyOn(). AndReturn(), чтобы подделать Ext.Viewport.getOrientation() метод требует представления во время тестирования. Это значит, что ваши модульные тесты могут легко охватывать оба случая ориентации. Вы также добавить renderTo: свойства во время тестирования, чтобы осмотреть обработанный вид:

describe("when portrait orientation", function() { 
    var view; 
    beforeEach(function() { 
    if (!Ext.Viewport) Ext.Viewport = {};  
    spyOn(Ext.Viewport, 'getOrientation').andReturn('portrait'); 
    view = Ext.create('MyAppName.view.LoginView', { 
     renderTo: 'jasmine_content' 
    } 
    } 

    it("should render large image", function() { 
     expect(Ext.DomQuery.select('...')).toContain('img/login.png'); 
    }); 

    it("should render 80px style", function() { 
     expect(Ext.DomQuery.select('...')).toContain('80px'); 
    });   
}); 

Просмотра модульных тестов (объясняет, как использовать renderTo свойства).

Мой setup.js файл показать ниже, включает в себя код из SpecHelper.js показанный здесь. Вам понадобится использовать свойство renderTo.

испытание блок управление охватывает как подключить контроллер к поддельному экземпляру приложения.

setup.js Этот код крадет загрузку трюк Кармы от here, но в отличие от своего примера он избегает использования загрузчика развития.

Ext.Loader.setConfig({ 
    enabled: true,     // Turn on Ext.Loader 
    disableCaching: false   // Turn OFF cache BUSTING 
}); 

// 'base' is set by Karma to be __dirname of karm.conf.js file 
Ext.Loader.setPath({ 
    'Ext': 'base/touch/src', 
    'MyAppName': 'base/app' 
}); 

// Create (but don't launch) the app 
Ext.application({name: 'MyAppName' }); 

Ext.require('Ext.data.Model'); 
afterEach(function() { 
    Ext.data.Model.cache = {};  // Clear any cached models 
}); 

var domEl; 
beforeEach(function() {   // Reset the div with a new one. 
    domEl = document.createElement('div'); 
    domEl.setAttribute('id', 'jasmine_content'); 
    var oldEl = document.getElementById('jasmine_content'); 
    if (oldEl) oldEl.parentNode.replaceChild(domEl, oldEl); 
}); 

afterEach(function() {    // Make the test runner look pretty 
    domEl.setAttribute('style', 'display:none;'); 
}); 

// Karma normally starts the tests right after all files specified in 'karma.config.js' have been loaded 
// We only want the tests to start after Sencha Touch/ExtJS has bootstrapped the application. 
// 1. We temporary override the '__karma__.loaded' function 
// 2. When Ext is ready we call the '__karma__.loaded' function manually 
var karmaLoadedFunction = window.__karma__.loaded; 
window.__karma__.loaded = function() {}; 

Ext.onReady(function() { 
    console.info("Starting Tests ..."); 
    window.__karma__.loaded = karmaLoadedFunction; 
    window.__karma__.loaded(); 
}); 

karma.conf.js:

module.exports = function(config) { 
    config.set({ 

     // base path that will be used to resolve all patterns (eg. files, exclude) 
     basePath: '', 

     // frameworks to use 
     // available frameworks: https://npmjs.org/browse/keyword/karma-adapter 
     frameworks: ['jasmine'], 

     // Don't use Sencha Touch dynamic loading 
     files: [ 
      'touch/sencha-touch-all-debug.js', 
      'spec/Setup.js',  // Load stubbed app - does not call app.launch() 
      { pattern: 'spec/**/*.js',   watched: true, served: true, included: true }, 
      { pattern: 'app/**/*.js',   watched: true, served: true, included: false}, 
      // Some class are not loaded by sencha-touch-all-debug.js 
      // this tell Karma web server that it's ok to serve them. 
      { pattern: 'touch/src/**/*.*',  watched: false, served: true, included: false} 
     ], 

//  // Use Sencha Touch static 'testing' app.js 
//  files: [ 
//   './build/testing/PT/app.js', 
//   './spec/SetUp.js', 
//   './spec/**/*.js' 
//  ], 

     // list of files to exclude 
     exclude: [ 
     ], 

     // preprocess matching files before serving them to the browser 
     // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor 
     preprocessors: { 
     }, 

     // test results reporter to use 
     // possible values: 'dots', 'progress', 'junit', 'growl', 'coverage' 
     // available reporters: https://npmjs.org/browse/keyword/karma-reporter 
     reporters: ['progress'], 

     // web server port 
     port: 9876, 

     // enable/disable colors in the output (reporters and logs) 
     colors: true, 

     // level of logging 
     // possible values: config.LOG_DISABLE/.LOG_ERROR/.LOG_WARN/.LOG_INFO/.LOG_DEBUG 
     logLevel: config.LOG_INFO, 

     // enable/disable watching file and executing tests whenever any file changes 
     autoWatch: true, 

     // start these browsers 
     // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher 
     // Start these browsers, currently available: 
     // - Chrome 
     // - ChromeCanary 
     // - Firefox 
     // - Opera (has to be installed with `npm install karma-opera-launcher`) 
     // - Safari (only Mac; has to be installed with `npm install 
     // karma-safari-launcher`) 
     // - PhantomJS 
     // - IE (only Windows; has to be installed with `npm install 
     // karma-ie-launcher`) 
     //browsers: [ 'PhantomJS' ], 
     browsers: ['Chrome'], 

     // If browser does not capture in given timeout [ms], kill it 
     captureTimeout: 60000, 

     // Continuous Integration mode 
     // if true, Karma captures browsers, runs the tests and exits 
     singleRun: false 
    }); 
}; 
+0

Если вы используете IntelliJ IDEA/WebStorm/PhpStorm, вы можете проверить эти статьи JetBrains на [покрытие кода] (https://www.jetbrains.com/idea/webhelp/monitoring-code-coverage-for-javascript .html) и [Карма] (http://blog.jetbrains.com/webstorm/2013/10/running-javascript-tests-with-karma-in-webstorm-7) –

0

Один из способов обойти эту проблему было бы определить элементы из initComponent. Таким образом, он не будет вызываться, пока не будет создан, а не при запуске.

Ext.define('MyAppName.view.LoginView', { 
    extend: 'Ext.form.Panel', 
    alias: "widget.loginview", 
    config: { 
     title: 'Login' 
    }, 

    initComponent: function() { 
     this.items = [ 
      { 
       xtype: 'image', 
       src: Ext.Viewport.getOrientation() == 'portrait' ? '../../../img/login.png' : '../../../img/login-small.png', 
       style: Ext.Viewport.getOrientation() == 'portrait' ? 'width:80px;height:80px;margin:auto' : 'width:40px;height:40px;margin:auto' 
      } 
     ]; 
     this.callParent(); 

    } 
}); 

И то же самое для магазина, но в конструкторе

Ext.define('MyAppName.store.MyStore', { 
    extend: 'Ext.data.Store', 

    config: { 
     model: 'MyAppName.model.MyModel', 

     autoLoad: true 
    }, 

    constructor: function(cfg) { 
     this.proxy = { 
      type: 'ajax', 
      url: MyAppName.app.backendUrl + '/data.json', 
      reader: 'json' 
     }; 
     this.callParent(arguments) 
    } 
}); 
Смежные вопросы