If I change the order of my Ember/Qunit tests, they pass. Why is that, or what can I do to avoid it?
Edit: I notice that the Qunit tests run in a more or less random order (whichever is ready first?), regardless, when TEST B follows TEST A, it is failing.
It seems that either App.reset() isn't fully resetting or there is some async issue I'm not seeing.
spec
module("Integration Tests", {
setup: function() {
console.log('reset');
Encompass.reset();
}
});
test("TEST A", function() {
visit("/workspaces").then(function() {
ok(true);
});
});
test("TEST B", function() {
visit('/workspaces/1/submissions/1').then(function() {
ok(find('li[title="Kyle Folder 1"]').length, "the folder is there");
});
});
I have both versions of the test online.
A then B, B fails
B then A, both pass
This is using the fixture adapter with a bunch of models (possibly not all the correct relations, but I still expect the tests to be consistent regardless of order)
App.reset() resets the ember application itself, it doesn't reset Ember Model/Data.
You'll need to use unloadAll for Ember Data:
this.store.unloadAll('post');
For Ember Model you'll use clearCache:
App.Post.clearCache();
Have you tried allowing the visit to resolve before running ok on test A?
test("TEST A", function() {
visit("/workspaces").then( function(){
ok(true);
});
});
Related
gulp.watch('watch', function() {
watch('./app/index.html', function() {
gulp.start('html');
});
});
I want to run a task named 'html' when any changes to the file are made. It worked in the previous version of gulp for as for now it generates the following error.
gulp.start is not a function.
I can't find any way to achieve this in the newer version of the gulp. All I found that I need to change it to function, but I can't seem to find what I need to change and how?
The rest of the code is as follows
var gulp = require("gulp"),
watch = require('gulp-watch');
gulp.task('default', function(done){
console.log("You created the default task");
done();``
});
gulp.task('html', function(done){
console.log('modifying the html');
done();
});
gulp.watch('watch', function() {
watch('./app/index.html', function() {
gulp.start('html');
});
});
You don't need to convert your tasks to named functions - although that is considered best practice and is easy to do.
To fix your watch task, try:
gulp.watch('watch', function(done) {
watch('./app/index.html', gulp.series('html'));
done();
});
To change to named functions:
function html(done) {
gulp.src(….)
console.log('modifying the html');
done();
};
function watch(done) {
watch('./app/index.html', gulp.series('html'));
done();
});
exports.html= gulp.series(html);
exports.default = gulp.series(watch);
Note that now the watch task is not called as a string, i.e., 'watch', but just watch.
In exports.html, the gulp.series is not strictly needed as there is only one task there so exports.html= html; is sufficient.
And you only need to export a task if you wish to call it directly (as from the command line gulp html for example). If say the html task will only be called internally by other tasks then there is no need to export it.
I have a reasonably special use-case:
I have an input field which issues a search when the user has stopped typing for 500ms. This is developed as a reusable add-on.
I would like to write an acceptance test for this but I cannot make the tests pass properly. The first passes, the second doesn't.
Now, the Ember runloop has a nice description but it's behaviour is really "something else".
This is my helper to timeout the runloop:
import Ember from 'ember';
export default Ember.Test.registerAsyncHelper('pauseFor', function (time) {
return Ember.Test.promise(function (resolve) {
Ember.run.later(resolve, time);
});
});
And this is how I use it
it('should do something after 500ms', function () {
visit('/');
fillIn('.search-input', 'a');
pauseFor(500);
andThen(function () {
// do my assertions/expectations here...
});
});
This is the error I get:
The weird thing is that I have 2 test cases and the first passes happily.
I guess my question is:
How to do this properly? What am I missing here or what am I doing wrong? How can I just simply timeout the test case?
Thanks for the halp!
I'm trying to connect to SoundCloud using CasperJS. What is interesting is once you signed in and rerun the login feature later, the previous login is still active. Before going any further, here is the code:
casper.thenOpen('https://soundcloud.com/', function() {
casper.click('.header__login');
popup = /soundcloud\.com\/connect/;
casper.waitForPopup(popup, function() {
casper.withPopup(popup, function() {
selectors = {
'#username': username,
'#password': password
};
casper.fillSelectors('form.log-in', selectors, false);
casper.click('#authorize');
});
});
});
If you run this code at least twice, you should see the following error appears:
CasperError: Cannot dispatch mousedown event on nonexistent selector: .header__login
If you analyse the logs you will see that the second time, you were redirected to https://soundcloud.com/stream meaning that you were already logged in.
I did some research to clear environments between each test but it seems that the following lines don't solve the problem.
phantom.clearCookies()
casper.clear()
localStorage.clear()
sessionStorage.clear()
Technically, I'm really interested about understanding what is happening here. Maybe SoundCloud built a system to also store some variables server-side. In this case, I would have to log out before login. But my question is how can I perfectly isolate and clear everything between each test? Does someone know how to make the environment unsigned between each test?
To clear server-side session cache, calling: phantom.clearCookies(); did the trick for me. This cleared my session between test files.
Example here:
casper.test.begin("Test", {
test: function(test) {
casper.start(
"http://example.com",
function() {
... //Some testing here
}
);
casper.run(function() {
test.done();
});
},
tearDown: function(test) {
phantom.clearCookies();
}
});
If you're still having issues, check the way you are executing your tests.
Where did you call casper.clear() ?
I think you have to call it immediately after you have opened a page like:
casper.start('http://www.google.fr/', function() {
this.clear(); // javascript execution in this page has been stopped
//rest of code
});
From the doc: Clears the current page execution environment context. Useful to avoid having previously loaded DOM contents being still active.
I'm using karma with qUnit (after following this tutorial) to test my Ember application. It's mostly going well, however I've run into a problem that doesn't make sense.
Given the 2 following tests:
test('can get to products', function() {
visit('/products/')
.then(function() {
ok(find('*'));
});
});
test('can get to catalogues', function() {
visit('/products/catalogues')
.then(function() {
ok(find('*'));
});
});
The first will run fine. The test runner gets to /products and finds something.
However, the second test returns an error in the console:
Error: Assertion Failed: You have turned on testing mode, which disabled the run-loop's autorun. You will need to wrap any code with asynchronous side-effects in an Ember.run
I turned on transition logs, and the test runner is visiting products.catalogues.index before throwing the error.
Any ideas with this? Or is it simply a bug inside ember's testing tools?
Both are valid routes defined inside the router...
The last part of the error holds the key to how to fix this problem. You have to make sure that any code that make async calls is wrapped in Ember.run. This includes things as simple as the create and set methods.
If you have something like
App.ProductsRoute = Ember.Route.extend({
model: function() {
return [
Ember.Object.create({title: "product1"}),
Ember.Object.create({title: "product2"})
]
}
});
refactor it to
App.ProductsRoute = Ember.Route.extend({
model: function() {
return [
Ember.run( Ember.Object, "create", {title: "product1"} ),
Ember.run( Ember.Object, "create", {title: "product2"} )
]
}
});
or
App.ProductsRoute = Ember.Route.extend({
model: function() {
return Ember.run(function() {
return [
Ember.Object.create({title: "product1"}),
Ember.Object.create({title: "product2"})
]
});
}
});
If you posted your /products code it would be easier to give a more specific answer.
Anyone have any good examples of testing Ember data in your own app?
I'm starting to build an app using the Fixtures adapter, which is great. But I want to test my models and make sure everything works properly as I build.
I have QUnit setup and running, but I don't want to write the server side in order to verify that the Data Model makes a call. I'd like to mock out the Adapter and just see if the find method is called and return a new object from it. I'll worry about the server side implementation later.
Any ideas?
This is what I have so far (that doesn't work):
test('MyModel should call find', 1, function(){
App.TestAdapter = DS.Adapter.extend({
find: function(store, type, id){
ok(true, 'calls the find method');
console.log('find: ', type, id);
}
});
App.Store = DS.Store.extend({
adapter: 'App.TestAdapater'
});
myModel = App.MyModel.createRecord({
name: 'Test',
period: 0
});
// method that should call .find
myModel.currentObject();
});
I ended up going with Konacha.
The biggest part was:
before(function() {
Ember.run(function() {
App.initialize();
});
});
afterEach(function() {
Ember.run(function() {
App.reset();
});
});