Emberjs starter-kit test fails - ember.js

I have installed the Emberjs starter-kit from Github: ember-starter-kit
And placed it here
And everything seems to work fine, but when I try the testing environment, by using the ?test command, it seems to fail
This all happens while I haven't made any changes to the starter-kit.
The only thing I can think of that might cause problems with the testing is the fact that fertilemedia.com has mod_rewrite (a .htaccess) at root level, but I could not find anything online about mod_rewrite interfering with the emberjs tests.
I've also tried adding:
App.Router.reopen({
rootURL: '/playground/ember/starterkit/'
});
But this does not seem to have any effect.
Since I've made no changes to the starter-kit, and the non-test page seems to work fine, what am I doing wrong?

Related

Where in Source Code Does Laravel 5.2 Convert Route Prefixes to Parameters

In a nutshell, I keep finding forums on how to use the route prefixes, but I am wondering where it is in the source code that Laravel converts route prefixes into parameters that can be used in the views example: {customer_id}
It looks like on 794 of Illuminate/Routing/Route.php getPrefix() is used to get the prefix of the route instance; however, I'm not seeing where that is actually called.
I am trying to test a controller in Laravel 5.2 with PHPUnit/Mockery, Doctrine 2, and about 15 other dependencies. I have route prefixes of admin and customer that need to be pulled down as parameters. Everything on the live site works fine, so I know the actual code is correct. The other parameters work fine -- just not static prefixes. The tests worked great with Eloquent and had no problems converting the prefixes to parameters before my manager added a bunch of new dependencies. Now the prefix parameter returns null during testing on every test. One of the new dependencies broke something involved with testing--likely autoloading.
I could be looking in the wrong direction seeing how we are using so many dependencies that makes it extremely difficult to track down problems, but I've already found that Illuminate\Support\Facades\Route;
was autoloaded prior to the merge, and now it needs to be manually added to the testcase. I'm wondering if this isn't the same thing I need to do to get the route prefixes to work properly.
It looks like I was looking in the wrong place and converting the first static prefix to a variable was a new custom feature that parsed the route in helpers.php added by a coworker. That method was then called from middleware--which I had middleware turned off for testing, so the test never retrieved that first parameter.

Ember.js: Cannot read property 'isHelperInstance' of undefined

I'm deploying my app to my staging environment for the first time, but I'm running into an error...One of my routes is unable to render its template. I'm seeing this error in the console:
Uncaught TypeError: Cannot read property 'isHelperInstance' of undefined
I was not seeing this error in development.
I'm using ember-cli-rails to serve the app using Heroku.
How can I solve this issue?
I actually had this error due to improperly referencing a helper. My helper was called concatTwo() but in handlebars you have to reference it using kabob-case, which would be concat-two. We had some Handlebars referencing concatTwo which broke those pages and showed this error. Not surprisingly, refactoring it to use the kabob case version fixed the error.
Oddly enough, this didn't cause any problems on the development environment, even when running it with exactly the same data.
The cause of this error was due to referencing a component in a template that did not exist. The reason that I did not see the error in development is because I did not have the same data in my development environment as in staging. So I never saw the part of my template that would have caused the error.
Ember-2.6.3
In order to get my development environment to exhibit this behaviour I had to clear my node_modules/ and re-npm-install everything. I also cleared my bower_components and re-bower installed them too. Not sure which made the difference.
I think I agree with #vkoves about the kabob-case for your helpers. But also in addition, I think you must be wary of using dot-notation when referencing helpers or components.
We nested some of our format helpers in a folder named formatters. They look something like this from our Ember app's perspective: app/helpers/formatters/date
We were previously referencing this helper throughout our application as either: {{formatters.date ...}} or (formatters.date ...).
?After some recent changes in the Node/NPM ecosystem?, it appears that we must now refer to our nested helper using a slash-notation rather than dot-notation: {{formatters/date ...}} or (formatters/date ...)
Side Note (Dot-Notation Versus Slash-Notation)
We also just discovered that Ember-2.10 removes dot-notation for referencing components...it apparently is not in the release notes. We have to go fix that everywhere in our app (https://github.com/emberjs/ember.js/issues/14659).

Integrating Ember_simple_auth with acceptance tests (using Mirage)

I created a basic test app that uses the OMDb API (The Open Movie Database), and with some help from SO posters everything is working fine.
I added ember-simple-auth (version 1.0.0) to the project, and got the dev side of things going. Basically there's a simple login screen to get into the main app. It's working as expected.
However, my two basic acceptance tests are now not working. After adding the ember-simple-auth components and functionality to the app, to the acceptance test file I added:
import { currentSession, authenticateSession, invalidateSession } from 'movie-example/tests/helpers/ember-simple-auth';
and in a test itself, I added:
authenticateSession();
The test now fails, saying:
Cannot read property '__container__' of undefined
Moreover, if I comment out the import line and the authenticateSession() call, the test still fails, but because the DOM is apparently completely empty.
The whole thing is available in a repo if anyone is curious/willing: git#github.com:bdrsgg/ember-movie-example.git (branch = feature/ember-simple-auth)
I assume there's some configuration issue I'm getting wrong, or something like that. Appreciate any help anyone can offer.
EDITED TO ADD:
The issue definitely seems to center on authentication. For example, if I remove the AuthenticatedRouteMixin calls from the routes, and leave out authenticateSession() calls, the tests pass.
Turned out I was just not declaring an earlier application variable correctly. Long story short, when I changed authenticateSession() to authenticateSession(this.application), things worked as expected.

Lazy Loaded Ember Application

I am typically searching for answers here but I finlly gotten to the point where I can't find a good answer.
I am looking to build an ember app which only initially loads in the things that it needs just to start and open the main route. All other controllers, views, templates, etc. Would be loaded lazily when a specific route gets triggered.
I have found a good example of how to accomplIsh this here:
http://madhatted.com/2013/6/29/lazy-loading-with-ember
My main question is to determine what build tools out there support this theory of lazy loading application code? So far, I've seen that Brunch, Yeoman, and Ember App Kit seemed to minify and concatenate all the scripts and templates. I am very happy with minification but need those files separate. I have thought about just putting this code into the app/assets location so that it gets copied over without concat but it does not get minified.
Does anyone have a solution? Thanks!
You can do this with brunch by adding the following to your brunch config
files: {
javascripts: {
joinTo: {
'javascripts/app.js': /^app(\/|\\)(?!admin)/, // concat everything in app, except /app/admin
'javascripts/vendor.js': /^vendor/,
'javascripts/admin.js': /^app(\/|\\)admin/ // concat only /app/admin
}
}
}
Grunt (used in yeoman and ember app kit) is ridiculously flexible, so I'm sure you can set up the same thing there by diving into Gruntfile.js
The question was: "I am looking to build an ember app which only initially loads in the things that it needs just to start and open the main route. All other controllers, views, templates, etc. Would be loaded lazily when a specific route gets triggered.".
Ember expects to have anything it needs right there when the page gets loaded. I wouldn't be wrong, but lazy loading of routes doesn't seem to be a feature of Ember. Ember CLI is the same. It uses bundling and minification to reduce the overload. But everything should be there to make it work.
Instead, people like me would like to load things only when they are required.
When you try to implement lazy loading in Ember, everything should be represented by a module (file.js): a route, a module; a controller, a module; and so on.
You should follow a schema (like POD), to which apply a mechanism to find things where they are supposed to be.
Every module should know its dependencies. But some of them are very frequent (route, controller, template).
You should use a module loader for the browser. It can be requirejs or whatever you like. But ES6 is at the door. Let's think about that.
Many people use beforeModel hook to achieve a result. I did it, and it works, if you don't use link-to component. Otherwise everything crashes. Why? Because of href computed property. When a link-to has been inserted, an href is calculated for it. Because of that, Ember looks for the route where the link points to. If the route doesn't exist, one is created from route:basic.
A solution could be the preloading of all the routes represented by all link-tos inserted in the page. Too much expensive!
An integration to this answer can be found at Lazy loading route definitions in Ember.js
For an initial solution to lazy loading of routes organized in POD, have a look at https://github.com/ricottatosta/ember-wiz. It is an ES6 based approach, which relay on SystemJS as module loader.

Ember.Controller doesn't exist?

I'm just getting started with Ember. I'm a little confused on some things, as the guides on the main site seem to indicate different ways of working.
In the main docs (http://emberjs.com/documentation/), it indicates that a controller should just extend an ordinary Ember object like this:
Ember.Object.extend();
Which works fine for me.
Then in the guide to using Routing (http://emberjs.com/guides/outlets/) it suggests that there is a Controller object type that you can extend:
Ember.Controller.extend();
This doesn't work for me, and if I simply try to console.log Ember.Controller, its undefined.
I'm using Ember version 0.9.8.1.
Should I worry about this, or should I just carry on with extending Objects as my controllers?
0.9.8.1 is aging, and unfortunately even the guides on the site are ahead of it -- use latest (at https://github.com/emberjs/ember.js/downloads) to keep up with the most current best practices.
Update: 1.0-pre is out (emberjs.com), so that is the best to use. The docs / guides have been brought up to date.
I think #pauldechov means the specific "latest" build which you can find here: https://github.com/emberjs/ember.js/downloads
But also keep in mind that the documentation and "latest" are not always in sync.