Ember.js during testing: The URL '/' did not match any routes - ember.js

I'm running some integration tests on my Ember app with Konacha.
Because of the nature of the tests, the Ember run loop is not disabled.
The tests work, but it seems that because I have not disabled the run loop (as outlined in the ember testing guide), I get this error in my console when the tests run:
Assertion failed: The URL '/' did match any routes in your application
But the tests do succeed regardless of this "error."
I've been playing around trying to remove the error from the console so that testing can be easier to see changes in, but I can't find a direct link between my tests and the error. The error happens whenever the Ember App object is initialized.

Do you have a match for all at the end of your router?
this.route("matchall", {
path: '*:'
});
Might help if you posted some sample routes and tests too.

Related

EmberJS: `ember serve --environment=test` renders blank page

My team is moving to use Cypress for integration testing rather than Embers Acceptance tests. Before, we would just run ember test which set the environment to "test". Now, I don't want to run embers testing suite but I still want the "test" version of our app. So I want to be able to run ember serve --environment=test. However, I noticed that when I did this, I just get a blank screen. The weirdest thing is that when I change it to ember serve --environment=haha (haha being a random environment name that never existed before), I start seeing the app hit my routes like I would expect. I start actually getting application errors in code we wrote in the source, whereas with the test environment, I couldn't even hit a console.log in the application route.
I want to be able to serve my app with the test environment because we're using it for testing. Is this possible? I'm specifically wondering if there's a bunch of magic under the hood with that environment that makes this impossible or if it's just something else I need to do that I'm missing.
I'm not sure what side effects this would have, but you can get your app running with ember serve --environment=test if you comment out two lines in your config/environment.js file:
if (environment === 'test') {
// ENV.APP.rootElement = '#ember-testing'
// ENV.APP.autoboot = false
}

Generating Production Build index.html With Server Side App

I want to do something very simple that I am a little surprised people are not talking about more. I would like to generate on my server my own index.html from the files that are created from building ember for production. I use ember for part of my application and so when a certain URL is hit, I would then like my ember app to take over. I have tried generating my own index.html by changing the flag storeConfigInMeta in ember-cli-build.js.
storeConfigInMeta: false
This gets rid of the ember app having its configuration stored in a meta tag but the app still does not work and gives the error,
Uncaught ReferenceError: define is not defined
I have the latest version of ember and I am building ember with the command,
ember build --env production
My server generated index.html looks identical accept for the integrity attributes set on the include js and css scripts. Is their anything I am missing about approaching ember this way? Should I not be trying to do this?
when a certain URL is hit, I would then like my ember app to take
over.
You need to configure app server to return index.html file for the certain URL.
Generally, it's not required you to create your own index.html.
May be you can check ember-islands addon to include Ember components anywhere on a server-rendered page.
I made a mistake. I was grabbing the production assets with a regular expression with my server and generating my index.html file with these assets in the wrong order. To anyone looking to do this, it is very possible and is more preferable in my opinion to using the generated index.html unless you are using ember for your entire site's routing. However do use the setting in ember-cli-build.js,
storeConfigInMeta: false
This will make it so your ember app stores it's settings in javascript instead of in a tag. This is required for generating your own index.html file.

Lookup route from URL in Ember router

The Ember router creates a URL from a route, e.g. with the link-to helper. Is it possible to reverse-lookup a route from a given URL?
The reason for this is that I have some absolute URL links in my database which point to pages in my Ember app, and I want to transition to them within the app. Using <a href={{link}}> works, but breaks my tests (when running ember test -s) as following the link redirects the whole browser page, stopping the test suite. If it's possible to redirect to an absolute URL without breaking the test suite that would also do the trick.

How do we make Trek's Pretender play nice with Ember Testing?

So, my current Ember project is built using Ember App Kit. My tests are using the wonderful httpRespond to mock out ajax requests.
However, I have started to notice that while httpRespond is great, you really only test how your app responds to responses from the API and not so much how your app responds to interactions from the user. An example of this I guess is submitting a form with server side field validations.
With httpRespond you mock out the response, which will be returned regardless of what the request looked like. So, I can essentially click the submit button on my form and successfully submit the form without having filled in any fields. This feels like we're missing something.
Enter Trek's Pretender. This is a bit like a sup'ed up version of httpRespond. It looks a little like a mock server but is just mocking out the xhr like httpRespond. Except you get access to the request which you can inspect before deciding what response to return.
I like this idea a lot and I want to use it. However....
Pretender is not yet Ember Testing aware. httpRepond understands the async workings of Ember and will wait for async events in Ember to finish before carrying on in the test. Pretender however, does not do this yet.
For instance, if I click a link in my Ember app which kicks off a few different async events, my test will not wait for these async events to finish before continuing and therefore, the test finishes executing before the async events have finished.
Which brings me to my question...
How do we go about making Pretender Ember Testing aware?
Trek has mentioned that this is something he has yet to do, but I'm not sure when he might have time to get to it. So I'd love to get it going if possible.
Does anyone have any thoughts how we might about attempting this?
I'm having a lot of success with ember-cli-mirage. It sits on top of pretender and allows you to create both fixtures for development and factories for use in tests. If you're still having trouble with this, or for anyone else, this is a really easy way to get control over your apps development data.

EAK and tastypie adapter integration

What is the best approach to use EAK and ember-data-tastypie-adapter?
I am currently trying the following:
Django running on localhost:7000
EAK running on localhost:8000
Added ember-data-tastypie-adapter to bower.json
Added both JS files to index.html
<script src="/vendor/ember-data-tastypie-adapter/packages/ember-data-tastypie-adapter/lib/tastypie_adapter.js"></script>
<script src="/vendor/ember-data-tastypie-adapter/packages/ember-data-tastypie-adapter/lib/tastypie_serializer.js"></script>
Created everything needed on Django side
I figured that I had to create serializers/application.js and put in it:
export default DS.DjangoTastypieSerializer.extend();
Also adapters/application.js needed adjustments:
export default DS.DjangoTastypieAdapter.extend({
serverDomain: 'http://localhost:7000',
});
Requests go to Django and responses are sent.
However in EAK this gives "Sorry, something went wrong" message without any further information (empty error message box). No errors in console either.
If I remove serializers/application.js I get similar message, in this case with information about the error:
Assertion Failed: Nested controllers need be referenced as [/django/tastypie],
instead of [_djangoTastypie].
Refer documentation: http://iamstef.net/ember-app-kit/guides/naming-conventions.html
Do I have to define defaultSerializer in adapters/application.js? If so, what is it, /django/tastypie or something else?
What am I missing to integrate ember-data-tastypie-adapter in EAK? Trouble is, I have not seen any example where EAK and tastypie would be working together.
Of course this two local server system is development environment. Production is planned like here, both API and JS is served by one Django instance.
UPDATE:
Creating deployment code by grunt dist and serving it using Django works.
I suspect that problem lies with different JSON origin.
Turns out, that EAK has API proxy option.
Updated package.json to my API settings:
"proxyURL": "http://localhost:7000",
"proxyPath": "/api/v1",
Removed custom settings from adapters/application.js.
Now running grunt server:proxy gets data from Django. And ember.js app works without errors, not being same origin was most likely the problem.