Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

JAK TESTOWAĆ CZYSTY KOD JAVASCRIPT?

1,065 views

Published on

Prezentacja dla osób, które chciałyby zacząć swoją przygodę z testowaniem kodu JS. W prezentacji omówiłem podejście do testowania oraz przekazałem informację jakich narzędzi można użyć w testowaniu kodu oraz pokazałem jak wyglądają szablony testów oraz scenariusze testowe

Published in: Software
  • Be the first to comment

JAK TESTOWAĆ CZYSTY KOD JAVASCRIPT?

  1. 1. JAK TESTOWAĆ CZYSTY KOD JAVASCRIPT? KILKA SŁÓW O TYM JAK UŁATWIĆ SOBIE PRACĘ
  2. 2. 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
  3. 3. • 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. Jak testować czysty kod JavaScript? Kilka słów o tym jak ułatwić sobie pracę. - Piotr Nalepa | Meet.js Katowice - 10.02.2016 3
  4. 4. 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
  5. 5. Zyskujemy pewność, że nasz kod działa zgodnie z oczekiwaniami. 5Jak testować czysty kod JavaScript? Kilka słów o tym jak ułatwić sobie pracę. - Piotr Nalepa | Meet.js Katowice - 10.02.2016
  6. 6. Sprawdzamy jak się zachowa kod, gdy wystąpią błędy. 6Jak testować czysty kod JavaScript? Kilka słów o tym jak ułatwić sobie pracę. - Piotr Nalepa | Meet.js Katowice - 10.02.2016
  7. 7. Mamy zabezpieczenie na przyszłość. 7Jak testować czysty kod JavaScript? Kilka słów o tym jak ułatwić sobie pracę. - Piotr Nalepa | Meet.js Katowice - 10.02.2016
  8. 8. Zwiększamy jakość kodu. 8Jak testować czysty kod JavaScript? Kilka słów o tym jak ułatwić sobie pracę. - Piotr Nalepa | Meet.js Katowice - 10.02.2016
  9. 9. CO SIĘ DZIEJE GDY KODU NIE TESTUJEMY? 9Jak testować czysty kod JavaScript? Kilka słów o tym jak ułatwić sobie pracę. - Piotr Nalepa | Meet.js Katowice - 10.02.2016
  10. 10. Mamy więcej czasu na tworzenie nowych rzeczy! 10Jak testować czysty kod JavaScript? Kilka słów o tym jak ułatwić sobie pracę. - Piotr Nalepa | Meet.js Katowice - 10.02.2016
  11. 11. Nie robimy nudnych rzeczy! 11Jak testować czysty kod JavaScript? Kilka słów o tym jak ułatwić sobie pracę. - Piotr Nalepa | Meet.js Katowice - 10.02.2016
  12. 12. Wszystko fajnie, do czasu … 12Jak testować czysty kod JavaScript? Kilka słów o tym jak ułatwić sobie pracę. - Piotr Nalepa | Meet.js Katowice - 10.02.2016
  13. 13. Aż nowe rzeczy zaczną psuć stare 13Jak testować czysty kod JavaScript? Kilka słów o tym jak ułatwić sobie pracę. - Piotr Nalepa | Meet.js Katowice - 10.02.2016
  14. 14. Aż kod zacznie być coraz trudniejszy do utrzymania 14Jak testować czysty kod JavaScript? Kilka słów o tym jak ułatwić sobie pracę. - Piotr Nalepa | Meet.js Katowice - 10.02.2016
  15. 15. Coraz więcej czasu potrzebujemy na rozbudowanie kodu o nowe rzeczy 15Jak testować czysty kod JavaScript? Kilka słów o tym jak ułatwić sobie pracę. - Piotr Nalepa | Meet.js Katowice - 10.02.2016
  16. 16. JAK NALEŻY TESTOWAĆ KOD? 16Jak testować czysty kod JavaScript? Kilka słów o tym jak ułatwić sobie pracę. - Piotr Nalepa | Meet.js Katowice - 10.02.2016
  17. 17. Dokładnie 17Jak testować czysty kod JavaScript? Kilka słów o tym jak ułatwić sobie pracę. - Piotr Nalepa | Meet.js Katowice - 10.02.2016
  18. 18. Nie oszukujemy siebie z powodu lenistwa 18Jak testować czysty kod JavaScript? Kilka słów o tym jak ułatwić sobie pracę. - Piotr Nalepa | Meet.js Katowice - 10.02.2016
  19. 19. Analizujemy to co napisaliśmy 19Jak testować czysty kod JavaScript? Kilka słów o tym jak ułatwić sobie pracę. - Piotr Nalepa | Meet.js Katowice - 10.02.2016
  20. 20. Usuwamy zbędny kod 20Jak testować czysty kod JavaScript? Kilka słów o tym jak ułatwić sobie pracę. - Piotr Nalepa | Meet.js Katowice - 10.02.2016
  21. 21. POLECANA STRUKTURA KATALOGÓW Z TESTAMI Jak testować czysty kod JavaScript? Kilka słów o tym jak ułatwić sobie pracę. - Piotr Nalepa | Meet.js Katowice - 10.02.2016 21
  22. 22. [główny-folder] - plugin.js - test/ - plugin-test.html - plugin-tests.js Jak testować czysty kod JavaScript? Kilka słów o tym jak ułatwić sobie pracę. - Piotr Nalepa | Meet.js Katowice - 10.02.2016 22
  23. 23. PRZYKŁADOWY KOD JS – PLUGIN.JS 23Jak testować czysty kod JavaScript? Kilka słów o tym jak ułatwić sobie pracę. - Piotr Nalepa | Meet.js Katowice - 10.02.2016
  24. 24. 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); }); [...] }; 24Jak testować czysty kod JavaScript? Kilka słów o tym jak ułatwić sobie pracę. - Piotr Nalepa | Meet.js Katowice - 10.02.2016
  25. 25. W CZYM NAPISZEMY PIERWSZY TEST? Jak testować czysty kod JavaScript? Kilka słów o tym jak ułatwić sobie pracę. - Piotr Nalepa | Meet.js Katowice - 10.02.2016 25
  26. 26. Mocha.js + Chai.js Jak testować czysty kod JavaScript? Kilka słów o tym jak ułatwić sobie pracę. - Piotr Nalepa | Meet.js Katowice - 10.02.2016 26
  27. 27. SZABLON TESTU – PLUGIN-TEST.HTML Jak testować czysty kod JavaScript? Kilka słów o tym jak ułatwić sobie pracę. - Piotr Nalepa | Meet.js Katowice - 10.02.2016 27
  28. 28. <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> Jak testować czysty kod JavaScript? Kilka słów o tym jak ułatwić sobie pracę. - Piotr Nalepa | Meet.js Katowice - 10.02.2016 28
  29. 29. PLIK Z TESTAMI – PLUGIN-TESTS.JS Jak testować czysty kod JavaScript? Kilka słów o tym jak ułatwić sobie pracę. - Piotr Nalepa | Meet.js Katowice - 10.02.2016 29
  30. 30. 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ć czysty kod JavaScript? Kilka słów o tym jak ułatwić sobie pracę. - Piotr Nalepa | Meet.js Katowice - 10.02.2016 30
  31. 31. JAK TESTOWAĆ KOD? Jak testować czysty kod JavaScript? Kilka słów o tym jak ułatwić sobie pracę. - Piotr Nalepa | Meet.js Katowice - 10.02.2016 31
  32. 32. Porównujemy wyniki działania kodu z oczekiwanymi rezultatami Jak testować czysty kod JavaScript? Kilka słów o tym jak ułatwić sobie pracę. - Piotr Nalepa | Meet.js Katowice - 10.02.2016 32
  33. 33. expect(pluginContainer).to.contain(SELECTOR_PLUGIN); expect(pluginContainer.querySelectorAll(SELECTOR_PLUGIN)).to.have.length(1); Jak testować czysty kod JavaScript? Kilka słów o tym jak ułatwić sobie pracę. - Piotr Nalepa | Meet.js Katowice - 10.02.2016 33
  34. 34. http://chaijs.com/api/bdd/ Jak testować czysty kod JavaScript? Kilka słów o tym jak ułatwić sobie pracę. - Piotr Nalepa | Meet.js Katowice - 10.02.2016 34
  35. 35. WYNIKI TESTÓW - PRZEGLĄDARKA 35Jak testować czysty kod JavaScript? Kilka słów o tym jak ułatwić sobie pracę. - Piotr Nalepa | Meet.js Katowice - 10.02.2016
  36. 36. WYNIKI TESTÓW - TERMINAL 36Jak testować czysty kod JavaScript? Kilka słów o tym jak ułatwić sobie pracę. - Piotr Nalepa | Meet.js Katowice - 10.02.2016
  37. 37. POKRYCIE KODU TESTAMI 37Jak testować czysty kod JavaScript? Kilka słów o tym jak ułatwić sobie pracę. - Piotr Nalepa | Meet.js Katowice - 10.02.2016
  38. 38. Informacja na temat ilości kodu, który został przetestowany 38Jak testować czysty kod JavaScript? Kilka słów o tym jak ułatwić sobie pracę. - Piotr Nalepa | Meet.js Katowice - 10.02.2016
  39. 39. 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. 40. 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
  41. 41. WYNIKI TESTÓW – POKRYCIE KODU TESTAMI 41Jak testować czysty kod JavaScript? Kilka słów o tym jak ułatwić sobie pracę. - Piotr Nalepa | Meet.js Katowice - 10.02.2016
  42. 42. PORADA #1 TESTOWANIE ZACHOWANIA KODU PO ZAKOŃCZENIU ANIMACJI 42Jak testować czysty kod JavaScript? Kilka słów o tym jak ułatwić sobie pracę. - Piotr Nalepa | Meet.js Katowice - 10.02.2016
  43. 43. it('Should end of transition/animation', function (done) { pluginContainer.addEventListener('transitionend', function () { // ewentualnie 'animationend' [...] done(); }); } Jak testować czysty kod JavaScript? Kilka słów o tym jak ułatwić sobie pracę. - Piotr Nalepa | Meet.js Katowice - 10.02.2016 43
  44. 44. PORADA #2 ODPALANIE EVENTÓW NA OBIEKTACH DOM 44Jak testować czysty kod JavaScript? Kilka słów o tym jak ułatwić sobie pracę. - Piotr Nalepa | Meet.js Katowice - 10.02.2016
  45. 45. 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); [...] } Jak testować czysty kod JavaScript? Kilka słów o tym jak ułatwić sobie pracę. - Piotr Nalepa | Meet.js Katowice - 10.02.2016 45
  46. 46. PORADA #3 PRACA Z PHANTOMJS 46Jak testować czysty kod JavaScript? Kilka słów o tym jak ułatwić sobie pracę. - Piotr Nalepa | Meet.js Katowice - 10.02.2016
  47. 47. • Prefixowane style CSS (-webkit-[nazwa_własności]), • Prefixowane eventy JS (webkitTransitionEnd), • Stary silnik JS (brak bind()). Jak testować czysty kod JavaScript? Kilka słów o tym jak ułatwić sobie pracę. - Piotr Nalepa | Meet.js Katowice - 10.02.2016 47
  48. 48. WIĘCEJ INFORMACJI ZNAJDZIESZ NA: BLOG.PIOTRNALEPA.PL 48Jak testować czysty kod JavaScript? Kilka słów o tym jak ułatwić sobie pracę. - Piotr Nalepa | Meet.js Katowice - 10.02.2016
  49. 49. DZIĘKUJĘ ZA UWAGĘ Jak testować czysty kod JavaScript? Kilka słów o tym jak ułatwić sobie pracę. - Piotr Nalepa | Meet.js Katowice - 10.02.2016 49 @sunpietro github.com/sunpietro

×