I've created a protractor test for the following html:
<div class="well well-sm" data-ng-repeat="feedback in f.feedbackList">
Rating: {{feedback.rating}}
<blockquote class="small">{{feedback.comment}}</blockquote>
</div>
In the page.js file I have:
"use strict";
module.exports = (function () {
function AdminFeedbackPage() {
this.comments = element.all(by.repeater('feedback in f.feedbackList').column('feedback.comment')).map(function (comments) {
return comments.getText();
});
this.ratings = element.all(by.repeater('feedback in f.feedbackList').column('feedback.rating')).map(function (ratings) {
return ratings.getText();
});
}
return AdminFeedbackPage; })();
and then in the test in my step.js file:
var feedbackFound = false;
var feedbackIndex;
adminFeedbackPage.comments.then(function (commments) {
for (var i = 0; i < commments.length; i++) {
console.log("Comments " + i + ": " + commments[i]);
if (commments[i] == "TestApplicationFeedback") {
feedbackIndex = i;
console.log("FEEDBACK INDEX - " + feedbackIndex)
feedbackFound = true;
break;
}
}
}).then(function () {
expect(feedbackFound).to.be.true;
}).then(function() {
adminFeedbackPage.ratings.then(function (ratings) {
console.log(ratings);
console.log("RATINGS length " + ratings.length + " and rating is " + ratings[feedbackIndex]);
expect(ratings[feedbackIndex]).to.equal(3);
})
});
And I get the following logs:
Comments 0: Decent App
Comments 1: Really like it
Comments 2: TestApplicationFeedback
FEEDBACK INDEX - 2
[]
RATINGS length 0 and rating is undefined
AssertionError: expected undefined to equal 3
This is really confusing my since the comments are being found without any issue, but the ratings are just an empty array and as far as I can tell I have done the same thing for both.
Does anybody have any suggestions/reasons why the ratings aren't being found? I suspect it's something to do with what is in the page.js file, but I have no idea what could be wrong?
Thanks!
Solved this in the comments above, posting as an answer:
It was just a guess/suggestion based on the HTML, one was a child element and the other was directly inside the repeater (this one was failing to be captured). So my suggestion was to try using .evaluate() source, which acts as if on scope of the given element. So replacing .column() seems to work:
element.all(by.repeater('feedback in f.feedbackList')).evaluate('feedback.rating').then(function(val) {
console.log(val) // should return an array of values (feedback.rating)
})
Related
I have a TableA containing brands with names, names are for example: brand1, 123, brand2, 999.
I want to select names, create button with id=name and pass the name to function brandOnOff(name), then alert the name I passed.
When I press button "123" or "999" it works correctly. But buttons "brand1" and "brand2" don't work - they alert: [object HTMLButtonElement]. I think I have I problem with "" and '' and I don't know how to fix it...
When I alert(document.getElementById("demo").innerHTML) I get:
<button id="brand1" onclick="brandOnOff(brand1)">brand1</button><button id="123" onclick="brandOnOff(123)">123</button><button id="brand2" onclick="brandOnOff(brand2)">brand2</button><button id="999" onclick="brandOnOff(999)">999</button>
and I think it should be like: ... onclick="brandOnOff("brand1")"... etc --- Quotation-mark then name then Quotation-mark
but when I try to add Quotation-marks there's an error "Unexpected end of input" and I keep messing it up.
Can somebody help me please? I'm stuck :(
Here is the code:
DB.transaction(function (tx) {
tx.executeSql('SELECT * FROM TableA', [], function (tx, rs) {
var brand;
for (i = 0; i < brands; i++)
{
brand = rs.rows.item(i).name;
document.getElementById("demo").innerHTML = document.getElementById("demo").innerHTML + '<button id="' + brand + '" onclick="brandOnOff(' + brand + ')">' + brand + '</button>';
}
}, function (tx, error) {
console.log('SELECT error: ' + error.message);
});
});
function brandOnOff(brandName) {
alert(brandName);
}
Your main issue is caused by trying to use inline event handlers, when these are generally considered obsolete and addEventHandler is universally supported.
You should also split out your logic somewhat into smaller testable units, that separate HTML page generation from database code:
// event handler - passed the clicked element in ev.target
function brandOnOff(ev) {
alert(ev.target.id);
}
// takes an array of brand names and generates a button for each
function buildBrandButtons(brands) {
let demo = document.getElementById('demo');
brands.forEach(brand => {
let button = document.createElement('button');
button.id = brand;
button.textContent = brand;
button.addEventListener('click', brandOnOff);
demo.addChild(button);
});
}
// converts a result set into an array of the specified field's values
function getResultSetField(rs, field) {
let values = [];
for (let i = 0; i < rs.rows.length; ++i) {
values.push(rs.rows.item(i)[field]);
}
return values;
}
// the meat - gets the brand names, builds the buttons
function processBrands(tx, rs) {
let brands = getResultSetField(rs, 'name');
buildBrandButtons(brands);
}
// generic error handler
function selectError(tx, error) {
console.log('SELECT error: ' + error.message);
}
// the actual database work
DB.transaction(tx => {
tx.executeSql('SELECT * FROM TableA', [], processBrands, selectError);
});
This may look like a lot more code, but each part has a specific responsibility, and some of these functions may be re-used later (e.g. selectError, getResultSetField).
NB: no nested quote marks, or indeed any that aren't around a string constant.
function addTwo (a, b) {
return a + b;
}
//Leave the function call
addTwo(50, 100);
I'm learning React and I'm trying to create a codecademy type site as a 'learning project', but have run into a JS problem.
Say you have the function above, how do you test it for more than one case? So far I'm testing with:
eval(CODE PULLED IN HERE) === 150 ? alert('Correct!') : alert('Wrong!');
which is obviously going to alert Correct, which is ok for this case. But for other questions (and even this one) I'm going to want more than one test case and that's where I'm stuck.
So, how can I test for multiple test cases, or is there just a whole other way of doing what I'm trying to achieve?
Any help/tips greatly appreciated,
For those who know React here's some code to see a bit of what I currently have :
const CodeEditor = React.createClass({
getInitialState () {
var initialValue = [
"function addTwo () {",
" ",
"}",
"//Leave the function call",
"addTwo(50, 100);"
].join("\n");
return {
kataValue: initialValue
}
},
onChange (newValue) {
this.setState({kataValue: newValue});
},
evalCode () {
var val = this.state.kataValue
eval(val) === 150 ? alert('Correct!') : alert('Wrong!');
},
render () {
return (
<div className="code-editor-wrapper">
<AceEditor
name="editor"
mode="sh"
theme="chaos"
onChange={this.onChange}
value={this.state.kataValue}
editorProps={{$blockScrolling: true}}
/>
<button onClick={this.evalCode} className="spec-btn submit-code-btn">Evaluate</button>
</div>
)
}
})
Don't include the function call in the user's code. Only require the function to be named in a certain way. Instead of directly evaling the user's code, embed into a function that returns the user's function:
function getUserFunction(code, functionName) {
var userCode = new Function(code + '; return ' + functionName + ';');
return userCode();
}
After calling getUserFunction you have a reference to the function the user wrote and you can execute it as often as you want. How you structure your test cases and how much feedback you want to give to the user is up to you.
Here is small example:
var userFn = getUserFunction(this.state.kataValue, 'addTwo');
var testCases = [
[[50, 100], 150],
[[1, 2], 3],
];
var passes = testCases.every(
([input, output]) => userFn(...input) === output
);
if (passes) {
// all test cases pass
}
You can iterate over a bunch of inputs like so:
function addTwo(a, b) {
return a + b
}
for (var i = 0, j; i < 100; i++) {
for (j = 0; j < 100; j++) {
if (addTwo(i, j) !== i + j) console.error('Wrong output for inputs ' + i + ' and ' + j)
}
}
I'm working with Ionic framework as part of an online course I'm taking to learn AngularJS and a great many other tools useful to a web developer. And, being the sort of advanced beginner type, I'm stuck. In this unit, we've learned to leverage local storage to persist data locally so we can get our favourite items even after the app is shut down. However, I have trouble getting that to work.
So here's what I've done:
The Failed Attempt
I can get data into local storage. And I can append data. I do this using this function:
$scope.favoriteData = $localStorage.getObject('favorites', '[]');
$scope.addFavorite = function (index) {
console.log('Current Favorites', $scope.favoriteData);
$scope.favoriteData = Object.keys($scope.favoriteData).map(function(k) { return $scope.favoriteData[k] });
console.log ($scope.favoriteData);
$scope.storeVar = $scope.favoriteData.push("'{id':" + index + '},');
console.log ($scope.favoriteData);
$localStorage.storeObject('favorites', $scope.favoriteData);
console.log('Added Favorite', $scope.favoriteData)
};
In local storage, this produces the following entry:
favorites: ["'{id':0},","'{id':1},"]
So far so good. However, this is useless. Because I need this object to have the following format:
favorites: [{'id':0}, {'id':1}]
and so on. Also, I should not be able to add duplicates. I have a kind of function for that elsewhere, but I am stuck on how to combine the two functions.
The function I have is this:
function (index) {
for (var i = 0; i < favorites.length; i++) {
if (favorites[i].id == index)
return;
}
favorites.push({
id: index
});
};
The problem with this is, I don't understand how it does what it does.
So please, help?
EDIT #1:
The Second Attempt
With the help of #Muli and #It-Z I'm working with the following code right now:
$scope.favoriteData = $localStorage.getObject('favorites', '[]');
$scope.addFavorite = function (index) {
console.log('Current Favorites', $scope.favoriteData);
$scope.favoriteData = Object.keys($scope.favoriteData).map(function(k) { return $scope.favoriteData[k] });
console.log ($scope.favoriteData);
for (var i = 0; i < favorites.length; i++) {
if (favorites[i].id == index) {
console.log ("Found duplicate id " + favorites[i].id);
return;
}
}
$scope.storeVar = $scope.favoriteData.push({id: index});
console.log ($scope.favoriteData);
$localStorage.storeObject('favorites', $scope.favoriteData);
console.log('Added Favorite', $scope.favoriteData)
};
However, this doesn't work because with a nonexistant key favorites, it doesn't work and gives me an error. So I need to implement a check if the key exists and if it doesn't, then it should create one. I've looked at this question, but it didn't work, mainly because I must use the following factory in services.jsto access local storage:
.factory('$localStorage', ['$window', function ($window) {
return {
store: function (key, value) {
$window.localStorage[key] = value;
},
get: function (key, defaultValue) {
return $window.localStorage[key] || defaultValue;
},
storeObject: function (key, value) {
$window.localStorage[key] = JSON.stringify(value);
},
getObject: function (key, defaultValue) {
return JSON.parse($window.localStorage[key] || defaultValue);
}
}
}])
So this is where I'm at right now. And I'm still stuck. Or again stuck. I don't know.
$localStorage handles serialization and deserialization for you so there's no need for $scope.favoriteData = $localStorage.getObject('favorites', '[]');
You can just call:
$scope.favoriteData = $localStorage.favoriteData || {/*Defaults object*/};
Same goes for saving data. use the dot notation.
Check the demo.
As for the duplicates: just handle them yourself like you would normally. when you're done call $localStorage.mySet = modifiedSet (modified set is standard JS object).
Note: this assumes you use ngStorage.
First of all, this line:
$scope.storeVar = $scope.favoriteData.push("'{id':" + index + '},');
Should be:
$scope.storeVar = $scope.favoriteData.push({id: index});
This is because in the original line you are pushing string into favoriteData while you wanted objects.
And if you want to check first for duplicates your can go with somthing like this:
$scope.favoriteData = $localStorage.getObject('favorites', []);
$scope.addFavorite = function (index) {
console.log('Current Favorites', $scope.favoriteData);
$scope.favoriteData = Object.keys($scope.favoriteData).map(function(k) { return $scope.favoriteData[k] });
console.log ($scope.favoriteData);
for (var i = 0; i < favorites.length; i++) {
if (favorites[i].id == index) {
console.log ("Found duplicate id " + favorites[i].id);
return;
}
}
$scope.storeVar = $scope.favoriteData.push({id: index});
console.log ($scope.favoriteData);
$localStorage.storeObject('favorites', $scope.favoriteData);
console.log('Added Favorite', $scope.favoriteData)
};
I have the following function which selects a category from a list of available categories. This function works fine in my first test. But the same function with a different valid category name in my second test fails with the following error.
Error: Index out of bound. Trying to access element at index: 0, but there are only 0 elements that match locator By.cssSelector(".grid-view-builder__category")
this.categoryElements = element.all(by.css('.grid-view-builder__category'));
this.selectCategory = function (categoryName) {
var filteredCategories = this.categoryElements.filter(function (category) {
return category.getText().then(function (text) {
log.info(text);
return text === categoryName;
})
})
filteredCategories.first().click().then(function () {
log.info("Select Category: " + categoryName);
}).then(null, function (err) {
log.error("Category: " + categoryName + " Not Found !!" + err);
});
}
Spec File
var columnSelect = require('pages/grid/columns/columnselector-page')()
it('Add Publisher ID Column to the Grid & Verify', function () {
var columnCountBefore = columnSelect.getColumnCount();
columnSelect.openColumnSelector();
columnSelect.selectCategory('Advanced');
columnSelect.selectColumn('Publisher ID');
columnSelect.apply();
var columnCountAfter = columnSelect.getColumnCount();
expect(columnCountAfter).toBeGreaterThan(columnCountBefore);
});
The problem might be in the way you are defining and using Page Objects. Here is a quick solution to try - if this would help, we'll discuss on why that is happening.
Make the categoryElements a function instead of being a property:
this.getCategoryElements = function () {
return element.all(by.css('.grid-view-builder__category'));
};
this.selectCategory = function (categoryName) {
var filteredCategories = this.getCategoryElements().filter(function (category) {
return category.getText().then(function (text) {
log.info(text);
return text === categoryName;
})
})
filteredCategories.first().click().then(function () {
log.info("Select Category: " + categoryName);
}).then(null, function (err) {
log.error("Category: " + categoryName + " Not Found !!" + err);
});
}
Or, this could be a "timing issue" - let's add an Explicit Wait via browser.wait() to wait for at least a single category to be present:
var EC = protractor.ExpectedConditions;
var category = element(by.css('.grid-view-builder__category'));
browser.wait(EC.presenceOf(category), 5000);
It looks like this has nothing to do with the code posted here, only that the css selector you're using is not finding any elements
New to javascript here, so callbacks are still a little iffy in my brain.
What I'm trying to do is: given a "menu" which is an array of objectId's, query for each foodItem that corresponds to that objectId, get its votes, put it in a min-heap (to determine which are the top 5 items), and return those top 5 items.
My heap at the end is empty because I realize that JavaScript is asynchronous and that when I try to get the heap data, the callback might not have necessarily completed.
If it were just one call, I would just nest the callbacks, but since this is a loop I'm not really sure what to do.
function getTopFoods(menu, heap, callback) {
//go through each objectId, get its foodItem and then its votes, then heap it
console.log("got to TopFoods");
for (var i = 0; i < menu.length; i++) {
var foodID = menu[i];
var FoodItem = Parse.Object.extend("FoodItem");
var foodQuery = new Parse.Query(FoodItem);
foodQuery.equalTo("objectId", foodID);
//get corresponding foodItem
foodQuery.find({
success: function(foodResult) {
//got specific food Item
var votes = foodResult.get("votes");
console.log("votes: " + votes);
if (heap.length < 5) {
heap.queue(foodResult);
} else {
if (votes > heap.peek().get("votes")) {
heap.dequeue();
heap.queue(foodResult);
}
}
},
error: function(error) {
console.log("Food error: " + error.code + " " + error.message);
}
});
}
var topFoods = [];
for (var i = 0; i < 5; i++) {
topFoods[i] = heap.dequeue();
}
callback(topFoods);
}
The easiest way is to use promises; at this stage, this involves using a library (coming to JavaScript proper in ES6). If you want a low-tech solution, just count stuff:
var waitingCount = menu.length;
for (....) {
...
success: function(foodResult) {
...
if (!--waitingCount) {
callback(topFive(heap));
}
},
error: function(error) {
--waitingCount;
...
}
...
}
This is just the basic idea. It would be good if you also decremented the counter on failed responses, since this way a single fail will leave you hanging.
EDIT: Err, obviously, the check needs to go to the bottom of success, not to the top as my snippet indicated before, or you'll miss the last element. I also put in the error case.
EDIT2: As eth3lbert notes, parse.com API also supports promises (I don't work with parse.com, so... thanks for the tip). In that case, here's what you do:
var promises = [];
for (....) {
var promise = foodQuery.find({
...
});
promises.push(promise);
});
Parse.Promise.when(promises).then(function()) {
callback(topFive(heap));
}