Wait for Preload tp complete - Early app state check (ExtJS)
Posted: Tue Jul 09, 2019 1:25 pm
Hello there,
right now we're trying out siesta, which seems good so far.
But we're encountering one specific problem:
How to wait for preloads to complete?
The scenario is the following:
Checking the console, we can see that the preload starts when the "initializing" text vanishes, but finnishes when extjs already did everything it needs - which is too late in this case.
We even tried to inject hooks, but the hooks, which are loaded via the preload, are injected way too late as well.
Is there a clean way to do stuff like this?
Ive also read this blog post: https://www.bryntum.com/blog/mocking-ajax-calls-with-siesta/ which is good for testing stuff after initialization, but some stuff requiring the api happens right within the initialization - how to mock these calls properly?
best regards
Kai Böse
=> log / load order / whatever:
right now we're trying out siesta, which seems good so far.
But we're encountering one specific problem:
How to wait for preloads to complete?
The scenario is the following:
- Working with ext-gen (sencha cmd via npm) as guided here https://bryntum.com/docs/siesta/#!/guide/sencha_testing_cmd_application
- The app registers a state manager right in the application launch process and delays further initialization until state is registered and loaded once
- User LogIn check (via jwt) happens right before this
project.configure({
title: 'Tests',
preload: [
{
text: "console.log('preload started')",
},
'node_modules/sinon/pkg/sinon.js',
'tests/api_stub.js',
{
text: "console.log('preload completed')",
},
],
loaderPath: { // i just tried it out while playing arround, but i guess for cmd i have to use another approach...
'Ext.ux': 'node_modules/@sencha/ext-core/test/resources/ux',
},
});
project.plan({
group: '[Integration][Authorized][Mobile]',
pageUrl: 'index.html?testing&phone',
preload: 'inherit',
alsoPreload: ['tests/hooks/loggedOut.js'], // for test purposes - actually we want the user to be logged in here
items: [
{
title: 'Test Mobile capabilities',
url: 'tests/integration/authorized/mobile/mobile.spec.js',
},
],
});
launch() {
// Run test hooks if registered - hooks will run only when in debug mode
// and when ?testing is given in application url
TestHook.run();
Log.trace(['Application', 'launch'], 'Launching application...');
const mode = Ext.isMobileBrowser ? 'mobile' : 'desktop';
Log.trace(['Application', 'launch'], `Loading application in ${mode} mode...`, Ext.tags);
this.isLoggedIn = User.isLoggedIn();
Log.trace(['Application', 'launch'], `User is logged ${this.isLoggedIn ? 'in' : 'out'}`);
if (this.isLoggedIn) {
return this.initWs(WS_URL, this.initState); // initialize a websocket connection, then the state manager
}
return this.showMain();
},
- The api stub is registered too late, so we cant fetch requests to /state on our server and fake them via sinon
- The alsoPreload: loggedOut is registered too late, so we cannot stub the login check:
sinon.stub(User, 'isLoggedIn').returns(false);
Is there a clean way to do stuff like this?
Ive also read this blog post: https://www.bryntum.com/blog/mocking-ajax-calls-with-siesta/ which is good for testing stuff after initialization, but some stuff requiring the api happens right within the initialization - how to mock these calls properly?
best regards
Kai Böse
=> log / load order / whatever:
preload started
Util.js?_dc=1562670758808:1135 [W] An existing reference is being overwritten for Test Mobile capabilities.app. See the appProperty config.
Log.js?_dc=1562670758808:21 [ Application init ] Initialising application...
Log.js?_dc=1562670758808:21 [ TESTING run ] run test hooks
Log.js?_dc=1562670758808:21 [ Application launch ] Launching application...
Log.js?_dc=1562670758808:21 [ Application launch ] Loading application in mobile mode...
Log.js?_dc=1562670758808:21 [ Application launch ] User is logged in
Log.js?_dc=1562670758808:21 [ Application initWs ] Initialising Websocket...
Log.js?_dc=1562670758808:21 [ Application onUnmatchedRoute ] Redirect to undefined
Log.js?_dc=1562670758808:21 [ Application initState ] Initialising state manager...
Log.js?_dc=1562670758808:21 [ Application showMain ] Loading app entry xtype: main
Log.js?_dc=1562670758808:21 [ MainController onBeforeRender ] Render process started - applying default listeners and data
Log.js?_dc=1562670758808:21 [ MainController onBeforeRender ] Navigation ready event fired
Log.js?_dc=1562670758808:21 [ Application showMain ] Register mobile view viewModel definition
Log.js?_dc=1562670758808:21 [ MainController onMainRouteUpdate ] kundensuche - undefined
Log.js?_dc=1562670758808:21 [ MainController checkAndRunRoute ] kundensuche - undefined; force: no
Log.js?_dc=1562670758808:21 [ MainController doMainRouteUpdate ] customerSearch attempted to be displayed...
api_stub.js:28 LULULULULULULU
VM51342:1 preload completed
loggedOut.js:5 LÖLÖLÖLÖLÖLÖLÖLÖLÖÖLÖLÖ