Skip to content

Instantly share code, notes, and snippets.

@elithompson
Created July 29, 2011 04:51
Embed
What would you like to do?
Unit testing CoffeeScript with QUnit
class Dog
speak: -> "woof"
legs: 4
module "Dog"
test "dog says woof", 1, () ->
dog = new Dog()
actual = dog.speak()
equal actual, "woof"
test "dogs have four legs", 1, () ->
dog = new Dog()
actual = dog.legs
equal actual, 4
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>QUnit Test Suite</title>
<link rel="stylesheet" href="qunit/qunit.css" type="text/css" media="screen">
<script type="text/javascript" src="qunit/qunit.js"></script>
<script type="text/javascript" src="http://jashkenas.github.com/coffee-script/extras/coffee-script.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/coffeescript">
$ ->
scriptsToTest = ["dog.coffee"]
tests = ["dog.test.coffee"]
loadCoffee = (files) ->
$head = $ "head"
load = (file) ->
$.get file, (content) ->
compiled = CoffeeScript.compile content, {bare: on}
$("<script />").attr("type", "text/javascript").html(compiled).appendTo $head
load file for file in files
loadCoffee scriptsToTest
loadCoffee tests
</script>
</head>
<body>
<h1 id="qunit-header">QUnit Test Suite</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="qunit-fixture">test markup</div>
</body>
</html>
@misfo
Copy link

misfo commented Jul 29, 2011

Is there and advantage to defining your own loadCoffee instead of using CoffeeScript.load?

https://github.com/misfo/jim/blob/master/test/test.html#L66

@stephank
Copy link

Alternatively, use QUnit.config.autostart = false; and start QUnit from a text/coffeescript block somewhere at the bottom. That way, you can embed scripts as normal.

This is how I do it: http://stephank.github.com/domjuice/test.html

@elithompson
Copy link
Author

Thanks guys! I'll look into both of those suggestions today.

@elithompson
Copy link
Author

@misfo I looked into loadCoffee and before the loaded code is executed, it's wrapped in a Function() call. In my example, that would limit the scope of the Dog class to just that function and therefore inaccessible to the unit tests.

@stephank I tried your link but it didn't go anywhere. Could you please check the link?

@stephank
Copy link

@elithompson Whoops, sorry, corrected it.

@misfo
Copy link

misfo commented Jul 31, 2011

@elithompson ah, Makes sense. You'd have to attach the class you're testing to window as a property in order to use Coffee.load. Thanks for clarifying

@gma
Copy link

gma commented Apr 4, 2012

With Coffee.load you can pass a callback as a second argument, which I'm using to guarantee that my test file gets loaded after the code that it's testing. I wrote it up here: http://effectif.com/coffeescript/qunit-boilerplate

@elithompson – With this approach I've not had any trouble loading files off disk, rather than over HTTP. Maybe Coffee.load behaves differently to jQuery's AJAX handler here?

Copy link

ghost commented Apr 24, 2012

Just cloned this project and I get the following js error :
a.replace is not a function

Is it still possible to unit test coffeescript directly with Qunit ? I can't make it work.

@elithompson
Copy link
Author

@AngeliqueVille Can't help you there. I haven't tried working on this in a while so you're on your own.

@gma
Copy link

gma commented Apr 25, 2012

@AngeliqueVille - I did it not three weeks ago, and it works fine for me. See my blog post (linked from an earlier comment) on how I did it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment