It was suggested I could use the following:
$wmdInput.on('keyup', _.debounce(function () {
var rawContent = $wmdInput.val();
scope.$apply(function () {
ngModel.$setViewValue(rawContent);
});
}), 300);
However this gives a message: Uncaught TypeError: Object 500 has no method 'apply' from jQuery.
Does anyone know how I could fix this?
As an FYI it was also suggested I could use the following:
var promise;
$wmdInput.on('keyup', function () {
$timeout.cancel(promise);
promise = $timeout(function() {
var rawContent = $wmdInput.val();
ngModel.$setViewValue(rawContent);
}, 2000);
});
I would appreciate comments from the AngularJS experts here. Would the second code work as well as using _lodash? I noticed a lot of posts on github so I hope to see something implemented in the core AngularJS soon.
The (now deleted) answer from #Satpal was correct: you are passing the timeout value (300) as an argument to $wmdInput.on, and not _.debounce.
So try this:
$wmdInput.on('keyup', _.debounce(function () {
var rawContent = $wmdInput.val();
scope.$apply(function () {
ngModel.$setViewValue(rawContent);
});
}, 300));
Related
I have an application that raise an odd error when I run tests. The error is the following :
TypeError: undefined is not a constructor (evaluating 'allKeys[i].match(/^[0-9]+$/)') in node_modules/jasmine-core/lib/jasmine-core/jasmine.js (line 2988)
test/spec/core/http/response-spec.js:92:63
loaded#http://localhost:8080/context.js:151:17
Most of those tests passes, but a very few break. Here is one of the test that breaks:
(function () {
'use strict';
describe('MyAccount.core.http.response', function () {
var ResponseInterceptor = {},
$httpProvider = {},
$window = {},
env = {},
MessageQueue = {};
beforeEach(module('MyAccount.core.environment'));
beforeEach(module('MyAccount.core.http', function (_$httpProvider_, $provide) {
$httpProvider = _$httpProvider_;
MessageQueue = {
dispatch: jasmine.createSpy('dispatch')
};
$window = {
location: {
href: jasmine.createSpy()
}
};
$provide.value('$window', $window);
$provide.value('MessageQueue', MessageQueue);
}));
beforeEach(inject(function (_$window_, _ResponseInterceptor_, _env_) {
$window = _$window_;
ResponseInterceptor = _ResponseInterceptor_;
env = _env_;
}));
describe('response status', function () {
// Asserting that 404 and 403 errors are intercepted.
angular.forEach([404, 403], function (error) {
describe('is ' + error, function () {
beforeEach(function () {
ResponseInterceptor.responseError({
status: error,
data: {
message: 'error ' + error
}
});
});
it('calls MessageQueue.dispatch with the error message', function () {
expect(MessageQueue.dispatch).toHaveBeenCalledWith('error ' + error, {
on: 'global.errors'
});
});
});
});
});
});
})();
I've been stuck on that for few hours now and can't seems to find a solution. Here are the dependencies I'm using and their versions:
karma: ^1.2.0
jasmine-core: ^2.5.0
karma-jasmine: ^1.0.2
karma-phantomjs-launcher: ^1.0.2
phantomjs: ^2.1.7
NOTE: This is a brand new yeoman application using the angular generator.
I had the same problem, but got it solved moments ago.
To repeat what I said in the comments: The error happens when you have two arrays that are equal, believe it or not. If they are unequal, you get the standard error with the differences shown.
jasmine-core 2.5.0. was published two days ago, as of this moment. I downgraded to 2.4.1., and it works.
It seems that 2.5.0. is the culprit.
Downgrade to 2.4.1., until the publisher gets it solved.
My setup: maven/frontend-maven-plugin/karma(*)/phantomJS
(*) could probably have said 'Jasmine' here as well.
I am having no joy with implementing require: {} property as part of an angular component. Allow me to demonstrate with an example I have.
This is the component/directive that supposed to fetch a list of judgements. Nothing very fancy, just a simple factory call.
// judgements.component.js
function JudgementsController(GetJudgements) {
var ctrl = this;
ctrl.Get = function () {
GetJudgements.get().$promise.then(
function (data) {
ctrl.Judgements = data.judgements;
}, function (error) {
// show error message
});
}
ctrl.$onInit = function () {
ctrl.Get();
};
}
angular
.module('App')
//.component('cJudgements', {
// controller: JudgementsController,
//});
.directive('cJudgements', function () {
return {
scope: true,
controller: 'JudgementsController',
//bindToController: true,
};
});
I am trying to implement component require property to give me access to ctrl.Judgements from the above component/directive as follows:
// list.component.js
function ListController(GetList, GetJudgements) {
var ctrl = this;
ctrl.list = [];
ctrl.Get = function () {
GetList.get().$promise.then(
function (data) {
ctrl.list = data.list;
}, function (error) {
// show error message
});
};
//ctrl.GetJudgements = function () {
// GetJudgements.get().$promise.then(
// function (data) {
// ctrl.Judgements = data.judgements;
// }, function (error) {
// // show error message
// });
//}
ctrl.$onInit = function () {
ctrl.Get();
//ctrl.GetJudgements();
};
}
angular
.module('App')
.component('cTheList', {
bindings: {
listid: '<',
},
controller: ListController,
controllerAs: 'ctrl',
require: {
jCtrl: 'cJudgements',
},
template: `
<c-list-item ng-repeat="item in ctrl.list"
item="item"
judgements="ctrl.Judgements"></c-list-item>
<!--
obviously the reference to judgements here needs to change
or even better to be moved into require of cListItem component
-->
`,
});
Nice and simple no magic involved. A keen reader probably noticed GetJudgement service call in the ListController. This is what I am trying to remove from TheList component using require property.
The reason? Is actually simple. I want to stop database being hammered by Judgement requests as much as possible. It's a static list and there is really no need to request it more than once per instance of the app.
So far I have only been successful with receiving the following error message:
Error: $compile:ctreq
Missing Required Controller
Controller 'cJudgements', required by directive 'cTheList', can't be found!
Can anyone see what I am doing wrong?
PS: I am using angular 1.5
PSS: I do not mind which way cJudgement is implemented (directive or component).
PSSS: If someone wonders I have tried using jCtrl: '^cJudgements'.
PSSSS: And multiple ^s for that matter just in case.
Edit
#Kindzoku posted a link to the article that I have read before posting the question. I hope this also helps someone in understanding $onInit and require in Angular 1.5+.
Plunker
Due to popular demand I made a plunker example.
You should use required components in this.$onInit = function(){}
Here is a good article https://toddmotto.com/on-init-require-object-syntax-angular-component/
The $onInit in your case should be written like this:
ctrl.$onInit = function () {
ctrl.jCtrl.Get();
};
#iiminov has the right answer. No parent HTML c-judgements was defined.
Working plunker.
Need help testing user interactions with mocha selenium webdriver. No idea where to find what the correct method is to get value of text input. Tried various variations on getAttribute(), getText etc. Get the same error:
TypeError: Object [object object] has no method 'getElementText'
Here is my code:
var assert = require('assert'),
fs = require('fs');
var webdriver = require('../node_modules/selenium-webdriver'),
test = require('../node_modules/selenium-webdriver/testing'),
remote = require('../node_modules/selenium-webdriver/remote');
test.describe('Google Search', function() {
var driver;
this.timeout(60000);
test.before(function() {
driver = new webdriver.Builder().
withCapabilities(webdriver.Capabilities.chrome()).
build();
});
test.it('should append query to title', function() {
//setTimeout(done, 60000);
driver.get('http://localhost:8080/devanagariTextField/index.html');
driver.findElement(webdriver.By.id('textbox')).sendKeys('gaa');
//driver.findElement(webdriver.By.name('btnG')).click();
driver.wait(function() {
return driver.getElementText('value').then(function(text) {
console.log('TEXT: ' + text)
return 'गा' === text;
});
}, 1000);
});
//test.after(function() { driver.quit(); });
});
You need to perform the getText/getAttribute call on the element, not the driver object
var myTextBox = driver.findElement(webdriver.By.id('textbox'));
myTextBox.sendKeys('gaa');
//You will probably want to use getAttribute()
var elementContent = myTextBox.getText();
var elementValue = myTextBox.getAttribute("value");
This is what worked for me in the end. I needed to use the .then() function after the sendKeys() call and then return the value attribute at that point. Steve's answer was helpful but I came to this by playing around with an example set up on git hub called selenium-mocha-chai-saucelabs.
describe('textbox value', function (done) {
it('is expected to equal ka when keys ka are sent', function (done) {
driver.findElement(webdriver.By.id("textbox"))
.sendKeys("ka")
.then(function(){
return driver.findElement(webdriver.By.id("textbox")).getAttribute("value");
})
.then(function (value) {
expect(value).to.equal('ka');
done();
});
});
});
I'm trying to get an e2e test running against my local server and test that the resulting url (after a navigational button has been clicked) is the correct result. However the resulting url is always false.
My code is shown below:
HTML:
//http://localhost/#/current_Page
<html>
<head><title></title></head>
<body>
//should change the current url to
//http://localhost/#/new_page
<button class="button" ng-click="change_page()">Change Page</button>
</html>
TEST CODE:
var protractor = require('protractor');
require('protractor/jasminewd');
describe('Tests', function() {
var ptor;
describe('Test 1', function() {
var ptor = protractor.getInstance();
ptor.get('#/current_page');
it('change page and current url', function() {
ptor.findElement(protractor.By.className('.button').click().then(function() {
expect(ptor.currentUrl()).toContain('#/new_page');
});
});
}, 30000);
});
The issue is the current url after clicking the button remains #/current_url and does not change to the expected result #/new_page.
Does anyone know where I have gone wrong?
After search for the answer to this question I figured it out myself
The current url does not fail, I was not waiting for the promise to return to angular. The ammended code below shows where I had gone wrong
var protractor = require('protractor');
require('protractor/jasminewd');
describe('Tests', function() {
var ptor;
describe('Test 1', function() {
var ptor = protractor.getInstance();
ptor.get('#/current_page');
it('change page and current url', function() {
ptor.findElement(protractor.By.className('.button').click().then(function() {
ptor.waitForAngular();
expect(ptor.currentUrl()).toContain('#/new_page');
});
});
}, 30000);
});
This then waits for angular to route to the new page and update any bindings and then proceeds to check the expected result which is now what I would expect it to be.
Please be advised that this does not solve all issues relating to unexpected getCurrentUrl() results. if using driver.findElement() you may need to refer to JulieMR's answer to this question
I hope this helps someone stuck on this issue.
In Protractor 1.5.0 protractor.getInstance(); isn't working anymore, so you have to use browser instead.
var protractor = require('protractor');
require('protractor/jasminewd');
describe('Tests', function() {
describe('Test 1', function() {
browser.get('#/current_page');
it('change page and current url', function() {
ptor.findElement(protractor.By.className('.button').click().then(function() {
browser.waitForAngular();
expect(browser.getCurrentUrl()).toContain('#/new_page');
});
});
}, 30000);
});
You can also write a custom expected condition to wait for current url to being equal a desired one. Besides, use browser and element notations:
browser.get("#/current_page");
it("change page and current url", function() {
element(by.css(".button")).click();
browser.wait(urlChanged("#/new_page")), 5000);
});
where urlChanged is:
var urlChanged = function(url) {
return function () {
return browser.getCurrentUrl().then(function(actualUrl) {
return actualUrl.indexOf(url) >= 0;
});
};
};
Or, a Protractor>=4.0.0 solution and the urlContains expected condition:
element(by.css(".button")).click();
var EC = protractor.ExpectedConditions;
browser.wait(EC.urlContains("#/new_page"), 5000);
I'm just getting started with Jasmine and trying to set up some tests for the first time. I have a Backbone collection. I figured I would get my collection as part of the beforeEach() method, then perform tests against it.
I have a test json object that I used while I prototyped my app, so rather than mocking an call, I'd prefer to reuse that object for testing.
Here's my code so far (and it is failing).
describe("Vehicle collection", function() {
beforeEach(function() {
this.vehicleCollection = new Incentives.VehiclesCollection();
this.vehicleCollection.url = '../../json/20121029.json';
this.vehicleCollection.fetch();
console.log(this.vehicleCollection);
});
it("should contain models", function() {
expect(this.vehicleCollection.length).toEqual(36);
console.log(this.vehicleCollection.length); // returns 0
});
});
When I console.log in the beforeEach method -- the console look like this ...
d {length: 0, models: Array[0], _byId: Object, _byCid: Object, url: "../../json/20121029.json"}
Curiously when I expand the object (small triangle) in Chrome Developer Tools -- my collection is completely populated with an Array of vehicle models, etc. But still my test fails:
Error: Expected 0 to equal 36
I'm wondering if I need to leverage the "waitsFor()" method?
UPDATE (with working code)
Thanks for the help!
#deven98602 -- you got me on the right track. Ultimately, this "waitsFor()" implementation finally worked. I hope this code helps others! Leave comments if this is a poor technique. Thanks!
describe("A Vehicle collection", function() {
it("should contain models", function() {
var result;
var vehicleCollection = new Incentives.VehiclesCollection();
vehicleCollection.url = '/json/20121029.json';
getCollection();
waitsFor(function() {
return result === true;
}, "to retrive all vehicles from json", 3000);
runs(function() {
expect(vehicleCollection.length).toEqual(36);
});
function getCollection() {
vehicleCollection.fetch({
success : function(){
result = true;
},
error : function () {
result = false;
}
});
}
});
});
Just glancing at your code, it looks to me like fetch has not yet populated the collection when you run the expectation.
You can use the return value from fetch to defer the expectation until the response is received using waitsFor and runs:
beforeEach(function() {
this.vehicleCollection = new Incentives.VehiclesCollection();
this.vehicleCollection.url = '../../json/20121029.json';
var deferred = this.vehicleCollection.fetch();
waitsFor(function() { return deferred.done() && true });
});
it("should contain models", function() {
runs(function() {
expect(this.vehicleCollection.length).toEqual(36);
});
});
I haven't actually tried this can't guarantee that it will work as-is, but the solution will look something like this. See this article for more on asynchronous testing with Jasmine.
the collection.fetch() is asyn call that accepts success and error callbacks
var result;
this.collection.fetch({success : function(){
result = true;
}})
waitsFor(function() {
return response !== undefined;
}, 'must be set to true', 1000);
runs(function() {
expect(this.vehicleCollection.length).toEqual(36);
console.log(this.vehicleCollection.length); // returns 0
});