Jump to content
  • Advertisement

Specs for Calculator. Jasmine, TS

8Observer8

810 views

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 -g

Note. 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/jasmine

Search 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.js

You 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_specs

Open 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.



0 Comments


Recommended Comments

There are no comments to display.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

GameDev.net is your game development community. Create an account for your GameDev Portfolio and participate in the largest developer community in the games industry.

Sign me up!