Google Summer of Code 2016 JavaScript Testing project (joomla#11420)

* Initial test environment setup with Jasmine, Karma and RequireJS

* Seperated test setup code from test logic

* Configured .travis.yml to run Karma

* Fixed typo in .travis.yml

* changes to .travis.yml

* Added karma requirejs module

* Removed unnecessary code in travis.yml

* Fixed missing code is travis.yml

* Removed 2 unused image files

* Improved code standards

* Modified travis.yml

* Issue 1 Cleaned the mess with changes bunch of to unrelated files

* Issue 1 Added newline at end of file

* Issue 4 Improved JCaption JavaScript tests

* New coeverage reporter plugin test with Travis

* Issue 1 Added karma-coerage reporter and configured it to display coverage on console

* Issue 1 Added and configured karma-verbose-reporter plugin

* Issue 1 Fixing verbose reporter config for travis

* Issue 1 removed redundant javascript dir and added requirejs/text plugin to load fixtures

* Issue 4 Improved code with suggestions made in the code review

* Issue 1 Added version for requirejs text plugin

* Issue 1 converted space indentations to tabs

* Issue 1 Fixed indentation in package.json

* Issue 1 Fixed version issue in require text

* Issue 1 Fixed version issue in require text

* Issue 1 Fixed version issue in require text

* Issue 4 Improved code standards and jquer selector efficiency

* Issue 1 Tersting version issue with text plugin on travis

* Issue 1 Tersting version issue with text plugin on travis

* Issue 1 Tersting version issue with text plugin on travis

* Issue 1 Removed spec folder

* Corejs tests (joomla#15)

Tests for core.js

* Tests for permissions.js (#13)

* Test suite for permissions.js
* Added karma-jasmine-ajax plugin

* Added a container div for fixtures representing library name (#11)

* Added a container div for fixtures representing the library name

* CS - Removed an extra new line

* Permissions.js tests

Test for permissions

* Repeatable.js test suite

* Improvements to JCaption tests

* README.md update

* Modified readme file
* Made running tests easier by adding configuration for tests to run on npm test

* Core js Improvements

* Issue 9 Added jasmine spies and improved code
* Issue 9 Fixed an indentation issue

* Demo video on Youtube 

* Inserted the video demonstration link to the readme

* Issue 5 Added spies and made code improvements (joomla#31)

* Issue 12 Improved code (joomla#34)

* Repeatable.js Improvements (joomla#35)

* Run Travis JavaScript tests on separated Matrix Build (joomla#39)

* Only run Travis tests on PHP 7

* Fix base path issue

* Added own matrix tests for JavaScript

* Added own matrix tests for JavaScript

* Added own matrix tests for JavaScript

* Added own matrix tests for JavaScript

* Added own matrix tests for JavaScript

* Added own matrix tests for JavaScript

* Added own matrix tests for JavaScript

* Added own matrix tests for JavaScript

* Reverted README.md

* Synced README.md to the new version

* Synced README.md with new version

* Fixed indentations

* Synced README.md with 3.6 version

* Fixed indentations

* Fixed indentations
* Added newline at the end of travis-tests.sh

* Added missing sudo:false in .travis.yml

.gitignore

@@ -19,6 +19,9 @@
 # Test Related Files #
 /phpunit.xml
 
+# Node modules #
+node_modules/
+
 # phpDocumentor Logs #
 phpdoc-*
 

.travis.yml

@@ -6,13 +6,17 @@ language: php
 env:
   global:
     - RUN_PHPCS="no"
+    - RUN_JAVASCRIPT_TESTS="no"
     - INSTALL_MEMCACHE="yes"
     - INSTALL_MEMCACHED="yes"
     - INSTALL_REDIS="yes"
 
 matrix:
   fast_finish: true
   include:
+    - node_js: 6.1
+      sudo: true
+      env: RUN_JAVASCRIPT_TESTS="yes"
     - php: 5.3
       env: INSTALL_APC="yes"
     - php: 5.4
@@ -50,6 +54,8 @@ services:
   - redis-server
 
 before_script:
+  # JavaScript tests
+  - if [[ $RUN_JAVASCRIPT_TESTS == "yes" ]]; then export DISPLAY=:99.0; bash tests/javascript/travis-tests.sh $PWD; fi
   # Make sure all dev dependencies are installed
   - composer install
   # Set up databases for testing
@@ -74,6 +80,7 @@ before_script:
 script:
   - libraries/vendor/bin/phpunit --configuration travisci-phpunit.xml
   - if [[ $RUN_PHPCS == "yes" ]]; then libraries/vendor/bin/phpcs --report=full --extensions=php -p --standard=build/phpcs/Joomla .; fi
+  - if [[ $RUN_JAVASCRIPT_TESTS == "yes" ]]; then tests/javascript/node_modules/karma/bin/karma start karma.conf.js --single-run ; fi
 
 branches:
   except:

karma.conf.js

@@ -0,0 +1,84 @@
+// Karma configuration
+
+module.exports = function (config) {
+	config.set({
+
+		// base path that will be used to resolve all patterns (eg. files, exclude)
+		basePath: '',
+
+		// frameworks to use
+		// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
+		frameworks: ['jasmine-ajax', 'jasmine', 'requirejs'],
+
+		// list of files / patterns to load in the browser
+		files: [
+			{pattern: 'tests/javascript/node_modules/jquery/dist/jquery.min.js', included: false},
+			{pattern: 'tests/javascript/node_modules/jasmine-jquery/lib/jasmine-jquery.js', included: false},
+			{pattern: 'tests/javascript/node_modules/text/text.js', included: false},
+			{pattern: 'media/jui/js/bootstrap.min.js', included: false},
+			{pattern: 'media/system/js/*.js', included: false},
+			{pattern: 'tests/javascript/**/fixture.html', included: false},
+			{pattern: 'tests/javascript/**/spec.js', included: false},
+			{pattern: 'tests/javascript/**/spec-setup.js', included: false},
+			{pattern: 'images/*.png', included: false},
+
+			'tests/javascript/test-main.js'
+		],
+
+		// list of files to exclude
+		exclude: [
+			'media/system/js/*uncompressed.js'
+		],
+
+		// preprocess matching files before serving them to the browser
+		// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
+		preprocessors: {
+			'**/system/js/*!(uncompressed).js': ['coverage']
+		},
+
+		// coverage reporter configuration
+		coverageReporter: {
+			type : 'text'
+		},
+
+		// test results reporter to use
+		// possible values: 'dots', 'progress'
+		// available reporters: https://npmjs.org/browse/keyword/karma-reporter
+		reporters: ['verbose', 'coverage'],
+
+		// web server port
+		port: 9876,
+
+		// enable / disable colors in the output (reporters and logs)
+		colors: true,
+
+		// level of logging
+		// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
+		logLevel: config.LOG_INFO,
+
+		// enable / disable watching file and executing tests whenever any file changes
+		autoWatch: true,
+
+		// start these browsers
+		// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
+		browsers: ['Firefox'],
+
+		// Continuous Integration mode
+		// if true, Karma captures browsers, runs the tests and exits
+		singleRun: false,
+
+		// list of plugins
+		plugins: [
+			'karma-jasmine',
+			'karma-jasmine-ajax',
+			'karma-firefox-launcher',
+			'karma-coverage',
+			'karma-requirejs',
+			'karma-verbose-reporter'
+		],
+
+		// Concurrency level
+		// how many browser should be started simultaneous
+		concurrency: Infinity
+	});
+};

tests/javascript/caption/fixtures/fixture.html

@@ -0,0 +1,22 @@
+<div id="captionjs">
+	<div id="single">
+		<img src="base/images/joomla_black.png" class="test" title="Joomla Title 1" />
+	</div>
+	<hr/>
+	<div id="multiple">
+		<img src="base/images/joomla_black.png" class="test" title="Joomla Title 1" />
+		<img src="base/images/powered_by.png" class="test" title="Joomla Title 2" align="right" width="100"/>
+	</div>
+	<hr/>
+	<div id="empty">
+		<img id="empty-title" src="base/images/joomla_black.png" class="test" title="" />
+	</div>
+	<hr/>
+	<div id="options">
+		<img id="no-options" src="base/images/joomla_black.png" class="test" title="Joomla Title 1"/>
+		<img id="width-attr" src="base/images/joomla_black.png" class="test" title="Joomla Title 2" width="100"/>
+		<img id="width-style" src="base/images/joomla_black.png" class="test" title="Joomla Title 3" style="width: 90px"/>
+		<img id="align-attr" src="base/images/joomla_black.png" class="test" title="Joomla Title 4" align="right"/>
+		<img id="align-style" src="base/images/joomla_black.png" class="test" title="Joomla Title 5" style="float: right"/>
+	</div>
+</div>

tests/javascript/caption/spec-setup.js

@@ -0,0 +1,17 @@
+/**
+ * @copyright   Copyright (C) 2005 - 2016 Open Source Matters, Inc. All rights reserved.
+ * @license     GNU General Public License version 2 or later; see LICENSE.txt
+ * @package     Joomla
+ * @subpackage  JavaScript Tests
+ * @since       3.6
+ * @version     1.0.0
+ */
+
+define(['jquery', 'text!testsRoot/caption/fixtures/fixture.html', 'libs/caption'], function ($, fixture) {
+	$('body').append(fixture);
+
+	new JCaption('#single img.test');
+	new JCaption('#multiple img.test');
+	new JCaption('#empty img.test');
+	new JCaption('#options img.test');
+});

tests/javascript/caption/spec.js

@@ -0,0 +1,68 @@
+/**
+ * @copyright   Copyright (C) 2005 - 2016 Open Source Matters, Inc. All rights reserved.
+ * @license     GNU General Public License version 2 or later; see LICENSE.txt
+ * @package     Joomla
+ * @subpackage  JavaScript Tests
+ * @since       3.6
+ * @version     1.0.0
+ */
+
+define(['jquery', 'testsRoot/caption/spec-setup', 'jasmineJquery'], function ($) {
+
+	describe('JCaption applied to single image', function () {
+		it('Should have caption as "Joomla Title 1" under image', function () {
+			expect($('#single').find('p')).toHaveText('Joomla Title 1');
+		});
+	});
+
+	describe('JCaption applied for multiple images', function () {
+		it('Should have caption "Joomla Title 1" under image 1', function () {
+			expect($('#multiple').find('p').first()).toHaveText('Joomla Title 1');
+		});
+
+		it('Should have caption as "Joomla Title 2" under image 2', function() {
+			expect($('#multiple').find('p').last()).toHaveText('Joomla Title 2');
+		});
+	});
+
+	describe('JCaption with empty title attribute value', function () {
+		it('Should not have a <p> element inside the image container', function () {
+			expect($('#empty')).not.toContainElement('p');
+		});
+	});
+
+	describe('JCaption with no additional options', function () {
+		var $element = $('img#no-options');
+		it('Should have container CSS {float: none}', function () {
+			expect($element.parent()).toHaveCss({
+				float: 'none'
+			});
+		});
+	});
+
+	describe('JCaption with additional options', function () {
+		it('Should have 2 elements with class right', function () {
+			expect($('#options').find('.right').length).toEqual(2);
+		});
+
+		it('Should have container width as 100 when element width attribute is set to 100', function () {
+			expect($('img#width-attr').parent().width()).toEqual(100);
+		});
+
+		it('Should have container width as 90 when element style is set to width: 90px', function () {
+			expect($('img#width-style').parent().width()).toEqual(90);
+		});
+
+		it('Should have float: right in container CSS when element attribute align is set to right', function () {
+			expect($('img#align-attr').parent()).toHaveCss({
+				float: 'right'
+			});
+		});
+
+		it('Should have float: right in container CSS when element style is set to float: right', function () {
+			expect($('img#align-style').parent()).toHaveCss({
+				float: 'right'
+			});
+		});
+	});
+});

tests/javascript/core/fixtures/fixture.html

@@ -0,0 +1,39 @@
+<div id="corejs">
+	<div id="submitform">
+		<form id="adminForm" onsubmit="return false"></form>
+	</div>
+	<div id="replace-tokens">
+		<input class="replace-tokens-input" type="hidden" value="1" name="123456789123456789123456789EDBCA">
+		<input class="replace-tokens-input" type="hidden" value="1" name="123456789123456789123456789EDBCA">
+		<input class="replace-tokens-input" id="invalid-type" type="submit" value="1" name="123456789123456789123456789EDBCA">
+		<input class="replace-tokens-input" id="invalid-value" type="hidden" value="0" name="123456789123456789123456789EDBCA">
+		<input class="replace-tokens-input" id="invalid-name" type="hidden" value="1" name="123">
+	</div>
+	<div id="check-all">
+		<input type="checkbox" id="cb-no-form" checked>
+		<form id="check-all-form">
+			<input type="checkbox" class="checked" id="cb0" checked>
+			<input type="checkbox" class="unchecked" id="cb1">
+			<input type="checkbox" class="unchecked" id="cb2">
+			<input type="checkbox" class="unchecked" id="no-cb3">
+		</form>
+		<form id="check-all-stub-form">
+			<input type="checkbox" id="stub-check-test-1" checked>
+			<input type="checkbox" id="stub-check-test-2">
+		</form>
+	</div>
+	<div id="render-messages-remove-messages">
+		<div id="system-message-container">
+		</div>
+	</div>
+	<div id="ischecked">
+		<form id="ischecked-test-form">
+			<input type="checkbox" id="check-all-box" name="checkall-toggle">
+			<input type="checkbox">
+		</form>
+	</div>
+	<div id="table-ordering">
+		<form id="table-ordering-test-form">
+		</form>
+	</div>
+</div>

tests/javascript/core/spec-setup.js

@@ -0,0 +1,12 @@
+/**
+ * @copyright   Copyright (C) 2005 - 2016 Open Source Matters, Inc. All rights reserved.
+ * @license     GNU General Public License version 2 or later; see LICENSE.txt
+ * @package     Joomla
+ * @subpackage  JavaScript Tests
+ * @since       3.6
+ * @version     1.0.0
+ */
+
+define(['jquery', 'text!testsRoot/core/fixtures/fixture.html', 'libs/core'], function ($, fixture) {
+	$('body').append(fixture);
+});