я обнаружил, что работает 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
});
};
Большое спасибо за подсказку. У меня есть следующий порядок в файле YML: - сенсорный/Сенча сенсорный-все-debug.js - спецификации/app.js - приложение/**/* JS Но моя проблема не является внешним. (кроме самой рамки Sencha, но это должно быть включено в первую строку «touch/sencha-touch-all-debug.js»), но тот факт, что такие вещи, как Ext.Viewport.getOrientation(), не работают при использовании их на уровне хэш-конфигурации (как описано в моем вопросе), потому что Ext еще не определен (в нем говорится: «Невозможно вызвать метод« getOrientation »неопределенного»). Я не понимаю, почему. – spaudanjo
О, хорошо. Я думаю, что это потому, что viewport (и, следовательно, Ext.Viewport) создается только при вызове метода в Ext.application.Возможно, вам нужно запустить его вручную в тестах на жасмин. http://docs.sencha.com/touch/2.2.1/source/Application.html#Ext-app-Application здесь является исходным кодом для этого, если вы ищете «autoCreateViewport», вы увидите, что теперь это созданный во время запуска. Надеюсь, это поможет. –