I have small SPA test app with Durandal.
Also I have very wired issue.
First, my folder structure is:
App
--durandal
--viewmodels
----user.js
--views
----user.html
--main.js
And when structure is like that all works just fine. But if I create structure like
App
--durandal
--_user
----viewmodels
------user.js
----views
------user.html
I get error like localhost/App/_users/viewmodels/users.html 404 Not Found. And that happens after user.js are loaded by require.js.
my main.js looks like
require.config({
paths: { "text": "../durandal/amd/text" }
});
define(function (require) {
var system = require('../durandal/system'),
app = require('../durandal/app'),
router = require('../durandal/plugins/router'),
viewLocator = require('../durandal/viewLocator'),
logger = require('../logger');
system.debug(true);
app.start().then(function () {
// route will use conventions for modules
// assuming viewmodels/views folder structure
router.useConvention();
// When finding a module, replace the viewmodel string
// with view to find it partner view.
// [viewmodel]s/sessions --> [view]s/sessions.html
// Otherwise you can pass paths for modules, views, partials
// Defaults to viewmodels/views/views.
viewLocator.useConvention();
app.setRoot('viewmodels/shell');
// override bad route behavior to write to
// console log and show error toast
router.handleInvalidRoute = function (route, params) {
logger.logError('No route found', route, 'main', true);
};
});
});
I assume that this issue has something with router.useConvention(); or with viewLocator.useConvention(); but simple can't find any reason for that kind of behavior.
Any help, suggestion, idea how to solve this?
Thanks
This is because of the behavior of the view locator, which by defaults looks for views/viewmodels in the first structure you describe.
You can easily change this behavior by supplying your own view locator function, or by calling useConvention() like this useConvention(modulesPath, viewsPath, areasPath)
Related
OpenUI5 newbie here. I am trying to use OpenUI5 fragments, much like shown in the Walkthrough example, Step 16, in the documentation. I have a problem seeing how this can work properly.
The code below is a copy and paste from the Walkthrough example, Step 16, in the documentation:
onOpenDialog : function () {
var oView = this.getView();
// create dialog lazily
if (!this.byId("helloDialog")) {
// load asynchronous XML fragment
Fragment.load({
id: oView.getId(),
name: "sap.ui.demo.walkthrough.view.HelloDialog"
}).then(function (oDialog) {
// connect dialog to the root view of this component
oView.addDependent(oDialog);
oDialog.open();
});
} else {
this.byId("helloDialog").open();
}
}
Since the HelloDialog fragment is loaded asynchronously, it is clear that the onOpenDialog function may return control to the user before the dialog has been created and opened. It is in the nature of asynchronous calls that we must not make any assumptions about how long it will take until the asynchronous code is executed. Anything is possible. Therefore, we must allow for the possibility that the user has control over the web page for any amount of time before the dialog shows up, say, several seconds. What is the user going to do? They're going to click the button for opening the dialog again, and again, and again, thereby creating the dialog multiple times, subverting the intended logic of the code. To be honest, I am not sure if I would be comfortable having that kind of thing in my code. How should I deal with this?
in general, you're right, the dialog could take time to load but usually, the process takes a fraction of time and the user should not see any "loading" time.
This is possible only if your dialog load data asynchronously too.
If you really want to be sure to give graphical feedback to the user you could do like this:
onOpenDialog : function () {
var oView = this.getView();
// create dialog lazily
if (!this.byId("helloDialog")) {]
// set the view to busy state
oView.setBusy(true);
// load asynchronous XML fragment
Fragment.load({
id: oView.getId(),
name: "sap.ui.demo.walkthrough.view.HelloDialog"
}).then(function (oDialog) {
// remove the busy state
oView.setBusy(false);
// connect dialog to the root view of this component (models, lifecycle)
oView.addDependent(oDialog);
oDialog.open();
});
} else {
this.byId("helloDialog").open();
}
}
I want to access a view's controller from a custom module with some utility functions. Basically you can do this that way:
var oController = sap.ui.getCore().byId("__xmlview1").getController();
The problem is that the above coding will not work in a real environment because __xmlview1is dynamically created by the framework. So I tried to find a possibility to set the ID of the view during instantiation. The problem is - I could not find one:
Trying to give the view an ID in the view.xml file does not work:
<mvc:View
controllerName="dividendgrowthtools.view.dividendcompare"
id="testID"
xmlns="sap.m"
...
Trying to set the ID in the router configuration of the component does not work either:
...
name: "Dividend Compare",
viewId: "test",
pattern: "Dividend-Compare",
target: "dividendcompare"
...
The problem is that I do not have direct control over the instantiation of the XML view - the component respectively the router does it.
So, is there a solution for that problem? Or at least a save way to get the view ID by providing the name of the view?
You should have a look at the SAPUI5 EventBus.
I am pretty sure, you want to let the controller to do something with the dividentcompare view. With the SAPUI5 Eventbus, you can publish actions from one controller to another witout braking MVC patterns.
In your dividendcompare.controller.js:
onInit : function() {
var oEventBus = sap.ui.getCore().getEventBus();
oEventBus.subscribe("MyChannel", "doStuff", this.handleDoStuff, this);
[...]
},
handleDoStuff : function (oEvent) {
var oView = this.getView();
[...]
}
Now, in your anothercontroller.controller.js:
onTriggerDividendStuff : function (oEvent){
var oEventBus = sap.ui.getCore().getEventBus();
oEventBus.publish("MyChannel", "doStuff", { [optional Params] });
}
You are now able to get the view from the dividentcontroller in every case from every other controller of your app. You dont access the view directly, this would brake MVC patterns, but can pass options to its controller and do the handling there.
I have a question regarding how protractor handles the locating of elements.
I am using page-objects just like I did in Webdriver.
The big difference with Webdriver is that locating the element only happens when a function is called on that element.
When using page-objects, it is advised to instantiate your objects before your tests. But then I was wondering, if you instantiate your object and the page changes, what happens to the state of the elements?
I shall demonstrate with an example
it('Change service', function() {
servicePage.clickChangeService();
serviceForm.selectService(1);
serviceForm.save();
expect(servicePage.getService()).toMatch('\bNo service\b');
});
When debugging servicePage.getService() returns undefined.
Is this because serviceForm is another page and the state of servicePage has been changed?
This is my pageobject:
var servicePage = function() {
this.changeServiceLink = element(by.id('serviceLink'));
this.service = element(by.id('service'));
this.clickChangeService = function() {
this.changeServiceLink.click();
};
this.getService = function() {
return this.service.getAttribute('value');
};
};
module.exports = servicePage;
Thank you in advance.
Regards
Essentially, element() is an 'elementFinder' which doesn't do any work unless you call some action like getAttribute().
So you can think of element(by.id('service')) as a placeholder.
When you want to actually find the element and do some action, then you combine it like element(by.id('service')).getAttribute('value'), but this in itself isn't the value that you are looking for, it's a promise to get the value. You can read all about how to deal with promises elsewhere.
The other thing that protractor does specifically is to patch in a waitForAngular() when it applies an action so that it will wait for any outstanding http calls and timeouts before actually going out to find the element and apply the action. So when you call .getAttribute() it really looks like
return browser.waitForAngular().then(function() {
return element(by.id('service')).getAttribute('value');
});
So, in your example, if your angular pages aren't set up correctly or depending on the controls you are using, you might be trying to get the value before the page has settled with the new value in the element.
To debug your example you should be doing something like
it('Change service', function() {
servicePage.getService().then(function(originalService) {
console.log('originalService: ' + originalService);
});
servicePage.clickChangeService();
serviceForm.selectService(1);
serviceForm.save();
servicePage.getService().then(function(newService) {
console.log('newService: ' + newService);
});
expect(servicePage.getService()).toMatch('\bNo service\b');
});
The other thing that I'm seeing is that your pageObject appears to be a constructor when you could just use an object instead:
// name this file servicePage.js, and use as 'var servicePage = require('./servicePage.js');'
module.exports = {
changeServiceLink: element(by.id('serviceLink')),
service: element(by.id('service')),
clickChangeService: function() {
this.changeServiceLink.click();
},
getService: function() {
return this.service.getAttribute('value');
}
};
Otherwise you would have to do something like module.exports = new servicePage(); or instantiate it in your test file.
When you navigate another page, the web elements will be clear, that you selected. So you have to select again. You can select all elements that is in a page of HTML. You can click that you see. So the protactor + Selenium can decide what is displayed.
You have a mistake in your code, try this:
expect(servicePage.getService()).toMatch('\bNo service\b');
I'm trying to implement the basic Passport integration in SailsJS. In my policies.js file, I have the default settings that every tutorial mentions.
'*': ['passport', 'sessionAuth'],
'auth': {
'*': ['passport']
}
My issue is that going to the main page localhost:1337/ doesn't seem to get passed through either policy. If I just set false there, everything still works. If I set false on the auth object for '*' though, I will get Forbidden on any /auth/* route. So, the policies seem to work, I just don't understand why the default catch-all doesn't. Thanks.
Do you use a controller or do you directly serve a view like in the sample homepage?
If you are serving the view directly with something similar to this:
// in config/routes.js
module.exports.routes = {
'/': {
view: 'homepage'
}
}
then you will have to modify it and use a controller in order to te able to use policies.
Create a route to a controller instead of a view:
// in config/routes.js
module.exports.routes = {
// Delete the previous definition and declare a route
// to a controller "index"
'get /': 'indexController.home'
}
Create the controller:
// in api/controllers/IndexController.js
module.exports = {
home: function (req, res) {
// Render the view located in "views/homepage.ejs"
res.view('homepage');
}
};
Then you will be able to manage the policies to apply to the controller index in the file config/policies.js.
in config/routes.js what happens when controller is needed instead of view
module.exports.routes = {
'/': {
view: 'index'
}
};
basically I want to load some data on the index page but I cant because there is no controller, in addition I want to have other pages like about, contact etc... but I prefer to put them to a PublicController instead of routes.js
If I get your question, may be you are looking for something this,
module.exports.routes = {
'/': {
controller: 'User',
action: 'actionName'
}
};
At first I didn't notice your comment. If you want to put all of those sections under different routes(like /about for about section) then there is no way to do it very simply.
But yes I have done it using React.js front end framework, where you can define routes in a single view file using React Routes. Defining in routes.js is not necessary. Rendering that single file from only one controller would enable you to use all those routes defined in that view file. Can't tell you any other way.
Hope it helps.
As your comments show you can specific the controller, action in your routes.
In your controllers you can specify the view to be rendered.
PublicController.js
module.exports = {
randomAction : function(req,res,next){
res.view('./randomActionViewFile');
}
}
Note this is unnecessary if the view file is already in the folder structure api/views/public/randaomActionFile.ext. Instead you can just use res.ok