szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
[[oktatas:web:javascript:javascript_teszt:jasmine|< Jasmine]]

====== Jasmine - TDD ======

  * **Szerző:** Sallai András
  * Copyright (c) 2022, Sallai András
  * Szerkesztve: 2022, 2023
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|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:
<code>
app01/
  |-src/
  |  |-app.js
  |  |-index.html
  |  `-style.css
  |-.gitignore
  |-bs-config.json
  `-package.json
</code>


==== A fájlok tartalma ====

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


<code javascript 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>
</code>



<code txt .gitignore>
node_modules/
</code>


<code javascript bs-config.json>
{
    "server": [
        "src", 
        "node_modules/bootstrap/dist/css",
        "node_modules/bootstrap/dist/js"
    ],
    "port": 8000
}
</code>


<code javascript 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"
}
</code>


==== 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:

<code javascript spec/triangle.spec.js>
import { calcTriangle } from '../src/triangle.js';

</code>
É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:

<code javascript src/triangle.js>
export var calcTriangle = () =>{}

</code>


Refaktoráljunk: 

<code javascript 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();
    });
});


</code>

<code javascript src/triangle.js>
export var calcArea = () =>{}

</code>


A teszt futtatása:
<code>
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)
</code>


==== iteráció 2 ====

Követeljük meg, hogy a calcArea() függvény fogadjon két paramétert:
<code javascript 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.);
    });
});
</code>


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

<code javascript src/triangle.js>
export var calcArea = () =>{return 525.}
</code>

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

<code>
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)
</code>


==== iteráció 3 ====

Fejlesszük a tesztet:

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


A teljeskód:

<code javascript 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.);
    });
});
</code>

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

<code javascript src/triangle.js>
export var calcArea = (base, height) =>{
    return base * height / 2;
}
</code>

==== iteráció 4 ====

Fejlesszük a tesztet:
<code javascript>
    it('A calcArea kivételt dob 0 inputra', ()=> {
        expect(()=> calcArea(0, 35) )
        .toThrow(new Error('Hiba! Az alap nem lehet kisebb mint 1'));
    });
</code>


<code javascript 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'));
    });
});
</code>

<code javascript 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;
}

</code>


Refaktoráljuk a kódokat:



<code javascript 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;
}

</code>

<code javascript 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ő'));
    });
});

</code>


A teszt futtatása:
<code>
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)
</code>