Joomla! JavaScript Testing
- 2. Hello! I am Ruchiranga Computer Science and Engineering undergraduate at University of Moratuwa, Sri Lanka. GSoC ‘16 student at Joomla! You can find me at: @thanurw
- 3. Project mentors Yves Hoppe Ashan Fernando
- 4. 1. What is Software Testing In a broad sense
- 5. “Testing is the process of evaluating a system or its component(s) with the intent to find whether it satisfies the specified requirements or not. Source: www.tutorialspoint.com/software_testing
- 6. Benefits ▷ Proof of functionality ▷ Confidence ▷ Early fault detection ▷ Reduced rework & cost ▷ No “works for me, dunno about you”
- 7. Drawbacks ▷ Cannot show absence of faults ▷ Setup overhead ▷ Need to write testable code ▷ Covers only the code
- 8. 2. Testing in Joomla! What has been there so far
- 11. Travis log 7872 different tests and 10266 assertions so far
- 13. A real world example https://issues.joomla.org/tracker/joomla-cms/10259
- 15. Commit made in 2014 Issue found in 2016!
- 16. “To err is human, to forgive is divine
- 17. IF we had JS tests ▷The issue would have been found in 2014 ▷The issue would have been solved in 2014 ▷This issue post will not appear in 2016 ▷A lot of time and effort could have been saved!
- 18. 4. Joomla! JavaScript Testing Project What have we achieved so far?
- 19. Jasmine for the rescue! Jasmine as the testing framework
- 20. The Technology stack ▷Jasmine Framework ▷Karma test runner ▷Travis CI
- 21. And some more... ▷jQuery ▷Jasmine jQuery ▷RequireJS ▷RequireJS Text ▷Karma coverage reporter
- 22. Our process is easy JS tests written using Jasmine Run with Karma locally Run on Travis
- 23. Tests written using Jasmine
- 24. Tests run locally using Karma
- 25. Tests run on Travis
- 27. Covered 10 libraries so far Found in joomla-cms/media/system/js/ directory
- 29. Inside ▷ Fixtures ▷ Spec-setup.js ▷ spec.js
- 30. Running the tests locally ▷Clone the repository ▷Open a CMD window ▷Navigate to tests/javascript ▷Execute command npm install ▷Execute command npm test Need to have NodeJS installed
- 32. 5. Joomla! JavaScript Testing The magic inside!
- 33. Karma configuration ▷Which files to be served, included in browser and watched ▷Configurations : plugins, reporters etc. ▷Single run or not
- 34. More on what happens inside... ▷Karma loads all specified files, delegates specific inclusions to require.js (test-main.js) ▷Require.js dynamically handle dependencies; both code & fixtures
- 35. Require.js configuration ▷test-main.js found in tests/javascript ▷Allow specification of aliases for different paths and files ▷Allows specification of dependencies among them
- 36. 6. Let’s see a demonstration How to write JavaScript tests
- 39. 7. Is your code testable? How to write testable code
- 40. Is this testable? (function ($) { var testable = false; if (testable) { $('#content').html("Go home"); } else { $('#content').html("You are drunk"); } })(jQuery)
- 41. How about this? $(document).ready(function ($) { $('#content').hide(); });
- 42. 8. An open invitation For all of you
- 44. Thanks! Any questions? You can find me at: @thanurw [email protected]
Editor's Notes
- #8: Can never prove its fault proof. There is always the possibility that we missed a test case Research on suitable testing framework and writing the first test case with the setup and all that takes some time Divided focus. Cannot only focus on business logic. Code should be testable. Code is not the only thing that is responsible for the quality of a product. There is the context and the process as well.
- #10: Nearly 7% js
- #13: Take content from the magazine plus general advantages of testing
- #17: The famous saying.. The forgive part does not really apply here. But the point is it is human nature to make mistakes. Its really hard to make sure the we have considered every possible way our actions can influence something else. Its natural that you break something unknowingly
- #19: About the setup - show process diagram Show file structure Some archi diag Screenshots if any Run and show the local tests execution Code got merged -- the meme Travis setup Travis sceeen shots
- #20: The first step of the project - research on the possible candidates
- #29: Root contains karma.conf.js Rest found in tests/javascript Each folder inside, represents a JS library Package.json and test-main.js on the same level
- #33: In detail explaination of all the files and how things are put together
- #37: The demo Clone new repo Write a js code - have something written Write new tests Push and show travis running