I'm using angular-confirm to display confirmation messages in a lot of places in my app. For example:
$confirm({
text: 'content',
title: 'title text',
ok: 'Yes',
cancel: 'No'})
.then(function() {
doSomething();
});
I want to globally change the layout in which these dialogs appear in the app. I know that angular-confirm allows you to make a global change like this:
$confirmModalDefaults.templateUrl = 'path/to/your/template';
However, this also overrides the template for all $modal.open() calls, which is not what I want.
I think that the way to do this is by a using a provider to append a template url to every $confirm call in the app but I'm not sure exactly how to do that.
How do I create a provider for $confirm and append a templateUrl parameter to every call?
Figured it out:
function config($provide) {
$provide.decorator('$confirm', confirmProvider);
}
/* #ngInject */
function confirmProvider($delegate) {
return function (data, settings) {
if (settings && !settings.template && !settings.templateUrl) {
settings.template = '<div>my confirm content</div>';
} else {
settings = {
template: '<div>my confirm content</div>'
}
}
return $delegate(data, settings);
};
So now, when $confirm() gets called with data and/or settings, it will apply my custom template unless it's been specified by the caller
Related
When writing tests for my web app; I have to first simulate login before the rest of my tests can run and see inner pages. Right now I'm working on modulating the code, so that way I can just make an 'include' for the common function; such as my login. But as soon as I move the below code in a separate file, and call the include via require - it no longer runs as expected.
ie. the below logs in and allows my other functions, if, included in the same file. above my other inner screen functions.
// Login screen, create opportunity
this.LoginScreen = function(browser) {
browser
.url(Data.urls.home)
.waitForElementVisible('#login', 2000, false)
.click('#login')
.waitForElementVisible('div.side-panel.open', 4000, false)
.waitForElementVisible('input#email', 2000, false)
.waitForElementVisible('input#password', 2000, false)
.click('input#email')
.pause(500)
.setValue('input#email', Data.ProjMan.username)
.click('input#password')
.pause(500)
.setValue('input#password', Data.ProjMan.password)
.click('input#email')
.pause(500)
.click('div.form.login-form .btn')
.pause(5000)
Errors.checkForErrors(browser);
};
// Inner functions run after here, sequentially
But as soon as I move the above in a separate file, for instance; Logins.js, then call it at the top of the original test file with. (yes, correct path).
var Logins = require("../../lib/Logins.js");
It just doesn't simulate the login anymore. Any thoughts? Should I remove the this.LoginScreen function wrapper, and call it differently to execute from the external file, or do I need to fire it from the original file again, aside from the external require path?
I have also tried wrapping 'module.exports = {' around the login function from separate file, but still failing.
Nightwatch allows you to run your Page object based tests i.e you can externalize your common test functions and use them in your regular tests. This can be achieved using 'page_objects_path' property. I have added the common 'login' functionality and used it in sample 'single test' in the project here.
Working:
Place your common function in .js file and place it under a folder(ex: tests/pages/login.js) and pass the folder path in nighwatch config file as below:
nightwatch_config = {
src_folders : [ 'tests/single' ],
page_objects_path: ['tests/pages'],
Below is an example of common login function (login.js):
var loginCommands = {
login: function() {
return this.waitForElementVisible('body', 1000)
.verify.visible('#userName')
.verify.visible('#password')
.verify.visible('#submit')
.setValue('#userName', 'Enter Github user name')
.setValue('#password', 'Enter Github password')
.waitForElementVisible('body', 2000)
}
};
module.exports = {
commands: [loginCommands],
url: function() {
return 'https://github.com/login';
},
elements: {
userName: {
selector: '//input[#name=\'login\']',
locateStrategy: 'xpath'
},
password: {
selector: '//input[#name=\'password\']',
locateStrategy: 'xpath'
},
submit: {
selector: '//input[#name=\'commit\']',
locateStrategy: 'xpath'
}
}
};
Now, in your regular test file, create an object for the common function as below and use it.
module.exports = {
'Github login Functionality' : function (browser) {
//create an object for login
var login = browser.page.login();
//execute the login method from //tests/pages/login.js file
login.navigate().login();
//You can continue with your tests below:
// Also, you can use similar Page objects to increase reusability
browser
.pause(3000)
.end();
}
};
The above answer is absolutly correct however I did struggle with how to supply login user details.
This is what I ended up using:
var loginCommands = {
login: function() {
return this.waitForElementVisible('body', 1000)
.setValue("#email", "<some rnd email address>")
.setValue('#password', "<some rnd password>")
.click('button[type=submit]')
.pause(1000)
}
};
module.exports = {
commands: [loginCommands],
url: function() {
return 'https://example.com/login';
}
};
This can be used in the same way as the accepted answer just posting for others who come searching.
I have recently taken on the development of web app that has been written in AngularJS. In one of the files, myApp.js, there is a provider that is defined as follows:
.provider('myAppConf', function($routeProvider){
var constants = {
'HOMEPAGE': '/alarms',
...
};
// Setter function for constants
this.setConstant = function(constant, value){
constants[constant.toUpperCase()] = value;
};
...
// Other setter functions
...
// Non- setter/ getter functions:
this.addElementOverview = function(){
...
var location = 'pages/elementbrowser';
...
return '/' + location;
}
function addCreatePageRoute(){
$routeProvider.when('/pages/create', {
page: {
editable: true,
title: {
...
},
layout: {
...
},
widgets: [
...
]
}
});
}
// More non- setter/ getter functions
this.$get = ['$q', '$timeout', 'myAppUI' function($q, $timeout, myAppUI){
...
}];
}).run(function(...){
...
});
On most of the pages on the site, there is a 'settings' button, which opens a dialog box that the user can use to change the settings for a given page. I have added a checkbox to that dialog box, which, when checked, I want to use to set the page on which it is checked as the 'home' page, overwriting whichever page was previously the 'home' page. If/ when the checkbox is deselected again, the home page should be set back to its original value (i.e. the /alarms page determined in the constants).
As things currently stand, I have managed to change the home page, so that it is updated to the page selected by the user- when the click 'Home' they are taken to the page on which the checkbox was selected. But as soon as they log out, their chosen home page is forgotten, and when they log in again, the default home page is their home page until they select another one.
I now want to set the user's default home page to whatever they choose as their custom home page, and am trying to use the 'setter function for constants' that is defined in the provider function above.
I have done this by calling:
myAppConf.setConstant(myAppConf.HOMEPAGE, $location.path());
when the 'Confirm' button is pressed on the dialog box (with the 'set as homepage' checkbox checked).
However, when I press the 'Confirm' button, I get a TypeError in my console which says:
TypeError: myAppConf.setConstant is not a function
I don't understand why I'm getting this error... setConstant() is defined as a function with:
this.setConstant = function(constant, value){...};
so why is the console stating that it's not a function? How can I fix this?
Edit
The function where I'm calling myAppConf.setConstant() is defined in Pages/ctrls.js as follows:
angular.module('myApp.pagse')
...
.controller('LayoutCtrl', function($scope, $route, $location, $timeout, Page, myAppConf, NotifyMgr, DialogMgr,myAppUI){
...
$scope.confirm = function(e){
...
if($scope.checkboxModel){
...
myAppConf.setConstant(myAppConf.HOMEPAGE, $location.path());
}else{
console.log("homepage not changed");
}
};
setConstant is myAppConfProvider method, not myAppConf. If it should be available both in config and run phases, it should be defined on both a provider and an instance:
.provider('myAppConf', function(){
...
var commonMethods = {
setConstant: function (constant, value) {
constants[constant.toUpperCase()] = value;
},
...
}
Object.assign(this, commonMethods, {
$get: function () {
return commonMethods;
}
})
})
A cleaner way to do this is to use constant:
.constant('myAppConf', {
_constants: { ... },
setConstant: function (constant, value) {
this[constant.toUpperCase()] = value;
},
...
})
Since getters and setters can be considered antipattern unless they are justified, a KISS alternative is just:
.constant('myAppConf', {
'HOMEPAGE': '/alarms',
...
})
I am developing a project, in which i need to call a native page in wlCommonInit()
function wlCommonInit(){
WL.NativePage.show(nativePageClassName, backFromNativePage, params);
}
I want my project to receive the direct update with persession mode. So to connect with the Mobile First Server, I have called WL.Client.connect()
function wlCommonInit(){
busyind = new WL.BusyIndicator;
busyind.show();
WL.Client.connect({onSuccess: connectSuccess, onFailure: connectFail});
WL.NativePage.show(nativePageClassName, backFromNativePage, params);
}
More over I want to handle the direct update so I have added the required code.
wl_directUpdateChallengeHandler.handleDirectUpdate = function(directUpdateData,
directUpdateContext) {
// custom WL.SimpleDialog for Direct Update
var customDialogTitle = 'Custom Title Text';
var customDialogMessage = 'Custom Message Text';
var customButtonText1 = 'Update Application';
var customButtonText2 = 'Not Now';
WL.SimpleDialog.show(customDialogTitle, customDialogMessage, [{
text: customButtonText1,
handler: function() {
directUpdateContext.start(directUpdateCustomListener);
}
}, {
text: customButtonText2,
handler: function() {
wl_directUpdateChallengeHandler.submitFailure();
}
}]);
};
var directUpdateCustomListener = {
onStart: function(totalSize) {},
onProgress: function(status, totalSize, completeSize) {},
onFinish: function(status) {
WL.SimpleDialog.show('New Update Available', 'Press reload button to update to new version', [{
text: WL.ClientMessages.reload,
handler: WL.Client.reloadApp
}]);
}
};
Here the problem is, the application is navigating to the native page
before it can go to the direct update handler function when the direct
update is available.
Is there any way to resolve it?
I think what you should do instead if use the API [WL.Client.checkForDirectUpdate.
This way you will have the ability to first check for direct update - handle it if there is an update and then execute the function for opening the native page.
The code that is running is async, so you can't control it if you're not following the above suggestion.
I am working on a site where I have to search in the DB for string that come after the / on the root domain. I can't find anything about it in the documentation.
I am trying to make it work with Iron Router but any other suggestion would work out.
Thanks for the help!
Edit: Basically I just want to pass anything that comes after domain.com/ to a variable.
Here's something i've been doing so maybe it'll lead you down the right path
Route sends URL params to ownedGroupList template
Router.route('/users/:_id/groups', {
name: 'owned.group.list',
template: 'ownedGroupList',
data: function() {
return {params: this.params};
}
});
Template ownedGroupList can access params object using this.data in onCreated, onRendered, and onDestroyed template event handlers
Template.ownedGroupList.onCreated(function(){
this.subscribe("owned-groups", this.data.params._id );
});
Template ownedGroupList can access params through this variable in helper methods
Template.ownedGroupList.helpers({
groups: function() {
return Groups.find({owner: this.params._id });
}
});
Template ownedGroupList can access params through template.data variable in event handlers
Template.ownedGroupList.events({
'click .a-button': function(event, template) {
var group = Groups.findOne({owner: template.data.params._id });
// do something with group
}
});
Here's a simple route that should do the trick
Router.route('/:keyword', {
name: 'keyword',
template: 'keywordTemplate',
data: function() {
return this.params.keyword;
}
});
This will pass the keyword as the data context to your template and then you can do whatever you want with it. Alternatively you can perform the search straight in the router (especially if you're passing the keyword to a subscription so that the search runs on the server). For example:
Router.route('/:keyword', {
name: 'keyword',
template: 'keywordTemplate',
waitOn: function(){
return Meteor.subscribe('keywordSearch',keyword);
},
data: function() {
return MyCollection.find();
}
});
This second pattern will send your keyword to a subscription named keywordSearch that will execute on the server. When that subscription is ready, the route's data function will run and the data context passed to your keywordTemplate will be whatever documents and fields have been made available in MyCollection.
Hi I would like to be able to delay the splash of my app for a bit here is what I mean.
This is my shell view:
<div>
<!-- ko compose: { view : header }-->
<!--/ko-->
<!-- ko compose: { view : content }-->
<!--/ko-->
This is my shell viewmodel:
define(['plugins/router', 'services/dataService' , 'models/appViewModels'],
function (router,dataService , appViewModels) {
var vm = {
header: ko.observable(),
content: ko.observable(),
activate: activate
};
function activate() {
setActivePage();
}
function setActivePage() {
$.when(dataService.account.isAuthenticated())
.done(function(isAuthenticated) {
setDefaultDisplayPage(isAuthenticated)
}).fail(function(data) {
alert(data);
});
}
function setDefaultDisplayPage(isAuthenticated) {
if (isAuthenticated) {
setHeaderAndContentObservables(appViewModels.header.generalHeader, appViewModels.content.homeContent);
} else {
setHeaderAndContentObservables(appViewModels.header.loginHeader, appViewModels.content.loginContent);
}
}
}
The reson I am using observables instead of a string representation of a path for my view is because in my shell I am deciding if I should sent my user on the login or homepage
.
This works perfectly except for one thing in the time that it takes to get the isAuthenticated property from the server the splash screen dissapears and the user is left waiting on a blank page until the data is recieved.
Now I could try getting the data in the main.js file and cache it but I figure main.js should have only app configuration responsibility.
Is there any way to make the call to the server for the data before the shell actually get's binded and the splash screen dissapears?
I agree with what PW Kad suggested. Durandal is packed with Q.js.
I had the same scenario
[Check if the user is authenticated=> Load user menus from database through Durandal router which returns a promise => Load the content]
However, I can't see the router in your code.
Anyway, In the activate method you could do something like this:
var vm = {
header: ko.observable(),
content: ko.observable(),
isAuthenticated: ko.observable(false),
activate: activate
};
function activate() {
return Authenticate()
.then(setDefaultDisplayPage)
.fail(failed);
}
function Authenticate() {
// pass an observable as a parameter to your function
dataService.account.isAuthenticated(isAuthenticated);
return Q.resolve();
}
function setDefaultDisplayPage() {
if(isAuthenticated()) {
setHeaderAndContentObservables(appViewModels.header.generalHeader,appViewModels.content.homeContent);
}
else { setHeaderAndContentObservables(appViewModels.header.loginHeader,appViewModels.content.loginContent);
}
}
function failed(){
// failure code goes here
}
This way, your viewmodel won't get binded until data is fetched from the server.