TypeScript - Mocha teszt

Szerző: Sallai András
Copyright © 2024, Sallai András
Licenc: CC Attribution-Share Alike 4.0 International
Web: https://szit.hu

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

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

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();

src/triangle.ts

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

Projekt fájlok

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"
}

tsconfig.json

{
  "compilerOptions": {
    "target": "ES6",
    "module": "ES6",
    "outDir": "./app",
    "strict": true,
    "esModuleInterop": true,
    "moduleResolution": "bundler",
    "noEmit": false,
    "allowImportingTsExtensions": false
  }
}

bs-config.json

{
  "server": [
    "app",
    "node_modules/bootstrap/dist/css",
    "node_modules/bootstrap/dist/js"
  ],
  "port": 3000,
  "watch": true
}

Teszt

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);
    });
});

Futtatás terminálból:

npx mocha

A teszt bővítve

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);
    });
});