joomla! javascript testing
TRANSCRIPT
![Page 1: Joomla! JavaScript Testing](https://reader036.vdocuments.net/reader036/viewer/2022062400/58e7f5ad1a28abf13f8b498b/html5/thumbnails/1.jpg)
Joomla! JavaScript Testing
![Page 2: Joomla! JavaScript Testing](https://reader036.vdocuments.net/reader036/viewer/2022062400/58e7f5ad1a28abf13f8b498b/html5/thumbnails/2.jpg)
Hello!I am RuchirangaComputer Science and Engineering undergraduate at University of Moratuwa, Sri Lanka.
GSoC ‘16 student at Joomla!
You can find me at:@thanurw
![Page 3: Joomla! JavaScript Testing](https://reader036.vdocuments.net/reader036/viewer/2022062400/58e7f5ad1a28abf13f8b498b/html5/thumbnails/3.jpg)
Project mentors
Yves Hoppe
Ashan Fernando
![Page 4: Joomla! JavaScript Testing](https://reader036.vdocuments.net/reader036/viewer/2022062400/58e7f5ad1a28abf13f8b498b/html5/thumbnails/4.jpg)
1.What is Software Testing
In a broad sense
![Page 5: Joomla! JavaScript Testing](https://reader036.vdocuments.net/reader036/viewer/2022062400/58e7f5ad1a28abf13f8b498b/html5/thumbnails/5.jpg)
“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
![Page 6: Joomla! JavaScript Testing](https://reader036.vdocuments.net/reader036/viewer/2022062400/58e7f5ad1a28abf13f8b498b/html5/thumbnails/6.jpg)
Benefits
▷ Proof of functionality
▷ Confidence▷ Early fault
detection▷ Reduced rework &
cost▷ No “works for me,
dunno about you”
![Page 7: Joomla! JavaScript Testing](https://reader036.vdocuments.net/reader036/viewer/2022062400/58e7f5ad1a28abf13f8b498b/html5/thumbnails/7.jpg)
Drawbacks
▷ Cannot show absence of faults
▷ Setup overhead▷ Need to write
testable code▷ Covers only the
code
![Page 8: Joomla! JavaScript Testing](https://reader036.vdocuments.net/reader036/viewer/2022062400/58e7f5ad1a28abf13f8b498b/html5/thumbnails/8.jpg)
2.Testing in Joomla!
What has been there so far
![Page 9: Joomla! JavaScript Testing](https://reader036.vdocuments.net/reader036/viewer/2022062400/58e7f5ad1a28abf13f8b498b/html5/thumbnails/9.jpg)
Code distribution
![Page 10: Joomla! JavaScript Testing](https://reader036.vdocuments.net/reader036/viewer/2022062400/58e7f5ad1a28abf13f8b498b/html5/thumbnails/10.jpg)
joomla-cms/tests/unithttps://github.com/joomla/joomla-cms/tree/staging/tests/unit
![Page 11: Joomla! JavaScript Testing](https://reader036.vdocuments.net/reader036/viewer/2022062400/58e7f5ad1a28abf13f8b498b/html5/thumbnails/11.jpg)
Travis log7872 different tests and 10266 assertions so far
![Page 12: Joomla! JavaScript Testing](https://reader036.vdocuments.net/reader036/viewer/2022062400/58e7f5ad1a28abf13f8b498b/html5/thumbnails/12.jpg)
3.JavaScript Testing
Why bother?
![Page 13: Joomla! JavaScript Testing](https://reader036.vdocuments.net/reader036/viewer/2022062400/58e7f5ad1a28abf13f8b498b/html5/thumbnails/13.jpg)
A real world examplehttps://issues.joomla.org/tracker/joomla-cms/10259
![Page 14: Joomla! JavaScript Testing](https://reader036.vdocuments.net/reader036/viewer/2022062400/58e7f5ad1a28abf13f8b498b/html5/thumbnails/14.jpg)
![Page 15: Joomla! JavaScript Testing](https://reader036.vdocuments.net/reader036/viewer/2022062400/58e7f5ad1a28abf13f8b498b/html5/thumbnails/15.jpg)
Commit made in 2014Issue found in 2016!
![Page 16: Joomla! JavaScript Testing](https://reader036.vdocuments.net/reader036/viewer/2022062400/58e7f5ad1a28abf13f8b498b/html5/thumbnails/16.jpg)
“To err is human, to forgive is
divine
![Page 17: Joomla! JavaScript Testing](https://reader036.vdocuments.net/reader036/viewer/2022062400/58e7f5ad1a28abf13f8b498b/html5/thumbnails/17.jpg)
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!
![Page 18: Joomla! JavaScript Testing](https://reader036.vdocuments.net/reader036/viewer/2022062400/58e7f5ad1a28abf13f8b498b/html5/thumbnails/18.jpg)
4.Joomla! JavaScript
Testing ProjectWhat have we achieved so far?
![Page 19: Joomla! JavaScript Testing](https://reader036.vdocuments.net/reader036/viewer/2022062400/58e7f5ad1a28abf13f8b498b/html5/thumbnails/19.jpg)
Jasmine for the rescue!Jasmine as the testing framework
![Page 20: Joomla! JavaScript Testing](https://reader036.vdocuments.net/reader036/viewer/2022062400/58e7f5ad1a28abf13f8b498b/html5/thumbnails/20.jpg)
The Technology stack
▷Jasmine Framework▷Karma test runner▷Travis CI
![Page 21: Joomla! JavaScript Testing](https://reader036.vdocuments.net/reader036/viewer/2022062400/58e7f5ad1a28abf13f8b498b/html5/thumbnails/21.jpg)
And some more...
▷jQuery▷Jasmine jQuery▷RequireJS▷RequireJS Text▷Karma coverage reporter
![Page 22: Joomla! JavaScript Testing](https://reader036.vdocuments.net/reader036/viewer/2022062400/58e7f5ad1a28abf13f8b498b/html5/thumbnails/22.jpg)
Our process is easy
JS tests written using Jasmine
Run with Karma locally
Run on Travis
![Page 23: Joomla! JavaScript Testing](https://reader036.vdocuments.net/reader036/viewer/2022062400/58e7f5ad1a28abf13f8b498b/html5/thumbnails/23.jpg)
Tests written using Jasmine
![Page 24: Joomla! JavaScript Testing](https://reader036.vdocuments.net/reader036/viewer/2022062400/58e7f5ad1a28abf13f8b498b/html5/thumbnails/24.jpg)
Tests run locally using Karma
![Page 25: Joomla! JavaScript Testing](https://reader036.vdocuments.net/reader036/viewer/2022062400/58e7f5ad1a28abf13f8b498b/html5/thumbnails/25.jpg)
Tests run on Travis
![Page 26: Joomla! JavaScript Testing](https://reader036.vdocuments.net/reader036/viewer/2022062400/58e7f5ad1a28abf13f8b498b/html5/thumbnails/26.jpg)
![Page 27: Joomla! JavaScript Testing](https://reader036.vdocuments.net/reader036/viewer/2022062400/58e7f5ad1a28abf13f8b498b/html5/thumbnails/27.jpg)
Covered 10 libraries so farFound in joomla-cms/media/system/js/ directory
![Page 28: Joomla! JavaScript Testing](https://reader036.vdocuments.net/reader036/viewer/2022062400/58e7f5ad1a28abf13f8b498b/html5/thumbnails/28.jpg)
File hierarchykarma.conf.js
tests
javascript
caption
package.json
test-main.js
fixtures
spec-setup.js
spec.js
fixture.html
![Page 29: Joomla! JavaScript Testing](https://reader036.vdocuments.net/reader036/viewer/2022062400/58e7f5ad1a28abf13f8b498b/html5/thumbnails/29.jpg)
Inside
▷ Fixtures
▷ Spec-setup.js
▷ spec.js
![Page 30: Joomla! JavaScript Testing](https://reader036.vdocuments.net/reader036/viewer/2022062400/58e7f5ad1a28abf13f8b498b/html5/thumbnails/30.jpg)
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
![Page 31: Joomla! JavaScript Testing](https://reader036.vdocuments.net/reader036/viewer/2022062400/58e7f5ad1a28abf13f8b498b/html5/thumbnails/31.jpg)
![Page 32: Joomla! JavaScript Testing](https://reader036.vdocuments.net/reader036/viewer/2022062400/58e7f5ad1a28abf13f8b498b/html5/thumbnails/32.jpg)
5.Joomla! JavaScript
Testing The magic inside!
![Page 33: Joomla! JavaScript Testing](https://reader036.vdocuments.net/reader036/viewer/2022062400/58e7f5ad1a28abf13f8b498b/html5/thumbnails/33.jpg)
Karma configuration
▷Which files to be served, included in browser and watched
▷Configurations : plugins, reporters etc.
▷Single run or not
![Page 34: Joomla! JavaScript Testing](https://reader036.vdocuments.net/reader036/viewer/2022062400/58e7f5ad1a28abf13f8b498b/html5/thumbnails/34.jpg)
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
![Page 35: Joomla! JavaScript Testing](https://reader036.vdocuments.net/reader036/viewer/2022062400/58e7f5ad1a28abf13f8b498b/html5/thumbnails/35.jpg)
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
![Page 36: Joomla! JavaScript Testing](https://reader036.vdocuments.net/reader036/viewer/2022062400/58e7f5ad1a28abf13f8b498b/html5/thumbnails/36.jpg)
6.Let’s see a
demonstrationHow to write JavaScript tests
![Page 37: Joomla! JavaScript Testing](https://reader036.vdocuments.net/reader036/viewer/2022062400/58e7f5ad1a28abf13f8b498b/html5/thumbnails/37.jpg)
![Page 38: Joomla! JavaScript Testing](https://reader036.vdocuments.net/reader036/viewer/2022062400/58e7f5ad1a28abf13f8b498b/html5/thumbnails/38.jpg)
7.Documentation
https://docs.joomla.org/Running_Automated_Tests_for_the_Joomla_C
MS
![Page 39: Joomla! JavaScript Testing](https://reader036.vdocuments.net/reader036/viewer/2022062400/58e7f5ad1a28abf13f8b498b/html5/thumbnails/39.jpg)
7.Is your code testable?
How to write testable code
![Page 40: Joomla! JavaScript Testing](https://reader036.vdocuments.net/reader036/viewer/2022062400/58e7f5ad1a28abf13f8b498b/html5/thumbnails/40.jpg)
Is this testable?(function ($) {
var testable = false;
if (testable) {
$('#content').html("Go home");
} else {
$('#content').html("You are
drunk");
}
})(jQuery)
![Page 41: Joomla! JavaScript Testing](https://reader036.vdocuments.net/reader036/viewer/2022062400/58e7f5ad1a28abf13f8b498b/html5/thumbnails/41.jpg)
How about this?
$(document).ready(function ($)
{
$('#content').hide();
});
![Page 42: Joomla! JavaScript Testing](https://reader036.vdocuments.net/reader036/viewer/2022062400/58e7f5ad1a28abf13f8b498b/html5/thumbnails/42.jpg)
8.An open invitation
For all of you
![Page 43: Joomla! JavaScript Testing](https://reader036.vdocuments.net/reader036/viewer/2022062400/58e7f5ad1a28abf13f8b498b/html5/thumbnails/43.jpg)
![Page 44: Joomla! JavaScript Testing](https://reader036.vdocuments.net/reader036/viewer/2022062400/58e7f5ad1a28abf13f8b498b/html5/thumbnails/44.jpg)
Thanks!Any questions?You can find me at:@[email protected]