Cucumber.js testing without relying any web browsers(Headless or real web browsers) - angularjs

I was a .net based windows application developer and being a web developer now.
For the last couple of years, I tried to follow principles of Specification by example in a project.
On the last project I was involved, our team used WPF with MVVM(Model-View-ViewModel) pattern and I tried SpecFlow for testing. (Well.. the coverage by SpecFlow was very low though cause it was not officially adopted from our team and I couldn't spend enough time on it.)
Now our team started to migrate the existing windows application to a web based application and decided to use cucumber.js as a tool for implementing 'Specification by example'.
When I was trying SpecFlow before, I made all the step definitions to test ViewModel layer instead of View and it was the only way actually. What I'm confused with cucumber.js is that most of examples demonstrate how to test features via web browsers(headless or real ones).
If the features are specifying specific ui behaviors then accessing a DOM element and evaluating its value make sense. However, as far as I learned about Specification by examples, testing under the UI layer is recommended instead of UI elements directly.
It seems like most of modern web applications have layers such as MVC, MVVM(knouckout.js) nowadays. Our web application will use Angularjs and this is my theory.
I guess it is possible to use feature files - which do not state any specific UI controls and behaviors - to test under the skin of UI layer, without relying browser support. That layer would be Model of angularjs, not ui elements.
Is this approach missing something or wrong with cucumber.js?
Please give me some insights and correct me if I'm wrong.
Thanks in advance!

Specification by example specifies requirements by giving examples from the point of view of the user. What's more representative of the user: clicking items on a web page, or directly calling code? A user won't be calling methods on your view model, so in my opinion a feature test is a much better way to test expected behaviour.

Related

Building mind map based webapp. Not sure which framework to choose

We are working on a Mind map based webapp as our final year college project. It will be a website where users will be able to create mind maps collaboratively. The user interface will be very similar to what https://bubbl.us/beta/ and hxxp://www.mindmeister.com/ have.
In a nutshell, the users will have access to whiteboard and drawing tools to create mind maps on a whiteboard. The changes made by one user will be visible to other session users. e.g. A session has three users A, B and C. If A changes mind map, it will be visible on whiteboards of B and C.
We were considering Flex, Openlaszlo few days ago but having limited time (about 3 months) for project completion, we binned those. For Flex we will have to learn Actionscript3 and for Openlaszlo there is no IDE support. So both of them won't be good choices.
We have shortlisted Silverlight and Vaadin frameworks as viable choices but we are confused as we don't have any experience with either of them. We need to take these points into consideration while selecting a framework:
Time frame for project - about 3 months, give or take 2-3 weeks
Learning curve for framework - should be easy (Very relative term indeed..In the context, we are familiar with VB6, PHP, Javascript and Core Java)
Necessary graphics related features supported - such as whiteboard, drag-drop widgets, animations(need not be fancy stuff) etc.
Availability of tutorials and good documentation
There are 2 open source mind mapping applications that can be useful for this webapp.
Silverlight - hxxp://silverdraw.codeplex.com/ (a webapp) - More like a POC design.
Java - hxxp://www.xmind.net/ (a desktop app) - Most of the mindmapping features we need are present. If we use Vaadin, we can re-use some code which is a huge plus point.
We are open to other suitable frameworks. Which framework would you choose?
P.S.: Excuse for obscure URLs'. New users are limited to only one hyperlink.
Disclaimer: I'm a member of the Vaadin Team, and do not know Silverlight very well.
I believe both Silverlight and Vaadin would be good candidates for your application, and for both the biggest challenge will be the client-side implementation of the visual mind-map component.
I took a quick look at XMind and it seems to be Swing based, so I'm afraid that the only way to re-use that would be to wrap the mapping component into an applet. You can easily do this with Vaadin, but it will require the Java plugin in the browser.
If you consider implementing the mindmap component without plugins, you have the following options:
Use the Vaadin core components (eg. the Tree, live example here) to visualize the mind map. Vaadin supports drag & drop, so this would be very fast to implement, and you would need to work with only server side Java stuff.
Create a HTML5 component with Vaadin integration for the mind-map. You can do this with the HTML5 canvas, and wrapping it in a Vaadin component is easy, but it'll require that you code the component with GWT. There are several examples on how to manipulate the canvas with Vaadin and GWT.
Create a SVG component with Vaadin integration for the mind-map. As far as I know SVG supports interactive stuff a little better than Canvas, and there are examples on how to interact with SVG using GWT and Vaadin. Note that the support for SVG is lacking especially with the older IE versions.
All of these options are feasible to implement within your timeframe (depending on what extra functionality you want). The first option is by far the easiest to do, but it might not be fancy enough for your requirements.
We have strived to make Vaadin as easy to learn and use as possible, and I daresay that our documentation is very good. In addition we have a very lively community filled with helpful experts. If you need more information on Vaadin just come over to our forums and we'll help you out.
You are kind off answering your own question. Use vaadin it will be a little extra work but then your saving huge amount of time on the mindmap coding.

While porting a windows application to web, is it better to stick to conventional web technologies or adoping RIA is wise?

The web based application I am working on currently is a port from a windows application. This application is very data intensive. There are scores of modules and each of these modules have number of forms (data entry screens) and reports whereas the forms have many many fields and likewise the reports.
I have been trying to identify the most suitable architecture for the presentation tier. There are many functions that are not very easily portable, for example printing (this too is very complex). For most of the others, I am planning to us "Ext JS" library which looks like capable of handling about 70% of complexity out of the box while for the remaining I would be custom coding or extending Ext JS.
Having said that (sorry for being so descriptive), I wonder, if this is an Intranet application, why not port the entire application to SilverLight? While I am good at .Net, I'm somewhat alien to SilverLight. Considering I know my target audience and that the software will be used per seat license, would it be better to ride on SilverLight or is it better to stick to conventional web (XHTML, JS, CSS, etc)? Further, I have to support multiple devices in future and considering that SilverLight plug-ins for many devices are yet not out, would it be a risk?
IMO, if you are developing a web application, then yes, develop it as an RIA.
The choice of technology is up to you. I prefer jQuery and have never used ExtJS. But I've taken a look at it, and if your aplication is a port of a windows application and has a lot of conventional UI elements like forms, input boxes, toolbars, menus, button etc, then go for ExtJS.
As for some controls that are not available in ExtJS, you can easily extend ExtJS.
Regarding .NET: ExtJS is completely server-technology agnostic, so you can develop your application in .NET and still use an ExtJS UI. In fact, I would prefer to do such an implementation.
Regarding Silverlight: I am slightly against using silverlight, primarily because it requires a plugin to be installed that is not available on all platforms. But since your application is an intranet application, your user base will be in your control. But you should make sure that any future decision regarding the workstation platform will not affect your application's working.
Cheers
Whether to use Silverlight over HTML/JS etc. in this case would depend on 2 key factors.
What are you familar with already
What type and range of devices you need to reach.
If you are already comfortable with HTML + ExtJS then that has to be huge pro in its favor.
The range of devices that Silverlight is possibly going to be available (Windows Phone 7 for example as well as Moonlight, I've even heard that there may be port for Andriod and Symbian) is growing. However its really early days for that and not all may materialise in a form useful to you.
Having said that it should be acknowledged that a UI designed for use on desktop does not work well on a small device. Hence you would need to develop some task specific UI for other devices regardless of the technology you use. This in turn means that there is no reason for you to try to stick with single technology for all devices.
I think you should look very carefully into WCF, REST and OData first. Good layering of the application into useful models using these would more easily enable the use of a variety of front-end technologies for the client.
If you are into .NET and other Microsoft tech then you should seriously consider using JQuery and ASP.NET MVC as another potential front end technology.
I think that you need to ponder the inconveniences of a solution based solely in Silverlight. Like Flash it needs a plugin to be installed in every station, so it loses some of the premises of web applications (run everywhere with the only requirement of a browser). Besides although Silverlight has taken great advances, it is not yet a widely supported standard, and it is in control of a company who later may decide for you in very important matters regarding the platform you use, and made it outdated or useless (in the worst case).
Ext JS is a great library developed entirely in Javascript, so you can touch anything that suits your needs. If the Windows applications you are basing on is well-layered, then your work may not be that hard.
If you are an asp.net developer you could take a look on asp.net mvc, a great set of tools that implements MVC pattern to web applications using the same old C# or VB. Besides the developers behind asp.net mvc, have taken a lot of work to make it suitable to work with javascript libraries like jQuery
Happy coding!!!

Picking up Silverlight

I absolutely have no idea about Silverlight except that it is a Microsoft technology.
Having nearly completed a Computer Science degree, having programmed in C# for a few years in a work environment - have a good knowledge of Java and OO techniques - how hard is the road of average Silverlight programming? I've been offered some work DAMN IT!
I've mucked around with PHP, HTML and nearly no CSS..
Would I need a strong web programming background in order to pick it up?
I like Ben's answer, and he's right that a huge bonus of learning Silverlight is that you don't have to worry about the stateless model. However, there are a few parts of Silverlight that are less easy to learn:
Styling & control templates - These concepts look like CSS at first but there's a good bit more that you can do with them such as completely overriding the visual aspects of the control. Also, modifying the styles of existing controls is one thing and learning how to create your own control that can be easily styled is quite another.
Database connectivity - If you're anything like me the first thing you'll want to do after you write a "hello world" test is hook up to a Db and pull down some data. Since Silverlight can't directly connect to a Db you'll have to learn one of 3 techniques to move data between the browser and server: 1. WCF + your custom service methods + LINQ to SQL or LINQ to EF or whatever data access you choose. 2. ADO.NET Data Services (great way to start out) 3. .NET RIA Services (once you've realized that you need your data access technology to play nice with data binding and honor biz rules).
Security - You need to learn another part of the MS technology stack to get this working properly, ASP.NET Application Services. It should take more than a few hours to hook things up but it is another technology to learn.
Browser navigation, search engine friendliness & deep linking - Things you take for granted writing a traditional web app will take a bit more work in SL. You can use .NET RIA Services to handle browser navigation & deep linking, others have written about making your site friendly to search engines (and I don't know how ;).
What I'm trying to highlight here is that while learning the basics of Silverlight is easy, you'll probably run into other parts of the MS technology stack that you'll need to learn to get your work done. The beautiful thing here is that all of the technologies come from 1 vendor with a single focus and they work really well together. I shudder when I think about all the different technologies you'd need to pull off my current SL app in the open source domain.
Pick up the book "Silverlight Unleashed" and go to http://silverlight.net/GetStarted to start learning. Scott Gu's 8 part blog posting (#3 on that Getting Started web page) was one of the first things I read about Silverlight and is hugely helpful.
Unless your Silverlight app has to interact with a traditional web page, you don't need to know anything about traditional web UI technologies.
If you've done any desktop UI development you'll find Silverlight much easier to pick up than any web UI paradigm. Compared to the unholy mess that is css + html + javascript combined with ever-changing browsers and fourteen other hundred-author web "standards", Silverlight is a walk in the park.

What are the topics to ramp-up on when starting Silverlight\Web development?

I've been asked to do some work on an existing Silverlight project, mainly extending it a bit and doing bug fixes as needed. But there are a couple of ASP.Net pages too and a WCF service to deal with too. My background is desktop development with .Net so I think this is a good opportunity to start getting more involved in Web development.
So I'm trying to figure out what background knowledge I need for a project like this. Clearly I need to get familiar with Silverlight, but I'm not sure what other Web technologies, etc I need to ramp up on for this project. Obviously I would like to know as much as possible but in reality with limited time and resources I really need to focus on what I important in the near term for this project. Then expand my knowledge as things arise.
The things I'm thinking that are important in the immediate future are:
The basics of Web Development (I'm thinking this might be the most important\fundamental area to build a good foundation)
But what are consided the basics?
What is technology\language independent?
What is important for Silverlight?
The basics of ASP.Net (since there is some ASP.Net code)
What are the basics? ASP.net seems so huge, I have a 1000+ pg book here which seems daunting.
If you focus on Silverlight is knowing ASP.Net important, or is ASP.Net something I will continually run into?
How does ASP.Net MVC fit into the overall development picture and especially as related to Silverlight?
The basics of WCF
As compared what?
Any suggestions\comments on the list above?
What other topics\technologies will I run into if I continue doing Web development?
Note: Beyond this project I would focus on the Microsoft stack.
Generally speaking the amount of knowledge of ASP.Net you need to do Silverlight development is very very low.
Silverlight applications are hosted in a browser, usually via the <object> tag. This can sit on an asp.net page or a html page. The Silverlight template creates that for you, so you can forget its there and just get on with the Silverlight app.
Of course if you are integrating into an ASP.net environment (for example, islands of Silverlight sprinkled through an ASP.net site) then thats another thing. There are ways to get Silverlight talking to the HTML dom via the HTML Bridge but its not necessary. Really depends on what you are developing and integrating with. (new site vs existing)
I avoided ASP.net for as much as i could as the richness compared to desktop (WPF) just wasnt there. Silverlight changed all that. Its a Rich world on the web now!
Best place to start learning Silverlight is www.silverlight.net on the getting started part of the site. great Quickstarts and tutorials there.
Good luck
Only cursory knowledge of traditional web technologies (css, html, js, etc.) are necessary for silverlight development. As a consequence, you also don't need to understand the many cross-browser dependencies as well.
Here is my list of things that you must get a really good understanding of to be proficient at Silverlight development:
Understanding WCF (the Silverlight-supported parts) is essential. It can be a configration nightmare, but once working it is pretty stable/ reliable
You need to understand serialization used by WCF and how to debug the mysterious 404 errors. Get good at Fiddler and/or Firebug.
You must understand multi-threaded applications and how do debug them. Silverlight makes extensive use of threading to not block the UI thread. This creates numerous opportunities for race conditions that create what appear to be "magical" results. That said, it is incredibly powerful and IMHO one of the dominant reasons to use Silverlight.
What you learn about serialization and WCF will ultimately help you cache some data in IsolatedStorage. Learn about IsoStorage, it will reduce our bandwidth requirements and cost and improve your user experience
Learn about Linq - again this is one of the most powerful features of Silverlight. Combined with a smart client-side caching strategy you can offload lots of processing to the client.
Figure out how you going to support printing. SL3 does not at all and you will need a server side component. SL4 beta does, but it is not go live
Understand the Silverlight Roadmap as much as possible and plan out your roadmap to match/ sync with it as best as possible. I first built a SL2 app and I spent a lot of time building things by hand that were ultimately released in SL3. As it is getting more mature, there is less of this.
Download the Silverlight Toolkit and use it. But more importantly examine the source code, the structures, its build process. There is not better real world place to look for inspiration & best practices.
Good luck.

UC(User component) concept in Win32/.NET Win forms

Couple of year ago I when to work for company as web developer. It has my first Sirius web development job, (ASPx/C#) so it has very exciting and I learned a lot about that world, from the developer point of view.
In that group we had a concept for the pages where loaded in the page UC’s (User controls), I don’t know if it’s the same in every web development team with every language, I’ll assume it is so.
The contract ended and I came back to develop win32 “winForm” application.
But since them I have tried to apply the same principle for my win32 development I learn there, meaning having bunch of UC’s (Visual User controls) that I load in the form.
They are regular visual components, not loaded in the toolbox, code is available in the project, but the component is not developed in the form, they are loaded there.
I would like to know opinions about this approach, what other are doing similar or better to this And improvements that can help us to speed up development and increase code reuse, because that is what this is all about.
If you're using the layout components in Winforms, this might be an acceptable approach although I think the thing that distinguishes the web and Windows Forms (note: NOT WPF!) is that in the former you do a lot of "compositing" which is why the UserControl concept is so useful whereas in the latter you operate on very sophisticated controls (e.g. 3rd party - in my last gig we used an incredible grid control via a small company called Infralution)
The main problem I would see is with layouts since the rendering model is a little different than the web. I know nothing about your application but if it "works" that is what is most important. I assume in this case you use things like the FlowLayoutPanel and the TableLayoutPanel properly.
If you want to go a more canonical route, take a look beyond simply creating components at how you can use the inheritance model to composite your application in a more robust way - having a base Form class that has containers for where your "UserControl" type components go and then using some kind of interface based dependency injection to swap them out while the application is running.
Finally, take a look at some of the open source Windows Forms applications out there to see if you're being too hard on yourself since common UI and reusable components are a goal in every application. Even though I've always thought Microsoft's Patterns & Practices stuff teetered towards being bloated, there are some good ideas and you should study some of the approaches of the Composite UI Application Block they put out.
Okay, not finally, there's one more thing I'd like to add: take a long hard look at WPF which will bring back a lot of the concepts from your web development days and give you that kind of power in a desktop application.

Resources