[Error while testing a component due to toastr manager][1]
<img src="https://i.stack.imgur.com/hjhd9.png">
I am not using toastr manager in this component and still it is showing error.
"Error: StaticInjectorError(DynamicTestModule)[RegistrationComponent -> ToastrManager]:
StaticInjectorError(Platform: core)[RegistrationComponent -> ToastrManager]:
NullInjectorError: No provider for ToastrManager!"
It is because some of the child components that are present inside RegistrationComponent are using it.
So, when you are creating RegistrationComponent , the child component UI is also rendered in testing browser and it is failing.
Related
The concept of testing Vue/Js is new to me,so bear with me. Normally if there are errors related to the Vue component I can see them in the browser console.
for example if I have a Vue component:
<template>
<div>
{{ number }}
</div>
</template>
<script>
export default {}
</script>
I will see an error like this:
[Vue warn]: Property or method "number" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
Now when I want to test a specific component using test tools, how can I check for these kind of errors, I want to make sure that the component is loaded without these errors.
Today I tried using Jset to test this, and I ended up with this:
import { mount } from '#vue/test-utils'
import Component from '../Components/Example.vue'
test('it renders without errors', () => {
const wrapper = mount(Component)
expect(wrapper.isVueInstance()).toBe(true);
})
but, that doesn't do it since it will always return true even though 'number' is not defined. How can I check if the component has loaded without console errors.
This is not an error but warning, this is the reason why the component renders.
A proper testing strategy is to test the behaviour because that the framework doesn't cause warnings doesn't mean that a unit works correctly. A suite with full code coverage won't cause such warnings without a fail.
console.error calls can be additionally spied to strengthen the test but in this case this is entirely redundant:
spyOn(console, 'error');
const wrapper = mount(Component);
expect(wrapper.find('div').text()).toContain('123456'); // easier to do with a snapshot
expect(console.error).not.toHaveBeenCalled();
Notice that console and some other built-in methods should be spied and mocked with care because they interfere with testing framework's error reporting.
I am trying to implement error handling for my Ember application, especially when the API endpoints are down.
I tried to render an error template (error.hbs) using the error() action inside my application route. The rendering will result into internal error (Cannot read property 'push' of undefined, see line in Ember.
To render an error page the idea was to use the following action:
error() {
this.render('error', {
into: 'application' // does not seem to exist
});
}
How can I force Ember to at least render something?
I use Ember 2.7.0
Reason for Cannot read property 'push' of undefined, I guess your application.hbs itself is not rendered due to error in any of the application route model hook (beforeModel,model,afterModel). you can't render error.hbs into application if its not redered.
so remove error actions from application route and define application-error.hbs template file which will be rendered automatically
Ember-twiddle
I'm using a third-party plugin and I have no control over it. I'm using Ember in my entire application except for this plugin and I need instantiate a component inside a div rendered by said plugin to control it the way I want (to avoid the use of jQuery events and such).
1- I'm creating a component called "MyNewComponent"
2- The current structure:
<myComponent1>
<myPlugin-notEmber>
<div-where-I-want-to-append-MyNewComponent class="divClass"/>
</myPlugin-notEmber>
</myComponent1>
3- Take into account that the "div-where-I-want-to-append-MyNewComponent" is rendered by the plugin, not by me.
4- What I'm currently trying to do inside myComponent1 is:
onDidInsertElement: Em.on('didInsertElement', function() {
this.$().find('.divClass').each(function(index, element) {
MyNewComponent.create().appendTo(Em.$(element));
});
}),
Why it's not working:
I'm getting this: (Ember 1.13)
"You cannot append to an existing Ember.View. Consider using Ember.ContainerView instead."
What I'm looking for:
a) the right way to do this OR
b) an equivalent alternative (that will create a component inside that plugin)
Your best option would be to use ember-wormhole
Which allows you to place anything inside another div with an id, so:
{{#ember-wormhole to="destination"}}
{{my-new-component}}
{{/ember-wormhole}}
And somewhere else you'd have
<div id="destination"></div>
This will render the {{my-new-component}} inside of that div.
I have just started to refactor our Ember application to use Pods so that our directory/file structure is more manageable. At the same time i have upgraded Ember-Cli so I am running with the following configuration:
Ember : 1.8.1
Ember Data : 1.0.0-beta.12
Handlebars : 1.3.0
jQuery : 1.11.2
I have updated the the environment.js to include the following
modulePrefix: 'emberjs',
podModulePrefix: 'emberjs/pods',
I have also tried to set it to 'app/pods' and just 'pods' but with no luck.
The directory structure is as follows:
emberjs/
app/
controllers - original location, still has some original controllers here for other parts of the system
pods/
job/
parts/
index/
controller.js
route.js
template.hbs
edit/
controller.js
route.js
template.hbs
The application build ok and if i look in the emberjs.js file i can see the various defines for the pods controllers, routes and templates
e.g.
define('emberjs/pods/job/parts/index/controller', ['exports', 'ember'], function (exports, Ember) {
define('emberjs/pods/job/parts/index/route', ['exports', 'ember'], function (exports, Ember) {
define('emberjs/pods/job/parts/index/template', ['exports', 'ember'], function (exports, Ember) {
so something is recognising the pods structure.
But the problem comes when I try to access this route. I get a warning message in the console and get nothing displayed - basically it says it can find the template abd it looks like it is using an generated controller.
generated -> controller:parts Object {fullName: "controller:parts"}
vendor-ver-1423651170000.js:28585 Could not find "parts" template or view. Nothing will be rendered Object {fullName: "template:parts"}
vendor-ver-1423651170000.js:28585 generated -> controller:parts.index Object {fullName: "controller:parts.index"}
vendor-ver-1423651170000.js:28585 Could not find "parts.index" template or view. Nothing will be rendered Object {fullName: "template:parts.index"}
vendor-ver-1423651170000.js:28585 Transitioned into 'jobs.job.parts.index'
If I look in the Ember inspector in Chrome I see that in the Routes section it shows parts/index to have route of parts/index controller as parts/index and template as parts/index.
Is this what I should expect?
I am not sure how Ember resolves the various parts when using pods.
To test this out I put a copy of the template in the templates/parts directory and reloaded it. This time it found the template and rendered it but lacking the data - probably due ti it using the default route and controller.
Does anyone any idea what I am doing wrong. have I missed out a step somewhere, or configured it incorrectly?
Try removing old routes/controllers/templates when adding new ones. Don't keep two copies.
Also it could be unrelated to your files structure. Try creating a blank app and copying files one by one, to see when the issue starts to happen. Use generators and then overwrite the generated files with yours if possible.
Here's the fiddle. Here's the gist with the contents of my local file.
As you can see, the HTML and JavaScript are identical, and I'm loading identical versions of the jQuery, Handlebars.js, and Ember.js libraries. It works as expected locally, but does not render the application template on jsFiddle.net.
I see the following error in the Web Console:
[19:44:18.202] Error: assertion failed: You must pass at least an object and event name to Ember.addListener # https://github.com/downloads/emberjs/ember.js/ember-latest.js:51
BTW-To test the gist as a local HTML file, make sure to run it behind a web server or your browser won't download the JavaScript libs. If you have thin installed (ruby webserver), go to the directory it's in and run thin -A file start, then navigate to localhost:3000/jsfiddle-problem.html in your browser.
If you set the "Code Wrap" configuration on your fiddle to one of the options other than "onLoad" your application will work. Here is an example.
The reason for this is Ember initializes an application when the jQuery ready event fires (assuming you have not set Ember.Application.autoinit to false). With the jsFiddle "Code Wrap" configuration set to "onLoad" your application is introduced to the document after the jQuery ready event has fired, and consequently after Ember auto-initializes.
See the snippet below from ember-latest, taken on the day of this writing, which documents Ember auto-initialization being performed in a handler function passed to $().ready.
if (this.autoinit) {
var self = this;
this.$().ready(function() {
if (self.isDestroyed || self.isInitialized) return;
self.initialize();
});
}
This was strange - I couldn't get your fiddle working, specifically your {{controller.foo}} call until I disabled autoinit. I am guessing when using jsfiddle the application initialize kicks off before seeing your router. I also noticed with your fiddle the router was not logging any output even when you had enableLogging set to true.
I updated your fiddle to not use autoinit, http://jsfiddle.net/zS5uu/4/. I know a new version of ember-latest was released today, I wonder if anything about initialization changed.