Tartalomjegyzék

< Jasmine

Jasmine-browser-runner kezdés

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.

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

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

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>
</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>
src/app.js
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;
}
test/app.spec.js
describe("Egy teszt", function() {
    it("Van egy kivétel", function() {
      expect(true).toBe(true);
    });
  });
 
test/app.spec.js
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:

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

src/app.js
function createTd() {
    let td = document.createElement('td');
    let button = document.createElement('button');
    button.textContent = 'valami';
    td.append(button);
    return td;
}
test/app.spec.js
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