[Feature] em test command for testing Ember client side logic

[mattma]

I am trying to implement em test command for running the client side ember code integration tests. The testing tech stack is below

mocha (BDD)
chai
karma
phantomJS

Karma is lacking support on Javascript ES6 module pre-compressors. What I am trying to do?

If you use ember-rocks utility, you could generate a new project by em new my-app. Then you could start to develop your project by cd my-app, and then em serve. If you open your favorite browser and navigate to localhost:3001, you should a nice shining app.

Now, I want to write some integration tests for my front end javascript code using the tech stack I listed above.

Now, I need your suggestion or help.

Please, go to this repo, and look at the README.md content to see how you could start helping.

Post any question you may have. THANKS!

[alexferreira]

@mattma the module 'karma-traceur-preprocessor' contains an error in the default parameters, I made a fork of the repository with the correction parameter.

I'm waiting vojtajina accept the pull request, meanwhile can use my fork.

I did some basic tests and worked with the ES6

[mattma]

@alexferreira Sounds great. I will try that later tonight!

[alexferreira]

any news about the tests? the pull request was accepted into the karma-traceur-preprocessor.

[mattma]

@alexferreira

some very good news on the tests. I am one step closer to finish this issue. Here is my current status:

1. pull down the latest repo.
2. npm install
3. optional if you have not done em serve, do em serve to generate the client application.js and template.js

if you run karma start, you should have 5 successfully tests. Tests includes two parts:

1> testing on es6 features. 2> testing on loading Ember, Ember-data, and other resources via import statement

There are lots of updates on karma.conf.js and tests/client/karma-config.js. It seems to work as expected. :)

Here is a problem: (maybe the last one before we get this thing working)

cannot load the client side ember application into the testing module

**tests/client/test.spec.es6**
import {Calculator} from './calculator.js';
 import Ember from 'ember';
 import DS from 'ember-data';
 import Resolver from 'ember/resolver';

 //import Application from "rocks/app";
 //var App = require('rocks/app')['default'];

If you uncomment the line import Application from "rocks/app", you runkarma start`, you should see the error below:

Chrome 36.0.1985 (Mac OS X 10.9.2) ERROR
  Uncaught TypeError: Cannot read property 'Application' of undefined
  at /Users/mma/Desktop/emtest/client/assets/build/application.js:13

What is this? It does not complain on loading rocks/app, if you console.log something in the /Users/mma/Desktop/emtest/client/assets/build/application.js, define('rocks/app') section, you should see the problem is \ Ember.Application is undefined **, actually, Ember in this case is undefined. I think i have correctly setup the require statement at tests/client/karma-config.js. but for some reasons, /Users/mma/Desktop/emtest/client/assets/build/application.js could not find the require statement of ['ember', ....]

Then, I tried with my second approach, by uncommenting //var App = require('rocks/app')['default']; I got this error below:

Chrome 36.0.1985 (Mac OS X 10.9.2) ERROR
  Uncaught Error: Module name "rocks/app" has not been loaded yet for context: _. Use require([])
  http://requirejs.org/docs/errors.html#notloaded
  at /Users/mma/Desktop/emtest/node_modules/requirejs/require.js:141

It looks like it could be potentially working if it loads up the modules correctly. This approach is what ember-cli used.

I need some helps to get this issue fixed.

By the ways, something I found very interesting on researching how to do it. Traceur compiler does not work in phantomjs. See here, make sure to look at the comment by domenic. he said "Supporting PhantomJS at this point is like supporting IE8. It should be a non-goal for Traceur."

It means that we have to stay at Chrome browser testing instead of PhantomJS testing. If you use PhantomJS, it will give you an error.

[alexferreira]

I found the same problem, and still did not see the solution.

[mattma]

@alexferreira at least that we are very close to finish the testing feature. I consider it is the only blocker to this issue. Well, I will spend more time to figure out how require.js is loading the resource and I believe it is the main problem.

By the way, I just released the new feature which integrate with Cordova wrapper. Now you could use to build the native mobile and tablet app. I am also learning famous now. On the roadmap, i will integrate with famous engine to power some 3D animation on mobile device. So em mobile command will help us to get there.

Also, ember-famous starter kit is in mind as well. It will bring in more attractions from front end devs community, no just ember community.

[alexferreira]

I'm thinking of building the feature to create based mobile app, already started to carry out some tests, but I want it to be something similar to what happens with addons ember-cli. so we could keep adding functionality to ember-rocks

[mattma]

@alexferreira

Just fixed and tested an important bug on missing cordova based folders. It should work as advertised now. ( current version v0.1.11)

What I have in mind on add-on system is:

1> tear down gulp tasks into separated modules (possibly lives inside server/tasks folder) 2> write an module loader to load them automatically 3> take advantage of gulp task api, one module should be in one file, it should do one thing and do it good. One module should be as simple as a gulp task.

Way 1: npm registered module. ex: npm install --save-dev ember-rocks-coffeescript

4> loading ember-rocks from project's local node_modules ( already does that ). write a simple program to symlink additional commands to the em and modify the helper messages ( eco system is ready to do that, just like em build, em betc, but not the helper message. Need to leave a hook to do that ). Simply scanning the node_modules to find any modules with name prefixed with ember-rocks-, then register and load them automatically.

Way 2, manually add a .js file inside server/tasks with a simple gulp task

5> if that is the case, they know what they are doing. They could simply take advantage of ember-rocks generator and build system, at the same time, use gulp to run additional tasks.

Optional, we could write another simple program, to load user defined tasks. Before we could do that, since it has an endless possibilities on what users could write. So we need to write another generator for the base structure of what ember-rocks tasks should look at, possibly with a configuration file. We could load the configuration file when auto load the modules when em command run. Auto register the user pre-defined command, integrate into the em system.

Those are just my initial thoughts. I want the API is as simple as possible like gulp itself and self explained. And i am open to more ideas.

[mattma]

For the Ember Testing. I found the problem.

in ~/client/assets/build/application.js

Line 10, add those three logs

  console.log('__dependency1__.VERSION: ', __dependency1__.VERSION);
  console.log('__dependency1__.App: ', typeof __dependency1__.Application);
  console.log('Ember.VERSION: ', Ember.VERSION);

The first 2 logs actually return the ember object. the last one does not.

It is the nature of the ES6 class export default feature. Well, we need to find a workaround to this problem. I wish that I could access the build process to inject the loading process.

   var Ember = __dependency1__["default"] || __dependency1__;

That should fix it. but those are done in the compiler, I need to find some other solutions for it. At least now, we know what to be fixed.

Check out this post which describe the problem.

[mattma]

@alexferreira

I have been working on testing feature for a quiet while and have been moving in the rapid speed.

I made a big progress, now, I get to the stage on testing the front end ember application.

Pull the testing repo, run npm install

Read the readme file with my latest update on problem. Hopefully, you could help me get it work.

Thanks

[alexferreira]

@mattma

Have a nice breakthrough, I tried running the test in an application however I encounter the error "Module name app / container-debug-Been adapter has not loaded yet for context:. _ Use require ([])" already saw this error?

[alexferreira]

@mattma

see the pull request testing, I created two modules to build the application.js both gulp as in karma also. this way is no more need to do to change the file manually;

there is no longer a need to have application.js along with the tests;

is also no more need to add ['default'] imported files;

[alexferreira]

@mattma

try running the tests with command gulp test or npm test, he will generate the build of hbs and js and start karma;

[mattma]

@alexferreira +1

I really really like the implementation on eliminating the step of replacing depsReg = /((__dependency[0-9]*__)\["default"\])/g;, if you looked at the test project, gulpfile.js, there is a gulp task called ma, that was my first attempt on that matter. Now, I could safely remove it and use the one stop shop of gulp test, brilliant!!! That is definitely something that I want it to do.

Well, We have been very far and almost reach the goal. I will take a deep breath and work hard to get ember testing logic integrated into the project. Wish me luck.

Feel free to work on it as well. Let's rocks IT!

[mattma]

@alexferreira

I submitted a PR two days ago on project ember-mocha-adapter, and also asked for any helps from the core team member of Ember. See pull

[mattma]

@alexferreira

I think what it is missing is the resolver.

Ember.js Source Code Line 3074

container.injection('container-debug-adapter:main', 'resolver', 'resolver-for-debugging:main');

and ember-resolver.js line 321, it is where the defination of

define("ember/container-debug-adapter",

The Error that we have

Error: Module name "ember/container-debug-adapter" has not been loaded yet for context: _. Use require([])

I have confirmed that "ember/container-debug-adapter" has been loaded and require.js loader did see this module. everything should be fine at that point. but the source code expect the resolver function to be passed in. so that context is undefined at that point

Checked in the resolver to testing repo.

Getting rid of the Module name "ember/container-debug-adapter" has not been loaded error. Introduce a new error

TypeError: undefined is not a function

[mattma]

@alexferreira

Finally, identify the error.

tests/client/helpers/resolver.es6

import Resolver from 'ember/resolver';

var resolver = Resolver.create();

console.log('Resolver.create: ', Resolver.create);
console.log('resolver type: ', typeof resolver);
console.log('Resolver: ', typeof resolver);
console.log('Resolver: ', resolver);

resolver.namespace = {
   modulePrefix: 'rocks-test'
};

export default resolver;

If you use this snippet replace what it is in there currently, you should find first 3 logs would pass.

Chrome 36.0.1985 (Mac OS X 10.9.2) LOG: 'Resolver.create: ', function () { ... }

Chrome 36.0.1985 (Mac OS X 10.9.2) LOG: 'resolver type: ', 'object'

Chrome 36.0.1985 (Mac OS X 10.9.2) LOG: 'Resolver: ', 'object'

Chrome 36.0.1985 (Mac OS X 10.9.2) ERROR
  Uncaught TypeError: Cannot read property 'name' of undefined
  at http://localhost:9876/karma.js:316

Last log would output the error, that is why resolver itself does not have a namespace property, so that the Resolver module exported undefined.

I currently have no clues how to fix it. Do you have any idea how to do?

[mattma]

Closed with new feature in Ember-Rocks#0.6.0