In this instruction we will study how to write executable specifications for a very simple Calculator project using Jasmine testing framework.
Source code on GitHub: https://github.com/8Observer8/calculator-browserify-ts
If you do not have "browserify" then install it globally using this command:
npm install browserify -gNote. You can read about why we need "browserify" in this project in my instruction here: Browserify TypeScript
Create the folder "calculator-browserify-ts" and install the necessary package:
npm init -y
npm i -D @types/jasmineSearch in the Internet: jasmine cdn. Create the "SpecRunner.html" file and copy founded CDN links to it:
SpecRunner.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Jasmine Spec Runner v3.3.0</title>
<link rel="shortcut icon" type="image/png"
href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.0.0/jasmine_favicon.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/3.3.0/jasmine.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/3.3.0/jasmine.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/3.3.0/jasmine-html.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/3.3.0/boot.min.js"></script>
<!-- include source files here... -->
<script src="dist_client/bundle.js"></script>
<!-- include spec files here... -->
<script src="dist_specs/bundle.js"></script>
</head>
</html>Let's describe specifications for our calculator. The calculator will have four operations:
- Add(a, b)
- Sub(a, b)
- Mul(a, b)
- Div(a, b)
If "b == 0" then method "Div" will throw an exception with the text: "Divided by zero".
- Create the "src_specs" folder. Create the "calculator_tests.ts" in the "src_specs" folder
- Create the "src_client" folder. Create the "calculator.ts" in the "src_client" folder
Let's create the first specification in the "calculator_tests.ts":
import { Calculator } from "../src_client/calculator";
describe("Calculator", () =>
{
it("Add_PositiveNumbers_ReturnsSum", () =>
{
// Arrange
let a = 9;
let b = 1;
let expectedSum = 10;
// Act
let actualSum = Calculator.Add(a, b);
// Assert
expect(actualSum).toBe(expectedSum);
});
});We could try to compile it but we cannot because we do not have the "Calculator" class. Let's add it in the "src_client" folder:
calculator.ts
export class Calculator
{
public static Add(a: number, b: number): number
{
return a + b;
}
}Add the "tsconfig.specs.json" file in the root of your projects:
"tsconfig.specs.json"
{
"compilerOptions": {
"sourceMap": true,
"outDir": "dist_specs"
},
"include": [
"src_specs/calculator_tests.ts",
"src_client/calculator.ts"
],
"exclude": [
"node_modules",
"src_client"
]
}Now we can compile and browserify the specification. Enter two commands:
tsc -p tsconfig.specs.json
browserify dist_specs/src_client/calculator.js dist_specs/src_specs/calculator_tests.js -o dist_specs/bundle.jsYou can add these commands to the "package.json" file in the "scripts" section:
"scripts": {
"build_specs": "tsc -p tsconfig.specs.json",
"bundle_specs": "browserify dist_specs/src_client/calculator.js dist_specs/src_specs/calculator_tests.js -o dist_specs/bundle.js",
"test": "echo \"Error: no test specified\" && exit 1"And you can run these short commands:
npm run build_specs
npm run bundle_specsOpen the "SpecRunner.html" in the browser and you will see that the specification will run.
Try to add another specifications for: Sub, Mul, and Div methods.
Later I will add specification for "Divide by zero" exception.
