How can I access the environment of my ember application? My goal is to have a computed property called isStaging to check if the environment is staging
you don't need a computed property, but you can just do this:
import Component from '#ember/component';
import ENV from 'app-name/config/environment';
export default class extends Component {
isStaging = ENV.environment === 'staging';
}
// or if you're on the old syntax:
export default Component.extend({
isStaging: ENV.environment === 'staging'
});
This was the only way I could get environment detection to work
/config/environment.js
module.exports = function(environment) {
let ENV = {
...
EmberENV: {
FEATURES: {
...
DEVELOPMENT: environment === 'development',
TEST: environment === 'test',
PRODUCTION: environment === 'production'
},
...
}
},
Then to access the environment anywhere in the project
import Ember from 'ember';
if(Ember.ENV.FEATURES.DEVELOPMENT) {
// development
}
if(Ember.ENV.FEATURES.TEST) {
// test
}
if(Ember.ENV.FEATURES.PRODUCTION) {
// production
}
I would like to configure a URL differently in my ember app depending if the app is running in production or development mode. Is this possible to do by loading the endpoints into config/environment.js and accessing the value of the ENV object in a handlebars template? Maybe I have to expose the ENV value in a controller? Or is there some other mechanism for doing this?
Something like this:
// config/environment.js
if (environment === 'development') {
ENV.zzz.url = "http://www.reddit.com";
}
if (environment === 'production') {
ENV.zzz.url = "http://www.google.com";
}
// app/controllers/application.js
export default Ember.Controller.extend({
siteUrl: ENV.zzz.url
...
// somefile.hbs
Funspot
yes. you can do import config from 'app-name/config/environment';
and access it like config.zzz.url
I'm writing a very basic acceptance test against a route that has both admin and non-admin capabilities. My test makes an assertion that if I'm coming to the app for the first time, I don't see logged in capabilities. In my application, I'm using password authentication as follows:
this.get('session').open('firebase', {
provider: 'password',
email: email,
password: password
});
I have found that when I am not authenticated in the app, then run the acceptance test, it passes. However, if I then log in on the app, then run tests, my assertion fails because the session is restored, when I think it shouldn't be. Here's the test:
import { test } from 'qunit';
import moduleForAcceptance from 'app/tests/helpers/module-for-acceptance';
import startApp from '../helpers/start-app';
import destroyApp from '../helpers/destroy-app';
import replaceAppRef from '../helpers/replace-app-ref';
import replaceFirebaseAppService from '../helpers/replace-firebase-app-service';
import stubFirebase from '../helpers/stub-firebase';
import unstubFirebase from '../helpers/unstub-firebase';
import { emptyApplication } from '../helpers/create-test-ref';
moduleForAcceptance('Acceptance | index', {
beforeEach: function() {
stubFirebase();
application = startApp();
replaceFirebaseAppService(application, { });
replaceAppRef(application, emptyApplication());
},
afterEach: function() {
unstubFirebase();
destroyApp(application);
}
});
test('empty app - not authenticated', function(assert) {
visit('/');
andThen(function() {
assert.equal(currentURL(), page.url, 'on the correct page');
// this works if there's no session - fails otherwise
assert.notOk(page.something.isVisible, 'cannot do something');
});
});
I think replaceFirebaseAppService should be overriding the torii-adapter but it doesn't appear to be. Any help would be greatly appreciated.
I'm using:
Ember : 2.7.0
Ember Data : 2.7.0
Firebase : 3.2.1
EmberFire : 2.0.1
jQuery : 2.2.4
Upon looking at Emberfire closer, replaceFirebaseAppService is trying to replace the torii adapter registered at torii-adapter:firebase when it was being registered by my application as torii-adapter:application.
What I ended up doing was basically replicating replaceFirebaseAppService in my own helper:
import stubFirebase from '../helpers/stub-firebase';
import startApp from '../helpers/start-app';
import replaceAppRef from '../helpers/replace-app-ref';
import createOfflineRef from './create-offline-ref';
export default function startFirebaseApp(fixtures = { }) {
stubFirebase();
let application = startApp();
// override default torii-adapter
const mock = { };
application.register('service:firebaseMock', mock, {
instantiate: false,
singleton: true
});
application.inject('torii-provider:application', 'firebaseApp', 'service:firebaseMock');
application.inject('torii-adapter:application', 'firebaseApp', 'service:firebaseMock');
// setup any fixture data and return instance
replaceAppRef(application, createOfflineRef(fixtures));
return application;
}
This prevents the torii-adapter from resolving any session data that I may have from using my application. Then I can use the provided torii helper to mock my session where I need it:
// torii helper
import { stubValidSession } from 'app/tests/helpers/torii';
// mock a valid session
stubValidSession(application, { });
Hope that saves someone else some time.
Quick summary/tldr:
It seems that Ember's container lookup process + Ember-CLI's module resolver doesn't allow manually un-registering a service and then registering a replacement if the original service can be resolved using the resolver (I want to do the method described here, but it doesn't work)
How can I mock an Ember-CLI service in an acceptance test without using a hacky, custom resolver? (example project/acceptance test here)
Detailed explanation + example
Create a new service that is injected into a controller:
ember generate service logger
services/logger.js
export default Ember.Object.extend({
log: function(message){
console.log(message);
}
});
initializers/logger-service.js
export function initialize(container, application) {
application.inject('route', 'loggerService', 'service:logger');
application.inject('controller', 'loggerService', 'service:logger');
}
The service is accessed through its injected name, loggerService, in an action handler on the application controller:
Use the service in a controller
templates/application.hbs
<button id='do-something-button' {{action 'doSomething'}}>Do Something</button>
controllers/application.hs
export default Ember.Controller.extend({
actions: {
doSomething: function(){
// access the injected service
this.loggerService.log('log something');
}
}
});
Attempt to test that this behavior occurs correctly
I created an acceptance test that checks that the button click triggered the service. The intent is to mock out the service and determine if it was called without actually triggering the service's implementation -- this avoids the side-effects of the real service.
ember generate acceptance-test application
tests/acceptance/application-test.js
import Ember from 'ember';
import startApp from '../helpers/start-app';
var application;
var mockLoggerLogCalled;
module('Acceptance: Application', {
setup: function() {
application = startApp();
mockLoggerLogCalled = 0;
var mockLogger = Ember.Object.create({
log: function(m){
mockLoggerLogCalled = mockLoggerLogCalled + 1;
}
});
application.__container__.unregister('service:logger');
application.register('service:logger', mockLogger, {instantiate: false});
},
teardown: function() {
Ember.run(application, 'destroy');
}
});
test('application', function() {
visit('/');
click('#do-something-button');
andThen(function() {
equal(mockLoggerLogCalled, 1, 'log called once');
});
});
This is based on the talk Testing Ember Apps: Managing Dependency by mixonic that recommends unregistering the existing service, then re-registering a mocked version:
application.__container__.unregister('service:logger');
application.register('service:logger', mockLogger, {instantiate: false});
Unfortunately, this does not work with Ember-CLI. The culprit is this line in Ember's container:
function resolve(container, normalizedName) {
// ...
var resolved = container.resolver(normalizedName) || container.registry[normalizedName];
// ...
}
which is part of the container's lookup chain. The issue is that the container's resolve method checks the resolver before checking its internal registry. The application.register command registers our mocked service with the container's registry, but when resolve is called the container checks with the resolver before it queries the registry. Ember-CLI uses a custom resolver to match lookups to modules, which means that it will always resolve the original module and not use the newly registered mock service. The workaround for this looks horrible and involves modifying the resolver to never find the original service's module, which allows the container to use the manually registered mock service.
Modify Resolver to avoid resolving to original service
Using a custom resolver in the test allows the service to be successfully mocked. This works by allowing the resolver to perform normal lookups, but when our service's name is looked up the modified resolver acts like it has no module matching that name. This causes the resolve method to find the manually registered mock service in the container.
var MockResolver = Resolver.extend({
resolveOther: function(parsedName) {
if (parsedName.fullName === "service:logger") {
return undefined;
} else {
return this._super(parsedName);
}
}
});
application = startApp({
Resolver: MockResolver
});
This seems like it shouldn't be necessary and doesn't match the suggested service mocking from the above slides. Is there a better way to mock this service?
The ember-cli project used in this question be found in this example project on github.
Short version of the solution: your registered mock service must have a different service:name than the "real" service you're trying to mock.
Acceptance test:
import Ember from 'ember';
import { module, test } from 'qunit';
import startApp from 'container-doubling/tests/helpers/start-app';
var application;
let speakerMock = Ember.Service.extend({
speak: function() {
console.log("Acceptance Mock!");
}
});
module('Acceptance | acceptance demo', {
beforeEach: function() {
application = startApp();
// the key here is that the registered service:name IS NOT the same as the real service you're trying to mock
// if you inject it as the same service:name, then the real one will take precedence and be loaded
application.register('service:mockSpeaker', speakerMock);
// this should look like your non-test injection, but with the service:name being that of the mock.
// this will make speakerService use your mock
application.inject('component', 'speakerService', 'service:mockSpeaker');
},
afterEach: function() {
Ember.run(application, 'destroy');
}
});
test('visit a route that will trigger usage of the mock service' , function(assert) {
visit('/');
andThen(function() {
assert.equal(currentURL(), '/');
});
});
Integration test (this is what I was originally working on that caused me issues)
import { moduleForComponent, test } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';
import Ember from 'ember';
let speakerMock = Ember.Service.extend({
speak: function() {
console.log("Mock one!");
}
});
moduleForComponent('component-one', 'Integration | Component | component one', {
integration: true,
beforeEach: function() {
// ember 1.13
this.container.register('service:mockspeaker', speakerMock);
this.container.injection('component', 'speakerService', 'service:mockspeaker');
// ember 2.1
//this.container.registry.register('service:mockspeaker', speakerMock);
//this.container.registry.injection('component', 'speakerService', 'service:mockspeaker');
}
});
test('it renders', function(assert) {
assert.expect(1);
this.render(hbs`{{component-one}}`);
assert.ok(true);
});
You can register your mock and inject it instead of the original service.
application.register('service:mockLogger', mockLogger, {
instantiate: false
});
application.inject('route', 'loggerService', 'service:mockLogger');
application.inject('controller', 'loggerService', 'service:mockLogger');
I use this approach for mocking the torii library in my third-party login acceptance tests. I hope there will be a nicer solution in the future.
The existing answers work well, but there's a way that avoids renaming the service and skips the inject.
See https://github.com/ember-weekend/ember-weekend/blob/fb4a02353fbb033daefd258bbc032daf070d17bf/tests/helpers/module-for-acceptance.js#L14 and usage at https://github.com/ember-weekend/ember-weekend/blob/fb4a02353fbb033daefd258bbc032daf070d17bf/tests/acceptance/keyboard-shortcuts-test.js#L13
I'll present it here as an update to the test helper I previously had here, so it's a drop-in replacement, but you may just want to follow the links above instead.
// tests/helpers/override-service.js
// Override a service with a mock/stub service.
// Based on https://github.com/ember-weekend/ember-weekend/blob/fb4a02353fbb033daefd258bbc032daf070d17bf/tests/helpers/module-for-acceptance.js#L14
// e.g. used at https://github.com/ember-weekend/ember-weekend/blob/fb4a02/tests/acceptance/keyboard-shortcuts-test.js#L13
//
// Parameters:
// - newService is the mock object / service stub that will be injected
// - serviceName is the object property being replaced,
// e.g. if you set 'redirector' on a controller you would access it with
// this.get('redirector')
function(app, newService, serviceName) {
const instance = app.__deprecatedInstance__;
const registry = instance.register ? instance : instance.registry;
return registry.register(`service:${serviceName}`, newService);
}
Plus performing the jslint and helper registration steps from https://guides.emberjs.com/v2.5.0/testing/acceptance/#toc_custom-test-helpers
I can then call it like this, in my example stubbing out a redirect (window.location) service, which we want to do because redirecting breaks Testem:
test("testing a redirect's path", function(assert) {
const assertRedirectPerformed = assert.async();
const redirectorMock = Ember.Service.extend({
redirectTo(href) {
assert.equal(href, '/neverwhere');
assertRedirectPerformed();
},
});
overrideService(redirectorMock, 'redirector');
visit('/foo');
click('#bar');
});
TL;DR
Is it possible to pass the options from the addon's index.js file to the addon's Ember application?
More detail
Ember CLI addon's allow you to pass options to an addon by setting options in your Brocfile.js.
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
var app = new EmberApp({
myAddon: {
enabled: false // TODO - Change when CLoudfront is implemented
},
});
You can then access these options in the addon's index.js file like so:
module.exports = {
name: 'my-addon',
included: function(app) {
var options = app.options.myAddon;
}
}
However, what if I want to use these options in an Ember component or view or other class in the addon? For example, a component:
import Em from 'ember';
export default Em.Component.extend({
doSomething: function() {
if (this.get('options.enabled')) {
// Then do something
}
},
});
Is it possible to pass the options from the addon's index.js file to the addon's Ember application?
Please note, I'm aware you could just pass the argument to the component in the template but that's not the point of this question. Thanks.
I think what you're trying to accomplish is best implemented using config/environment.
You can either add your options to your addons config/environment.js file. This object will be merged with you applications config/environment.js.
module.exports = function(/* environment, appConfig */) {
return {
myaddon {
enabled: true
}
};
};
Or if you are feeling funky, you can override the default behaviour of the addons config hook in index.js to manually add the options. But the happy path should be considered adding it to config/environment.js
In your component you can then import the config with:
import config from '../config/environment';
If you also need the options to be added to your app instance. You can add the options under the APP property in config/environment.js. The content of the APP property are added to the app instance. In your addon's config/environment.js put:
module.exports = function(/* environment, appConfig */) {
return {
APP: {
// Here you can pass flags/options to your application instance
// when it is created
myaddon {
enabled: true
}
}
};
};