Ember CLI http-mock as Addon - ember.js

I'm using Ember CLI's http-mock feature to mock REST API endpoints, but I'd like to use it in multiple Ember CLI applications. I thought an addon would be a great solution to this, but I can't seem to get it to work. Does Ember Addon support http-mock?
Here's what I did.
Created an add on
$ ember addon my-http-mock
Then I created a simple test endpoint in the addon
$ ember g http-mock users
After publishing it to my github repository, I imported it into an Ember CLI project like this in package.json
"dependencies": {
"my-http-mock": "git://github.com/git-username/my-http-mock"
}
After npm installing it, I ran my app, but going to http://localhost:4200/api/users doesn't go to the API endpoint, and instead tries to load the Ember app.
Is there any way to use http-mock in multiple applications?

You'll need to have your addon implement the serverMiddleware and you can add middleware, or routes, to the http-mock running in the consuming ember-cli application.
Advanced Addon customization in ember-cli docs
That hook get's passed a config object that has the express app instance on it at config.app. You can then add whatever you'd like to do. If you're using the generated http-mock in the addon, it'd look something like this
{
name: 'my-http-mock',
serverMiddleware: function(config) {
// To require ALL mocks from your addon
var server = require('./server');
server(config.app);
// To require individual mocks
var users = require('./server/mocks/users');
users(config.app);
}
}
This is untested code but should work. The require all mocks one could possibly conflict in a weird way because it adds the bodyparser middleware and connect-restreamer and it probably already has that included if your app already has those from it's local http-mock. Try it out though! :)
note: This answer is in reference to using ember-cli 0.1.2

Related

Ember-cli addon dev, how to differentiate addon dev from application dev

When you create an ember-cli addon, you are supposed to be able to run a dummy app.
If a component need to access it's vendor folder you access "public/" in production.
While developping the ember app that use the addon you access :
app.options.project.nodeModulesPath + "/"+ this.name+"/vendor/"
However, when you run the ember-cli addon server (the dummy app) you need only "vendor/".
this.getEnv() will return developpement while developping an addon, or an app using the addon.
How can I, in index.js, differentiate app dev from addon dev ?
Suppose we are in the included hook, you can check this.isAddon() to determine where are you now. Say if you are in the consumer ember app now, you can then invoke path.dirname(require.resolve('ADDON_NAME/package.json')) to get the absolute path of your ember add-on.
One thing to notice, this.isAddon() might not a public API (though it's stable enough, it's still not listed in API doc). If you concerned about this, you can use this.parent.name() to achieve the same goal, when you run with the dummy app, this.parent.name() always returns dummy.
BTW, this.parent is the same thing as app.project where app is the first argument of included hook.

Ember server does not serve dummy app while creating an addon

I am trying to write an Ember component addon. After complete the template structure I think it would be nice to see the layout inside the dummy application as a sanity test.
Follow the instruction below,
The Ember CLI uses a dummy app in tests/dummy for testing. In tests/dummy/app/templates/application.hbs you can put calls to both the helper and component. Then, with ember serve, you can navigate to localhost:4200 to ensure that everything is working as expected.
http://johnotander.com/ember/2014/12/14/creating-an-emberjs-addon-with-the-ember-cli/
I generate application route using code below,
ember g route application --dummy
However when I use ember s it seems run the addon's app folder instead of tests/dummy. What should I do?
Update
I have also try to start ember s inside dummy app seems no effect. It keep show me the ember-welcome-screen instead.
The solution is simple DELETE ember-welcome-page from package.json file and then run npm install.
The reason is that ember-welcome-page only get disabled when it can find custom route defined inside your app directory.

Using test support code from an ember addon

I have several ember apps which use a common shared ember-cli addon. This addon has common code like models, navigation etc. I also want this addon to provide common test support code like test helpers, factories to the ember apps. However if I remove tests from .npmignore in the addon, then the test resources gets built with the ember app.
Is there a way to use the addon in an ember app, but strip the addon's tests folder on build? Or perhaps there is a better way of achieving this?
Common code can go to the addon's test-support folder. That folder would automatically get merged into the app's tests folder.
This is mentioned here - https://ember-cli.com/extending/#addon-project-structure

What's the recommended method for adding javascript functions in Ember-cli project?

I want to create a library containing general-purpose javascript functions and classes for use in any Ember object in an Ember-cli project. What's the recommended procedure for doing this?
You should generate new util in Ember CLI:
ember g util your-name
Then you can import it using:
import yourName from '../utils/your-name'
Creating an addon is the Ember-CLI-preferred method of doing that. Addons can be published to NPM and installed in Ember CLI projects using NPM. This makes it incredibly easy to share code. There's a guide for developing addons on the Ember CLI site.

What should I use instead of DS.FixtureAdapter

You gotta love ember.js team... I'm getting this depreciation message saying that: "DS.FixtureAdapter has been deprecated and moved into an unsupported addon: https://github.com/emberjs/ember-data-fixture-adapter/tree/master". Guys maintaining that addon advise that we should use a library similar to Pretender. Has anybody done that? Is there a tutorial showing how to integrate this lib so that everything would work as before?
If you are using ember-cli it comes with an http-mock out of the box letting you quickly setup fixtures in a more realistic test scenario. For instance, for a Conversation model you would mock it by running the following prompt on your command line.
ember g http-mock conversations
This will scaffold an endpoint located at server/mocks/conversations.js that your real adapters will use to get data when you run ember serve. You can modify this file to your liking to return whatever fixtures / mock data you want for the various CRUD operations you need.
Server mocks:
Ember CLI's http-mock
Clientside mocks:
Pretender.js
jQuery mockjax
Ember CLI Mirage, basically sugar around Pretender
Clientside mocking has some advantages like portability, making it easy to use in a CI environment, but server mocks let you take advantage of express middleware.
Note: I maintain Mirage. You can watch a screencast & overview here.
I like to use http-mocks with ember-cli. In addition I like to use raw JSON files as the payloads for each endpoint here is an example setup https://github.com/pixelhandler/ember-fixturific/pull/1/files