I'm using ember-cli and am writing some tests for my components. Is there a way (in the test) to pass in some block content to the component so that I can test the component use in block form?
No matter what you are passing to the component, it is just a template that is being wrapped by your component. Your unit test will be testing only the component which will remain the same regardless of the template it renders.
If you are trying to test how the component behaves during user interaction, you are talking about integration/acceptance tests. In that case you don't need to pass a block to the component because you'll be visiting routes that render templates where you have already set up your blocks.
Related
In Ember.js, I currently want to test a UI feature present. Essentially, once a model variable changes, I expect to see a UI element appear (a checkmark). I have tried creating a model within the acceptance test but this unfortunately did not work as I did.
I just wanted to know which function to use to set model variables.
A model typically would involve unit tests, but like you've said you're testing the visual result of something being set on a model. I would recommend an integration test. If you are able to refactor (or maybe this is the case already), the part of the template into a component then you can create an ember test for the component and pass in the model set up perfectly how you would like.
If this test really does depend on the model being setup a specific way I would look at how your application sets up that model to begin with and try to replicate those actions with click and fillIn helpers. Another way is say, your application wants to setup a user but relies on a network request to do this, then you could use pretender.js and fake the response to that request so that the application's inputs are setup from the network in the way you're after.
I would really try to do this an acceptance test though, the composable nature of components allows them to be tested in stricter isolation, these tests will run faster, and you're worrying less about side effects.
When creating integration tests for my Ember components I can pick up fired actions (aka, with on handler) and text properties set in the DOM (aka, with $(target).text().trim()). I can even pass in a bound value and watch it's value change so long as it's a two-way binding (aka, {{my-comp value=value}}). But what I often want to do is observe a property within the component without binding to it. With a unit test this would be easy but unit tests are quite awkward in many ways so I'm trying to accomplish most my testing needs in integration tests these days.
Any help would be greatly appreciated.
p.s. the Ember Inspector seems to indicate that what I'm trying to achieve is definitely possible
So I've created an require.js and backbone.js (actually marionette.js) application that basically is some sort of mobile app builder.
Now I want to create tests for it, basically testing this scenario:
Navigate to an existing project, e.g site.com/build/1234
Drag a component, check if it is added correctly.
Change properties of a component and see if they are updated correctly. I.e: I've a properties panel which lists the properties
of the selected component, than for example I've a property which
is a selectmenu and changes the size (small, medium, large). I
should be able to test this.
Now I've been searching on google, however since there are so many testing frameworks, i'm not sure which one to pick and which one provides the functionalities I need.
Potentially PhantomJS seems to be something I could use, however please advice me with some specific information.
Thanks.
if you want to actually simulate clicks, look into selenium (http://docs.seleniumhq.org/projects/webdriver/)
If you just want to test that your Backbone components(views, controllers, etc) and templates are working correctly, you can use a js test runner such as Karma (http://karma-runner.github.io/0.12/index.html) to run your tests. Sinon can mock out your ajax calls for you as well. It can use PhantomJs as a rendering engine, so you can actually render your views, and use view.$() style DOM inspection to verify the output of your views.
I have an existing DetailController and DetailView in my app that has some pretty complicated UI / data manipulation logic (hotkeys, copy paste, duplication, autocomplete, etc) -- the view sends UI events to the controller; the controller handles the logic.
I want to convert this to an Ember component.
Does this basically mean I merge the view and controller into DetailComponent? This seems messy and wrong to me.
If not, how do I use controllers and views internally within a component? That is, I still want the complete isolation and well-defined public interface of the component, but internally within the component, I'd like to use controllers and views for organization. Is that possible?
Is it possible to use {{render}}, {{view}}, {{partial}} within the component template?
Does this basically mean I merge the view and controller into DetailComponent? This seems messy and wrong to me.
Yes that is what it means.
internally within the component, I'd like to use controllers and views for organization. Is that possible?
So component basically replaces a single view/controller pair. Beyond that a component is just an extension of Ember.View and can be organized just like any other view.
Is it possible to use {{render}}, {{view}}, {{partial}} within the component template?
Yes. Any of those helpers will work.
How do I unit-test a Zend_Form form class I wrote for my application?
I aspire to have a 100% code coverage, so just testing each controller that uses it, doesn't seem enough, but I could be missing something in the UnitTest approach..
Unit testing stands for testing of units, so you should
test your Zend_Form based class - you can pass any test data to populate method
than test your controller separately - create mock for your Zend_Form based class, because you are going to test it again, this requires some sort of factory or dependency injection in controller.
The LoginForm class in the example from comment doesn't provide more functionality than setting elements, validators, decorators etc., so this may be tested easily. If you want to test the controller, you should pass it (e.g. as constructor parameter, see Dependency injection) some mock of LoginForm. If you want to test controller and form intergration (which is not unit test, but one can do it also with PhpUnit), you can use controller's method setRequest to set fake request data.
You can try it with Selenium. This way you can prepare inputs and expected outputs. However, it requires that you actually display the form in a browser, so your controller has to work as well.
What about writing test cases that POST form data to your action controller? This way you can generate as many different user inputs as you want and you can check whether your form validation works or whether you get correct error messages.