I cant see any data in my created View, I've tested with:
ga('create', 'Tracking Id', 'auto');
ga('set', 'userId', 'email#test.com');
`ga('create', 'Tracking Id', 'auto', {
userId: "email#test.com"
});`
But none of above works
Related
I am using BootstrapDialog to show a dialog box. If the user clicks delete it calls my service and deletes it from the database. If they click cancel it closes the dialog.
I am writing unit tests and this one is puzzling me. The call to my service is nested pretty deep and I wouldn't even know how to make the tests know which path I'm testing.
My code in the controller:
$scope.deleteInventoryEntry = function(id){
//launch dialog
BootstrapDialog.show({
title: 'CONFIRM DELETION',
message: 'Are you sure you want to delete this record?',
closable: false,
type: BootstrapDialog.TYPE_DANGER,
buttons: [{
label: 'Cancel',
action: function(dialog) {
dialog.close();
}
}, {
label: 'Delete',
icon: 'glyphicon glyphicon-remove',
cssClass: 'btn-danger',
action: function(dialog) {
//remove item from database
tankService.deleteInventoryEntry(id).success(function (response) {
//remove item from table if successful
if(response > 0){
//figure out which item to remove from table
var pos = $scope.invTable.filtered.map(function(item) { return item._id; }).indexOf(id);
//remove from table
$scope.invTable.filtered.splice(pos,1);
$scope.selectedItem.lineItems = [];
dialog.close();
//$scope.successGrowl(' QC Deleted Successfully');
}
});
}
}
]
});
};
My Test
it('prompts on delete inventory item', function(){
spyOn(BootstrapDialog, 'show').and.callThrough();
$scope.deleteInventoryEntry(1);
expect(BootstrapDialog.show).toHaveBeenCalled();
});
I can also test if say the ID was NAN or Null and the dialog shouldn't show. But I'm just curious if I should be somehow testing tankService.deleteInventoryEntry() was called. I feel like I should but does that mean I have to mock this entire dialog item?
Any help to point me in the right direction would be much appreciated.
Thanks!
Rule of thumb to any testing. Don't test the implementation, but the behavior. For instance you should test that when you filled a form and clicked a submit button it was sent to your API and something happened in response. Tests should be independent from the view part as much as possible (eg. was the form located in a modal or somewhere in the page).
I have an app that needs to query my Mongo Database and return all items that match the specified criteria so they can be rendered to the DOM. I have tested the database with both postman and locally through my app, due to this I have determined that all information is being stored correctly. My problem is that I don't entirely know where the query should take place within my app.
The user will use a drop down to specify a type of business, once this is done all business that match this type should populate the DOM. Below is the code that I have so far:
This is the user controller:
angular.module('UserCtrl', [])
.controller('UserSelectController', function($scope, queryFactory) {
//list out all of our specialty types of food in the below array -- this will populate in our dropdown selection for our user_BusDirectory.html view
$scope.listOfTypes = ['Type 1', 'Type 2', 'Type 3', 'Type 4', 'Type 5', 'Type 6', 'Type 7', 'Type 8'];
//invoke function to call a GET request to get business with that type of specialty
$scope.getBusiness = function(){
console.log('You selected: ', $scope.selectedType);
queryFactory.queryType($scope.selectedType);
};
});
The following resides in my factory:
angular.module('queryService', [])
.factory('queryFactory', function($http){
var queryType = function(type){
console.log('What is the type that has been passed in: ',type)
var query = businesses.find({specialty: type}).exec(function(err, businessMatches){
if(err){
console.log(err);
return res.send({ errorMessage : err})
}else{
res.json(businessMatches);
}
});
console.log("Did query recieve all the types? :", query);
}
return {
queryType: queryType
}
});
Within my Mongo database businesses is the name of the collection that I would like to query. I keep getting ReferenceError: businesses is not defined when I try to test the function which leads me to believe that my approach is misguided.
I spent some time to give you and idea what you structure should look like.
Your API handler on the server should look like this:
app.get('api/businesses', function(req, res) {
Businesses.find({specialty: req.query.type})
.then(function(businesses){
res.json(businesses);
})
.catch(function(error){
console.log("There was error retrieving businesses" + error);
});
});
and on the Front End the factory that makes http call should look like:
angular.module('queryService', [])
.factory('queryFactory', function($http){
var getBusinesses = function(type) {
return $http({
method: 'GET',
url: 'api/businesses?type=' + type
})
};
return {
getBusinesses: getBusinesses
}
});
and Controller has to do something with data after response comes back:
angular.module('UserCtrl', [])
.controller('UserSelectController', function($scope, queryFactory) {
$scope.listOfTypes = ['Type 1', 'Type 2', 'Type 3', 'Type 4', 'Type 5', 'Type 6', 'Type 7', 'Type 8'];
$scope.getBusiness = function(){
queryFactory.getBusinesses($scope.selectedType)
.then(function(response){
// do something with response.data
// put it on $scope.businesses
});
};
});
'businesses' is undefined because it has not been assigned. Your code is missing any server calls to retrieve the data. You need:
A REST call to get the data
Suggest passing 'type' in the server call so the endpoint returns only the data needed.
queryType should return a promise ($q) that is resolved when the data is returned.
I'm trying to integrate Angular Bootstrap Calendar to my Laravel 5 project. Right now, the calendar works using the provided pre-populated demo list of events.
vm.events = [
{
title: 'An event',
type: 'warning',
startsAt: moment().startOf('week').subtract(2, 'days').add(8, 'hours').toDate(),
endsAt: moment().startOf('week').add(1, 'week').add(9, 'hours').toDate(),
draggable: true,
resizable: true
}, {
title: 'Event 2',
type: 'info',
startsAt: moment().subtract(1, 'day').toDate(),
endsAt: moment().add(5, 'days').toDate(),
draggable: true,
resizable: true
}, {
title: 'This is a really long event title that occurs on every year',
type: 'important',
startsAt: moment().startOf('day').add(7, 'hours').toDate(),
endsAt: moment().startOf('day').add(19, 'hours').toDate(),
recursOn: 'year',
draggable: true,
resizable: true
}
];
I would like to retrieve and format the events from my database like the example above, but I'm not sure how to tackle this from my controller.
On the Angular Calendar side, I've read that I can use the angular $http service to load the events, like this:
$http.get('/events').success(function(events) {
//TODO - format your array of events to match the format described in the docs
$scope.events = events; //Once formatted correctly add them to the scope variable and the calendar will update
});
Any help would be greatly appreciated
What you would want to do is create a service that takes care of all the HTTP request/response handling and have your controller consume it to get/save/update data. Something like:
// assuming that you have a REST service endpoint at /events
// create your service that will handle all HTTP interaction for the events resource
app.factory('EventsService', ['$http', function($http) {
return {
getAll: function() {
// fetch all events asynchronously
return $http.get('/events').success(function(response) {
var events = response.data;
// if you need to do any pre-processing of the events first, do it here
// pass your events to the next function in the promise chain.
return events;
}, function(err) {
// handle errors here
// pass your error object down the chain in case other error callbacks are added later on to the promise.
return err;
});
}
};
}]);
app.controller('YourController', ['$scope', 'EventsService', function($scope, EventsService) {
// call the asynchronous service method and add your promise success callback that returns your array of events to be bound to your context.
EventsService.getAll().then(function(evts) {
$scope.events = evts;
}, function(err) {
// do any additional error handling here
});
});
I am following the 'Getting started tutorial' and I have this simple Ext.js code:
Ext.define('TutorialApp.view.Main', {
extend: 'Ext.container.Container',
requires:[
'Ext.tab.Panel',
'Ext.layout.container.Border'
],
xtype: 'app-main',
layout: {
type: 'border'
},
items: [{
region: 'west',
xtype: 'panel',
title: 'west',
width: 150
},{
region: 'center',
xtype: 'tabpanel',
items:[{
title: 'Center Tab 1'
}]
}],
listeners: {
afterrender: function () {
alert('hi there')
}
}
});
I'd like to know how to get the "alert" pop up to say, "Hi there red" where "red" is the user that has just successfully performed Basic authentication.
It depends on whether your Basic authentication is performed on accessing the whole page, or only on your client side application accessing a restricted area on the same domain via AJAX.
In the first case you will need the server side to pass the Basic auth username to the client (there is no way JavaScript can access it otherwise). This may be done by getting the server insert a custom bit of JavaScript containing the username (and potentially other useful stuff that only the server knows):
<script type="text/javascript">
window.CONTEXT = {
// other useful stuff
username: 'red'
}
</script>
With the above in place, your alert will be simply:
alert('Hi there ' + CONTEXT.username)
In the second case (sending Basic auth credentials via AJAX) your client side will know the username in the first place, so upon authentication success it will know what name to show in the alert. The actual code will depend on the component doing the authentication, but a good approach would be to have a singleton for it that will have methods for performing authentication, telling whether user is authenticated and what the username is. So your alert will simply call it:
alert('Hi there ' + TutorialApp.Auth.getUsername())
I followed closely guide on Localization: http://docs.sencha.com/ext-js/4-0/#!/guide/localization, however I cannot make it work in MVC pattern.
I don't need dynamic localization like previous example, I just want to set it when application loads.
I tried like this:
Ext.application({
name: 'KS',
appFolder: 'app',
controllers: ['Menu', 'DailyReport', 'DP'],
launch: function() {
Ext.Ajax.request({
url: 'lib/ext-4.0/locale/ext-lang-es.js',
success: function(response, opts) {
eval(response.responseText);
},
failure: function() {
Ext.Msg.alert('Error', 'Error al cargar archivos de idioma.');
}
});
Ext.create('Ext.container.Viewport', {
items: [{
xtype: 'menu'
},
{
xtype: 'dpedit'
}]
});
}
});
In firebug I get: "Ext.view is undefined" error, and nothing renders. If I try Ajax call after creating Viewport, I don't get any error, but translation is not applied.
A more elegant solution would be to let the autoloader load the class before your launch method is run.
You can do this by define Ext.view.View as required:
Ext.application({
name: 'KS',
appFolder: 'app',
controllers: ['Menu', 'DailyReport', 'DP'],
// This will make shure the class is loaded before your application runs:
requires : ['Ext.view.View'],
launch: function() {
Ext.Ajax.request({
url: 'lib/ext-4.0/locale/ext-lang-es.js',
success: function(response, opts) {
eval(response.responseText);
},
failure: function() {
Ext.Msg.alert('Error', 'Error al cargar archivos de idioma.');
}
});
Ext.create('Ext.container.Viewport', {
items: [{
xtype: 'menu'
},
{
xtype: 'dpedit'
}]
});
}
});
For more details refer to the extjs api
It will work in production mode, when all ext javascript files are loaded before your application start. I had this problem also. Try to do this to test: Import the 'ext-all.js' file and after that, import your language file. This will work. Not the best solution, but the only one I've found that works.
The cause of your problem:
If you open your translation file you will notice directives like this:
Ext.view.View.prototype.emptyText = "";
If the file 'Ext.view.View.js' isn't loaded in the moment that you load your translation file, you'll get an error, because the 'Ext.view.View' class didn't exists.
I hope anybody can help you with a better solution.
I solved this very easily. It's simple and it will work much better. Put this in your document head, after ext.js/ext-all.js, and before your app.js. (I put it at the bottom of the language.js per the localization guide)
var params = Ext.urlDecode(window.location.search.substring(1));
if (params.lang) {
var url = Ext.util.Format.format('/assets/extjs/locale/ext-lang-{0}.js', params.lang);
document.write("<script src='" + url + "'><\/script>");
}
I'm using the /assets to work with rails 3.1.
This facilitates the ?lang=fr in the query params, the rest of the app should work according to the guide.
http://docs.sencha.com/ext-js/4-0/#!/guide/localization