We Keep Coding

Jasmine testing setting component variable

I'm using spyOn, in a jasmine test, to "listen" to a function call from a service,
that function returns an Observable.
I'm getting the error unexpected token U JSON;
The error is generated from the component line:
this.config = JSON.parse(localStorage.getItem('configuration'));
The localStorage item was JSON.stringified;
I understand that this error is usually thrown when JSON.parse = undefined,
So I tried to set the variable within my test i.e.
component.config = mockConfig;
So..
// Storage Mock
function storageMock() {
var storage = {};
return {
setItem: function(key, value) {
storage[key] = value || '';
},
getItem: function(key) {
return key in storage ? storage[key] : null;
},
removeItem: function(key) {
delete storage[key];
},
get length() {
return Object.keys(storage).length;
},
key: function(i) {
var keys = Object.keys(storage);
return keys[i] || null;
}
};
}
let mockConfig = JSON.stringify({
base_url:"http://image_url/",
poster_sizes:['w9', 'w100']
})
//Set storage
let m = storageMock()
m.setItem('configuration', mockConfig)
it('Should set items array with values from MoviesService', () => {
component.config = JSON.parse(m.getItem('configuration'));
let spy = spyOn(moviesService, 'getPreview').and.callFake(()=>{
return Observable.from([[{id1: 1, title: 'a'}, {id1: 2, title: 'b'}]])
})
component.ngAfterViewInit();
expect(component.items.length).toBeGreaterThan(0);
});

For anyone who come across this problem I got this working by by placing this code in the beforeEach wrapper
Object.defineProperty(window, 'localStorage', { value: m });
Basically it uses my mock localStorage variable instead of the one from the window object.

Manage Ember Multiple RSVP Promises on the same route

I am working with the GitHub API in order to load models in a specific route
I am doing two promises one for my personal github details : https://api.github.com/users/user and the other one for my GitHub repositories https://api.github.com/users/user/repos
I can load the models separately but the problem is that i don't figure on how to load both models at the same time in my specific route.
See the code
var IndexRoute = Ember.Route.extend({
model: function(params) {
var url, self, git;
self = this;
git = this.store.createRecord('git',{});
url = 'https://api.github.com/users/user';
return new Ember.RSVP.Promise(function(resolve, reject) {
return Ember.$.getJSON(url, function(data) {
var item = [];
git.setProperties({
name: data.name,
login: data.login,
location: data.location,
company: data.company,
followers: data.followers,
following: data.following
});
item.pushObject(git);
return resolve(item);
});
});
},
model: function(params){
var self, url, repoListProxy;
self = this;
url = 'https://api.github.com/users/user/repos';
repoListProxy = Ember.ArrayProxy.create({
content: []
});
return new Ember.RSVP.Promise(function(resolve, reject) {
return Ember.$.getJSON(url, function(repos) {
if (repos.length) {
repos.toArray().forEach(function(item, index, arr){
var repo;
repo = self.createReposList(item, repoListProxy);
});
repos = repoListProxy.get('content');
return resolve(repos);
}
});
});
},
createReposList: function(repo, arr){
var record
record = this.store.createRecord('repo',{}),
record.setProperties({
name: repo.name,
description: repo.description
})
arr.pushObject(record);
return record;
},
});
How can i load these multiple models with Ember.RSVP.Promise in my specific route?

Since the code you posted is too long to read i didn't implement solution based on it. Here's a common example of loading mutliple promises within a single route in the model hook.
model: function() {
var store = self.get('store');
var someRecord = store.createRecord('foo/bar', {});
var somePromise = imported_promise(someRecord);
return Ember.RSVP.hash({
accessRights: somePromise,
itemData: somePromise.then(function(resolved) {
// Do something here, promise is resolved.
})
myRecord: someRecord,
});
},
Now if you need to access anything from route in the template or controller.
you would first reference to model and then the property.
{{model.myRecord}} or this.get('model.myRecord')
Since you're a nice guy for downvoting me i decided i'd write it for you.
I reccomend using Ic-AJAX : https://github.com/rwjblue/ember-cli-ic-ajax for async calls when you cant use store.find
model: function() {
var store = this.get('store');
var userUrl = 'https://api.github.com/users/user';
var reposUrl = 'https://api.github.com/users/user/repos';
var usersPromise = function() {
return ic.ajax.request(userUrl).then(function(data) {
return store.createRecord('git', {
name: data.name,
login: data.login,
location: data.location,
company: data.company,
followers: data.followers,
following: data.following
})
};
};
var repositoriesPromise = function() {
return ic.ajax.request(reposUrl).then(function(repos) {
return repos.map(function(repo) { // map returns new array no need to write container = [] . container.push(bla)
return store.createRecord('repos', {
name: repo.name,
description: repo.description
});
})
};
}
return Ember.RSVP.hash({
users: usersPromise,
repositories: repositoriesPromise
});
},
Since you're still using a different approach i went ahead and googled its syntax
var gituserPromise = function() {
return Ember.$.ajax(userUrl, {
success: function(data) {
return store.createRecord('git', {
name: data.name,
login: data.login,
location: data.location,
company: data.company,
followers: data.followers,
following: data.following
})
},
error: function(reason) {
reject(reason);
}});
};
return Ember.RSVP.hash({
gitUser: gituserPromise()
});
In hbs i can now do {{model.gitUser.name}}
New link to it http://emberjs.jsbin.com/rutezi/2/edit?html,js,output

Edit property of an object in array of objects

I have a class itemCollection that stores information about purchases. This class has array _items as property where purchases are stores. When user adds new purchase in cart this class using addItem method that adds that item in _items property if its already has this item this method iterates quantity property if not adds new item in array.
Problem is that instead of adding new item in array when other item is chosen its keeps incrementing quantity property of a first item that was added.
cartCollection class (object):
var cartCollection = {
_items: [],
addItem: function(obj) {
'use strict';
var purchase = {
item: {
id: obj.id,
name: obj.name,
price: obj.price
},
thisItemTotal: obj.price,
quantity: 1
};
var result = _.findWhere(this._items, purchase.item.id);
console.log(result);
if (typeof result != 'undefined') {
//console.log(result);
var index = _.findIndex(this._items, {
id: result.item.id
});
//console.log(index);
result.quantity++;
this._items[index] = result;
this._itemTotalPrice();
} else if (typeof result === 'undefined') {
console.log("Im was called!");
this._items.push(purchase);
console.log(this._items);
}
},
...

Since purchase doesn't have an ID, but has an "item" with an ID, The correct find statement should be:
var result = _.find(this._items, function(item) {
return item.item.id == purchase.item.id;
});
It might be better to rename _items to _purchases in order to disambiguate
The complete code should be something like:
addItem: function(obj) {
'use strict';
var purchase = {
item: _.pick(obj, 'id', 'name', 'price')
thisItemTotal: obj.price,
quantity: 1
};
var result = _.find(this._items, function(item) {
return item.item.id == purchase.item.id;
});
console.log(result);
if (result) {
result.quantity++;
this._itemTotalPrice();
}
else {
console.log("Im was called!");
this._items.push(purchase);
console.log(this._items);
}
},

Your findWhere statement is broken. It should be:
var result = _.findWhere(this._items, {id:purchase.item.id});
Good luck

How to retrieve a specific object with Parse.Query

I am using Parse to create a WebApp and I am trying to get an instance of an object Productwith this code:
getProduct: function() {
var productClass = Parse.Object.extend("Product");
var query = new Parse.Query(productClass);
var result = query.get(productId, {
success: function(object) {
console.log(object.get("productName"));
},
error: function(object, error) {
...
}
});
return result;
}
I get a:
result.get is not a function
Printing the object only, I realized that I do not get a Product, I get this in the console (Safari):
[Log] Object (views.js, line 269)
_rejected: false
_rejectedCallbacks: Array[0]
_resolved: true
_resolvedCallbacks: Array[0]
_result: Arguments[1]
__proto__: Object
I tried many ways, but I am not able to retrieve a Product object and its attributes. What am I doing wrong?
EDIT
I am adding my Products View:
window.app.Products = Parse.View.extend({
template: _.template($('#products-template').html()),
el: $('body'),
content: $('#content'),
...
initialize: function() {
_.bindAll(this, 'render');
this.render();
},
render: function () {
$(this.content).html(this.template);
return this;
},
...
getUser: function() {
return Parse.User.current();
},
getUserProduct: function() {
var promise = new Parse.Promise();
var productClass = Parse.Object.extend("Product");
var query = new Parse.Query(productClass);
query.equalTo("objectId", this.getUser().get("product").id);
query.first().then(function(result) {
if(result){
// If result was defined, the object with this objectID was found
promise.resolve(result);
} else {
console.log("Product was not found");
promise.resolve(null);
}
}, function(error){
console.error("Error searching for Product. Error: " + error);
promise.error(error);
});
return promise;
},
setProduct: function() {
this.getUserProduct().then(function(result) {
if(result){
console.log(result.get("productName"));
var productName = result.get("productName");
} else {
console.log("Could not set Product");
}
}, function(error){
console.log("Error: " + error);
});
}
});
I was trying by having a list of parameters and updating them like:
info: {
user: '...',
product: '...'
}
Then passing it to the template:
$(this.content).html(this.template(this.info));
But I am not able to update product.

As I wrote this, I realised that you really aren't saving all that much code by pulling the product search into it's own method. My hope is that it will at least demonstrate to you how to create and call your own custom async methods. For example you may have a query which is much more complex than the current query, or it may perform multiple queries before finding the desired response, in which case it would make sense to pull it into it's own method.
Get Product Async Method
This method retrieves the Product with the given objectID
var getProduct = function(productId) {
var promise = new Parse.Promise();
var Product = Parse.Object.extend("Product");
var query = new Parse.Query(Product);
query.equalTo("objectId",productId);
query.first().then(function(result){
if(result){
// If result was defined, the object with this objectID was found
promise.resolve(result);
} else {
console.log("Product ID: " + productId + " was not found");
promise.resolve(null);
}
}, function(error){
console.error("Error searching for Product with id: " + productId + " Error: " + error);
promise.error(error);
});
return promise;
}
Calling Method
An example of a simple method which calls the above method.
var myMethod = function(){
var productID = "12345678";
getProduct(productID).then(function(result){
if(result){
console.log(result.get("productName"));
var productName = result.get("productName");
var productPrice = result.get("productPrice");
// Now that you have some relevant information about your product
// you could render it out to an Express template, or use this
// value in a calculation etc.
} else {
console.log("Product with objectId: " + productID + " was not found");
}
}, function(error){
console.log("Error: " + error);
});
}
Notes
As these methods are asynchronous, there is no real data being
returned in the 'return value' (the method returns a promise).
Instead we return the relevant data as a result of the promise (where
you see promise.resolve(XXX))
It doesn't make any sense to have a
mutable global variable in this Node.js style architecture.

Backbone object fields are from previous item

I've just started using Backbone.js and my test cases are churning up something pretty weird.
In short, what I am experiencing is -- after I call a Backbone Model's constructor, some of the fields in my object seem to come from a previously item. For instance, if I call:
var playlist = new Playlist({
title: playlistTitle,
position: playlists.length,
userId: user.id
});
playlist.get('items').length; //1
however if I do:
var playlist = new Playlist({
title: playlistTitle,
position: playlists.length,
userId: user.id,
items: []
});
playlist.get('items').length; //0
Here's the code:
define(['ytHelper', 'songManager', 'playlistItem'], function (ytHelper, songManager, PlaylistItem) {
'use strict';
var Playlist = Backbone.Model.extend({
defaults: {
id: null,
userId: null,
title: 'New Playlist',
selected: false,
position: 0,
shuffledItems: [],
history: [],
items: []
},
initialize: function () {
//Our playlistItem data was fetched from the server with the playlist. Need to convert the collection to Backbone Model entities.
if (this.get('items').length > 0) {
console.log("Initializing a Playlist object with an item count of:", this.get('items').length);
console.log("items[0]", this.get('items')[0]);
this.set('items', _.map(this.get('items'), function (playlistItemData) {
var returnValue;
//This is a bit more robust. If any items in our playlist weren't Backbone.Models (could be loaded from server data), auto-convert during init.
if (playlistItemData instanceof Backbone.Model) {
returnValue = playlistItemData;
} else {
returnValue = new PlaylistItem(playlistItemData);
}
return returnValue;
}));
//Playlists will remember their length via localStorage w/ their ID.
var savedItemPosition = JSON.parse(localStorage.getItem(this.get('id') + '_selectedItemPosition'));
this.selectItemByPosition(savedItemPosition != null ? parseInt(savedItemPosition) : 0);
var songIds = _.map(this.get('items'), function(item) {
return item.get('songId');
});
songManager.loadSongs(songIds);
this.set('shuffledItems', _.shuffle(this.get('items')));
}
},
//TODO: Reimplemnt using Backbone.sync w/ CRUD operations on backend.
save: function(callback) {
if (this.get('items').length > 0) {
var selectedItem = this.getSelectedItem();
localStorage.setItem(this.get('id') + '_selectedItemPosition', selectedItem.get('position'));
}
var self = this;
console.log("Calling save with:", self);
console.log("my position is:", self.get('position'));
$.ajax({
url: 'http://localhost:61975/Playlist/SavePlaylist',
type: 'POST',
dataType: 'json',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(self),
success: function (data) {
console.log('Saving playlist was successful.', data);
self.set('id', data.id);
if (callback) {
callback();
}
},
error: function (error) {
console.error("Saving playlist was unsuccessful", error);
}
});
},
selectItemByPosition: function(position) {
//Deselect the currently selected item, then select the new item to have selected.
var currentlySelected = this.getSelectedItem();
//currentlySelected is not defined for a brand new playlist since we have no items yet selected.
if (currentlySelected != null && currentlySelected.position != position) {
currentlySelected.set('selected', false);
}
var item = this.getItemByPosition(position);
if (item != null && item.position != position) {
item.set('selected', true);
localStorage.setItem(this.get('id') + '_selectedItemPosition', item.get('position'));
}
return item;
},
getItemByPosition: function (position) {
return _.find(this.get('items'), function(item) {
return item.get('position') == position;
});
},
addItem: function (song, selected) {
console.log("this:", this.get('title'));
var playlistId = this.get('id');
var itemCount = this.get('items').length;
var playlistItem = new PlaylistItem({
playlistId: playlistId,
position: itemCount,
videoId: song.videoId,
title: song.title,
relatedVideos: [],
selected: selected || false
});
this.get('items').push(playlistItem);
this.get('shuffledItems').push(playlistItem);
this.set('shuffledItems', _.shuffle(this.get('shuffledItems')));
console.log("this has finished calling");
//Call save to give it an ID from the server before adding to playlist.
songManager.saveSong(song, function (savedSong) {
song.id = savedSong.id;
playlistItem.set('songId', song.id);
console.log("calling save item");
$.ajax({
type: 'POST',
url: 'http://localhost:61975/Playlist/SaveItem',
dataType: 'json',
data: {
id: playlistItem.get('id'),
playlistId: playlistItem.get('playlistId'),
position: playlistItem.get('position'),
songId: playlistItem.get('songId'),
title: playlistItem.get('title'),
videoId: playlistItem.get('videoId')
},
success: function (data) {
playlistItem.set('id', data.id);
},
error: function (error) {
console.error(error);
}
});
});
return playlistItem;
},
addItemByVideoId: function (videoId, callback) {
var self = this;
ytHelper.getVideoInformation(videoId, function (videoInformation) {
var song = songManager.createSong(videoInformation, self.get('id'));
var addedItem = self.addItem(song);
if (callback) {
callback(addedItem);
}
});
},
//Returns the currently selected playlistItem or null if no item was found.
getSelectedItem: function() {
var selectedItem = _.find(this.get('items'), function (item) {
return item.get('selected');
});
return selectedItem;
}
});
return function (config) {
var playlist = new Playlist(config);
playlist.on('change:title', function () {
this.save();
});
return playlist;
};
});
basically I am seeing the property 'items' is populated inside of initialize when I've passed in a config object that does not specify items at all. If I specify a blank items array in my config object, then there are no items in initialize, but this seems counter-intuitive. Am I doing something wrong?

The problem is with using reference types (arrays) in the defaults object. When a new Playlist model is created without specifying an items value, the default is applied. In case of arrays and objects this is problematic, because essentially what happens is:
newModel.items = defaults.items
And so all models initialized this way refer to the same array. To verify this, you can test:
var a = new Playlist();
var b = new Playlist();
var c = new Playlist({items:[]});
//add an item to a
a.get('items').push('over the rainbow');
console.log(b.get('items')); // -> ['over the rainbow'];
console.log(c.get('items')); // -> []
To get around this problem, Backbone supports defining Model.defaults as a function:
var Playlist = Backbone.Model.extend({
defaults: function() {
return {
id: null,
userId: null,
title: 'New Playlist',
selected: false,
position: 0,
shuffledItems: [],
history: [],
items: []
};
}
});