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

I would like to automate some tests related to data binding on an ExtJS 6.7 application. I can see in the "full application" that bindings work perfectly (apparently in tests also as you can see from the screenshots), but I for automating the tests I don't know which events I could listen to.

The binding process is evidently asynchronous and I need to "wait" for it to be completed before I check the values, but I cannot find anything in the Sencha docs.

Actually I would need a hook to some state in which I could "assume" the binding has completed, because for testing purposes I want to also cover the case when the binding doesn't complete (i.e. a typo in a field name, change in the bound json structure, etc).

See the code below the screenshots and thanks in advance!

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

The short answer is: vm.notify();

The detailed anser is:

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

Bonus information: Your code could be improved:

• always use capital letters for file names (e.g. Form.js ==> Pms.view.test.Form)
• instead of using form.show() you can use the autoShow config
• use the same alias for the view, viewController and viewModel (here: test-form)
• treat the work controller as reserved word and do not use as a name for your controller
• name your viewModel ==> alias : viewmodel.test-form,

view:

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

controller:

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

viewModel:

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

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