Ember cli and testem - ember.js

I'm new to Ember, and I'd like to get a simple project up and running, and have some integration tests running in chrome.
I bought the book "Developing an Ember.js Edge" where they create the application ember-trackr but as all things in the JS world move fast, details seem to have changed.
If I:
git clone https://github.com/developing-an-emberjs-edge/ember-trackr
cd ember-trackr
testem
I get an error:
Error running before_tests hook
┃
┃before_tests hook: "ember build -c"
┃version: 0.0.41
┃You have to be inside an ember-cli project in order to use the build command.
I'm not sure but I think the steps in http://emberjs.com/guides/testing/integration/ are already taken care of when using
ember new <appname>
So, if I create a new app and run testem:
ember new testem-test
cd testem-test
testem
I see the 'waiting for runners' message in the console and chrome launces.
Now if I try to add a trivial test (say, to check the page content for some text - copied from http://www.ember-cli.com/#testing) as tests/test1.js:
import Ember from "ember";
import { test } from 'ember-qunit';
import startApp from 'helpers/start-app';
var App;
module('An Integration test', {
setup: function() {
App = startApp();
},
teardown: function() {
Ember.run(App, App.destroy);
}
});
test("Page contents", function() {
expect(2);
visit('/foos').then(function() {
equal(find('.foos-list').length, 1, "Page contains list of models");
equal(find('.foos-list .foo-item').length, 5, "List contains expected number of models");
});
});
If I run 'testem', I just get the waiting for runners message.
If I run 'ember test' I get:
~/IdeaProjects/spike/testem-test (master) $ ember test
version: 0.0.41
Build failed.
ENOENT, no such file or directory '/Users/paul/IdeaProjects/spike/testem-test/tmp/tree_merger-tmp_dest_dir-2QJNmsEl.tmp/helpers/start-app.js'
File: helpers/start-app.js
Does anyone have any clues as to what I'm missing?
Also, if it hasn't been done already, it would be nice to keep the ember-trackr sample app up to date with ember-cli so it runs out of the box - I'd be happy to contribute if I can figure out what its missing...
Thanks.

For the first part of your problem, yes ember-cli has changed, and you have to migrate that project. I would do that for 100 bounty.
For the second part, you don't have to create a test from scratch:
run ember generate acceptance-test test1 and it will do the boilerplate for you.
the specific error message can be fixed by updating this line:
import startApp from '../helpers/start-app';

Related

ember-addon - afterInstall hook does not update my ember app package.json

Im trying to create an Ember Addon that uses the blueprint afterInstall hook.
I have read https://cli.emberjs.com/release/writing-addons/addon-blueprints/
My addon is called hello-world.
I generated my addon blueprint by ember generate blueprint hello-world.
I have now a blueprint/hello-world/index.js file.
'use strict';
module.exports = {
description: 'This is my blueprint',
afterInstall(options) {
console.log('hello');
return this.addPackagesToProject([
{ name: 'lodash' }
]);
}
};
How could I test the the afterInstall hook is called?
My Ember Addon is in development (and has not been published), I have tried using npm link in my Ember Addon directory and npm link hello-world in my Ember app. This creates a symlink in my Ember App node_modules to point to my hello-world Ember Addon but it does not trigger the afterInstall hook.
My Ember App package.json does not get an entry for lodash in dependencies or devDependencies.
Part of my Ember App package.json
"devDependencies": {
...
"hello-world": "*"
...
}
Running npm install --offline does not seem to trigger the blueprint hook.
Ember addons are typically installed with the command ember install addon_name. This function essentially is the composite of:
npm install addon_name
ember generate addon_name
So after you npm link your addon, go into the consuming project and generate your addon's default blueprint with ember generate addon_name

Ember : Could not find module `#ember-intl/intl-relativeformat` imported from `ember-intl/services/intl`

I added the module ember-intl in my app since the ember-i18n is deprecated.
so yarn works well, updates package.json and yarn.lock (i got rid of the package.lock),
but i get this error on the browser's console after a successful ember build:
Error: Could not find module #ember-intl/intl-relativeformat
imported from ember-intl/services/intl
But in my node_modules the folders #ember-intl/intl-relativeformat and ember-intl both exist.
in the yarn.lock i have this line:
"#ember-intl/intl-relativeformat#^2.1.0":
more info:
Ember : 3.5.1
Ember Data : 3.5.0
jQuery : 3.3.1
Ember Remodal : 2.18.0
I solved this problem by adding ember-auto-import to my project. It comes pre-installed in new Ember projects, but needs to be added manually to older ones.
Just run ember install ember-auto-import and that's it.
I just installed it to see if a blank slate would show me that error.
It did not. : /
I just had a few beers... but I just want to make sure you imported the service.
the docs show:
// app/routes/application.js
export default Route.extend({
intl: service(),
beforeModel() {
return this.intl.setLocale(['fr-fr', 'en-us']); /* array optional */
}
});
but like most docs - assume you know the larger ecosystem. It's a tiny possibility that you might not have imported the module above import Service from '#ember/service'; etc.? https://guides.emberjs.com/release/applications/services/
if not that... then track down the mentioned 'ember-intl/services/intl' and see if you can figure out why the '#ember-intl/intl-relativeformat' import isn't jiving. Maybe check the repo and the version - and ask there on GitHub?
Good luck!

Intel XDK + Ember - bower_components/jquery/src/intro.js: Unexpected token (45:0)

I'm trying to use Ember + Intel XDK.
I create a brand new Ember app:
ember new cash
Run ember server, and go to localhost:4200 - everything ok - Welcome to Ember page appears.
Then I open Intel XDK and import my Ember HTML project. I just import it, go back to console and run ember server again. Then I get:
cash git:(master) ✗ ember server
version: 2.3.0
Livereload server on http://localhost:49152
Serving on http://localhost:4200/
File: cash/bower_components/jquery/src/intro.js
cash/bower_components/jquery/src/intro.js: Unexpected token (45:0)
SyntaxError: cash/bower_components/jquery/src/intro.js: Unexpected token (45:0)
43 | // you try to trace through "use strict" call chains. (#13335)
44 | //"use strict";
> 45 |
| ^
at Parser.pp.raise (/Users/Antonio/Code/mbcash/cash/node_modules/ember-cli-babel/node_modules/broccoli-babel-transpiler/node_modules/babel-core/node_modules/babylon/lib/parser/location.js:24:13)
at Parser.pp.unexpected (/Users/Antonio/Code/mbcash/cash/node_modules/ember-cli-babel/node_modules/broccoli-babel-transpiler/node_modules/babel-core/node_modules/babylon/lib/parser/util.js:82:8)
at Parser.pp.parseExprAtom (/Users/Antonio/Code/mbcash/cash/node_modules/ember-cli-babel/node_modules/broccoli-babel-transpiler/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:425:12)
at Parser.pp.parseExprSubscripts (/Users/Antonio/Code/mbcash/cash/node_modules/ember-cli-babel/node_modules/broccoli-babel-transpiler/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:236:19)
at Parser.pp.parseMaybeUnary (/Users/Antonio/Code/mbcash/cash/node_modules/ember-cli-babel/node_modules/broccoli-babel-transpiler/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:217:19)
at Parser.pp.parseExprOps (/Users/Antonio/Code/mbcash/cash/node_modules/ember-cli-babel/node_modules/broccoli-babel-transpiler/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:163:19)
at Parser.pp.parseMaybeConditional (/Users/Antonio/Code/mbcash/cash/node_modules/ember-cli-babel/node_modules/broccoli-babel-transpiler/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:145:19)
at Parser.pp.parseMaybeAssign (/Users/Antonio/Code/mbcash/cash/node_modules/ember-cli-babel/node_modules/broccoli-babel-transpiler/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:112:19)
at Parser.pp.parseExpression (/Users/Antonio/Code/mbcash/cash/node_modules/ember-cli-babel/node_modules/broccoli-babel-transpiler/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:79:19)
at Parser.pp.parseStatement (/Users/Antonio/Code/mbcash/cash/node_modules/ember-cli-babel/node_modules/broccoli-babel-transpiler/node_modules/babel-core/node_modules/babylon/lib/parser/statement.js:137:23)
I'm using ember-cli 2.3.0, which leads me to:
DEBUG: -------------------------------
DEBUG: Ember : 2.3.1
DEBUG: Ember Data : 2.3.3
DEBUG: jQuery : 2.1.4
DEBUG: -------------------------------
I tried to use the following in ember-cli-build.js:
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
module.exports = function(defaults) {
var app = new EmberApp(defaults, {
babel: {
compact: false
}
});
return app.toTree();
};
but when I run ember server, I got these two lines:
version: 2.3.0
Livereload server on http://localhost:49152
Serving on http://localhost:4200/
and it stops there.
If I go to the browser and visit localhost:4200, nothing happens, and the browser status bar shows:
Waiting for localhost...
I think I'm trying something new, because I searched a lot, but didn't find discussions about Ember + Intel XDK.
If somebody can help me, thanks in advance.
Looks like Babel is compiling the bower_components directory which is not good. Maybe bower is configured to create a bower_components directory inside your project's app dir.
Check if you have a .bowerrc file in your home directory (or upwards the directory tree of your project location) that looks like this:
{
"directory": "app/bower_components"
}
If this is the case, delete the app/bower_components directory and create a local .bowerrc file in your project's directory.
Finally, run bower install if required.
Babel should not compile files inside bower_components the next time you run the server.

How can I set up mocha tests to run Ember initializers so injected objects are defined?

My Ember app injects an "i18n" object into the container via an initializer, which is later looked up with "this.container.lookup('i18n:main')" in a controller 'preferredLanguage' computed property.
A mocha unit test which tests the controller 'preferredLanguage' property, fails due to "i18n is not defined". How can I set up the mocha tests to run Ember application initializers so injected objects are defined when looked up from the container during unit testing?
I've found that the main issue is (as you mentioned) is that the start-app.js file doesn't run when mocha is installed. I battled this for a while as well but have finally refined the process to get Ember and Mocha to play nicely. First you have to get ember-cli-mocha and ember-mocha setup correctly. Then you can explicitly import and invoke the startApp function in your tests/test-helper.js file to have Ember run and inject test helpers like it normally does with qunit. Here is what has worked for me with ember-cli 1.13.1.
bower install ember-mocha
bower install ember-test-helpers
npm install ember-cli-mocha
ember install ember-cli-mocha (say Y to overwrite test-helper.js)
Then in tests/test-helper.js
// tests/test-helper.js
import resolver from './helpers/resolver';
import { setResolver } from 'ember-mocha';
// startApp doesn't run with mocha... so we run it explicitly
import startApp from "./helpers/start-app";
startApp();
setResolver(resolver);
After that you can create generate a route or controller and ember-cli-mocha will create test and you should have access to helpers like visit() and currentURL(); Though I found you need to actually setup the route and controller for those to work correctly.
it("should have use of ember's test helpers", function() {
visit("/mocha-test");
andThen(function() {
var url = currentURL();
expect(url).to.equal("/mocha-test");
});
});

Ember CLI: ENOENT, no such file or directory ember-data.js

I have a new ember-cli app and I'm trying to create a version of TodoMVC with ember-cli version 0.0.32.
In my models/todo.js file I have:
import DS from 'ember-data';
var Todo = DS.Model.extend({
title: DS.attr('string'),
isCompleted: DS.attr('boolean')
});
export default Todo;
but when I run ember server I get this error:
version: 0.0.32
Livereload server on port 35729
Serving on http://0.0.0.0:4200
ENOENT, no such file or directory '/<my_path>/tmp/tree_merger-tmp_dest_dir-OWIN6XGL.tmp/ember-data.js'
I've tried:
npm cache clear
npm install
bower install
But didn't seem to do anything.
I figured it out because this barely related question mentioned the 'brocfile.js' file and so I compared my 'brocfile.js' file with the 'brocfile.js' file in an example ember-cli TodoMVC app and noticed one small difference:
app.import({
development: 'vendor/ember-data/ember-data.js',
production: 'vendor/ember-data/ember-data.prod.js'
+}, {
+ 'ember-data': [
+ 'default'
+ ]
});
The +'s are the changes that need to be made to the 'brocfile.js' file in order to get ember-data to work.
Now run ember server and it should work.
Looks like that ember-cli TodoMVC app doesn't need those lines anymore, and the default ember-cli app doesn't have them either.
I had a similar error to yours, saying "no such file or directory: ....\ember-dat.js" and it turns out that I just hadn't done import DS from 'ember-data' in app/adapters/application.js.