Is there a way to grab a reference to a widget instance by data-dojo-id on an Intern functional test running on a standalone server?
Yes, Dojo released a dijit-intern-helper module that you can include in your tests to help with this:
define([
'intern!object',
'intern/chai!assert',
'intern/dojo/node!dijit-intern-helper/helpers/dijit',
'require'
], function (registerSuite, assert, dijit, require) {
var url = '../../index.html';
registerSuite({
name: 'Todo (functional)',
'get widget node': function () {
return this.remote
.get(require.toUrl(url))
.then(dijit.nodeById('yourWidgetId', 'rootNodeToLookUnder'))
.getProperty('value')
.then(function (val) {
assert.ok(val == 'Test :)');
});
}
});
});
You can read more about it on this Sitepen blog post or straight on the project Github page.
Related
I am trying to build some unit test cases to my existing Vue project.
I found some documents there but not useful especially for testing on functions such as Watch, Promise and Then.
Is there any specific and detailed guide line on unit testing with Vue and these plugins?
The target vue has defined a function named test.
const vm = new Vue(target).$mount();
vm.test("message");
But the error message is vm.test is not a function
I do not know why I could not use the function defined in the target.vue.
Meanwhile once I use the test function to change some data, the target vue will update the data automatically.
But it seems that Vue.nextTick does not work on this situation.
Could someone help me on this point?
Thank you very much for your help.
Hellocomponent
export default {
name: 'hello',
data () {
return {
msg: 'Welcome to Your Vue.js App',
test: 'Testing'
}
}
}
Hello.spec.js //for testing Hello.vue
describe('Hello', () => {
it('set correct default data', () => {
expect(typeof Hello.data).to.equal('function')
assert.typeOf(Hello.data, 'function')
const defaultdata = Hello.data()
expect(defaultdata.test).to.be.a('string')
expect(defaultdata.test).to.equal('Testing')
})
})
This is test case of Hello component of vue.js which is created automatically when new template is created. This is using Karma+Mocha+Chai.
I am new to JavaScript and try to test functions defined in a RequireJS Module.
That means i have some code like this:
define([...], function(...){
var ModuleName = Base.extend({
init: function(){
//some code
};
});
}
Now I want to test the function init().
I load the object from my spec.js, this works:
describe("ModuleName", function(){
var mod = require(['../js/app/ModuleName.js'], function(ModuleName) {});
it("exists", function(){
expect(mod).toBeDefined();
});
});
This passes well.
But when I add this code, it fails:
it("contains init", function(){
expect(mod.init).toBeDefined();
});
I don't understand why.
You're not using RequireJS properly.
The following solution needs the use of beforeAll, which can be added to Jasmine with this package. Your code could be something like this:
describe("ModuleName", function() {
var mod;
beforeAll(function (done) {
// This loads your module and saves it in `mod`.
require(['../js/app/ModuleName'], function(mod_) {
mod = _mod;
done();
});
});
it("exists", function(){
expect(mod).toBeDefined();
expect(mod.init).toBeDefined();
});
});
As I recall, the return value of require called with an array of dependencies is a reference to require itself. So yes, it is defined but, no, it is not the value of the module you were trying to load. To get a module value, you have to do something like I did in the code above.
If your tests happen to be in a RequireJS module, you could also just add the module to be tested to the list of dependencies:
define([..., '../js/app/ModuleName'], function (..., mod) {
describe("ModuleName", function() {
it("exists", function(){
expect(mod).toBeDefined();
expect(mod.init).toBeDefined();
});
});
});
I've used both methods above in different circumstances.
Side note: I've removed the .js from the module name in the code above. You generally do not want to put the .js extension to module names you give to RequireJS.
I have an enyo kind like this:
enyo.kind({
name:"branding", components: [
{name: "appName", content:"Stars of the East", classes:"heading"},
{content:AppConfig.tagline, classes:"subHeading"}]
});
I am trying to test this kind with the following jasmine describe.
describe("Test Branding Kind", function() {
it("should see enyo component from jasmine", function() {
var branding = enyo.kind({
kind: "branding"
});
expect(branding.$.appName.getContent()).toBe("Stars of the East");
})
});
I am getting an error. Can anyone guide me ?
You need to put your sub-components in a components array (you already have the closing bracket for the array in your code):
enyo.kind({
name:"branding", components: [
{name: "appName", content:"Stars of the East", classes:"heading"},
{content:AppConfig.tagline, classes:"subHeading"}]
});
You need to actually instantiate your kind to test it. enyo.kind() only creates the template. Try:
describe("Test Branding Kind", function() {
it("should see enyo component from jasmine", function() {
var localBranding = new branding();
expect(localBranding.$.appName.getContent()).toBe("Stars of the East");
})
});
You will also have to fix the problem that Art pointed out where you do not have the components block.
You will probably also need to actually render your components if they have UI elements you want to check. You may want to change the localBranding line to:
var localBranding = new branding().renderInto(<some element on your page>);
Finally, we suggest that kind names should be uppercase to distinguish them from instance names. name: "branding" would be name: "Branding" if you follow our advice.
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();
});
});