Ember test - Failed: Calling set on destroyed object - ember.js

I'm currently trying to get started with writing tests (I know, I know, I should have done that before I wrote the application), but I'm currently stuck trying to test the login functionality.
Here is the test:
/* jshint expr:true */
import {
describe,
it,
beforeEach,
afterEach
} from 'mocha';
import { expect } from 'chai';
import Ember from 'ember';
import startApp from '../helpers/start-app';
describe('Integration: Authentication', function() {
var application;
beforeEach(function() {
application = startApp();
});
afterEach(function() {
Ember.run(application, 'destroy');
});
it('User can sign in', function() {
visit('/signin').then(function() {
fillIn('input[name="identification"]', 'username');
fillIn('input[name="password"]', 'password');
click('button[type="submit"]');
andThen(function() {
expect(currentPath()).to.equal('welcome');
})
});
});
});
Im getting this error:
Error: Assertion Failed: calling set on destroyed object (http://localhost:7357/a
ssets/vendor.js:19994)
Does anyone know how to solve this?
Thanks

Related

Upgrading Ember Simple Auth

I am having an issue upgrading ember simple auth.
TypeError: Cannot read property '__container__' of undefined
at authenticateSession (http://app.meetabe.dev:4200/assets/tests-a3c931e27860232e47d8de67d537cf75.js:298:24)
at Object.<anonymous> (http://app.meetabe.dev:4200/assets/tests-a3c931e27860232e47d8de67d537cf75.js:90:61)
I have properly imported the new helper methods using:
import { authenticateSession } from '../helpers/ember-simple-auth';
Any thoughts on what I need to do to get it working?
Here is my test, trying to visit an authenticated route.
import { test } from 'qunit';
import moduleForAcceptance from '../helpers/module-for-acceptance';
import { authenticateSession } from '../helpers/ember-simple-auth';
moduleForAcceptance('Acceptance | overview');
test('visiting /overview', function(assert) {
authenticateSession();
visit('/overview');
andThen(function() {
assert.equal(currentURL(), '/overview');
});
});
Pass the App to the authenticateSession method
import startApp from '../helpers/start-app';
let App;
moduleForAcceptance('Acceptance | home', {
beforeEach() {
App = startApp();
},
afterEach() {
Ember.run(App, App.destroy);
}
});
test('visiting /overview', function(assert) {
authenticateSession(App);
...
});

Error when setting base test providers into several unit tests

I use Angular2 RC1 and I have several unit tests regarding different components with the following structure:
import {provide} from '#angular/core';
import {
TestComponentBuilder
} from '#angular/compiler/testing';
import {
beforeEach,
ddescribe,
xdescribe,
describe,
expect,
iit,
inject,
injectAsync,
async,
beforeEachProviders,
setBaseTestProviders,
it,
xit
} from '#angular/core/testing';
import {
TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS
} from '#angular/platform-browser-dynamic/testing/browser';
describe('Test component 1', () => {
setBaseTestProviders(TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS);
it('should something',
async(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
var updateService = new UpdateService();
tcb.overrideProviders(ShapeCircleLayerComponent, [
provide(UpdateService, { useValue: updateService })
])
.createAsync(Component1).then((componentFixture) => {
(...)
});
});
});
});
Each test works if run alone but when I run them at the same time within Karma, I get the following error:
Chrome 50.0.2661 (Linux 0.0.0) Test for shape circle layer encountered a declaration exception FAILED
Error: Cannot set /home/(...)/my-project providers because it has already been called
at new BaseException (/home/(...)/my-project/node_modules/#angular/core/src/facade/exceptions.js:17:23)
at Object.setBaseTestProviders (/home/(...)/my-project/node_modules/#angular/core/testing/test_injector.js:74:15)
```
It seems that several tests that set base test providers (TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS) can't be executed at the same time.
Does anyone have this problem? Thanks very much!
As #teleaziz suggested, you should do this only once. So such processing needs to be moved into the karma-test-shim.js file. Here is a sample:
System.import('#angular/platform-browser/src/browser/browser_adapter')
.then(function(browser_adapter) { browser_adapter.BrowserDomAdapter.makeCurrent(); })
.then(function() {
return Promise.all([
System.import('#angular/core/testing'),
System.import('#angular/platform-browser-dynamic/testing/browser')
]);
})
.then(function(modules) {
var testing = modules[0];
var testingBrowser = modules[1];
testing.setBaseTestProviders(
testingBrowser.TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
testingBrowser.TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS);
})
.then(function() { return Promise.all(resolveTestFiles()); })
.then(function() { __karma__.start(); }, function(error) { __karma__.error(error.stack || error); });

Ember component not updating in integration test when injected service is updated

I have a side-bar component which relies on side-bar service which is injected into it via initializer.
the component then has a computed property title which is tied to the same property on the service:
title: function () {
return this.get('sideBarService.title');
}.property('sideBarService.title'),
This works in the app itself but I cannot get the component to update in an integration test when the service is upated.
Here is my non working integration test:
import Ember from 'ember';
import startApp from '../helpers/start-app';
import hbs from 'htmlbars-inline-precompile';
import { moduleForComponent, test } from 'ember-qunit';
var application, container, sideBarService;
moduleForComponent('side-bar', 'Integration | side-bar',{
integration: true,
beforeEach: function() {
application = startApp();
container = application.__container__;
sideBarService = container.lookup('service:side-bar');
},
afterEach: function() {
Ember.run(application, 'destroy');
}
});
test('it displays the correct title', function(assert) {
assert.expect(1);
Ember.run(function () {
sideBarService.set('title', 'Hello');
});
this.render(hbs`
{{side-bar}}
`);
var content = this.$('.side-bar-content .title').text().trim();
var serviceTitle = sideBarService.get('title');
// fails
assert.deepEqual(content, serviceTitle);
});
Interestingly, if I debug in the test and grab the component with the console and then grab the sideBarService off of the component, it is aware of the updated title value and even the value title on the component itself seems to be updated but the dom never gets updated:
//debugged in browser console
var sb = container.lookup('component:side-bar')
undefined
sb.get('title')
"Hello"
sb.get('sideBarService.title')
"Hello"
this.$('.title').text().trim()
""
Is this a run loop issue? If so what do I need to do to set it off?
edit: In regards to Toran's comment. Does this look right?
var done = assert.async();
var content = this.$('.side-bar-content .title').text().trim();
var serviceTitle = sideBarService.get('title');
setTimeout(function() {
assert.deepEqual(content, serviceTitle);
done();
});
I would probably go about fixing this by avoiding the injection in the initializer and instead using the Ember.inject.service helper.
// component
import Ember from 'ember'
const { Component, inject, computed } = Ember;
const { service } = inject;
const { alias } = computed;
export default Component.extend({
sideBarService: service('side-bar'),
title: alias('sideBarService.title')
});
Then in your test, you can pass the service when you use the component.
import Ember from 'ember';
import startApp from '../helpers/start-app';
import hbs from 'htmlbars-inline-precompile';
import { moduleForComponent, test } from 'ember-qunit';
var application, container, sideBarService;
moduleForComponent('side-bar', 'Integration | side-bar',{
integration: true,
beforeEach: function() {
application = startApp();
},
afterEach: function() {
Ember.run(application, 'destroy');
}
});
test('it displays the correct title', function(assert) {
assert.expect(1);
this.set('sideBarService', Ember.Object.create({
title: 'hello'
}));
this.render(hbs`
{{side-bar sideBarService=sideBarService}}
`);
var title = this.$('.side-bar-content .title').text().trim();
assert.equal(title, 'hello'); // Hopefully passes
});

Ember Test Failing For Unknown Reason

I'm new to Ember testing and have been trying to write up some tests.
My tests are written as such
// Ember Qoute Flow Test
import Ember from 'ember';
import { test, module } from 'qunit';
import startApp from '../helpers/start-app';
var App;
module("EmberQouteFlow-test", {
setup: function() {
App = startApp();
},
teardown: function() {
Ember.run(App, App.destroy);
}
});
test("simple test", function(assert) {
assert.expect(1);
visit('#/login');
// fillIn('input.everyWeek', 'My new post');
click('everyWeek', "everyWeek was selected");
click('button.submit');
// Wait for asynchronous helpers above to complete
});
test("Transaction Test", function(assert) {
assert.equal(1, 2, "This is a bad test");
});
test("A bad test", function(assert) {
assert.equal(1, 2, "This is a bad test");
});
Ember gives me this warning when I input "ember s" in the command line.
not ok 53 PhantomJS 1.9 - TestLoader Failures: client-consumer/tests/integration/QouteFlow/EmberQouteFlow-test: could not be loaded
actual: >
null
message: >
Died on test #1 at http://localhost:4200/assets/test-support.js:2809
at http://localhost:4200/assets/test-support.js:5574
at http://localhost:4200/assets/test-loader.js:31
at http://localhost:4200/assets/test-loader.js:21
at http://localhost:4200/assets/test-loader.js:40
at http://localhost:4200/assets/test-support.js:5578: 'undefined' is not a function (evaluating 'ember_qunit.module')
Log: >

Testing ember using ember-cli and factory guy

I'm running into a problem where the Ember application I'm testing doesn't seem to be noticing the models that I'm creating with FactoryGuy. Here's my test file:
import Ember from 'ember';
import startApp from '../helpers/start-app';
import FactoryGuy from 'factory-guy';
import { testMixin as FactoryGuyTestMixin} from 'factory-guy';
import carsFactory from "../fixtures/car";
var application, testHelper, store, make;
var TestHelper = Ember.Object.createWithMixins(FactoryGuyTestMixin);
module('Acceptance: Cars', {
setup: function() {
application = startApp();
testHelper = TestHelper.setup(application);
store = testHelper.getStore();
testHelper.make('car');
},
teardown: function() {
Ember.run(function() { testHelper.teardown(); });
Ember.run(application, 'destroy');
}
});
test('visiting /cars', function() {
equal(store.all('car').get('content.length'), 1);
visit('/cars');
andThen(function() {
equal(currentPath(), 'cars');
var li = find('li');
equal(li.length, 2);
});
});
The first and second equal assertions will succeed, but the last one will fail. Here's what my template looks like:
<ul>
{{#each car in model}}
<li>{{car.label}}</li>
{{/each}}
</ul>
And my route:
import Ember from 'ember';
export default Ember.Route.extend({
model: function () {
this.store.find('car');
}
});
What am I missing in getting the Ember app's store to get properly populated by the FactoryGuy's make method?
Edit: I also have tried adding the following line at the top of the test method and in the setup function, and it still isn't working correctly.
testHelper.handleFindMany('car', 1);
EmberDataFactoryGuy is now an ember addon, so if you are using that then the test would look like this:
import Ember from 'ember';
import startApp from '../helpers/start-app';
import { make } from 'ember-data-factory-guy';
import TestHelper from 'ember-data-factory-guy/factory-guy-test-helper';
var App;
module('Acceptance: Cars', {
setup: function() {
Ember.run(function () {
App = startApp();
TestHelper.setup();
});
},
teardown: function() {
Ember.run(function() {
TestHelper.teardown();
App.destroy();
});
}
});
test('visiting /cars', function() {
TestHelper.handleFindAll('car', 2);
visit('/cars');
andThen(function() {
equal(currentPath(), 'cars');
var li = find('li');
equal(li.length, 2);
});
});
There is a sample acceptance test just like this one in the ember-data-factory-guy repo here ( looks pretty much just like this one though ):
https://github.com/danielspaniel/ember-data-factory-guy/blob/master/tests/acceptance/users-view-test.js
Anyway, there is no more hassle of setting the store, or creating TestHelper, it's all done for you, and setup automatically when you start the application.