Tartalomjegyzék

Jasmine - TDD

Jasmine - TDD

Szerző: Sallai András
Copyright © 2022, Sallai András
Szerkesztve: 2022, 2023
Licenc: CC BY-SA 4.0
Web: https://szit.hu

A TDD

A TDD a Test-driven development rövidítése, magyarul Tesztvezérelt fejlesztés. A tesztelés és a fejlesztést kis iterációkban egymás után végezzük.

Kezdőprojekt

Adott egy projekt:

app01/
  |-src/
  |  |-app.js
  |  |-index.html
  |  `-style.css
  |-.gitignore
  |-bs-config.json
  `-package.json

A fájlok tartalma

Az app.js és a style.css egy-egy üres fájl.

src/index.html

<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="utf-8">
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>doc</title>
    <link rel="stylesheet" href="bootstrap.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
    <h1>doc</h1>
 
    </div>
 
    <script src="bootstrap.js"></script>
    <script src="app.js"></script>    
</body>
</html>

.gitignore

node_modules/

bs-config.json

{
    "server": [
        "src", 
        "node_modules/bootstrap/dist/css",
        "node_modules/bootstrap/dist/js"
    ],
    "port": 8000
}

package.json

{
  "name": "app10",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "jasmine",
    "start": "lite-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "jasmine": "^4.1.0",
    "lite-server": "^2.6.1"
  },
  "dependencies": {
    "bootstrap": "^5.1.3"
  },
  "type": "module"
}

Jasmine

Telepítsük a Jasmine-t:

npm install jasmine

Készítsük fel a projektet a Jasmine használatára:

npx jamine init

A TDD

iteráció 1

A program írását a teszt elkészítésével kezdjük.

Írjunk meg tesztet:

spec/triangle.spec.js

import { calcTriangle } from '../src/triangle.js';

Éppen csak annyi kódot írunk, hogy a teszt hibára fusson. Mivel nem létezik a ../src/triangle.js, ezért a teszt hibára fut.

Írjuk meg a kódot, olyan szinten, hogy ne fusson hibára a teszt:

src/triangle.js

export var calcTriangle = () =>{}

Refaktoráljunk:

spec/triangle.spec.js

import { calcArea } from '../src/triangle.js';
 
describe('Háromszög számítások', () => {
    it('A calcArea függvény létezik', () => {        
        expect(calcArea).not.toBeUndefined();
    });
});

src/triangle.js

export var calcArea = () =>{}

A teszt futtatása:

npm test

> app10@1.0.0 test
> jasmine

Randomized with seed 96701
Started
.


1 spec, 0 failures
Finished in 0.018 seconds
Randomized with seed 96701 (jasmine --random=true --seed=96701)

iteráció 2

Követeljük meg, hogy a calcArea() függvény fogadjon két paramétert:

spec/triangle.spec.js

import { calcArea } from '../src/triangle.js';
 
describe('Háromszg számítások', () => {
    it('A calcArea függvény létezik', () => {        
        expect(calcArea).not.toBeUndefined();
    });
    it('A calcArea 30, 35 param. 525.-t adjon vissza', () => {
        let result = calcArea(30, 35);
        expect(result).toEqual(525.);
    });
});

Fejlesszük a kódot annyira, hogy a függvény fogadja a kódot.

src/triangle.js

export var calcArea = () =>{return 525.}

Nézzük meg, hogy tudunk-e rafaktorálni. Mivel nem, folytatjuk.

npm test

> app10@1.0.0 test
> jasmine

Randomized with seed 18381
Started
..


2 specs, 0 failures
Finished in 0.022 seconds
Randomized with seed 18381 (jasmine --random=true --seed=18381)

iteráció 3

Fejlesszük a tesztet:

    it('A calcArea 40, 45 param. 900.-t adjon vissza', () => {
        let result = calcArea(40, 45);
        expect(result).toEqual(900.);
    });

A teljeskód:

spec/triangle.spec.js

import { calcArea } from '../src/triangle.js';
 
describe('Háromszg számítások', () => {
    it('A calcArea függvény létezik', () => {        
        expect(calcArea).not.toBeUndefined();
    });
    it('A calcArea 30, 35 param. 525.-t adjon vissza', () => {
        let result = calcArea(30, 35);
        expect(result).toEqual(525.);
    });
    it('A calcArea 40, 45 param. 900.-t adjon vissza', () => {
        let result = calcArea(40, 45);
        expect(result).toEqual(900.);
    });
});

Írjunk annyi kódot, hogy teljesítse a tesztet.

src/triangle.js

export var calcArea = (base, height) =>{
    return base * height / 2;
}

iteráció 4

Fejlesszük a tesztet:

    it('A calcArea kivételt dob 0 inputra', ()=> {
        expect(()=> calcArea(0, 35) )
        .toThrow(new Error('Hiba! Az alap nem lehet kisebb mint 1'));
    });

spec/triangle.js

import { calcArea } from '../src/triangle.js';
 
describe('Háromszög számítások', () => {
    it('A calcArea függvény létezik', () => {        
        expect(calcArea).not.toBeUndefined();
    });
    it('A calcArea 30, 35 param. 525.-t adjon vissza', () => {
        let result = calcArea(30, 35);
        expect(result).toEqual(525.);
    });
    it('A calcArea 40, 45 param. 900.-t adjon vissza', () => {
        let result = calcArea(40, 45);
        expect(result).toEqual(900.);
    });
    it('A calcArea kivételt dob 0 inputra', ()=> {
        expect(()=> calcArea(0, 35) )
        .toThrow(new Error('Hiba! Az alap nem lehet kisebb mint 1'));
    });
});

src/triangle.js

export var calcArea = (base, height) =>{
    if (base<1) {
        throw new Error('Hiba! Az alap nem lehet kisebb mint 1');
    }
    return base * height / 2;
}

Refaktoráljuk a kódokat:

spec/triangle.js

export var calcArea = (base, height) =>{
    if (base<1 || height <1) {
        throw new Error('Hiba! A paraméter nem megfelelő');
    }
    return base * height / 2;
}

src/triangle.js

import { calcArea } from '../src/triangle.js';
 
describe('Háromszög calcArea függvény\n', () => {
    it('A calcArea függvény létezik', () => {        
        expect(calcArea).not.toBeUndefined();
    });
    it('A 30, 35 inputra 525.-t ad vissza', () => {
        let result = calcArea(30, 35);
        expect(result).toEqual(525.);
    });
    it('A 40, 45 inputra 900.-t ad vissza', () => {
        let result = calcArea(40, 45);
        expect(result).toEqual(900.);
    });
    it('Kivételt dob 0 inputra', ()=> {
        expect(()=> calcArea(0, 35) )
        .toThrow(new Error('Hiba! A paraméter nem megfelelő'));
    });
});

A teszt futtatása:

npm test

> app10@1.0.0 test
> jasmine

Randomized with seed 95608
Started
....


4 specs, 0 failures
Finished in 0.02 seconds
Randomized with seed 95608 (jasmine --random=true --seed=95608)