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:typescript:typescript_teszt|< TypeScript teszt]]

====== TypeScript - Mocha teszt ======

  * **Szerző:** Sallai András
  * Copyright (c) 2024, Sallai András
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== Háromszög területszámítás =====

<code html app/index.html>

<!DOCTYPE html>
<html lang="hu">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" 
    content="width=device-width, 
    initial-scale=1.0">
    <title>Háromszög</title>
    <link rel="stylesheet" href="bootstrap.css">
    <link rel="stylesheet" href="style.css">        
  </head>
  <body>
    <div class="container">
      <h1>Háromszög területszámítás</h1>
      
      <div class="form">


        <div class="input">
          <label for="base"
          class="form-label">Alap</label>
          <input type="text" id="base"
          class="form-control">
        </div>

        <div class="input">
          <label for="height"
          class="form-label">Magasság</label>
          <input type="text" id="height"
          class="form-control">
        </div>
        <div class="mt-2">
          <button id="calcButton"
          class="btn btn-primary">Számít</button>
        </div>
        <div class="input">
          <label for="area"
          class="form-label">Terület</label>
          <input type="text" id="area"
          class="form-control">
        </div>        

      </div>

    </div>
    <script type="module" src="app.js"></script>
  </body>
</html>
</code>

<code javascript src/app.ts>
import { calcArea } from "./triangle.js";

class Lugas {
    base?: HTMLInputElement | null;
    height?: HTMLInputElement | null;
    area?: HTMLInputElement | null;
    calcButton?: HTMLButtonElement | null;
    constructor() {
        this.bindHtml();
        this.handleEvent();
    }
    bindHtml() {
        this.base = document.querySelector('#base');
        this.height = document.querySelector('#height');
        this.area = document.querySelector('#area');
        this.calcButton = document.querySelector('#calcButton');
    }
    handleEvent() {
        this.calcButton?.addEventListener('click', () => {
            this.startCalc();
        });
    }
    startCalc() {
        const base = Number(this.base?.value);
        const height = Number(this.height?.value);
        const area = calcArea(base, height);
        this.area!.value = String(area);
    }

}

new Lugas();

</code>

<code javascript src/triangle.ts>

function calcArea(base: number, height: number):number {
    return base * height / 2;
}

export { calcArea }

</code>

===== Projekt fájlok =====

<code javascript package.json>
{
  "name": "sinto-project",
  "version": "0.0.1",
  "description": "A project created by the Sinto command",
  "scripts": {
    "start": "browser-sync start --config bs-config.json",
    "build": "gulp",
    "test": "mocha"
  },
  "dependencies": {
    "bootstrap": "^5.3.3"
  },
  "devDependencies": {
    "browser-sync": "^3.0.2",
    "gulp": "^5.0.0",
    "gulp-clean-css": "^4.3.0",
    "gulp-concat": "^2.6.1",
    "gulp-minify": "^3.1.0",
    "gulp-replace": "^1.1.4",
    "mocha": "^10.4.0",
    "typescript": "^5.4.5"
  },
  "type": "module"
}
</code>

<code javascript tsconfig.json>
{
  "compilerOptions": {
    "target": "ES6",
    "module": "ES6",
    "outDir": "./app",
    "strict": true,
    "esModuleInterop": true,
    "moduleResolution": "bundler",
    "noEmit": false,
    "allowImportingTsExtensions": false
  }
}
</code>

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


===== Teszt =====

<code javascript test/testApp.js>
import assert from 'assert';
import { calcArea } from '../app/triangle.js';

describe('Háromszög területszámítás', function() {
    it('30, 35 bemenetre 525', function() {
        let actual = calcArea(30, 35);
        let expected = 525;
        assert.equal(actual, expected);
    });
});

</code>

Futtatás terminálból:
  npx mocha


===== A teszt bővítve =====

<code javascript test/testApp.js>
import assert from 'assert';
import { calcArea } from '../app/triangle.js';

function assertAlmostEqual(actual, expected, tolerance, message) {
    if (Math.abs(actual - expected) > tolerance) {
      assert.fail(message || `Expected ${actual} to be almost equal to ${expected} within tolerance ${tolerance}`);
    }
}

describe('Háromszög területszámítás', function() {
    it('30, 35 bemenetre 525', function() {
        let actual = calcArea(30, 35);
        let expected = 525;
        assert.equal(actual, expected);
    });
    it('53, 31 bemenetre 821.5', function() {
        let actual = calcArea(53, 31);
        let expected = 821.5;
        assert.equal(actual, expected);        
    });
    it('8.3, 5 bemenetre 20.75', function() {
        let actual = calcArea(8.3, 5);
        let expected = 20.75;
        assertAlmostEqual(actual, expected, 0.01);
    });
    // 20.399165000000004
    it('8.111, 5.03 bemenetre 20.3', function() {
        let actual = calcArea(8.111, 5.03);
        let expected = 20.3;
        assertAlmostEqual(actual, expected, 0.1);
    });
});

</code>