example of e2e tests with testcafe (related to #1040)

Gruntfile.js

@@ -39,7 +39,20 @@ module.exports = function (grunt) {
 			}
 		},
 
-		jquery: {}
+		jquery: {},
+
+		testcafe: {
+			test: {
+				options: {
+					files:    ['test/e2e/index.js'],
+					browsers: ['chrome'],
+					startApp: {
+						command: 'npm run http-server'
+					},
+					skipJsErrors: true //https://github.com/RubaXa/Sortable/issues/1041
+				}
+			}
+		}
 	});
 
 
@@ -82,7 +95,8 @@ module.exports = function (grunt) {
 	grunt.loadNpmTasks('grunt-version');
 	grunt.loadNpmTasks('grunt-contrib-jshint');
 	grunt.loadNpmTasks('grunt-contrib-uglify');
+	grunt.loadNpmTasks('grunt-testcafe');
 
 	grunt.registerTask('tests', ['jshint']);
-	grunt.registerTask('default', ['tests', 'version', 'uglify:dist']);
+	grunt.registerTask('default', ['tests', 'version', 'uglify:dist', 'testcafe']);
 };

package.json

@@ -4,15 +4,19 @@
   "version": "1.5.1",
   "devDependencies": {
     "grunt": "*",
-    "grunt-version": "*",
     "grunt-contrib-jshint": "*",
-    "grunt-contrib-uglify": "*"
+    "grunt-contrib-uglify": "*",
+    "grunt-testcafe": "^0.15.0",
+    "grunt-version": "*",
+    "http-server": "^0.9.0",
+    "testcafe": "^0.16.0"
   },
   "description": "Minimalist JavaScript library for reorderable drag-and-drop lists on modern browsers and touch devices. No jQuery. Supports AngularJS and any CSS library, e.g. Bootstrap.",
   "main": "Sortable.js",
   "scripts": {
     "test": "./node_modules/grunt/bin/grunt",
-    "prepublish": "./node_modules/grunt/bin/grunt"
+    "prepublish": "./node_modules/grunt/bin/grunt",
+    "http-server": "http-server -s ./"
   },
   "repository": {
     "type": "git",

test/e2e/index-page-model.js

@@ -0,0 +1,14 @@
+import { Selector } from 'testcafe';
+
+export default class IndexPage {
+    constructor () {
+        const listAContainer = Selector('#foo');
+        const listAItems     = listAContainer.find('li');
+
+        this.listA = {
+            container: listAContainer,
+            items:     listAItems,
+            getItem:   text => listAItems.withText(text)
+        };
+    }
+}

test/e2e/index.js

@@ -0,0 +1,22 @@
+import IndexPage from './index-page-model';
+
+const indexPage = new IndexPage();
+
+fixture `Tests`
+    .page('http://localhost:8080/index.html');
+
+test('List A', async t => {
+    const listA      = indexPage.listA;
+    const firstItem  = listA.items.nth(0);
+    const secondItem = listA.items.nth(1);
+    const hippoText  = 'Бегемот';
+    const foodText   = 'Корм';
+
+    await t
+        .expect(firstItem.innerText).eql(hippoText)
+        .expect(secondItem.innerText).eql(foodText)
+        .dragToElement(firstItem, secondItem, { speed: 0.5 })
+        .expect(firstItem.innerText).eql(foodText)
+        .expect(secondItem.innerText).eql(hippoText);
+});
+