Dojo FAQ: How to use JSFiddle to provide a functioning test case

By on October 15, 2014 9:51 am

DojoFAQ

Making a case

When collaborating with other developers nothing is better for conveying an issue than real, working code. To this end, JSFiddle provides a way to quickly create and share functioning test cases written in HTML, CSS, and JavaScript. It provides a customizable environment with support for Dojo and many other common frameworks, services for mocking Ajax requests, basic change control, and collaboration tools. The interface is simple and gets out of your way allowing you to quickly write your example with little setup.

The JSFiddle Interface

After going to the JSFiddle site you will be presented with a page divided into three main sections. The left side is used for configuring the JSFiddle environment; the top holds tools for working with your code; the right side has editor windows for HTML, CSS, and JavaScript as well as a frame for displaying the page result.

JSFiddle Interface

A Dojo Test Case

Creating a basic Dojo test case is a great way to learn how to use JSFiddle. First, let’s learn about the list of configuration options in the left sidebar as we setup our Dojo environment.

Frameworks and Extensions

This defines what, if any, framework your code will use. The selected framework is then added in without any additional effort on your part. This saves us from needing to host the framework or find a trusted, public instance. For our test case, set the dropdowns to "Dojo 1.10.1" (or whatever version of Dojo you wish to work against) and "No wrap - in <body>".

Fiddle Options

Here we can provide a title and description for the example as well as set some additional options that is outside the scope of what the editor allows us to change. For our test case we will use the "Framework <script> attribute" section to configure the Dojo loader by adding "data-dojo-config="async: 1, isDebug: 1"".

Now that we have defined a very simple Dojo environment, we can start writing our example starting with our usual require statement.

Note: Embedding JSFiddle in an https environment is not currently working. If you do not see a Fiddle example above, please visit this example at JSFiddle

Mocking Ajax Calls

While dojo/request/registry provides one way of mocking XHR requests, JSFiddle also has an echo service that can be used to mock any Ajax call. This can be handy if you are not making an Ajax request using Dojo, or just want to make an actual network request.

Note: If you do not see a Fiddle example above, please visit this example at JSFiddle

Writing a Dijit Test Case

Dijit is provided in the Dojo toolkit version supplied by JSFiddle. However, there are a couple things to keep in mind when creating a Dijit test case.

First, a theme should be defined for the widget. To use the claro theme go to "Fiddle Options" and under the "Body tag" add <body class="claro">; then go to "External Resources" and provide a URL to claro.css. Note that we intentionally choose a protocol-less URL, so the omission of http: or https: is not a mistake.

Second, when using dojo/parser, be sure create a container to be parsed and pass that element’s id to the parser, to improve the performance of the parser. The example below shows a dijit/Calendar.

Note: If you do not see a Fiddle example above, please visit this example at JSFiddle

Using External Resources

Sometimes a more complex test case will require additional packages. To do this we will want to use one of the advanced features of the AMD loader and provide our mappings directly to require. Since SitePen uses GitHub for our open-source projects, we can use RawGit to serve files directly from any tagged release. So if we wanted to provide a test case for dgrid we would need to provide package mappings for dgrid and its dependencies (put-selector and xstyle).

Note: If you do not see a Fiddle example above, please visit this example at JSFiddle

Conclusion

When collaborating on an open-source project or asking questions on sites like Stack Overflow it is often useful to provide a working example. JSFiddle is a great way to start sharing code examples with other developers and open up the lines of communication. Now that we have provided some examples of how to use Dojo with JSFiddle, you can use any of the above examples as a starting point simply by clicking "Edit in JSFiddle".

Learning more

Join us in our Dojo workshops offered throughout the US, Canada, and Europe, or at your location to learn more about working with Dojo and dgrif. We also provide expert JavaScript and Dojo support to help you solve complex problems, and development services to help you build the perfect application. Contact us for a free 30 minute consultation to discuss how we can help you with your web application development needs.