Tartalomjegyzék

< Jasmine példák

Jasmine - Rombuszba írható kör sugara

Bevezetés

Az alábbi program megtalálható a GitHub-on:

A 1-s hasonló, de ott a szimpla Jasmine van használatban:

Az alkalmazás a „Feladat 0312” megvalósítása, a programozási feladatgyűjteményből.

A projekt elkezdése

mkdir tomsbsug
cd tombsug
code .
npm init -y
pnpm install --save-dev lite-server
pnpm install bootstrap

Teszteléshez: 

pnpm install --save-dev jasmine-browser-runner jasmine-core
bs-config.json
{
    "server": [
        "src",
        "node_modules/bootstrap/dist/css",
        "node_modules/bootstrap/dist/js"
        ],
    "port": 3000
}
package.json
{
  "name": "tombsug",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "jasmine-browser-runner serve",
    "start": "lite-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "jasmine-browser-runner": "^2.1.0",
    "jasmine-core": "^5.1.0",
    "lite-server": "^2.6.1"
  },
  "dependencies": {
    "bootstrap": "^5.3.1"
  }
}

Alkalmazás

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>Document</title>
    <link rel="stylesheet" href="bootstrap.css">
</head>
<body>
    <header>
        <h1 class="text-center mt-0 bg-success 
        p-5 text-white">
            Rhombus
        </h1>
    </header>
    <div class="container">
        <h2>Sugár</h2>
        <p>A rombuszba írható kör sugara</p>
 
        <div class="rhombusForm">
            <div class="mt-3">
                <label for="side"
                class="form-label">Oldal</label>
                <input type="text" id="side"
                class="form-control">
            </div>
            <div class="mt-3">
                <label for="alpha"
                class="form-label">Alfa szög</label>
                <input type="text" id="alpha"
                class="form-control">
            </div>
            <div class="mt-3">                
                <input type="button" id="calcButton"
                class="btn btn-primary"
                value="Számít">
            </div>
            <div class="mt-3">
                <label for="radius"
                class="form-label">Sugár</label>
                <input type="text" id="radius"
                class="form-control">
            </div>
        </div>
    </div>
 
    <script src="app.js"></script>
 
</body>
</html>
src/app.js
const doc = {
    sideInput: document.querySelector('#side'),
    alphaInput: document.querySelector('#alpha'),
    radiusInput: document.querySelector('#radius'),
    calcButton: document.querySelector('#calcButton')
}
 
const state = {
    radius: null
}
 
window.addEventListener('load', () => {
    init()
})
 
function init() {
    handleEvent()
}
 
function handleEvent() {
    if(doc.calcButton) {
        doc.calcButton.addEventListener('click', () => {
            startCalc()
        })
    }
}
 
function startCalc() {
    try {
        tryStartCalc()
    }catch(err) {
        console.log(err.message)
        alert(err.message)
    }
}
 
function tryStartCalc() {
    let side = doc.sideInput.value;
    let alpha = doc.alphaInput.value;
    state.radius = calcRadius(side, alpha)
    doc.radiusInput.value = state.radius
}
 
function calcRadius(side, alpha) {
    if(!isValidInput(side)) {
        throw new Error('Hiba! Az oldal érték hibás!')
    }
    if(!isValidInput(alpha)) {
        throw new Error('Hiba! Az szög érték hibás!')
    }
    let rad = alpha * Math.PI / 180
    return 1.0/2.0 * side * Math.sin(rad)
}
 
function isValidInput(input) {
    inputStr = String(input)
    if(!inputStr.match(/^[0-9]+$/)) {
        return false
    }
    if(input <= 0) {
        return false
    }
    return true
}

Teszt

Beállítások:

spec/support/jasmine-browser.json
{
  "srcDir": "src",
  "srcFiles": [
    "**/*.js"
  ],
  "specDir": "test",
  "specFiles": [
    "**/*[sS]pec.js"
  ],
  "helpers": [
    "helpers/**/*.js"
  ],
  "env": {
    "stopSpecOnExpectationFailure": false,
    "stopOnSpecFailure": false,
    "random": false
  },
  "browser": {
    "name": "firefox"
  }
}

Az eredetihez képest, két tulajdonságot változtattunk meg:

A teszt:

test/app.spec.js
describe('A számítás tesztelése', () => {
    it('A 30, 35 bementre 8.60364654526569', () => {
        const expected = 8.60364654526569
        const actual = calcRadius(30, 35)
        expect(actual).toEqual(expected)
    })
    it('A 130, 140 bementre 41.78119462962506', () => {
        const expected = 41.78119462962506
        const actual = calcRadius(130, 140)
        expect(actual).toEqual(expected)
    })
    it('A 0, 35 bementre Hiba', () => {        
        expect(() => {
            calcRadius(0, 35)
        }).toThrow();
    })
    it('A 30, 0 bementre Hiba', () => {        
        expect(() => {
            calcRadius(30, 0)
        }).toThrow();
    })
})
 
describe('A bemenet ellenőrző függvény', () => {
    it('A 30 bementre true', () => {
        const expected = true
        const actual = isValidInput(30)
        expect(actual).toBe(expected)
    })
    it('Az 1 bementre true', () => {
        const expected = true
        const actual = isValidInput(1)
        expect(actual).toBe(expected)
    })
    it('A abc bementre false', () => {
        const expected = false
        const actual = isValidInput('abc')
        expect(actual).toBe(expected)
    })
    it('A 0 bementre false', () => {
        const expected = false
        const actual = isValidInput(0)
        expect(actual).toBe(expected)
    })
    it('A -4 bementre false', () => {
        const expected = false
        const actual = isValidInput(-4)
        expect(actual).toBe(expected)
    })
    it('A 35a bementre false', () => {
        const expected = false
        const actual = isValidInput('35a')
        expect(actual).toBe(expected)
    })
})