Add e2e automation support to run on travis

.env.travis

@@ -1,5 +1,6 @@
 APP_ENV=testing
 APP_KEY=SomeRandomString
+APP_KEY=
 
 ADMIN_ENABLED=true
 ALLOW_UNSORTED_CATEGORY=true
@@ -11,3 +12,5 @@ DB_TEST_PASSWORD=
 CACHE_DRIVER=array
 SESSION_DRIVER=array
 QUEUE_DRIVER=sync
+LOCALE=en
+LOCALE_FALLBACK=en

.gitignore

@@ -9,4 +9,5 @@
 *.iml
 /public/js/*.js
 /public/css/*
-/public/views/*.html
+/public/views/*.html
+/tests/screenshots

.travis.yml

@@ -7,6 +7,7 @@ env:
   - NODE_RELEASE=4.x
 
 before_install:
+  # - wget "https://selenium-release.storage.googleapis.com/2.48/selenium-server-standalone-2.48.2.jar"
   - sudo rm -rf ~/.nvm
   - curl -sL "https://deb.nodesource.com/setup_${NODE_RELEASE}" | sudo -E bash -
   - sudo apt-get install -y nodejs
@@ -15,6 +16,8 @@ before_install:
 
 install:
   - npm install
+  # - java -jar selenium-server-standalone-2.48.2.jar &
+#  - java -jar selenium-server-standalone-2.48.2.jar > /dev/null 2>&1 &
   - gulp --production
   - cp .env.travis .env
   - mysql -e 'create database homestead_test;'
@@ -23,7 +26,10 @@ install:
   - php artisan key:generate
   - php artisan migrate --seed
   - php artisan db:seed --class=DummyBookmarksSeeder
-#  - php -S localhost:8000 -t public/
+  - php -S localhost:8000 -t public/ &
+#  - php -S localhost:8000 -t public/ > /dev/null 2>&1 &
+  - sleep 5
 
 script:
   - vendor/bin/phpunit
+  - npm test

README.md

@@ -6,9 +6,9 @@ Easy (and fast) self-hosted bookmark manager.
 
 ### Demo
 
-You can test easey-bookmark-manager here : [demo](http://bookmarkdemo.miceli.click/)
+You can test easy-bookmark-manager here : [demo](http://bookmarkdemo.miceli.click/)
 
-Login are **admin** as login and **nimda** as password.
+Use **admin** as login and **nimda** as password.
 
 You can also download easy-bookmark-manager [chrome plugin](https://chrome.google.com/webstore/detail/easy-bookmark-manager-ext/hhonlfdhoejpaofmmppaogebkfnbgefi)
 
@@ -78,7 +78,7 @@ $ gulp && gulp watch
 
 ### Chrome Extension
 
-[Easy Bookmark Manager Extension](https://chrome.google.com/webstore/detail/easy-bookmark-manager-ext/hhonlfdhoejpaofmmppaogebkfnbgefi)
+Install [Easy Bookmark Manager Extension](https://chrome.google.com/webstore/detail/easy-bookmark-manager-ext/hhonlfdhoejpaofmmppaogebkfnbgefi)
 
 [Source](https://github.com/devimust/easy-bookmark-manager-chrome-extension)
 

elixir-extensions.js

@@ -7,21 +7,16 @@ var jshint = require('gulp-jshint');
 var Task = Elixir.Task;
 
 Elixir.extend('remove', function(path) {
-
     new Task('remove', function() {
         del(path);
         return gulp.src('');
     });
-
 });
 
-
 Elixir.extend('jshint', function(path) {
-
     new Task('jshint', function() {
         return gulp.src(path)
             .pipe(jshint())
             .pipe(jshint.reporter('default'));
     });
-
 });

gulpfile.js

@@ -1,6 +1,8 @@
+var gulp = require('gulp');
+var testcafe = require('gulp-testcafe');
 var elixir = require('laravel-elixir');
 
-require('./elixir-extensions')
+require('./elixir-extensions');
 
 /*
  |--------------------------------------------------------------------------
@@ -42,7 +44,7 @@ elixir(function(mix) {
 
     // vendor scripts
     mix
-        .scripts([
+        .combine([
             'node_modules/jquery/dist/jquery.min.js',
             'node_modules/bootstrap/dist/js/bootstrap.min.js',
             'node_modules/angular/angular.min.js',
@@ -77,3 +79,18 @@ elixir(function(mix) {
     ]);
 
 });
+
+
+/*
+ |--------------------------------------------------------------------------
+ | e2e Automated Testing
+ |--------------------------------------------------------------------------
+ |
+ | An e2e test suite covering most key functionality across the website.
+ |
+ */
+
+gulp.task('test', function() {
+    return gulp.src('./tests/e2e/auth.test.js')
+        .pipe(testcafe({ browsers: ['phantomjs'] }));
+});

package.json

@@ -1,11 +1,14 @@
 {
   "private": true,
   "devDependencies": {
+    "chai": "^3.5.0",
     "del": "^2.2.0",
     "gulp": "^3.8.8",
     "gulp-jshint": "^2.0.0",
     "gulp-shell": "^0.5.2",
-    "jshint": "^2.9.1"
+    "gulp-testcafe": "^0.9.0",
+    "jshint": "^2.9.1",
+    "testcafe-browser-provider-phantomjs": "^1.0.0"
   },
   "dependencies": {
     "ace-editor-builds": "^1.2.0",
@@ -18,5 +21,8 @@
     "laravel-elixir": "^4.0.0",
     "normalize.css": "^3.0.3",
     "select2": "^4.0.2-rc.1"
+  },
+  "scripts": {
+    "test": "gulp test"
   }
 }

resources/assets/views/bookmark-view.html

@@ -13,7 +13,7 @@
 
     <div class="col-md-3">
 
-        <div class="panel panel-primary categories" ng-if="categories.length > 1">
+        <div id="categories" class="panel panel-primary categories" ng-if="categories.length > 1">
             <div class="panel-heading">
                 {{ 'bookmark.categories' | translate }}
             </div>
@@ -27,7 +27,7 @@
                     <span class="badge">{{category.count}}</span>
                 </li>
 
-                <li class="list-group-item click-item text-center"
+                <li class="list-group-item click-item text-center load-more"
                     ng-class="{'li-hidden': !showDetails}"
                     ng-init="showDetails = true"
                     ng-if="categories.length > 5"
@@ -37,7 +37,7 @@
             </ul>
         </div>
 
-        <div class="panel panel-primary" ng-if="tags.length > 1">
+        <div id="tags" class="panel panel-primary" ng-if="tags.length > 1">
             <div class="panel-heading">
                 {{'bookmark.tags' | translate }}
             </div>
@@ -89,7 +89,7 @@
     </div>
 
     <div class="col-md-9">
-        <div class="panel panel-primary">
+        <div id="search" class="panel panel-primary">
             <div class="panel-heading">
                 <div class="has-feedback">
                     <input id="searchText" class="form-control" ng-model="search" type="text" placeholder="{{ 'search.bookmark' | translate }}"
@@ -98,7 +98,7 @@
                 </div>
             </div>
 
-            <div>
+            <div class="search-results">
                 <div class="alert" role="alert" ng-if="loadingBookmarks">
                     Loading <i class="fa fa-spinner fa-pulse fa-lg"></i>
                 </div>
@@ -135,12 +135,12 @@ <h4>
                 </div>
 
                 <div class="text-center prev-next" ng-if="!loadingBookmarks">
-                    <button type="button" class="btn btn-primary" ng-if="bookmarkResults.page > 1"
+                    <button type="button" class="btn btn-primary button-previous" ng-if="bookmarkResults.page > 1"
                             ng-click="prevPage()">
                         Previous
                     </button>
 
-                    <button type="button" class="btn btn-primary"
+                    <button type="button" class="btn btn-primary button-next"
                             ng-if="bookmarkResults.page < bookmarkResults.maxPages"
                             ng-click="nextPage()">Next
                     </button>

resources/views/auth/login.blade.php

@@ -11,23 +11,23 @@
 
             <div class="col-md-4">
 
-                {{ Form::open(['role' => 'form', 'url' => '/auth/login']) }}
+                {{ Form::open(['id' => 'login-form', 'role' => 'form', 'url' => '/auth/login']) }}
 
                     {!! csrf_field() !!}
 
                     <div class='form-group'>
-                        {{ Form::text('username', null, ['placeholder' => 'Email', 'class' => 'form-control']) }}
+                        {{ Form::text('username', null, ['id' => 'username', 'placeholder' => 'Email', 'class' => 'form-control']) }}
                     </div>
 
                     <div class='form-group'>
-                        {{ Form::password('password', ['placeholder' => trans('messages.user.password'), 'class' => 'form-control']) }}
+                        {{ Form::password('password', ['id' => 'password', 'placeholder' => 'Password', 'class' => 'form-control']) }}
                     </div>
 
                     <div class='form-group'>
                         @include('partials/errors')
                     </div>
 
-                    {{ Form::submit(trans('messages.signin'), ['class' => 'btn btn-primary btn-small btn-block']) }}
+                    {{ Form::submit('Sign in', ['id' => 'submit-button', 'class' => 'btn btn-primary btn-small btn-block']) }}
 
                 {{ Form::close() }}
 

tests/e2e/auth.test.js

@@ -0,0 +1,54 @@
+import { expect } from 'chai';
+
+import { getElementByRef, getPageTitle, snapshotElement, getElementById, getElementsByClassName } from './helpers';
+
+
+fixture `Easy bookmark manager test`
+    .page('http://localhost:8000/');
+
+
+test('Ensure the page has the correct page title', async t => {
+    // Use the Selector function to get access to the article header
+    const pageTitle = await getPageTitle();
+
+    // Use the assertion to
+    // check if the actual page title is equal to the expected one
+    expect(pageTitle).to.equal('Easy Bookmark Manager');
+});
+
+test('Prevent login with invalid credentials', async t => {
+    await t
+        .typeText('#username', 'admin')
+        .typeText('#password', 'badpassword')
+        .click('#submit-button')
+        .wait(1000);
+
+    const visible = (await t.select(() => document.querySelector('div.bg-danger.alert'))).visible;
+    expect(visible).to.be.true;
+
+    const message = (await t.select(() => document.querySelector('div.bg-danger.alert ul li'))).innerText;
+    expect(message).to.equal('That username/password combo does not exist.');
+});
+
+test('Ensure all default elements display correctly after correctly logging in', async t => {
+    await t
+       .typeText('#username', 'admin')
+       .typeText('#password', 'nimda')
+       .click('#submit-button')
+       .wait(1000);
+
+    // Expect 8 child elements on the ul ref object
+    snapshotElement(await getElementByRef('#categories ul'), 'ul', 8);
+
+    // Check if panel heading match
+    expect((await getElementByRef('#categories div.panel-heading')).innerText).eql('Categories');
+
+    // Expect 37 child elements on the ul ref object
+    snapshotElement(await getElementByRef('#tagcloud ul'), 'ul', 37);
+
+    // Check if panel heading match
+    expect((await getElementByRef('#tags div.panel-heading')).innerText).eql('Tags');
+
+    // Expect 11 child elements on the div ref object
+    snapshotElement(await getElementByRef('#search div.search-results'), 'div', 11);
+});