JAK TESTOWAĆ CZYSTY KOD JAVASCRIPT?

JAK TESTOWAĆ CZYSTY KOD
JAVASCRIPT?
KILKA SŁÓW O TYM JAK UŁATWIĆ SOBIE PRACĘ

CZEŚĆ! NAZYWAM SIĘ PIOTR NALEPA
Jak testować czysty kod JavaScript? Kilka słów o tym jak ułatwić sobie pracę. - Piotr Nalepa | Meet.js Katowice - 10.02.2016 2

• Na co dzień pracuję w eZ Systems Polska,
• Piszę o tym co robię na swoim blogu,
• Zdarza mi się występować na konferencjach,
• W wolnych chwilach gram w piłkę nożną jako bramkarz.

DLACZEGO TESTUJEMY KOD JS?
4Jak testować czysty kod JavaScript? Kilka słów o tym jak ułatwić sobie pracę. - Piotr Nalepa | Meet.js Katowice - 10.02.2016

Zyskujemy pewność, że nasz kod działa
zgodnie z oczekiwaniami.

Sprawdzamy jak się zachowa kod,
gdy wystąpią błędy.

Mamy zabezpieczenie na przyszłość.

Zwiększamy jakość kodu.

CO SIĘ DZIEJE GDY KODU NIE TESTUJEMY?

Mamy więcej czasu
na tworzenie nowych rzeczy!

Nie robimy nudnych rzeczy!

Wszystko fajnie, do czasu …

Aż nowe rzeczy zaczną psuć stare

Aż kod zacznie być coraz trudniejszy do
utrzymania

Coraz więcej czasu potrzebujemy na
rozbudowanie kodu o nowe rzeczy

JAK NALEŻY TESTOWAĆ KOD?

Dokładnie

Nie oszukujemy siebie z powodu lenistwa

Analizujemy to co napisaliśmy

Usuwamy zbędny kod

POLECANA STRUKTURA KATALOGÓW
Z TESTAMI

[główny-folder]
- plugin.js
- test/
- plugin-test.html
- plugin-tests.js

PRZYKŁADOWY KOD JS – PLUGIN.JS

window.Plugin = function (customParams) {
[...]
elements = [].slice.call(document.querySelectorAll(params.selector));
elements.forEach(function (element) {
element.addEventListener('click', clickCallback, false);
element.classList.add(CLASS_PLUGIN_READY);
});
[...]
};

W CZYM NAPISZEMY PIERWSZY TEST?

Mocha.js + Chai.js

SZABLON TESTU – PLUGIN-TEST.HTML

<div id="mocha"></div>
<div id="messages"></div>
<div id="fixtures"></div>
<script src="../node_modules/mocha/mocha.js"></script>
<script src="../node_modules/chai/chai.js"></script>
<script src="../node_modules/chai-dom/chai-dom.js"></script>
<script src="../plugin.js"></script>
<script>
mocha.setup('bdd');
mocha.reporter('html');
</script>
<script src="plugin-tests.js"></script>
<script>mocha.run();</script>

PLIK Z TESTAMI – PLUGIN-TESTS.JS

describe('Plugin', function () {
describe('Run with default settings', function () {
beforeEach(function () {
createPluginContainer();
new Plugin();
});
afterEach(destroyPlugin);
it('Should implement Plugin features on element', function () {
});
});
});

JAK TESTOWAĆ KOD?

Porównujemy wyniki działania kodu
z oczekiwanymi rezultatami

expect(pluginContainer).to.contain(SELECTOR_PLUGIN);
expect(pluginContainer.querySelectorAll(SELECTOR_PLUGIN)).to.have.length(1);

http://chaijs.com/api/bdd/

WYNIKI TESTÓW - PRZEGLĄDARKA

WYNIKI TESTÓW - TERMINAL

POKRYCIE KODU TESTAMI

Informacja na temat ilości kodu,
który został przetestowany

39
To tylko wskazówka a nie wyznacznik jakości
Jak testować czysty kod JavaScript? Kilka słów o tym jak ułatwić sobie pracę. - Piotr Nalepa | Meet.js Katowice - 10.02.2016

40
Łatwo można oszukać wskaźnik
pokrycia kodu testami
Jak testować czysty kod JavaScript? Kilka słów o tym jak ułatwić sobie pracę. - Piotr Nalepa | Meet.js Katowice - 10.02.2016

WYNIKI TESTÓW – POKRYCIE KODU TESTAMI

PORADA #1
TESTOWANIE ZACHOWANIA KODU
PO ZAKOŃCZENIU ANIMACJI

it('Should end of transition/animation', function (done) {
pluginContainer.addEventListener('transitionend', function () { // ewentualnie
'animationend'
[...]
done();
});
}

PORADA #2
ODPALANIE EVENTÓW NA OBIEKTACH DOM

it('Should make action after clicking on an element' , function (done) {
var element = document.querySelector(SELECTOR_PLUGIN),
event = document.createEvent('MouseEvents');
event.initEvent('click', false, true);
element.dispatchEvent(event);
[...]
}

PORADA #3
PRACA Z PHANTOMJS

• Prefixowane style CSS (-webkit-[nazwa_własności]),
• Prefixowane eventy JS (webkitTransitionEnd),
• Stary silnik JS (brak bind()).

WIĘCEJ INFORMACJI ZNAJDZIESZ NA:
BLOG.PIOTRNALEPA.PL

DZIĘKUJĘ ZA UWAGĘ
@sunpietro
github.com/sunpietro

JAK TESTOWAĆ CZYSTY KOD JAVASCRIPT?

Recommended

More Related Content

Similar to JAK TESTOWAĆ CZYSTY KOD JAVASCRIPT? (20)

More from Piotr Nalepa (7)

JAK TESTOWAĆ CZYSTY KOD JAVASCRIPT?