I'm trying to create a helper for my test in order to simulate a model.
I'm receiving the follow error, though:
: makeInventoryObjects is not defined
My test helper:
// ../tests/helpers/make-inventory-objects.js
import Ember from 'ember';
export default Ember.Test.registerAsyncHelper('makeInventoryObjects', function() {
const inventoryObjects = [{'id': 1, 'name': 'test'}];
return inventoryObjects;
});
My start-app in helpers contains application.injectTestHelpers();
The test which is failing:
import { moduleForComponent, test } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';
// I tried to import manually too and it did not work
// import makeInventoryObjects from '../../helpers/make-inventory-objects';
moduleForComponent('model-table', 'Integration | Component | model table', {
integration: true
});
test('it renders', function(assert) {
this.set('inventoryResult', makeInventoryObjects());
this.render(hbs`{{model-table inventoryResult}}`);
assert.equal(this.$().text().trim(), '');
});
Whenever I add the comment of the import, I get this error:
: _frontendTestsHelpersMakeInventoryObjects["default"] is not a function
The main reason what I've done was failing is because I was trying to initialize the helper within the startApp and that is done only for acceptance test, not integration test.
I had to rewrite my helper to:
// ../tests/helpers/make-inventory-objects.js
export default function makeInventoryObjects() {
const inventoryObjects = [{'id': 1, 'name': 'test'}];
return inventoryObjects;
});
and then import in my test with the commented line.
Also, as a side note I missed to add in my .jshintrc my test helper if I were doing acceptance test. So, it was wrong for acceptance test as well.
Related
I want to override an action from cart module store. I am trying to extend this CartModule by following this link
Extending and Overriding Modules Doc
I have created a file /src/modules/cart/index.ts with following code
import { VueStorefrontModuleConfig, extendModule, VueStorefrontModule } from '#vue-storefront/core/lib/module'
import { CartModule } from '#vue-storefront/core/modules/cart'
import { cartModule } from './store'
const cartExtend: VueStorefrontModuleConfig = {
key: 'cart',
store: {modules: [{key: 'cart', module: cartModule}]},
afterRegistration: function () {
console.log('Cart module extended')
}
}
extendModule(cartExtend)
export const registerModules: VueStorefrontModule[] = [CartModule]
I am getting error that CarModule type does not match with VueStorefrontModule
Also I don't know what to do next in order to make it effective. Docs are not clear about it. Please help. Thanks
If you want to overwrite action of module you don't want to extend module but store.
Here is example:
Vuestorefront has CartModule (in core) and you need to change code of action refreshTotals.
Code your in file /src/modules/cart/index.ts:
import {StorefrontModule} from '#vue-storefront/core/lib/modules';
import {extendStore} from '#vue-storefront/core/helpers';
const cartModule = {
action: {
async refreshTotals({dispatch}, payload) {
//
// your new (and better!) code ;-)
//
}
},
}
export const MyAwesomeCart: StorefrontModule = function () {
extendStore('cart', cartModule);
}
In last step register this your new module under /src/modules/client.ts:
..
...
import {CartModule} from '#vue-storefront/core/modules/cart';
import {MyAwesomeCart} from "modules/cart/index";
export function registerClientModules() {
registerModule(CartModule); // original module
registerModule(MyAwesomeCart); // your new overwiritng module
...
..
Using node unit, I want to translate from ES5 the name of the test suite.
So I had in parser_test.js
exports['Awesome Parser Test'] = {
setUp: function(done) {
done();
},
....
}
And now I have in parser_test.es6
export default {
setUp: function(done) {
done();
},
....
}
Then in another file named index.es6
import parserTest from './parser_test';
export {
parserTest
}
Node unit displays the suite name as parserTest which is OK, but I would prefer something like Awesome Parser Test
You can't have spaces in the import name. It's just a variable which is assigned the export of the file. You can, however, call it what ever you want. Eg:
import awesomeParserTest from './parser_test';
Or
import Awesome_Parser_Test from './parser_test';
I'm struggling to understand Meteor 1.3's include logic.
For an app I'm trying to put together, I have in /client/main.js:
import '../imports/startup/accounts-config.js';
import '../imports/ui/body.js';
import '../imports/ui/home.js';
import '../imports/ui/map.js';
import '../imports/ui/admin.js';
...
In /imports/ui/body.js, I have (I use flow router and mainLayout is the main layout, in which all other templates are rendered):
...
Template.mainLayout.onCreated(function mainLayoutOnCreated() {
Meteor.subscribe('tasks');
Meteor.subscribe('categories');
});
...
Then I have the following function:
Template.admin.helpers({
categories() {
return Categories.find({}, { sort: { createdAt: -1 } });
},
});
If I put this function in /imports/ui/body.js, I'm able to call 'categories' in the template with name 'admin'. However, when I put this function in /imports/ui/admin.js, I get a useless exception in the javascript console:
Exception in template helper: categories#http://localho...
How is it that moving the file in which this helper is declared, while still being included in the same 'main' file, results in an exception being thrown?
You should import the desired template and the templating package at the top of your admin.js file.
import {
Template
} from 'meteor/templating';
import '.deep/admin.js';
Template.admin.helpers({
categories() {
return Categories.find({}, { sort: { createdAt: -1 } });
},
});
I'm trying to setup a mock server in for my Ember CLI (1.13.1) acceptance test with Ember CLI Mirage. I'm stuck on how to debug the setup and actually test the model data available in the view.
I tried adding a console log statement inside my mirage route:
this.get('/users', function(db){
console.log(db.users);
return db.users;
});
Which tells me that the mirage route is called and there should be three users present. But my test is still failing. How do I check what is in the store in my acceptance test or in my template?
tests/acceptance/users/index-test.js
/* jshint expr:true */
import {
describe,
it,
beforeEach,
afterEach
} from 'mocha';
import { expect } from 'chai';
import Ember from 'ember';
import startApp from 'tagged/tests/helpers/start-app';
describe('Acceptance: UsersIndex', function() {
var application;
var users;
beforeEach(function() {
application = startApp();
users = server.createList('user', 3);
});
afterEach(function() {
Ember.run(application, 'destroy');
});
it('can visit /users/index', function() {
visit('/users');
andThen(function() {
expect(currentPath()).to.equal('users.index');
});
});
it('lists the users', function(){
visit('/users');
andThen(function() {
users = server.createList('user', 3);
expect(find('.user').length).to.equal(3); // fails
});
});
});
AssertionError: expected 0 to equal 3
app/mirage/config.js
export default function() {
/*
Config (with defaults).
Note: these only affect routes defined *after* them!
*/
this.namespace = '/api/v1'; // make this `api`, for example, if your API is namespaced
// this.timing = 400; // delay for each request, automatically set to 0 during testing
this.get('/users');
}
// You can optionally export a config that is only loaded during tests
export function testConfig() {
this.timing = 1;
}
app/mirage/factories/user.js
import Mirage, {faker} from 'ember-cli-mirage';
export default Mirage.Factory.extend({
email: function(){ return faker.internet.email(); }
});
app/routes/users/index.js
import Ember from 'ember';
export default Ember.Route.extend({
model: function(){
return this.store.findAll('user');
}
});
app/templates/users/index.hbs
<h2>Users</h2>
<table>
<thead>
<tr>
<th>Actions</th>
<th>Email</th>
</tr>
</thead>
<tbody>
{{#each model as |user|}}
<tr class="user">
<td class="actions">Show</td>
<td class="email">{{ user.email }}</td>
</tr>
{{/each}}
</tbody>
</table>
I usually start by looking in the Data tab of the Ember Inspector to see if any models were added to the store.
If you're on 1.13 you're probably using the JSON API adapter and will need to do just a bit more work in your mirage route handler, like returning the object under a data key with a type.
For example, it might look like this:
this.get('/users', function(db){
return {
data: db.users.map(u => ({
id: u.id,
type: u.type,
attributes: _.omit(u, ['id', 'type'])
}))
};
});
Note that your factories are only for seeding Mirage's db. So with the route above, you'd now be able to use a factory like the one you have defined in your question
// mirage/scenarios/default.js
export default function(server) {
server.createList('user', 10);
});
and then when you booted your app and it made a GET request to /users, the data should be returned and properly deserialized by Ember Data.
I want to test ReactJS component with jest but have a trouble because component using RequireJS define. This is example code (truncated).
// component.js
define(function(require){
var React = require('react');
// code
var _ = require('underscorejs');
var somename = React.createClass({
propTypes: {
},
getDefaultProps: function () {
return {
};
},
render: function () {
// implementation
}
});
return React.createClass({
// implementation
});
});
When I tried into test:
import ComponentName from '../path/to/ComponentName.jsx';
i receive this error:
Runtime Error
ReferenceError: define is not defined
I was think about to process source with preprocessor. It is possibillity to use scriptPreprocessor option but this is some kind of hacky from my point of view.
I would be very grateful for any ideas and recommendations.