Using Mock Objects in jQuery applications

In order to demonstrate how the Mock Object Pattern can be used during the development of a multi-part application, we will extend the dashboard example, as we saw in Chapter 4, Divide and Conquer with the Module Pattern, in order to present thumbnails of YouTube videos from web developing conferences. The video references are grouped into four predefined categories and the related buttons will be displayed based on the current category selection, as illustrated below:

The changes that need to be introduced to the HTML and the CSS are minimal. The only extra CSS that is needed for the above implementation, when compared to the existing implementation from Chapter 4, Divide and Conquer with the Module Pattern, is related to the width of the thumbnails:

.box img { 
  width: 100%; 
}

The change in the HTML is intended to organize the <button> elements of each category. This change will make our implementation more straightforward since the categories...