6MWD: Got my unit tests working
I managed to get unit tests working for 6MWD app, built with Ionic 2.
I’ve been working on and off…for the past few months, absorbing as much as I can about Ionic 2 development (and also Ionic 3 just came out, which I’m really excited for as well). Since my last blog post my son turned 1, and you know just life. Fortunately the persistence of reading and experimenting has paid off.
Working prototype: Metric form
The metric from in 6MWD prototype uses the height(cm), weight(kg), and age(years) to calculate your predicted distance.
Originally I thought it would be a good idea to show the result on a new page. However, since learning about Ionic’s many components.
I thought it would be a better experience if it would just pop up the result in a dismissible modal.
Then have it clear the form when you tap the ‘ok’ button in the modal.
Handling validation: Metric form
To handle validation I am using the recommended way of building forms with form builder in addition to a custom validator that I extended from this great tutorial by Cory Ryan.
In the scenario where any of fields are empty and you submit the form, then you get an error alert telling you to check the form.
In a similar case, if you have touched inputs and leave them blank or provide an invalid value then you get an inline form error.
Imperial values are now supported by 6MWD app prototype…
This has been a major pain for many users who wanted support for the imperial system. The same interaction matches that of the metric form which provides a consistent experience.
Get to the unit tests already!!
Okay what does the above have to do with unit tests you may ask?
Well…I was pretty confident that the conversion between metric and imperial worked in the prototype (except that I was wrong).
Somewhere down the line I got it wrong and I was sick of manually testing inputs with the same values to validate that I got the correct result. I knew I should’ve added in unit tests well before this point, but the practical developer inside me insisted I keep in the backlog until I had more of a grasp on Ionic 2 concepts (We’ve all been there). I had good intentions, as you can see it was the 2nd issue created.
Among the many Google searches I found this great tutorial by Josh Morony, but I read through it and got overwhelmed. Don’t get me wrong (Josh if you are reading this…I genuinely believe you are an awesome contributor to the Ionic community — I frequently find myself on your site learning so much about how Ionic works), the content he produces is top notch.
Then I found this great tutorial by Rob Louie, which Max Lynch also recommends, and decided to give this ago (I’d be crazy not to apply what the Ionic co-founder recommends right?). It only took a couple of hours to get my first set of unit tests setup for the ConversionService that handled … well all the conversion between metric and imperial units.
The next step would be to learn more about end-to-end tests, luckily this repo has end-to-end and unit tests based on Rob Louie’s implementation.
Anyway I’m really excited that I got my unit tests setup. I’m more so surprised how quick it was to set up. If you enjoyed reading this post as much as I enjoyed writing this… hit the recommend button. I’m also open to feedback on this post or other styles of unit testing in Ionic.
