[+]: add simple UI-Tests

voku · Nov 4, 2014 · 1a45d739054864980ab62f1d8ce03c515c8386b4 · 1a45d73
1 parent f1f6b63
commit 1a45d739054864980ab62f1d8ce03c515c8386b4
Unified Split

Showing with 51 additions and 8 deletions.

+1 −1 app/views/tpl_base.twig

+5 −5 app/views/tpl_index.twig

+2 −0 web/.gitignore

+2 −2 web/Gruntfile.js

+14 −0 web/tests/dalek/results/.gitignore

+27 −0 web/tests/dalek/test.js
diff --git a/app/views/tpl_base.twig b/app/views/tpl_base.twig
@@ -10,7 +10,7 @@
 <head>
 {% block head %}

-  <title></title>
+  <title>OpenRheinRuhr</title>

  {% block head_meta %}
    <meta charset="utf-8">
diff --git a/app/views/tpl_index.twig b/app/views/tpl_index.twig
@@ -307,23 +307,23 @@
    <div class="col-sm-8">
      <div class="row form-group">
        <div class="col-xs-5">
-          <input type="text" class="form-control" name="firstName" placeholder="Vorname" required="">
+          <input type="text" class="form-control" name="firstName" id="js-contact-firstName" placeholder="Vorname" required="">
        </div>
        <div class="col-xs-5">
-          <input type="text" class="form-control" name="lastName" placeholder="Nachname" required="">
+          <input type="text" class="form-control" name="lastName" id="js-contact-lastName" placeholder="Nachname" required="">
        </div>
      </div>
      <div class="row form-group">
        <div class="col-xs-5">
-          <input type="email" class="form-control" name="email" placeholder="E-Mail" required="">
+          <input type="email" class="form-control" name="email" id="js-contact-email" placeholder="E-Mail" required="">
        </div>
        <div class="col-xs-5">
-          <input type="email" class="form-control" name="phone" placeholder="Tel." required="">
+          <input type="email" class="form-control" name="phone" id="js-contact-phone" placeholder="Tel." required="">
        </div>
      </div>
      <div class="row form-group">
        <div class="col-xs-10">
-          <textarea type="text" class="form-control" name="text" required=""></textarea>
+          <textarea type="text" class="form-control" name="text" id="js-contact-text" required=""></textarea>
        </div>
      </div>
      <div class="row form-group">
diff --git a/web/.gitignore b/web/.gitignore
@@ -127,6 +127,8 @@ Temporary Items


 ### Node ###
+temp
+
 # Logs
 logs
 *.log
diff --git a/web/Gruntfile.js b/web/Gruntfile.js
@@ -135,9 +135,9 @@ module.exports = function(grunt) {
    dalek: {
      options: {
        // invoke phantomjs, chrome & chrome canary ...
-        browser: ['phantomjs', 'chrome', 'ie'],
+        browser: ['phantomjs', 'chrome']
        // generate an html & an jUnit report
-        reporter: ['html', 'junit']
+        //reporter: ['html', 'junit']
      },
      dist: {
        src: ['tests/dalek/*.js']
diff --git a/web/tests/dalek/results/.gitignore b/web/tests/dalek/results/.gitignore
@@ -0,0 +1,14 @@
+#
+# NOTE! Don't add files that are generated in specific
+# subdirectories here. Add them in the ".gitignore" file
+# in that subdirectory instead.
+#
+# NOTE! Please use 'git ls-files -i --exclude-standard'
+# command after changing this file, to see if there are
+# any tracked files which get ignored after the change.
+#
+# New rules
+#
+# IGNORE ALL HERE
+*
+!.gitignore
diff --git a/web/tests/dalek/test.js b/web/tests/dalek/test.js
@@ -0,0 +1,27 @@
+/*global module*/
+
+module.exports = {
+  // Checks if the index-page is working
+  'index testing': function (test) {
+    'use strict';
+    test
+        .open('http://openrheinruhr.localhost/')
+        .assert.title('OpenRheinRuhr')
+        .screenshot('tests/dalek/results/index_:browser_.:version.png')
+        .click('.navbar-nav>li:last-child')
+        .wait(1000)
+        .type('#js-contact-email', 'lars@moelleken.org')
+        .type('#js-contact-lastName', 'Moelleken')
+        .type('#js-contact-firstName', 'Lars')
+        .type('#js-contact-phone', '123456789987654321')
+        .type('#js-contact-text', 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.')
+        .assert.val('#js-contact-email', 'lars@moelleken.org', 'E-Mail has been set')
+        .assert.val('#js-contact-lastName', 'Moelleken', 'Lastname has been set')
+        .assert.val('#js-contact-firstName', 'Lars', 'Firstname has been set')
+        .assert.val('#js-contact-phone', '123456789987654321', 'Phone has been set')
+        .assert.val('#js-contact-text', 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.', 'Text has been set')
+        .screenshot('tests/dalek/results/index_form_:browser_.:version.png')
+        .wait(1000)
+        .done();
+  }
+};