Google Summer of Code 2016 JavaScript Testing project: Tests for subf…

…orm-repeatable.js library (#11646)

* subform-repeatable.js test suite

* Updated docs section

karma.conf.js

@@ -13,6 +13,7 @@ module.exports = function (config) {
 		// 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/jquery-ui-bundle/jquery-ui.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},

tests/javascript/package.json

@@ -16,6 +16,7 @@
 		"jasmine-core": "^2.4.1",
 		"jasmine-jquery": "^2.1.1",
 		"jquery": "^2.2.3",
+		"jquery-ui-bundle": "^1.11.4",
 		"karma": "^0.13.22",
 		"karma-coverage": "^1.0.0",
 		"karma-firefox-launcher": "^0.1.7",

tests/javascript/subform-repeatable/fixtures/fixture.html

@@ -0,0 +1,49 @@
+<div id="subform-repeatablejs">
+	<div id="repeatable-container" class="subform-repeatable"
+		 data-bt-add="a.group-add" data-bt-remove="a.group-remove" data-bt-move="a.group-move"
+		 data-repeatable-element="tr.subform-repeatable-group"
+		 data-rows-container="tbody" data-minimum="1" data-maximum="2">
+		<table>
+			<tbody>
+				<tr class="subform-repeatable-group" data-base-name="base-name" data-group="group">
+					<td>Data 1</td>
+					<td>Data 2</td>
+					<td>
+						<input type="checkbox" id="original-input-checkbox" name="input">
+						<label for="original-input-checkbox">Checkbox label</label>
+					</td>
+					<td>
+						<input type="radio" id="original-input-radio" name="input">
+					</td>
+					<td>
+						<div class="btn-group">
+							<a id="subform-original-add" class="group-add" href="#">Add</a>
+							<a id="subform-original-remove" class="group-remove" href="#">Remove</a>
+							<a id="subform-original-move" class="group-move" href="#">Move</a>
+						</div>
+					</td>
+				</tr>
+			</tbody>
+		</table>
+		<script type="text/subform-repeatable-template-section" class="subform-repeatable-template-section">
+			<tr class="subform-repeatable-group" data-base-name="base-name" data-group="group">
+				<td>Data 3</td>
+				<td>Data 4</td>
+				<td>
+					<input type="checkbox" id="input_checkbox_group_test" name="input_checkbox[group][test]">
+					<label for="input_checkbox_group_test">Checkbox label</label>
+				</td>
+				<td>
+					<input type="radio" id="input_radio_group_test" name="input_radio[group][test]">
+				</td>
+				<td>
+					<div class="btn-group">
+						<a class="group-add generated" href="#">Add</a>
+						<a class="group-remove generated" href="#">Remove</a>
+						<a class="group-move generated" href="#">Move</a>
+					</div>
+				</td>
+			</tr>
+		</script>
+	</div>
+</div>

tests/javascript/subform-repeatable/spec-setup.js

@@ -0,0 +1,26 @@
+/**
+ * @package     Joomla.Tests
+ * @subpackage  JavaScript Tests
+ *
+ * @copyright   Copyright (C) 2005 - 2016 Open Source Matters, Inc. All rights reserved.
+ * @license     GNU General Public License version 2 or later; see LICENSE.txt
+ *
+ * @since       __DEPLOY_VERSION__
+ * @version     1.0.0
+ */
+
+define(['jquery', 'text!testsRoot/subform-repeatable/fixtures/fixture.html', 'libs/subform-repeatable'], function ($, fixture) {
+	$('body').append(fixture);
+
+	spy_subform_ready = jasmine.createSpy('subform-ready');
+	spy_subform_row_add = jasmine.createSpy('subform-row-add');
+	spy_subform_row_remove = jasmine.createSpy('subform-row-remove');
+
+	var $element = $('#repeatable-container');
+
+	$element.on('subform-ready', spy_subform_ready)
+		.on('subform-row-add', spy_subform_row_add)
+		.on('subform-row-remove', spy_subform_row_remove);
+
+	$('div.subform-repeatable').subformRepeatable();
+});

tests/javascript/subform-repeatable/spec.js

@@ -0,0 +1,109 @@
+/**
+ * @package     Joomla.Tests
+ * @subpackage  JavaScript Tests
+ *
+ * @copyright   Copyright (C) 2005 - 2016 Open Source Matters, Inc. All rights reserved.
+ * @license     GNU General Public License version 2 or later; see LICENSE.txt
+ *
+ * @since       __DEPLOY_VERSION__
+ * @version     1.0.0
+ */
+
+define(['jquery', 'testsRoot/subform-repeatable/spec-setup', 'jasmineJquery'], function ($) {
+	var $container = $('#repeatable-container');
+
+	describe('subform-repeatable', function () {
+		describe('Initialization', function () {
+			it('Should set the subform-repeatable instance in data', function () {
+				expect($container).toHaveData('subformRepeatable');
+			});
+
+			it('Should bind add event to container', function () {
+				expect($container).toHandle("click");
+			});
+
+			it('Should trigger subform-ready event', function () {
+				expect(spy_subform_ready).toHaveBeenCalled();
+			});
+		});
+
+		describe('Add new row', function () {
+			beforeAll(function () {
+				var $button = $('#subform-original-add');
+
+				$button.click();
+				$button.click();
+			});
+
+			it('Should add one and only one new row to the table', function () {
+				expect($container.find('tbody').children().length).toEqual(2);
+			});
+
+			it('Should fix the id of the template input checkbox element to "input_checkbox_base-name2_test"', function () {
+				expect($container.find('#input_checkbox_group_test')).not.toExist();
+				expect($container.find('#input_checkbox_base-name2_test')).toExist();
+			});
+
+			it('Should fix the for attribute of the checkbox label element to match the changed input id', function () {
+				expect($container.find('label[for="input_checkbox_base-name2_test"]')).toExist();
+			});
+
+			it('Should fix the name of the template input checkbox element to "input_checkbox[base-name2][test]"', function () {
+				expect($container.find('#input_checkbox_base-name2_test')).toHaveAttr('name','input_checkbox[base-name2][test]');
+			});
+
+			it('Should fix the id of the template input radio element to "input_radio_base-name2_test0"', function () {
+				expect($container.find('#input_radio_group_test')).not.toExist();
+				expect($container.find('#input_radio_base-name2_test0')).toExist();
+			});
+
+			it('Should fix the name of the template input radio element to "input_radio[base-name2][test]"', function () {
+				expect($container.find('#input_radio_base-name2_test0')).toHaveAttr('name','input_radio[base-name2][test]');
+			});
+
+			it('Should have captured the template correctly', function () {
+				var $newElement = $container.find('tbody').children().last();
+
+				expect($newElement).toContainText('Data 3');
+				expect($newElement).toContainText('Data 4');
+				expect($newElement).toContainText('Checkbox label');
+				expect($newElement).toContainText('Add');
+				expect($newElement).toContainText('Remove');
+				expect($newElement).toContainText('Move');
+			});
+
+			it('Should set data-new attribute to true in the new element', function () {
+				expect($container.find('tbody').children().last()).toHaveAttr('data-new', 'true');
+			});
+
+			it('Should set data-group attribute to "base-name2" in the new element', function () {
+				expect($container.find('tbody').children().last()).toHaveAttr('data-group', 'base-name2');
+			});
+
+			it('Should trigger subform-row-add event', function () {
+				expect(spy_subform_row_add).toHaveBeenCalled();
+			});
+		});
+
+		describe('Remove existing row', function () {
+			beforeAll(function () {
+				$container.find('a.group-remove.generated').click();
+				$container.find('subform-original-remove').click();
+			});
+
+			it('Should remove the added row from the table', function () {
+				expect($container.find('tbody')).not.toContainText('Data 3');
+				expect($container.find('tbody')).not.toContainText('Data 4');
+			});
+
+			it('Should not remove the first original row since minimum is set to 1', function () {
+				expect($container.find('tbody')).toContainText('Data 1');
+				expect($container.find('tbody')).toContainText('Data 2');
+			});
+
+			it('Should trigger subform-row-remove event', function () {
+				expect(spy_subform_row_remove).toHaveBeenCalled();
+			});
+		});
+	});
+});

tests/javascript/test-main.js

@@ -18,6 +18,7 @@ require.config({
 
 	paths: {
 		'jquery': 'tests/javascript/node_modules/jquery/dist/jquery.min',
+		'jui': 'tests/javascript/node_modules/jquery-ui-bundle/jquery-ui.min',
 		'bootstrap': 'media/jui/js/bootstrap.min',
 		'jasmineJquery': 'tests/javascript/node_modules/jasmine-jquery/lib/jasmine-jquery',
 		'libs': 'media/system/js',
@@ -34,6 +35,9 @@ require.config({
 		'libs/validate': {
 			deps: ['jquery']
 		},
+		'libs/subform-repeatable': {
+			deps: ['jquery', 'jui']
+		},
 		'libs/sendtestmail': {
 			deps: ['jquery']
 		}