var person = {
    firstName: "john",
    lastName: "doe",
    address: {
         street: "321 Street",
         zipCode: "94125",
         county: "San Francisco",
         state: "CA"
    }
};

An empty JavaScript object, is defined, like so:

var person = { };

Functions:
Functions are a special type of JavaScript Object. They are a great way to execute a body of work, like so:

var changeName = function (firstName, lastName) {
    person.firstName = firstName;
    person.lastName = lastName;
}

changeName("Jane", "Doe");

Functions are not methods. However, we could use the method invocation pattern to execute our body of work:

var person = {
    firstName: "john",
    lastName: "doe",
    changeName: function (firstName, lastName) {
        this.firstName = firstName;
        this.lastName = lastName;
    }
    fullName: function () {
        return firstName + lastName;
    }
};

person.changeName("Jane", "Doe");

alert(person.fullName);

Scoping:
Scoping in JavaScript is crazy and at most times confusing.

Unlike most languages JavaScript has no block level scoping:

var hello = "hello ";

if(true) {
    var world = "world!";
}

alert(hello + world);

JavaScript has function scoping:

var hello = "hello ";

function test()
    var world = "world!";
}

alert(hello + world); // world doesn't exist in this scope!

So! Declare your variables at the top of functions not in block level elements:

var hello = "hello ", world = "";

if(true) {
    world = "world!";
}

alert(hello + world);

Closure:

Instead of an object, let’s make our person a function:

var person = function () {

};

Then, invoke our person function, like so:

var person = function () {

}(); //() invoke function

Let’s give our function some fluff:

var person = function () {
    var firstName = "John",
        lastName = "Doe",
        data = {};

    return data;
}();

Notice the data object, it is being returned from the function. By invoking the function right away, person becomes data.

This way we can’t get at firstName or lastName.

So lets expose firstName:

var person = function () {
    var firstName = "John",
        lastName = "Doe",
        data = {
            getFirstName: function () {
                return firstName;
            }
        };

    return data;
}();

Cool, Huh!

alert(person.getFirstName()); //result John

JavaScript is a very powerful language, with a very bright future ahead. I implore you to jump in an learn it with all of us. You can start here: JavaScript: The Good Parts

I would also recommend learning these core frameworks: jQuery, underscore, and knockout.

More to come…

If you need to get your ASP.NET MVC website setup with some basic OpenID Authentication, I can help get you started. All you need is a DLL, a view, and two controller actions.

First download the latest DotNetOpenAuth and extract the zip file. Let’s start.

Add DotNetOpenAuth-X.X.X.XXXXX/Bin/DotNetOpenAuth.dll to your project references. (DotNetOpenAuth.dll is the only runtime dependency you will need; everything else is described in the README.Bin.html.)

Let’s create the authentication page, what’s important here is the form, add something like this to your login page:

<form action="/Authentication/Authenticate" method="post">
<label for="openid_identifier">OpenID: </label>
<input id="openid_identifier" name="openid_identifier" />
<input type="submit" value="Login" />
</form>

There are a lot of good plugins, that have images to pre-populate this one input field.

Two key things to note here, openid_identifier and the form action attribute.

openid_identifier: is a url to an openID provider an example of this is: Google (https://www.google.com/accounts/o8/id), Yahoo (http://yahoo.com/), MyOpenID (http://myopenid.com/), etc

The form action attribute is the url to your controller action. In this case using the basic routing, I have a Controller called AuthenticationController in my Controllers folder, with an action of Authenticate. Hence, /Authentication/Authenticate.

The last step, writing the login and logout actions.

So how does this login action work? We need to send a request to our openid_identifier and receive a response with what’s called a ClaimedIdentifier.

ClaimedIdentifier: is the constant unique identifier provided from the openID provider, we use this to connect an openID user to a user account on your website, remember though one user can have many openIDs’.

This is what the code would look like, go ahead and add it to your controller and look over the comments and code:

private static OpenIdRelyingParty openid = new OpenIdRelyingParty();

/// <summary>
/// Authentication/Login post action.
/// Original code concept from
/// DotNetOpenAuth/Samples/OpenIdRelyingPartyMvc/Controller/UserController
/// for demo purposes I took out the returnURL, for this demo I
/// always want to login to the home page.
/// </summary>
[ValidateInput(false)]
public ActionResult Authenticate() {
	var response = openid.GetResponse();
	var statusMessage = "";
	if (response == null) {
		Identifier id;
		//make sure your users openid_identifier is valid.
		if (Identifier.TryParse(Request.Form["openid_identifier"], out id)) {
			try {
				//request openid_identifier
				return openid.CreateRequest(Request.Form["openid_identifier"])
					.RedirectingResponse.AsActionResult();
			} catch (ProtocolException ex) {
				statusMessage = ex.Message;
				return View("Login",statusMessage);
			}
		} else {
			statusMessage = "Invalid identifier";
			return View( "Login" , statusMessage);
		}
	} else {
		//check the response status
		switch (response.Status) {
			//success status
			case AuthenticationStatus.Authenticated:
				Session["FriendlyIdentifier"] = response.FriendlyIdentifierForDisplay;
				FormsAuthentication.SetAuthCookie(response.ClaimedIdentifier, false);

				//TODO: response.ClaimedIdentifier, to login or create new account 

				return RedirectToAction("Index", "Home");

			case AuthenticationStatus.Canceled:
				statusMessage = "Canceled at provider";
				return View( "Login", statusMessage );

			case AuthenticationStatus.Failed:
				statusMessage = response.Exception.Message;
				return View( "Login" , statusMessage );
		}
	}
	return new EmptyResult();
}

public ActionResult Login() {
	//display initial login page with form to call Authenticate Action
	return View();
}

Logging out is just as simple, add a link to /Authentication/Logout, and add this Action to your Controller:

public ActionResult Logout() {
    FormsAuthentication.SignOut();

    //redirect to logout success page in page /Authentication/Logout
    return Redirect();
}

Thats it, start your application and give it a shot!

Some similar source code can be found in the DotNetOpenAuth Samples folder under OpenIdRelyingPartyMvc. If you would like to also provide openID’s on your website I would recommend you look over the OpenIdProviderMvc Sample’s Project. It took me about two hours to fully intigrate it within my project.

If you are like me you have tried every testing methodology in the book. Half way through it usually became a crutch, you couldn’t figure out why or how to use it to your advantage. Being an avid reader of Dan North’s blog, a while back I ran into the concept of Behavior-Driven Development.

Testing always felt like a bad symptom to me and it got boring quickly. I felt like I was writing tests to prevent others from changing my code. Frankly it was just silly.

Sound familiar?

When you are handed a requirements document you skim over it, bold and highlight the important sections (maybe in your head), as you repeat the process details become finer. After that you either write tests or jump to development. Why not turn the skimming process into your tests, after all the most important information comes from that process. In example:

Feature:  Search Page
In order to find information on the website.
As a user.
I must navigate to the search page.
Scenario: In order to go to the search page I must click the search link.
	Given I am not on the search page
	Then I should see a search link.
	When I click the search link.
	Then I am redirected to the search page.

That’s how BDD works. How many times in your code do you think you will have to write tests for: “Then I am redirected to the [] page.” See my point? What if I told you that was your code, you are done. I’d hope to see a big smile on your face. But how, how does it know!

We let it know:

[Given(@"I am not on the (.*) page")]
public void GivenIAmNotOnThePage(string pageUrl)
{
   //code to check if you are not on the page.
}

[Then(@"I should see a (.*) link")]
public void ThenIShouldSeeALink (string linkLabel)
{
   //code to check if link exists.
}

[When(@"I click the (.*) link")]
public void WhenIClickTheLink (string linkLabel)
{
   //code to click the link.
}
[Then(@"Then I am redirected to the (.*) page")]
public void ThenIAmRedirectedToThePage (string pageUrl)
{
   //code to check if I am on the page.
}

Now you can write an infinite amount of tests to check if you have been redirected to any (.*) page, in plain English. Cool huh?

If you think so you should get SpecFlow:

http://www.specflow.org

And watch this great 30 minute video by the guys over at TekPub:

http://tekpub.com/view/concepts/5

At the end of this tutorial I have a link to a PHP version I wrote for personal use, feel free to download, edit, destroy, and share it.

Lets dive in.

If you are using Notepad++, “Zen Coding.js” is located here:

..\Notepad++\plugins\NppScripting\includes\Zen Coding.js

You will need to edit this file to add your own custom snippets/abbreviations.

Locate the following code (contents have been replaced with “//there is code here”):

	'html': {
		'filters': 'html',
		'snippets': {
			//there is code here
		},
		'abbreviations': {
			//there is code here
		},
		'element_types': {
		}
	},
	'xsl': {
		'extends': 'html',
		'filters': 'html, xsl',
		'abbreviations': {
			//there is code here
		}
	},

These are all of the existing html and xsl abbreviations and snippets provided with Zen Coding.

For the sake of time, we are going to add a PHP section right before this line:

	'xsl': {

This will look like this:

	'html': {
		'filters': 'html',
		'snippets': {
			//there is code here
		},
		'abbreviations': {
			//there is code here
		},
		'element_types': {
		}
	},
	'php': {
		'filters': 'php, html',
		'snippets': {
			//we will write snippets here
		}
	},
	'xsl': {
		'extends': 'html',
		'filters': 'html, xsl',
		'abbreviations': {
			//there is code here
		}
	},

Make sure your curly braces, comas, etc. are correct otherwise you will get an error loading the file.

Now locate:

	var know_syntaxes = {
		'html': 1,
		//there is more code here

	};

Add ‘php’: 1 to this code, like this:

	var know_syntaxes = {
		'html': 1,
		'php': 1,
		//there is more code here
	};

Finally, lets add a snippet, I am going to create one for an inline function as my blog won’t let me write out actual php code without rendering it, if you would like to wrap your code in a php tag go right ahead.

So lets try something like this:

	'php': {
		'filters': 'php, html',
		'snippets': {
			//we will write snippets here
			'php:func':	'function |() {\n\t\n}',
		}
	},

| is the position of your mouse cursor.

\n is new line

\t is tab

See simple.

Save your “Zen Coding.js” file, restart your application in our case Notepad++.

Now if you were to type in php:func then click Ctrl+E, this would expand to:

function () {

}

tada, and now as promised:

My attempt at PHP snippets!

Download/Preview the PHP section, via copy paste from here: Preview/Download.

Or

Download the entire Zen Coding.js file, by right click save as.

—

As you can see there is so much room for editing and customizing your own abbreviations and snippets. I haven’t even touched the tip of the iceberg. So go explore and good luck, just make sure to make a backup file.

Over time it will slowly make your hardware less functional and will make you want to crawl under your desk, or go after your computer with a baseball bat.

The current fix is to not run Unit Tests, or if you really have to, you can use ReSharper:

ReSharper -> Unit Tests -> Run All Tests from Solution.

Yes, this is a joke, well the virus part anyway!

In this tutorial I will step you through a framework called Moq for (.NET) released under the New BSD License. I will not be discussing what Mocking is here as that’s outside the scope of this tutorial. What is mocking/mock object?

Before we jump in to the code, here are some important links:

Get Moq.

Get Moq Contrib

Moq API.

So lets dive in, assuming you already added a reference to the Moq DLL and Moq.Contrib DLL in your project. Let’s start out by creating a new Abstract class to your project. During this session I am going to call this class: UnitBaseAbstractClass for readability.

Creating A Base Test Class

UnitBaseAbstractClass: This class is in charge of setting up a Moq based environment for each of your TestClass’.

1. First let’s add the Moq and Moq.Contrib namespaces to this UnitBaseAbstractClass class.

using Moq;
using Moq.Contrib;

That was simple!

2. Now lets add the [TestClass] attribute to the top of this class, for anything extending it will now need to be a test.

using Moq;
using Moq.Contrib;

namespace MyUnitTests
{
    [TestClass]
    public abstract class UnitBaseAbstractClass
    {
    }
}

3. This maybe a bit confusing but bare with me; we are now going to add two public members to our UnitBaseAbstractClass class these are of type MockFactory and AutoMockContainer. See the next example:

MockFactory: A utility factory used to manage a mocks lifecycle.

AutoMockContainer: A container used to automatically inject mocks into desired objects.

using Moq;
using Moq.Contrib;

namespace MyUnitTests
{
    [TestClass]
    public abstract class UnitBaseAbstractClass
    {

            public MockFactory _factory;
            public AutoMockContainer _container;

    }
}

tada…

4. We will now need to create a method called “Setup” which will take in a MockBehavior enum. In this tutorial we will only use: MockBehavior.Default.

MockBehavior: Tells the MockFactory how to behave. The Strict behavior throws an exception if a mock isn’t setup exactly like its mocked object. Loose will never throw an exception and Default is setup to use the Loose behavior.

(If you don’t understand what this means it’s alright to move on, as it will not affect you yet.)

5. We are going to use Setup to instantiate both MockFactory and AutoMockContainer the factory will need the behavior passed into Setup and the AutoMockContainer will need the MockFactory.

Like this:

using Moq;
using Moq.Contrib;

namespace MyUnitTests
{
    [TestClass]
    public abstract class UnitBaseAbstractClass
    {

    public MockFactory _factory;
    public AutoMockContainer _container;

        public void Setup(MockBehavior behavior)
        {
            _factory = new MockFactory(behavior);
            _container = new AutoMockContainer(_factory);
        }

    }
}

6. Last but not least we want to implement our [TestCleanup]. We will call this method VerifyAll, all it will do is verify that all of our mocks were used and that they were used correctly. Making the final code look something like this:

using Moq;
using Moq.Contrib;

namespace MyUnitTests
{
    [TestClass]
    public abstract class UnitBaseAbstractClass
    {

    public MockFactory _factory;
    public AutoMockContainer _container;

        public void Setup(MockBehavior behavior)
        {
            _factory = new MockFactory(behavior);
            _container = new AutoMockContainer(_factory);
        }

        [TestCleanup]
        public void VerifyAll()
        {
            _factory.VerifyAll();
        }

    }
}

Nice, small, and powerful.

A Test Class using our Base Class

The fun part!

1. Let’s start by writing some tests against this pseudo PersonService class:

namespace MyRear
{

    public class PersonService
    {
        private readonly IRepository _repository;

        public PersonService(IRepository repository)
        {
              _repository = repository;
        }
        public bool SavePerson(Person person)
        {
        		try{
        		   return _repository.Save(person);
        		}
	        	catch (Exception ex){
	        	   throw new CustomException(ex);
	        	}
        }
    }
}

2. Lets create our test class using UnitBaseAbstractClass. Our [TestInitialize] will be using the base Setup method we created in UnitBaseAbstractClass and we will use the AutoMockContainer to create a new instance of our PersonService class. We will also create a new person.

That was a mouthful, like this:

namespace MyRearTests
{
    [TestClass]
    public class PersonServiceTests : UnitBaseAbstractClass
    {
        private readonly PersonService _service;
	     private Person _person;

        [TestInitialize]
        public void SetupPerson()
        {
            Setup(MockBehavior.Default);
            _service = _container.Create<PersonService>();
	         _person = new Person();
	    }

    }
}

3. Time to write the tests! Before that though, I want to show you how to mock _repository.Save the code that calls the Database. Which in this case we do not want to access in our testing environment.

This code:

return _repository.Save(person);

4. First we want to get a mock object for IRepository because this is how we are going to call Save.

We do this with this line of code:

 _container.GetMock<IRepository>()

6. We then want to make sure that we can mock Save. We accomplish this via some Linq we call the Expect method.

In it we call Save and pass our _person object.

 _container.GetMock<IRepository>()
	    .Expect(s => s.Save(_person))

7. We then need to tell the object what to return (in this case I return a bool, lets say true). After calling the Returns method make sure to verify that this mock was even needed via Verifiable method.

 _container.GetMock<IRepository>()
	    .Expect(s => s.Save(_person))
	    .Returns(true)
	    .Verifiable();

8. Lets make it a test now!

namespace MyRearTests
{
    [TestClass]
    public class PersonServiceTests : UnitBaseAbstractClass
    {
        private readonly PersonService _service;
	    private Person _person;

        [TestInitialize]
        public void PersonServiceSetup()
        {
            Setup(MockBehavior.Default);
            _service = _container.Create<PersonService>();
	        _person = new Person();
	    }

        [TestMethod]
        public void SavePersonSuccess()
        {
 	        var result =
        	        _container.GetMock<IRepository>()
		            .Expect(s => s.Save(_person))
	            	    .Returns(true)
		            .Verifiable();

            Assert.IsTrue(result, "Person should have saved.");
        }

    }
}

9. Lets add another test that returns false, a failed save.

namespace MyRearTests
{
    [TestClass]
    public class PersonServiceTests : UnitBaseAbstractClass
    {
        private readonly PersonService _service;
	    private Person _person;

        [TestInitialize]
        public void PersonServiceSetup()
        {
            Setup(MockBehavior.Default);
            _service = _container.Create<PersonService>();
	        _person = new Person();
	    }

        [TestMethod]
        public void SavePersonSuccess()
        {
 	        var result =
        	    _container.GetMock<IRepository>()
		            .Expect(s => s.Save(_person))
		            .Returns(true)
		            .Verifiable();

            Assert.IsTrue(result, "Person should save.");
        }

        [TestMethod]
        public void SavePersonFail()
        {
 	        var result =
        	        _container.GetMock<IRepository>()
		            .Expect(s => s.Save(_person))
		            .Returns(false)
		            .Verifiable();

            Assert.IsFalse(result, "Person should not save.");
        }

    }
}

10. The last test is a bit tricky its why we wrapped Save in PersonService with a try catch and threw a custom exception.

First lets write something like this:

 _container.GetMock<IRepository>()
	    .Expect(s => s.Save(_person))

11. Handling exceptions is different then normal asserts throwing them is different too.

In order to throw an exception we need to call the Throws method instead of returns.

 _container.GetMock<IRepository>()
	    .Expect(s => s.Save(_person))
	    .Throws(new Exception("Save Threw Up"))
	    .Verifiable();

12. Lets make sure we handle the code. We do this with the [ExpectedException] attribute on our test methods.

Like so:

        [TestMethod]
        [ExpectedException(typeof(CustomException))]
        public void SavePersonException()
        {
		        _container.GetMock<IRepository>()
		        .Expect(s => s.Save(_person))
		        .Throws(new Exception("Save Threw Up"))
		        .Verifiable();
	        }

13. The Final Test looks like this:

namespace MyRearTests
{
    [TestClass]
    public class PersonServiceTests : UnitBaseAbstractClass
    {
        private readonly PersonService _service;
	    private Person _person;

        [TestInitialize]
        public void PersonServiceSetup()
        {
            Setup(MockBehavior.Default);
            _service = _container.Create<PersonService>();
	        _person = new Person();
	    }

        [TestMethod]
        public void SavePersonSuccess()
        {
 	        var result =
        	    _container.GetMock<IRepository>()
		    .Expect(s => s.Save(_person))
		    .Returns(true)
		    .Verifiable();

            Assert.IsTrue(result, "Person should save.");
        }

        [TestMethod]
        public void SavePersonFail()
        {
 	        var result =
        	    _container.GetMock<IRepository>()
		    .Expect(s => s.Save(_person))
		    .Returns(true)
		    .Verifiable();

            Assert.IsFalse(result, "Person should not save.");
        }

        [TestMethod]
        [ExpectedException(typeof(CustomException))]
        public void SavePersonException()
        {
		    _container.GetMock<IRepository>()
		     .Expect(s => s.Save(_person))
		     .Throws(new Exception("Save Threw Up"))
		     .Verifiable();
	    }
    }
}

I hope this helped you out a bit more in understanding the Moq Framework. Good Luck, let me know if I need to change anything in the tutorial or make anything clearer!

It can easily be uninstalled through the Extension Manager, if you don’t want it anymore. I basically took the values in my Registry for Css and duplicated them for SCSS.

Extension Source:

[$RootKey$\Languages\File Extensions\.scss]
@="{A764E898-518D-11d2-9A89-00C04F79EFC3}"

[$RootKey$\Editors\{A764E89A-518D-11d2-9A89-00C04F79EFC3}\Extensions]
"scss"=dword:00000040

READ BEFORE INSTALL!:

• You must “Exclude [files] from Project” [SCSS] after install, then “View hidden files” and “Include files in Project” to make this work on existing files.
• Run the installer as an Administrator.
• Remove any entries for “scss” from: Tools, Text Editor, File Extension.

Download Extension: ScssInCss

Here is an example to get you started. I wrote it in two parts:

A Class that Consumes a Feed (FeedReader)
An Object representing a Feed Item (FeedViewModel).

And so we begin:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Xml.Linq;

namespace FeedExample
{

	public class FeedReader
	{
		public static IList<FeedViewModel> GetBlogFeed(string feedUrl, int feedCount)
		{
			//Load feed via a feedUrl.
			var doc = XDocument.Load(feedUrl); 

			//Get all the "items" in the feed.
			var feeds = doc.Descendants("item").Select(x =>
					new FeedViewModel
					{
					     //Get title, pubished date, and link elements.
						Title = x.Element("title").Value, //3
						PublishedDate = DateTime.Parse(x.Element("pubDate").Value),
						Url = x.Element("link").Value
					} //  Put them into an object (FeedViewModel)
					)
					// Order them by the pubDate (FeedViewModel.PublishedDate).
					.OrderByDescending(x=> x.PublishedDate)
					//Only get the amount specified, the top (1, 2, 3, etc.) via feedCount.
					.Take(feedCount);

 			//Convert the feeds to a List and return them.
			return feeds.ToList();
		}
	}

	public class FeedViewModel
	{
		public string Title { get; set; }
		public string Url { get; set; }
		public DateTime PublishedDate { get; set; }
	}

}

You can get some more items from the feed like: title, link, comments, pubDate, dc:creator, category, guid, description, content:encoded, etc…

To prevent your website from slowing down you can cache your feed like this:

//Check if feed exists
if (HttpRuntime.Cache["Feed"] == null)
				{
					//If it is, insert it into the cache, cache for 10 minutes
					HttpRuntime.Cache.Insert("Feed",
						FeedReader.GetBlogFeed("url", 5), null, SystemTime.Now().AddMinutes(10), Cache.NoSlidingExpiration);
				}

//retrieve cached feeds
var cachedFeeds = (List<FeedItemViewModel>) HttpRuntime.Cache["Feed"]

HttpRuntime.Cache is part of the System.Web namespace.

        var oldContext = HttpContext.Current;
        HttpContext.Current = new HttpContext(HttpContext.Current.Request,
        fakeResponse);

        var html = new HtmlHelper(new ViewContext(fakeControllerContext,
        new FakeView(), fakeViewDataDictionary, new TempDataDictionary()),
        new ViewPage());

        html.RenderPartial(viewName, viewData, viewDataDictionary);
        HttpContext.Current = oldContext; //yay 

Though, because you’re reading this you’re like me and you never give up! So how, how do you get around all of this? The answer is Spark. Eeek, another DLL? Yes, Spark is its own View Engine which is an entire different framework. Yes, you have to go to their website download the DLLS, put it in your Lib folder and reference it in your code. Let me tell you now, it is well worth it. Let’s dive in!

Let’s write the code to render our email using the Spark. We want our code to take in the template name, something like: “ForgotUsernameEmail.spark” and we also want it to reuse our current ViewData Object which is of type ViewDataDictionary and contains Person data, we will need to add this into our own implementation of AbstractSparkView. See samples bellow:

Render Email Method:

public string RenderEmail(string sparkViewName, ViewDataDictionary
viewData)
{
     var email = new StringWriter();
     var view = (EmailTemplateBase) _engine.CreateInstance(new
     SparkViewDescriptor().AddTemplate(sparkViewName));
     view.ViewData = viewData;

     try
     {
         view.RenderView(email);
     }
     finally
     {
         _engine.ReleaseInstance(view);
     }
     return email.ToString();
}

Oops thanks Arnis, forgot to mention EmailTemplateBase is just an extended version of AbstractSparkView that includes the ASP.NET MVC ViewDataDictionary.

Custom Spark AbstractSparkView with ViewData implementation:

    public abstract class EmailTemplateBase : AbstractSparkView
    {
        public ViewDataDictionary ViewData { get; set; }

        public object Eval(string expression)
        {
            return ViewData.Eval(expression);
        }

        public string Eval(string expression, string format)
        {
            return ViewData.Eval(expression, format);
        }

    }

So that’s done, let’s make the template… In my MVC Web Project I am going to add into my Views folder or maybe even Views/Email a file called “ForgotUsernameEmail.spark”.

Dear ${#name}:


Your username is ${#userName}.


Thank You.

I also put in a use tag to pull down a Signature file, since this is the same in everyone of my emails. Now let’s actually write the code to call it:

string email = RenderEmail("ForgotUsernameEmail.spark",ViewData);

And that’s all you need to do, well besides read up on spark syntax: http://www.sparkviewengine.com/documentation/configuring