Merge pull request #31 from jGleitz/protractor-for-behaviour-tests

Protractor for behaviour tests
HelfenKannJeder · Nov 10, 2015 · 9b595d7 · 9b595d7
2 parents 738eedf + 507425b
commit 9b595d7
Show file tree

Hide file tree

Showing 15 changed files with 343 additions and 371 deletions.
diff --git a/.gitignore b/.gitignore
@@ -4,6 +4,5 @@ bower_components
 npm-debug.log
 node_modules
 /phantomjsdriver.log
-test/.browserstackrc
-test/browserstacklocal
-build
+test/behaviour/.browserstackrc
+build
diff --git a/.travis.yml b/.travis.yml
@@ -5,5 +5,9 @@ install:
     - npm install
     - $(npm bin)/bower install
 
+before_script:
+    - "/sbin/start-stop-daemon --start --quiet --pidfile /tmp/custom_xvfb_99.pid --make-pidfile --background --exec /usr/bin/Xvfb -- :99 -ac -screen 0 1920x1080x16"
+    - "export DISPLAY=:99.0"
+
 script:
-    - npm run postinstall-deploy
+    - npm run postinstall-deploy -s
diff --git a/README.md b/README.md
@@ -23,16 +23,16 @@ LICENSE file.
 4. If you want to use the backend, also install come2help-server. See the tutorial in come2help-server.
 
 5. Install the development dependencies:
-<pre>npm install</pre>
+ <pre>npm install</pre>
 
 6. Use bower to install the dependencies:
-<pre>bower install</pre>
+ <pre>bower install</pre>
 
 7. Run the index.html in a browser of your choice.
-  Be careful about cross-site script detection, since the server is not running at the same domain as your client.
-  Maybe you have to use a proxy server like nginx.
-  If `style.css` is missing, run `npm run build-css` first to transpile SASS to CSS.
-  
+ Be careful about cross-site script detection, since the server is not running at the same domain as your client.
+ Maybe you have to use a proxy server like nginx.
+ If `style.css` is missing, run `npm run build-css` first to transpile SASS to CSS.
+
 8. Start a python Webserver with:
   <pre>python -m SimpleHTTPServer</pre>
   or
@@ -41,3 +41,24 @@ LICENSE file.
   <pre>python nocacheserver.py</pre>
   or
   <pre>python3 nocacheserver3.py</pre>
+
+
+## Testing
+Tests are run through the `npm` interface:
+
+ * `npm test`
+
+  Runs the behaviour test in Firefox. Requires firefox to be installed.
+
+ * `npm run chrometest -s`
+
+ Runs the behaviour test in Chrome. Requires chrome to be installed.
+
+ * `npm run browsertest -s`
+
+ Runs the behaviour test in multiple browsers on BrowserStack. You'll need to provide BrowserStack credentials, either in the environment variables `BROWSERSTACK_USER` and `BROWSERSTACK_KEY`, or in `test/behaviour/.browserstackrc` in the form of `module.exports = {key: YOUR_KEY, user: YOUR_USERNAME}`.
+
+ * `npm run lint -s`
+
+ Lints the code.
+
diff --git a/index.html b/index.html
@@ -1,43 +1,46 @@
 <html ng-app="Come2HelpApp">
+
 <head>
-    <title>come2.help</title>
-    <!-- TODO: Configuration for API_KEY -->
-    <script src='//maps.googleapis.com/maps/api/js?sensor=false&key=AIzaSyCZTJBpBQPc-8pQIin2_H42p_9u6afuw_M&signed_in=true'></script>
-    <script src="bower_components/jquery/dist/jquery.js"></script>
-    <script src="bower_components/lodash/lodash.min.js"></script>
-    <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
-    <script src="bower_components/angular/angular.min.js"></script>
-    <script src="bower_components/angular-route/angular-route.min.js"></script>
-    <script src="bower_components/angular-resource/angular-resource.min.js"></script>
-    <script src="bower_components/angular-simple-logger/dist/index.js"></script>
-    <script src="bower_components/angular-translate/angular-translate.min.js"></script>
-    <script src="bower_components/angular-google-maps/dist/angular-google-maps.min.js"></script>
-    <script src="js/app.js"></script>
-    <script src="js/controller.js"></script>
-    <script src="js/i18n.js"></script>
-    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css"/>
-    <link rel="stylesheet" href="build/css/style.css"/>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+	<title>come2.help</title>
+	<!-- TODO: Configuration for API_KEY -->
+	<script src='//maps.googleapis.com/maps/api/js?sensor=false&key=AIzaSyCZTJBpBQPc-8pQIin2_H42p_9u6afuw_M&signed_in=true'></script>
+	<script src="bower_components/jquery/dist/jquery.js"></script>
+	<script src="bower_components/lodash/lodash.min.js"></script>
+	<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
+	<script src="bower_components/angular/angular.min.js"></script>
+	<script src="bower_components/angular-route/angular-route.min.js"></script>
+	<script src="bower_components/angular-resource/angular-resource.min.js"></script>
+	<script src="bower_components/angular-simple-logger/dist/index.js"></script>
+	<script src="bower_components/angular-translate/angular-translate.min.js"></script>
+	<script src="bower_components/angular-google-maps/dist/angular-google-maps.min.js"></script>
+	<script src="js/app.js"></script>
+	<script src="js/controller.js"></script>
+	<script src="js/i18n.js"></script>
+	<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css" />
+	<link rel="stylesheet" href="build/css/style.css" />
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 </head>
+
 <body>
 
-<div class="container">
-    <nav class="navbar navbar-default">
-        <div class="container-fluid">
-            <div class="navbar-header">
-                <a class="navbar-brand" href="http://come2.help/">come2.help</a>
-            </div>
-            <div class="collapse navbar-collapse">
-                <ul class="nav navbar-nav">
-                    <li><a href="#/map">{{ 'Map' | translate }}</a></li>
-                    <li><a href="#/list">{{ 'List' | translate }}</a></li>
-                    <li><a href="#/new">{{ 'Add' | translate }}</a></li>
-                </ul>
-            </div>
-        </div>
-    </nav>
+	<div class="container">
+		<nav class="navbar navbar-default">
+			<div class="container-fluid">
+				<div class="navbar-header">
+					<a class="navbar-brand" href="http://come2.help/">come2.help</a>
+				</div>
+				<div class="collapse navbar-collapse">
+					<ul class="nav navbar-nav">
+						<li><a href="#/map">{{ 'Map' | translate }}</a></li>
+						<li><a href="#/list">{{ 'List' | translate }}</a></li>
+						<li><a href="#/new">{{ 'Add' | translate }}</a></li>
+					</ul>
+				</div>
+			</div>
+		</nav>
 
-    <div ng-view></div>
-</div>
+		<div ng-view></div>
+	</div>
 </body>
-</html>
+
+</html>
diff --git a/package.json b/package.json
@@ -5,52 +5,57 @@
   "bugs": {
     "url": "https://github.com/HelfenKannJeder/come2help-web/issues"
   },
-  "contributors": [{
-    "name": "Valentin Zickner",
-    "email": "[email protected]"
-  }, {
-    "name": "Peter Schuller",
-    "email": "[email protected]"
-  }, {
-    "name": "Joshua Gleitze",
-    "email": "[email protected]"
-  }, {
-    "name": "Sebastian Richter",
-    "email": "[email protected]"
-  }],
+  "contributors": [
+    {
+      "name": "Valentin Zickner",
+      "email": "[email protected]"
+    },
+    {
+      "name": "Peter Schuller",
+      "email": "[email protected]"
+    },
+    {
+      "name": "Joshua Gleitze",
+      "email": "[email protected]"
+    },
+    {
+      "name": "Sebastian Richter",
+      "email": "[email protected]"
+    }
+  ],
   "license": "GPL-3.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/npm/npm.git"
   },
   "devDependencies": {
     "bower": "^1.6.3",
-    "browserstack-webdriver": "^2.41.1",
     "chai": "^3.3.0",
     "chai-as-promised": "^5.1.0",
     "closurecompiler": "^1.5.2",
     "connect": "^3.4.0",
+    "date-format-lite": "^0.7.4",
     "eslint": "^1.6.0",
     "eslint-config-angular": "^0.4.0",
     "eslint-plugin-angular": "^0.12.0",
     "extend": "^3.0.0",
     "js-beautify": "^1.5.10",
     "mocha": "^2.3.3",
     "node-sass": "^3.3.3",
-    "phantomjs": "^1.9.18",
+    "portfinder": "^0.4.0",
+    "protractor": "git+https://github.com/jGleitz/protractor.git#browserstack",
     "q": "^1.4.1",
-    "selenium-webdriver": "^2.47.0",
-    "serve-static": "^1.10.0",
-    "transfer": "^0.2.2",
-    "unzip": "^0.1.11"
+    "serve-static": "^1.10.0"
   },
   "scripts": {
-    "postinstall-deploy": "npm run build-css && npm run lint && npm test && npm run browsertest",
-    "postinstall-dev": "npm run build-css && npm run lint && npm run watch-css",
+    "test": "protractor test/behaviour/protractor.conf",
+    "chrometest": "protractor test/behaviour/protractor.conf --browser chrome",
+    "browsertest": "protractor test/behaviour/protractor.browserstack.conf",
+    "postinstall": "webdriver-manager update --standalone --chrome --browserstacklocal && npm run build-css",
+    "postinstall-deploy": "npm run lint -s && npm test -s && npm run browsertest -s",
+    "postinstall-dev": "npm run lint -s && npm run watch-css -s",
     "build-css": "node-sass css --output build/css",
     "watch-css": "node-sass -w -r css --output build/css",
-    "test": "mocha --slow 2000",
-    "browsertest": "export BROWSER=TRUE && mocha --slow 30000",
     "lint": "eslint js/**/*.js test/**/*.js"
   }
 }
diff --git a/test/.eslintrc → test/behaviour/.eslintrc b/test/.eslintrc → test/behaviour/.eslintrc
@@ -31,7 +31,7 @@
 		"browser": false,
 		"expect": false,
 		"baseUrl": false,
-		"until": false,
+		"element": false,
 		"by": false
 	},
 	"extends": "eslint:recommended"

diff --git a/test/mocker.js → test/behaviour/apimocker.js b/test/mocker.js → test/behaviour/apimocker.js
diff --git a/test/behaviour/asserters.js b/test/behaviour/asserters.js
@@ -0,0 +1,13 @@
+/**
+ * Load the asserting libraries. This file must be required and executed in every test case:
+ *
+ * require('./asserters')();
+ */
+
+module.exports = function() {
+	// Load chai and plugins
+	var chai = require('chai');
+	var chaiAsPromised = require('chai-as-promised');
+	chai.use(chaiAsPromised);
+	global.expect = chai.expect;
+};
diff --git a/test/behaviour/example.js b/test/behaviour/example.js
@@ -0,0 +1,47 @@
+/**
+ * Example test case to visualise testing.
+ */
+
+
+require('./asserters')();
+
+var server = require('./apimocker');
+
+describe('Home', function() {
+	this.timeout(1 * 60 * 1000);
+
+	it('should have "come2.help" as title', function() {
+		browser.get(baseUrl);
+
+		expect(browser.getTitle()).to.eventually.equal('come2.help');
+	});
+});
+
+describe('List', function() {
+	this.timeout(2 * 60 * 1000);
+
+	var locationlist = by.repeater('location in ctrl.locations');
+
+	it('should have two entries: "Sandsäcke füllen" and "Transport"', function() {
+		browser.getPart('list');
+
+		expect(element.all(locationlist).count()).to.eventually.equal(2);
+		expect(element(locationlist.column('location.name').row(0)).getInnerHtml()).to.eventually.contain('Sandsäcke füllen');
+		expect(element(locationlist.column('location.name').row(1)).getInnerHtml()).to.eventually.contain('Transport');
+	});
+
+	// Example for mocking
+	it('should load another entry', function() {
+		server.mockAPI('locations', [{
+			id: 1,
+			name: 'Mocked Location',
+			latitude: 49.1232,
+			longitude: 8,
+			location: 'Schlossplatz'
+		}]);
+
+		browser.navigate().refresh();
+
+		expect(element(locationlist.column('location.name').row(0)).getInnerHtml()).to.eventually.contain('Mocked Location');
+	});
+});