Skip to content

Commit 52c64ff

Browse files
joelwkentjoelwkent
committed
Example and protractor test for sortable tab arrays
1 parent 0a88586 commit 52c64ff

File tree

3 files changed

+132
-1
lines changed

3 files changed

+132
-1
lines changed

‎examples/sortable-tabarray.html‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<!doctype html>
2+
<head>
3+
<meta charset="utf-8">
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
5+
<title>Sortable tabArray</title>
6+
<meta name="description" content="">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<link rel="apple-touch-icon" href="apple-touch-icon.png">
9+
10+
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">
11+
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap-theme.min.css">
12+
<link rel="stylesheet" href="../bower_components/bootstrap-vertical-tabs/bootstrap.vertical-tabs.min.css">
13+
14+
<script type="text/javascript" src="../bower_components/jquery/dist/jquery.min.js"></script>
15+
<script type="text/javascript" src="../bower_components/angular/angular.min.js"></script>
16+
<script type="text/javascript" src="../bower_components/angular-sanitize/angular-sanitize.min.js"></script>
17+
<script type="text/javascript" src="../bower_components/tv4/tv4.js"></script>
18+
<script type="text/javascript" src="../bower_components/objectpath/lib/ObjectPath.js"></script>
19+
<script type="text/javascript" src="../bower_components/angular-schema-form/dist/schema-form.js"></script>
20+
<script type="text/javascript" src="../bootstrap-decorator.js"></script>
21+
<script type="text/javascript" src="../bower_components/angular-ui-sortable/sortable.min.js"></script>
22+
<script type="text/javascript" src="../bower_components/jquery-ui/jquery-ui.min.js"></script>
23+
24+
<script type="text/javascript">
25+
var exampleApp = angular.module('exampleApp',['schemaForm', 'ui.sortable']);
26+
27+
exampleApp.controller('exampleCtrl', ['$scope', function($scope) {
28+
29+
$scope.model = {};
30+
31+
$scope.schema = {
32+
"type": "object",
33+
"properties": {
34+
"sortable-tabarray": {
35+
"type": "array",
36+
"items": {
37+
"type": "object",
38+
"properties": {
39+
"name": { "type": "string" },
40+
"nick": { "type": "string" }
41+
}
42+
}
43+
}
44+
}
45+
};
46+
47+
$scope.form = [
48+
{
49+
"key": "sortable-tabarray",
50+
"type": "tabarray",
51+
"title": "My name is: {{ value.name }}",
52+
"items" : [
53+
{"key": "sortable-tabarray[].name", "htmlClass": "nameField"},
54+
{"key": "sortable-tabarray[].nick", "htmlClass": "nickField"}
55+
]
56+
}
57+
];
58+
}]);
59+
</script>
60+
</head>
61+
<body ng-app="exampleApp" class="container">
62+
<h3>Sortable Tab Array</h3>
63+
<p>Drag and drop tabs to order the elements in the array</p>
64+
<div class="container" ng-controller="exampleCtrl" style="margin: 0 auto;width: 100%;">
65+
<form sf-schema="schema" sf-form="form" sf-model="model"></form>
66+
</div>
67+
</body>
68+
</html>

‎gulp/tasks/protractor.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ gulp.task('protractor', ['webdriver-update'], function(cb) {
2727
}).on('end', cb);
2828
});
2929

30-
['validation-messages', 'custom-validation'].forEach(function(name) {
30+
['validation-messages', 'custom-validation', 'sortable-tabarray'].forEach(function(name) {
3131
gulp.task('protractor:' + name, ['webdriver-update'], function(cb) {
3232
gulp.src(['test/protractor/specs/' + name + '.js']).pipe(protractor.protractor({
3333
configFile: 'test/protractor/conf.js',

‎test/protractor/specs/sortable-tabarray.js‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
describe('sortable tabarray', function () {
2+
function checkDragDrop(i) {
3+
browser.driver.wait(protractor.until.elementLocated(by.xpath("//ol/li[1]/a[text()='My name is: Name " + (i + 1) +"']")), 10000);
4+
expect(element.all(by.css('.nav-tabs li a')).get(0).getText()).toBe('My name is: Name ' + (i + 1));
5+
}
6+
7+
function populateTab(i) {
8+
browser.driver.wait(protractor.until.elementLocated(by.css('.tab-pane.active.index' + i)), 5000);
9+
10+
browser.driver.wait(protractor.until.elementLocated(by.css('.tab-pane.index' + i + ' div.nickField > input')), 5000);
11+
input = element.all(by.css('.tab-pane.index' + i + ' div.nickField > input')).first();
12+
input.sendKeys('Nickname ' + i);
13+
14+
browser.driver.wait(protractor.until.elementLocated(by.css('.tab-pane.index' + i + ' div.nameField > input')), 5000);
15+
input = element.all(by.css('.tab-pane.index' + i + ' div.nameField > input')).first();
16+
input.sendKeys('Name ' + i);
17+
18+
browser.driver.wait(protractor.until.elementLocated(by.linkText('My name is: Name ' + i)), 10000);
19+
}
20+
21+
it('form should exist', function () {
22+
browser.get('http://localhost:8080/examples/sortable-tabarray.html');
23+
24+
expect(element(by.css('form')).getInnerHtml()).not.toEqual('');
25+
});
26+
27+
it('should be able order elements in array by dragging the tabs', function () {
28+
browser.get('http://localhost:8080/examples/sortable-tabarray.html');
29+
30+
var i;
31+
var elementsToAdd = 9;
32+
33+
/* the array starts with 1 element, populate the first element */
34+
populateTab(0);
35+
36+
/* add elements and populate */
37+
for (i = 1; i <= elementsToAdd; i++) {
38+
var tabLink = element.all(by.css('.glyphicon-plus'));
39+
tabLink.click().then(populateTab(i));
40+
}
41+
42+
/* continue when all tabs have been populated*/
43+
browser.driver.wait(protractor.until.elementLocated(by.linkText('My name is: Name ' + elementsToAdd)), 10000);
44+
45+
/* check the number of tabs */
46+
var tabs = element.all(by.css('.nav-tabs li'));
47+
expect(tabs.count()).toBe(elementsToAdd + 2); //Extra 1 for the "+ Add" link
48+
49+
/* drag the tabs into reverse order (descending) */
50+
for (i = 0; i < elementsToAdd; i++) {
51+
var draggable_element = element.all(by.css('.nav-tabs li')).get(0);
52+
var target_element = element.all(by.css('.nav-tabs li')).get(elementsToAdd - i);
53+
expect(draggable_element.isPresent()).toEqual(true);
54+
expect(target_element.isPresent()).toEqual(true);
55+
browser.actions().dragAndDrop(draggable_element, target_element).perform().then(checkDragDrop(i));
56+
}
57+
58+
/* final check of the reverse ordered tabs */
59+
for (i = 0; i <= elementsToAdd; i++) {
60+
expect(element.all(by.css('.nav-tabs li a')).get(i).getText()).toBe('My name is: Name ' + (elementsToAdd - i));
61+
}
62+
});
63+
});

0 commit comments

Comments
 (0)