CoffeeScript uses Jasmine testing
May 09, 2021 CoffeeScript
Table of contents
Test with Jasmine
Problem
Suppose you're writing a simple calculator using CoffeeScript and want to verify that its functionality is as expected. You can use Jasmine to test the framework.
Discuss
When you use the Jasmine test framework, you write the test in a parameter (spec) document that describes the expected functionality of the code that needs to be tested.
For example, we hope that the calculator can implement addition and subtract functions, and can correctly perform positive and negative numbers of operations. Our spec documentation is shown below.
# calculatorSpec.coffee
describe 'Calculator', ->
it 'can add two positive numbers', ->
calculator = new Calculator()
result = calculator.add 2, 3
expect(result).toBe 5
it 'can handle negative number addition', ->
calculator = new Calculator()
result = calculator.add -10, 5
expect(result).toBe -5
it 'can subtract two positive numbers', ->
calculator = new Calculator()
result = calculator.subtract 10, 6
expect(result).toBe 4
it 'can handle negative number subtraction', ->
calculator = new Calculator()
result = calculator.subtract 4, -6
expect(result).toBe 10Configure Jasmine
Before you can run the test, you must download and configure Jasmine. Includes: 1. Download the latest Jasmine compressed files, 2. Create a spec and a spec/jasmine directory in your project project, 3. Unzip the downloaded Jasmine files into the spec/jasmine directory, and 4. Create a test stream
Create a test flow
Jasmine can run your tests in a web browser using spec runner's HTML documentation. s pec runner is a simple HTML page that connects Jasmine with the necessary JavaScript and CSS files that your code needs. Here's an example.
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2 "http://www.w3.org/TR/html4/loose.dtd">
3 <html>
4 <head>
5 <title>Jasmine Spec Runner</title>
6 <link rel="shortcut icon" type="image/png" href="spec/jasmine/jasmine_favicon.png">
7 <link rel="stylesheet" type="text/css" href="spec/jasmine/jasmine.css">
8 <script src="https://atts.w3cschool.cn/attachments/image/wk/coffeescript/jquery.min.js"></script>
9 <script src="https://atts.w3cschool.cn/attachments/image/wk/coffeescript/jasmine.js"></script>
10 <script src="https://atts.w3cschool.cn/attachments/image/wk/coffeescript/jasmine-html.js"></script>
11 <script src="https://atts.w3cschool.cn/attachments/image/wk/coffeescript/jasmine-jquery-1.3.1.js"></script>
12
13 <!-- include source files here... -->
14 <script src="https://atts.w3cschool.cn/attachments/image/wk/coffeescript/calculator.js"></script>
15
16 <!-- include spec files here... -->
17 <script src="https://atts.w3cschool.cn/attachments/image/wk/coffeescript/calculatorSpec.js"></script>
18
19 </head>
20
21 <body>
22 <script type="text/javascript">
23 (function() {
24 var jasmineEnv = jasmine.getEnv();
25 jasmineEnv.updateInterval = 1000;
26
27 var trivialReporter = new jasmine.TrivialReporter();
28
29 jasmineEnv.addReporter(trivialReporter);
30
31 jasmineEnv.specFilter = function(spec) {
32 return trivialReporter.specFilter(spec);
33 };
34
35 var currentWindowOnload = window.onload;
36
37 window.onload = function() {
38 if (currentWindowOnload) {
39 currentWindowOnload();
40 }
41 execJasmine();
42 };
43
44 function execJasmine() {
45 jasmineEnv.execute();
46 }
47
48 })();
49 </script>
50 </body>
51 </html>This spec runner can be downloaded on GitHub gist.
With the SpecRunner .html, simply refer to the JavaScript file that you compiled and compiled .js after the jasmine and its dependencies.
In the example above, we include the pending calculator .js file on line 14 and compile the calculator Spec file on .js 17.
Run the test
To run our tests, simply open the SpecRunner page .html browser. In our example, we can see a total of 8 failure scenarios for 4 failed specs (below).
It seems that our test failed because Jasmine could not find the Calculator variable. T hat's because it hasn't been created yet. Now let's create a new file named js/calculator.coffee.
# calculator.coffee
window.Calculator = class CalculatorCompile calculator.coffee and refresh the browser to re-run the test group.
Now we have four more failures instead of the original eight, and we've made 50% improvements in just one line of code.
The test passes
Implement our approach to see if it can be tested.
# calculator.coffee
window.Calculator = class Calculator
add: (a, b) ->
a + b
subtract: (a, b) ->
a - bWhen we refresh the page, we can see all through.
Refactor the test
Now that all the tests have passed, we should see if our code or tests can be refactored.
In our spec file, each test creates its own calculator instance. T his makes our tests quite repetitive, especially for large test suites. Ideally, we should consider moving the initialization code to run before each test.
Fortunately, Jasmine has a beforeEach function, which is set for this purpose.
describe 'Calculator', ->
calculator = null
beforeEach ->
calculator = new Calculator()
it 'can add two positive numbers', ->
result = calculator.add 2, 3
expect(result).toBe 5
it 'can handle negative number addition', ->
result = calculator.add -10, 5
expect(result).toBe -5
it 'can subtract two positive numbers', ->
result = calculator.subtract 10, 6
expect(result).toBe 4
it 'can handle negative number subtraction', ->
result = calculator.subtract 4, -6
expect(result).toBe 10When we recompile our spec and then refresh the browser, we can see that the test is still all passed.
