Manorisms

© 2020. All rights reserved.

My First Podcast Interview

15 Apr 2009

A good friend of mine, Tanton Gibbs (@tgibbs), from Microsoft has started a new Podcast series called New Tech Cast.

In these podcasts, I'm going to be interviewing up and comers in the software development world. These industrious developers will have their fingers on the pulse of today's tech and should provide great insight into the things to come.

I was flattered to be chosen for his first Podcast interview. In the podcast we discussed my history, various technologies that I use (ASP.NET MVC, jQuery, etc...), and a variety of other things.

You can download and listen to the podcast on his new website.

Read More »

JavaScript Unit Testing Part 1: JsUnit

07 Apr 2009

In this post we will examine the 1st of 4 JavaScript Unit Testing frameworks... JsUnit. 

<p>In subsequent posts we will cover <a target="_blank" href="http://jania.pe.kr/aw/moin.cgi/JSSpec">JSSpec</a>, <a target="_blank" href="http://docs.jquery.com/QUnit">QUnit</a>, and <a target="_blank" href="http://developer.yahoo.com/yui/yuitest/">YUI Test</a>.</p>    <p>First of all, lets define some JavaScript code that we want to Unit Test. I wrote the following Pig Latin JavaScript utility for the sole purpose of this Unit Testing series… </p> <p>*Note: I am aware the code needs to be refactored. We will address that in a future blog post :)  </p>    <pre><br>/*const*/ var CONSONANTS = 'bcdfghjklmnpqrstvwxyz';<br>/*const*/ var VOWELS = 'aeiou';<br><br>function EnglishToPigLatin(english) {<br>   /*const*/ var SYLLABLE = 'ay';<br><br>   var pigLatin = '';<br><br>   if (english != null && english.length > 0 && <br>      (VOWELS.indexOf(english[0]) > -1 || CONSONANTS.indexOf(english[0]) > -1 )) {<br>      if (VOWELS.indexOf(english[0]) > -1) {<br>         pigLatin = english + SYLLABLE;<br>      } else {      <br>         var preConsonants = '';<br>         for (var i = 0; i < english.length; ++i) {<br>            if (CONSONANTS.indexOf(english[i]) > -1) {<br>               preConsonants += english[i];<br>               if (preConsonants == 'q' && i+1 < english.length && english[i+1] == 'u') {<br>                  preConsonants += 'u';<br>                  i += 2;<br>                  break;<br>               }<br>            } else {<br>               break;<br>            }<br>         }<br>         pigLatin = english.substring(i) + preConsonants + SYLLABLE;<br>      }<br>   }<br><br>   return pigLatin;<br>}</pre> <p>Next we need to define a set of Unit Tests using JsUnit. I am using JsUnit 2.2 Alpha 11 for this example.</p> <p>In order to create the Unit Tests we need to know the business rules for the Pig Latin method… </p> <ol><li>In words that begin with <a href="http://en.wikipedia.org/wiki/Consonant">consonant</a> sounds, the initial consonant or <a href="http://en.wikipedia.org/wiki/Consonant_cluster">consonant cluster</a> or diagraph is moved to the end of the word, and "ay" is added…</li>   <li>In words that begin with <a href="http://en.wikipedia.org/wiki/Vowel">vowel</a> sounds or <a href="http://en.wikipedia.org/wiki/Silent_letter">silent consonants</a>, the syllable "ay" is added to the end of the word. In some dialects, to aid in pronunciation, an extra consonant is added to the beginning of the suffix.</li></ol><p>Now that we know the rules, lets start making some Unit Tests…</p> <pre><html><br> <head><br>   <title>Test Page for EnglishToPigLatin(english)</title><br>   <link rel="stylesheet" type="text/css" href="../css/jsUnitStyle.css"><br>   <script language="JavaScript" type="text/javascript" src="../app/jsUnitCore.js"></script><br>   <script language="JavaScript" type="text/javascript" src="./PigLatin.js"></script><br> </head><br> <body><br>  <script language="javascript"><br>   function testPassingNullShouldReturnBlank() {<br>      assertEquals('null returns a blank', '', EnglishToPigLatin(null));<br>   }<br><br>   function testPassingBlankShouldReturnBlank() {<br>      assertEquals('blank returns a blank', '', EnglishToPigLatin(''));<br>   }<br><br>   function testConsonantBeastShouldReturnEastbay() {<br>      assertEquals('beast returns eastbay', 'eastbay', EnglishToPigLatin('beast'));<br>   }   <br><br>   function testConsonantDoughShouldreturnOughday() {<br>      assertEquals("dough returns oughday", 'oughday', EnglishToPigLatin('dough'));<br>   }<br><br>   function testConsonantHappyShouldReturnAppyhay() {<br>      assertEquals("happy returns appyhay", 'appyhay', EnglishToPigLatin('happy'));<br>   }        <br><br>   function testConsonantsQuestionShouldReturnEstionquay() {<br>      assertEquals("question returns estionquay", 'estionquay', EnglishToPigLatin('question'));<br>   }<br><br>   function testConsonantsStarShouldReturnArstay() {<br>      assertEquals("star returns arstay", 'arstay', EnglishToPigLatin('star'));<br>   } <br><br>   function testConsonantsThreeShouldReturnEethray() {<br>      assertEquals("three returns eethray", 'eethray', EnglishToPigLatin('three'));<br>   }<br><br>   function testVowelAppleShouldReturnAppleay() {<br>      assertEquals("apple returns appleay", 'appleay', EnglishToPigLatin('apple'));<br>   }<br><br>   function testVowelElijahShouldReturnElijahay() {<br>      assertEquals("elijah returns elijahay", 'elijahay', EnglishToPigLatin('elijah'));<br>   }<br><br>   function testVowelIglooShouldReturnIglooay() {<br>      assertEquals("igloo returns iglooay", 'iglooay', EnglishToPigLatin('igloo'));<br>   }<br><br>   function testVowelOctopusShouldReturnOctopusay() {<br>      assertEquals("octopus returns octopusay", 'octopusay', EnglishToPigLatin('octopus'));<br>   }<br><br>   function testVowelUmbrellaShouldReturnUmbrellaay() {<br>      assertEquals("umbrella returns umbrellaay", 'umbrellaay', EnglishToPigLatin('umbrella'));<br>   }<br><br>   function testPassingNumberShouldReturnBlank() {<br>      assertEquals("1234567890 returns blank", '', EnglishToPigLatin('1234567890'));<br>   }<br><br>   function testPassingSymbolsShouldReturnBlank() {<br>      assertEquals("~!@#$%^&*()_+ returns blank", '', EnglishToPigLatin('~!@#$%^&*()_+'));<br>   }<br>    </script><br> </body><br></html><br></pre> <p>There are several different types of asserts that JsUnit supports...</p><ol><li>assert([comment], booleanValue)</li>   <li>assertTrue([comment], booleanValue)</li>   <li>assertFalse([comment], booleanValue)</li>   <li>assertEquals([comment], value1, value2)</li>   <li>assertNotEquals([comment], value1, value2)</li>   <li>assertNull([comment], value)</li>   <li>assertNotNull([comment], value)</li>   <li>assertUndefined([comment], value)</li>   <li>assertNotUndefined([comment], value)</li>   <li>assertNaN([comment], value)</li>   <li>assertNotNaN([comment], value)</li>   <li>fail(comment)</li></ol><p>JsUnit has a testRunner to execute all of your Unit Tests. If all is well, your status bar will be green. If any asserts failed, they will be displayed in a list control where any assert comment can be retrieved</p> <a href="http://lh3.ggpht.com/_L6DiZQsfJzs/SdrV0Axc9bI/AAAAAAAAGw0/PH8z74w0rag/s1600-h/testRunner%5B3%5D.png"><img title="testRunner" border="0" alt="testRunner" src="http://lh6.ggpht.com/_L6DiZQsfJzs/SdrV4U9-qbI/AAAAAAAAGw4/4NaS4uIHNEs/testRunner_thumb%5B1%5D.png?imgmax=800" width="404" height="242"></a> <p>Overall, JsUnit is a decent Unit Testing framework for JavaScript. You can also bundle tests into suites and run multiple suites. As most testing frameworks, you can also use setUp() and tearDown() methods to prepare the environment for each test method. </p>
Read More »

3 Biggest Software Lies

02 Apr 2009

I ran across the following quote today and thought it was pretty funny…

3 Biggest Software Lies:

  1. The program’s fully tested and bug-free
  2. We’re working on the documentation
  3. Of course we can modify it!

Do you have any other items to add to the above list? If so, please share them in the comments :)

Read More »

JavaScript Unit Testing Frameworks

27 Mar 2009

Not only should you have unit tests for your User Interface & Middle Tier code, but you should also consider unit testing your JavaScript code.

There are several different Unit Testing frameworks made for JavaScript that you have to choose from.

Note: In future posts I will show examples of how to use each of these frameworks… as for now, this is just an introduction to the tools I’ll be covering.

Framework Description
YUI Test

YUI Test is a testing framework for browser-based JavaScript solutions. Using YUI Test, you can easily add unit testing to your JavaScript solutions. While not a direct port from any specific xUnit framework, YUI Test does derive some characteristics fromnUnit and JUnit.
JsUnit JsUnit is a Unit Testing framework for client-side (in-browser) JavaScript. It is essentially a port of JUnit to JavaScript. Also included is a platform for automating the execution of tests on multiple browsers and mutiple machines running different OSs. Its development began in January 2001.
QUnit QUnit is the unit testrunner for the jQuery project. It got promoted to a top-level project in May 2008 to make it easier to use in other projects, with focus on jQuery UI. Every plugin developer can leverage the testsuite to unit test their code.
JSSpec JSSpec is a Javascript BDD (Behavior Driven Development) framework.

Do you already use one of these frameworks? If so, which one do you prefer?

Is there another framework that you like that is better than the above listed?

Please leave a comment with your opinion :) Thanks!

Read More »

ASP.NET MVC Html.RadioButtonList Blues

25 Mar 2009

Recently I upgraded our ASP.NET MVC project from Preview 5 to RC2. At first I thought the Html.RadioButtonList extension was removed completely, but then realized that it was no longer in the main MVC assembly, but was moved to the Futures project (although I don't know why).

The Preview 5 version of the Html.RadioButtonList rendered the following output...

However, once I got my code to compile I went to run my application only to find that it rendered two RadioButtons with no labels! Where did the labels go?

I pulled down the source code for the 1.0 release (just to make sure it wasn't fixed in the RTM as opposed to the RC2) and dove into the extension code. Nowhere did I see the labels being applied in the extension.


//C:\...\MVC-RTM\MVC\src\MvcFutures\Mvc\RadioExtensions.cs
private static string[] RadioButtonListInternal(this HtmlHelper htmlHelper, string name, IEnumerable selectList, bool usedViewData, IDictionary<string, object> htmlAttributes) {
   if (String.IsNullOrEmpty(name)) {
      throw new ArgumentException(MvcResources.Common_NullOrEmpty, "name");
   }
   if (selectList == null) {
      throw new ArgumentNullException("selectList");
   }

   // If we haven't already used ViewData to get the entire list of items then we need to
   // use the ViewData-supplied value before using the parameter-supplied value.
   if (!usedViewData) {
      object defaultValue = htmlHelper.ViewData.Eval(name);

      if (defaultValue != null) {
         IEnumerable defaultValues = new[] { defaultValue };
         IEnumerable values = from object value in defaultValues select Convert.ToString(value, CultureInfo.CurrentCulture);
         HashSet selectedValues = new HashSet(values, StringComparer.OrdinalIgnoreCase);
         List newSelectList = new List();

         foreach (SelectListItem item in selectList) {
            item.Selected = (item.Value != null) ? selectedValues.Contains(item.Value) : selectedValues.Contains(item.Text);
            newSelectList.Add(item);
         }

         selectList = newSelectList;
      }
   }

   IEnumerable radioButtons = selectList.Select<SelectListItem, string>(item => htmlHelper.RadioButton(name, item.Value, item.Selected, htmlAttributes));

   return radioButtons.ToArray();
}
</pre> 
Next I looked at the Unit Tests for the extesion. I was please to see tests for the RadioButtonList, but was shocked to see that the asserts were verifying html that didn't have any labels applied!
 

//C:\...\MVC-RTM\MVC\test\MvcFuturesTest\Mvc\Test\RadioExtensionsTest.cs
[TestMethod]
public void RadioButtonListItemSelected() {
   // Arrange
   HtmlHelper htmlHelper = TestHelper.GetHtmlHelper(new ViewDataDictionary());

   // Act
   string[] html = htmlHelper.RadioButtonList("FooList", GetRadioButtonListData(true));

   // Assert
   Assert.AreEqual(@"<input id=""FooList"" name=""FooList"" type=""radio"" value=""foo"" />", html[0]);
   Assert.AreEqual(@"<input id=""FooList"" name=""FooList"" type=""radio"" value=""bar"" />", html[1]);
   Assert.AreEqual(@"<input checked=""checked"" id=""FooList"" name=""FooList"" type=""radio"" value=""baz"" />", html[2]);
}

private static SelectList GetRadioButtonListData(bool selectBaz) {
   List list = new List();
   list.Add(new RadioItem { Text = "text-foo", Value = "foo" });
   list.Add(new RadioItem { Text = "text-bar", Value = "bar" });
   list.Add(new RadioItem { Text = "text-baz", Value = "baz" });
   return new SelectList(list, "value", "TEXT", selectBaz ? "baz" : "something-else");
}

private class RadioItem {
   public string Text {
      get;
      set;
   }

   public string Value {
      get;
      set;
   }
}  
</pre> 
Where does that leave us? I guess using the Futures Html.RadioButtonList isn't all that helpful after all. So, instead I decided to loop through my DataSource and create individual Html.RadioButton and Label combinations.
 


<% 
var radioButtonList = new SelectList(new List {
   new ListItem { Text = "Current", Value="false", Selected=true }, 
   new ListItem { Text = "Other", Value="true"}}, "Value", "Text", "false");
var htmlAttributes = new Dictionary<string, object> { 
   { "class", "radioButtonList" },
   { "onclick", "if(eval(this.value)) { $('#tblDate').show('slow'); } else { $('#tblDate').hide('slow'); }" }
};
foreach (var radiobutton in radioButtonList) { %>
   <%=Html.RadioButton("rblDate", radiobutton.Value, radiobutton.Selected, htmlAttributes)%>
   
<% } %>   
</pre>
Read More »