I am trying out the MVC3 Razor view engine, and one the features that I am exploring is the ability to unit test views.
I have seen a number of examples where Razor views can be compiled into an assembly and rendered into a string. The problem is that it renders as a string, so I am left with doing string searches!
Here is what I am trying to do.
Create a Razor helper
Compile helper
Run compiled helper, passing in a ViewModel
Get the output of the helper as some sort of HTML/XML/tree structure
The reason that I want to do this is so that I can test for specific parts of the output. The helper will likely spit out HTML that includes various output gunk. What I want to do is to see if there is a Checkbox with a particular value (for example). If you have seen Selenium tests, it is similar to what I would like to do, except not as server driven tests.
Is there some way to get compiled Razor (or other view engine) views to emit something other than strings?
The short answer is no, because view engines' purpose in life is to spit out strings. Parsing those strings into an XML document is a way to give them a little structure, like #Craig-M suggested. But what you have to ask yourself is what you're really testing. If your view compiles and generates some kind of HTML, there can be three problems with what it generated:
the data it displays is not correct. You would test for this at the controller level, so you can ignore it during view testing.
the MVC framework had an error and it generated the wrong HTML string. You don't worry about this, because MVC has its own test suite and thanks to separation of concerns, it's not your problem.
the HTML has broken the user interface.
That last one would be very nice to test for, but why not test for it in javascript unit tests? Check out popular javascript unit test suites like JsUnit, FireUnit, QUnit, etc. They would all do a much better job than you could do of parsing out Razor output.
I think the value assigned to a checkbox would probably be tested for in Controller testing. But to use your example, testing your checkbox's value could be $('#theCheck').val() == 'the value'. And you can run these against a website running with dependency injected repositories or services to control things like 'the value'.
Just a thought.
One way you could go about this is to parse the html string into an XDocument and have your assembly return it. Then you can query against it with LINQ in your tests.
Edit: I'm trying to figure out a Razor test strategy too. I'd be interested to know how you get the helper to work. So far, I'm drawing a blank in getting them rendered to strings outside of the MVC framework.
How about rendering your views to html and then sending that html to HtmlAgility library? That way you can easily traverse/navigate your html. I don't think there is any way to do that with MVC itself.
It looks like Microsoft has its own answer of how to produce HTML from views, for the purpose of unit testing.
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.
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've written a templatetag that includes much of the logic that I would normally expect to find in a view. While writing some unit tests I started wondering about a slightly different approach. I don't feel experienced enough to judge the pros and cons (maybe this is even a well known practice – or a no go...). That's why I am interested in your opinion.
My idea was to write a view to handle all the logic and to use the templatetag as a wrapper that passes all relevant context to that view and returns the rendered HTML.
Advantages that I would hope to get from this approach:
easier to provide different output formats
easier DRY
easier testing
permission checks using decorators and mixins inside the view
cache control inside the view
nice approach towards ajax and/or edge side includes
higher flexibility
For example, a templatetag that renders a tree navigation could deliver HTML when accessed through the templatetag while at the same time its corresponding view remains accessible through a URL.
The view could provide different output formats like JSON, RSS, XML, handle permission checking, ... Advanced logic could be tested through the view, leaving responsibility for the templatetag testcases just to ensure the very basics.
I'd appreciate other opinions, hints or links to packages or related posts.
In my opinion, the problem with template tags are:
Too much abstraction.
Challenging to test.
Problems with performance
What I suggest instead is:
Create a function that generates the data, caches the data, handles permissions, anything else data related
Write three more functions that render the data in HTML, JSON, and XML respectively
Document and write tests for the above functions
Use these functions in views, filters, and template tags as needed. The views/filters/tags calling the functions would be very thin and easy to manage.
The benefits you get by this approach are:
Reusable code
More easily testable code
Better speed
I'm new to angular and I'm looking for a way to achive more advanced templating that one mentioned in the tutorial here
1.) I would like to have a different template for the login page and another one after you are logined
2.) it would be nice to have a functionality of multiple ng-view-s so you can have diferent pieces of the template filed diferently on every url...is it possible to achive this in angular
3.) is there a beter/easyer templating mechanisem to use, meybe some other js framework?
The ideall would be to use something like facelets but on client.
While it is not possible to have multiple ng-views, you can certainly have more than one routes, each one mapped to a controller and a view. It will help to do further reading on how to use controllers, routes etc. You can also use ng-include one ore more times with static or dynamic template urls mapped to a variable in the controller.
AngularJS is one of the best (if not the best) multi-feature JS UI frameworks available in terms of MVCness, extensibility, fine tuning, testing, data binding, templating etc. You cannot generally go wrong with it, just need to spend some time initially getting used to the patterns, idioms and terminology.
I would suggest looking into ui-router for doing nested views.
I've found absolutely nothing on Google with regard to A/B testing with a client-side framework such as ember.js.
The goal is to serve up adjusted content (different nav items, header phrasing etc.) in order to A/B test our UI/UX. I should note that nothing significant (i.e. sitemap) is changing, just some minor presentational aspects.
There are several possible approaches, namely using different view templates / helper snippets, or serving up a different stylesheet. Both have advantages and challenges, and ideally the same visitor would always be served the same version. Results would be fed through a service like Mixpanel.
I fear I may have to roll my own solution here, but would love to hear any suggestions / pointers.
At their root, most A/B javascript testing frameworks cookie a user as being in the "A" or "B" group, give you a way to ask if a user is "A" or "B" and report "results" back to a service to measure. This can plug into Ember or other client-side frameworks in a way that is fairly orthogonal to the framework.
I would recommend exposing the "A"- or "B"-ness of the user as a property on your user (in Ember, probably your UserController). Then you can use your framework's standard branching or conditionals to render the "A" UI or the "B" UI.
I have actually built a pretty robust A/B Testing tool using Ember for my startup. We are actually thinking of open sourcing it if there was a demand for it. I can let you know the basic idea of how it works for now though.
I have landingPage objects, that can then have a bunch of A/B tests associated with the, When a user comes to the landing page, they are assigned a cookie, and for each A/B test that are assigned either A or B.
I have used two different approaches within jade to handle A/B testing.
For styling type things, I use something like this
and set the .css property in the view to either test-a or test-b
or if it is for text I will do something like this
{{view view.landingPageText}}
and the landingPageText would be set to either the text for A or the test for B.
This thing also dynamically sets up mixpanel, mailchimp, and uses parse.com and node. You can see the code in action here.
http://golf.nextstudioapps.com/