< Jasmine

Jasmine-browser-runner kezdés

Szerző: Sallai András

Copyright © Sallai András, 2022, 2023

Licenc: CC Attribution-Share Alike 4.0 International

Web: https://szit.hu

Jasmine kezdés

npm install --save-dev jasmine-browser-runner jasmine-core

yarn add --dev jasmine-browser-runner jasmine-core

Készítsük elő a Jasmine-t:

npx jasmine-browser-runner init

A parancs hatására, létrejön egy spec/support/jasmine-browser.json fájl. Itt találhatók a Jasmine alapbeállításai.

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

A „specDir” tulajdonság alapértelmezetten a „spec” könyvtárra mutat. Ezt átírtam a mintában „test”-re.

A package.json fájlban állítsunk be egy scriptet:

"scripts": [ "test": "jasmine-browser-runner serve" ]

Tesztírás

<!DOCTYPE html> <html lang="hu"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>Vmi</h1> <form> <label for="base">Alap</label> <input type="text" id="base"><br> <label for="height">Magasság</label> <input type="text" id="height"><br> <button type="button" id="calcButton">Mehet</button> <br> <label for="area">Terület</label> <input type="text" id="area"> </form> <script src="app.js"></script> </body> </html>
const baseElem = document.querySelector("#base"); const heightElem = document.querySelector("#height"); const calcButton = document.querySelector("#calcButton"); const areaElem = document.querySelector("#area"); if(calcButton) { calcButton.addEventListener('click', () => { let base = Number(baseElem.value); let height = Number(heightElem.value); let area = calcTriangleArea(base, height); areaElem.value = area; }); } const calcTriangleArea = (base, height) => { return base * height / 2; }
describe("Egy teszt", function() { it("Van egy kivétel", function() { expect(true).toBe(true); }); });
describe("A suite", function() { it("contains spec with an expectation", function() { expect(true).toBe(true); }); it("calcTriangleArea tesztélse", function() { let area = calcTriangleArea(30, 35); expect(525).toEqual(area); }); });

Indítás

Böngészőben

A teszt indítása:

npm test

A böngészőbe írjuk be:

http://localhost:8888

Parancssor

Futtatás parancssorból:

npx jasmine-browser-runner runSpecs

Ideiglenesen így is elindul egy böngésző, de le is áll.

Szükség lehet a chromedriver csomagra, ha az aktuális chrome driver régebbi:

npm install chromedriver

Esetek tiltása

xdescribe('Valami', () => { //valami kód });
describe('Valami', () => { xit('Más valami', () => { //kód }); });

createTd tesztje

function createTd() { let td = document.createElement('td'); let button = document.createElement('button'); button.textContent = 'valami'; td.append(button); return td; }
describe('createTd() metódus tesztje', () => { it('object típus ad vissza', () => { let actual = typeof createTd() == 'object'; expect(actual).toBe(true) }) it('A visszaadott elemben egy elem van', () => { let actual = createTd().childElementCount == 1 expect(actual).toBe(true) }) it('A visszadott elem tartalma', () => { let actual = createTd().textContent == 'valami' expect(actual).toBe(true) }) it('A gyemek button?', () => { let actual; createTd().childNodes.forEach(node => { actual = node.nodeName == 'BUTTON' }) expect(actual).toBe(true) }) });

Linkek

https://jasmine.github.io/setup/browser.html (2023)

https://jasmine.github.io/api/4.5/matchers (2023)

https://howtodoinjava.com/javascript/jasmine-unit-testing-tutorial/ (2023)

https://www.guru99.com/node-js-testing-jasmine.html (2023)