Форум программистов, компьютерный форум, киберфорум
Наши страницы
8Observer8
Войти
Регистрация
Восстановить пароль
Рейтинг: 5.00. Голосов: 1.

Specifications for Calculator using Jasmine and TypeScript

Запись от 8Observer8 размещена 23.02.2019 в 01:08
Обновил(-а) 8Observer8 23.02.2019 в 03:47

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

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!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":

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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

Javascript
1
2
3
4
5
6
7
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"

JSON
1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
    "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:

JSON
1
2
3
4
5
    "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.
Изображения
 
Размещено в Без категории
Просмотров 119 Комментарии 0
Всего комментариев 0
Комментарии
 
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru