如何检查绑定是否在 ExtJS 6 中有效？（测试）

Question

我想在 ExtJS 6.7 应用程序上自动执行一些与数据绑定相关的测试。我可以在 "full application" 中看到绑定工作完美（显然在测试中也可以从屏幕截图中看到），但是我为了自动化测试我不知道我可以听哪些事件。

绑定过程显然是异步的，我需要 "wait" 在检查值之前完成它，但我在 Sencha 文档中找不到任何内容。

实际上我需要一个挂钩到我可以 "assume" 绑定已经完成的某个状态，因为出于测试目的我还想涵盖绑定未完成的情况（即错字在字段名称中，更改绑定 json 结构等）。

请查看屏幕截图下方的代码并提前致谢！

viewController.js:

Ext.define('Pms.view.test.viewController',
    {
        extend: 'Ext.app.ViewController',
        xtype: 'controller.controller'
    });

viewModel.js:

Ext.define('Pms.view.test.viewModel',
{
    extend: 'Ext.app.ViewModel',
    data: {
        windowTitle: 'Title bound!'
    }
});

form.js:

Ext.define('Pms.view.test.form',
{
    extend: 'Ext.window.Window',
    requires: ['Pms.view.test.viewController','Pms.view.test.viewModel'],
    controller: 'controller',
    viewModel: { type: 'Pms.view.test.viewModel' },
    bind: {
        title: '{windowTitle}'
    }
});

form.spec.js:

Ext.Loader.syncRequire([
    'Pms.view.test.form',
    'Pms.view.test.viewModel'
]);

describe('Pms.view.test.form', function() {
    it('Bound',
        function() {
            var w = Ext.create('Pms.view.test.form');
            w.setViewModel(Ext.create('Pms.view.test.viewModel'));
            w.show();
            // the following line is expected to be run in the asynchronous hook I'm looking for
            expect(w.title).to.be('Title bound!');
        });
});

Answer 1

简短的回答是： vm.notify();

详细答案是：

it('Bound',
    function() {
        let form = Ext.create('Pms.view.test.Form'),
            vm = form.getViewModel();

        // form.show(); ==> replaced by autoShow: true
        vm.notify();

        expect(form.getTitle()).to.be('Title bound!');
    }
);

奖金信息：您的代码可以改进：

始终使用大写字母作为文件名（例如 Form.js ==> Pms.view.test.Form）
您可以使用 autoShow 配置

form.show()

对视图使用相同的 alias，viewController 和 viewModel（此处：test-form）
将工作 controller 视为保留字，不要用作您的控制器的名称
命名你的 viewModel ==> 别名：viewmodel.test-form,

查看：

Ext.define('Pms.view.test.Form', {
    extend: 'Ext.window.Window',
    xtype: 'test-form',

    requires: [
        'Pms.view.test.FormController',
        'Pms.view.test.FormModel'
    ],

    controller: 'test-form',
    viewModel: { type: 'test-form' },

    autoShow: true,
    bind: {title: '{windowTitle}'}
});

控制器：

Ext.define('Pms.view.test.FormController', {
    extend: 'Ext.app.ViewController',
    alias : 'controller.test-form'
});

视图模型：

Ext.define('Pms.view.test.FormModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewModel.test-form',

    data: {
        windowTitle: 'Title bound!'
    }
});

如何检查绑定是否在 ExtJS 6 中有效？（测试）

How to check whether the binding worked in ExtJS 6? (testing)

extjs

mocha.js

extjs6

extjs6-classic

karma-mocha

如何检查绑定是否在 ExtJS 6 中有效？ （测试）

How to check whether the binding worked in ExtJS 6? (testing)

extjs

mocha.js

extjs6

extjs6-classic

karma-mocha

如何检查绑定是否在 ExtJS 6 中有效？（测试）