diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php
index ea4c3a6..dfcbc3f 100644
--- a/resources/views/auth/login.blade.php
+++ b/resources/views/auth/login.blade.php
@@ -11,23 +11,23 @@
- {{ Form::open(['role' => 'form', 'url' => '/auth/login']) }}
+ {{ Form::open(['id' => 'login-form', 'role' => 'form', 'url' => '/auth/login']) }}
{!! csrf_field() !!}
- {{ Form::text('username', null, ['placeholder' => 'Email', 'class' => 'form-control']) }}
+ {{ Form::text('username', null, ['id' => 'username', 'placeholder' => 'Email', 'class' => 'form-control']) }}
- {{ Form::password('password', ['placeholder' => trans('messages.user.password'), 'class' => 'form-control']) }}
+ {{ Form::password('password', ['id' => 'password', 'placeholder' => 'Password', 'class' => 'form-control']) }}
@include('partials/errors')
- {{ 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() }}
diff --git a/tests/e2e/auth.test.js b/tests/e2e/auth.test.js
new file mode 100644
index 0000000..7d4b0e2
--- /dev/null
+++ b/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);
+});
diff --git a/tests/e2e/basics.js b/tests/e2e/basics.js
new file mode 100644
index 0000000..5c158a6
--- /dev/null
+++ b/tests/e2e/basics.js
@@ -0,0 +1,155 @@
+var chai = require('chai'),
+ should = chai.should(),
+ expect = chai.expect,
+ assert = chai.assert;
+
+describe('basic functionality', function() {
+
+ before(function() {
+ browser
+ .setViewportSize({
+ width: 1280,
+ height: 1024
+ }, false)
+ .url('/');
+ });
+
+ describe('basic login', function() {
+
+ it('should have the correct page title', function () {
+ browser.url('/');
+ var title = browser.getTitle();
+ assert.equal(title, 'Easy Bookmark Manager');
+ });
+
+ it('should not login with invalid credentials', function () {
+ browser
+ .setValue('#username', 'admin')
+ .setValue('#password', 'badpassword')
+ .submitForm('#login-form');
+
+ // wait for page to load
+ browser.pause(1000);
+
+ assert.equal(browser.isVisible('div.bg-danger.alert'), true);
+ assert.equal(browser.getText('div.bg-danger.alert ul li'), 'That username/password combo does not exist.');
+ });
+
+ it('should login with valid credentials', function () {
+ browser
+ .setValue('#username', 'admin')
+ .setValue('#password', 'nimda')
+ .submitForm('#login-form');
+
+ // wait for page to load
+ browser.pause(1000);
+ });
+
+ //it('should logout', function () {
+ //
+ //});
+
+ });
+
+ describe('visual elements', function() {
+
+ it('should ensure the "load more..." link behavior', function () {
+ assert.equal(browser.isVisible('div.categories div.panel-heading'), true);
+ assert.equal(browser.getText('div.categories div.panel-heading'), 'Categories');
+
+ //click load more works and disappearing
+ assert.equal(browser.isVisible('div.categories ul li.load-more'), true);
+ browser.click('div.categories ul li.load-more');
+ assert.equal(browser.isVisible('div.categories ul li.load-more'), false);
+ });
+
+ it('should pass a visual regression test against the baseline', function () {
+ //browser.saveScreenshot('./tests/screenshots/compare-list.png');
+ //compare against baseline
+ });
+
+ it('must contain the correct number of search result items', function () {
+
+ //contain 10 items on page
+ var elems = browser.getText('div.search-results div.bs-callout');
+ var count = 0;
+ elems.forEach(function(elem){
+ count++;
+ });
+ assert.equal(count, 10);
+
+ //page number says 1/4
+ assert.equal(browser.getText('p.prev-next-pages'), '1 / 4');
+
+ //previous button hidden
+ assert.equal(browser.isVisible('div.prev-next .button-previous'), false);
+ //next button visible
+ assert.equal(browser.isVisible('div.prev-next .button-next'), true);
+
+ //click next 4 times should have 9 items
+ browser.click('div.prev-next .button-next');
+ browser.pause(200);
+ browser.click('div.prev-next .button-next');
+ browser.pause(200);
+ browser.click('div.prev-next .button-next');
+ browser.pause(200);
+
+ //previous button visible
+ assert.equal(browser.isVisible('div.prev-next .button-previous'), true);
+ //next button hidden
+ assert.equal(browser.isVisible('div.prev-next .button-next'), false);
+
+ //contain 9 items on page
+ var elems = browser.getText('div.search-results div.bs-callout');
+ var count = 0;
+ elems.forEach(function(elem){
+ count++;
+ });
+ assert.equal(count, 9);
+
+ //page number says 4/4
+ assert.equal(browser.getText('p.prev-next-pages'), '4 / 4');
+ });
+
+ //it('must show 5 buttons on the main page', function () {
+ //
+ //});
+ //
+ //it('search api should return 2 items', function () {
+ //
+ //});
+ //
+ //it('click on clear should empty search and return 10 items', function () {
+ //
+ //});
+ //
+ //it('click on category Servers should return 4 items and unclick should return 10 items', function () {
+ //
+ //});
+ //
+ //it('click on remote should return 2 items', function () {
+ //
+ //});
+ //
+ //it('click on server should return 3 items (including clicked remote)', function () {
+ //
+ //});
+ //
+ //it('click on category design should result in 4 items (including tags)', function () {
+ //
+ //});
+ //
+ //it('edit item and save', function () {
+ //
+ //});
+ //
+ //it('create new item', function () {
+ //
+ //});
+ //
+ //it('delete item', function () {
+ //
+ //});
+
+ });
+});
diff --git a/tests/e2e/helpers.js b/tests/e2e/helpers.js
new file mode 100644
index 0000000..440410e
--- /dev/null
+++ b/tests/e2e/helpers.js
@@ -0,0 +1,45 @@
+import { expect } from 'chai';
+import { ClientFunction } from 'testcafe';
+import { Selector } from 'testcafe';
+
+/**
+ * Helper function to return elements by reference (#id, tagname and/or .classname)
+ */
+const getElementByRef = Selector(ref => document.querySelector(ref));
+
+/**
+ * Helper method to return the page title.
+ */
+const getPageTitle = ClientFunction(() => document.title);
+
+/**
+ * Helper method to expect the correct type (e.g. div, li, ul)
+ * and child element count.
+ */
+const snapshotElement = (el, type, childElementCount) => {
+ expect(el.hasChildNodes).to.be.true;
+ expect(el.tagName).eql(type);
+ expect(el.childElementCount).eql(childElementCount);
+ expect(el.hasChildElements).to.be.true;
+ expect(el.visible).to.be.true;
+ expect(el.hasChildNodes).to.be.true;
+ return null;
+}
+
+/**
+ * Helper method to return element by id.
+ */
+const getElementById = Selector(id => document.getElementById(id));
+
+/**
+ * Helper method to return element(s) by classnames.
+ */
+const getElementsByClassName = Selector(className => document.getElementsByClassName(className));
+
+module.exports = {
+ getElementByRef: getElementByRef,
+ getPageTitle: getPageTitle,
+ snapshotElement: snapshotElement,
+ getElementById: getElementById,
+ getElementsByClassName: getElementsByClassName
+}
diff --git a/tests/wdio.conf.js b/tests/wdio.conf.js
new file mode 100644
index 0000000..fcf7aaf
--- /dev/null
+++ b/tests/wdio.conf.js
@@ -0,0 +1,189 @@
+exports.config = {
+
+ //
+ // ==================
+ // Specify Test Files
+ // ==================
+ // Define which test specs should run. The pattern is relative to the directory
+ // from which `wdio` was called. Notice that, if you are calling `wdio` from an
+ // NPM script (see https://docs.npmjs.com/cli/run-script) then the current working
+ // directory is where your package.json resides, so `wdio` will be called from there.
+ //
+ specs: [
+ './tests/e2e/**/*.js'
+ ],
+ // Patterns to exclude.
+ exclude: [
+ // 'path/to/excluded/files'
+ ],
+ //
+ // ============
+ // Capabilities
+ // ============
+ // Define your capabilities here. WebdriverIO can run multiple capabilities at the same
+ // time. Depending on the number of capabilities, WebdriverIO launches several test
+ // sessions. Within your capabilities you can overwrite the spec and exclude options in
+ // order to group specific specs to a specific capability.
+ //
+ // First, you can define how many instances should be started at the same time. Let's
+ // say you have 3 different capabilities (Chrome, Firefox, and Safari) and you have
+ // set maxInstances to 1; wdio will spawn 3 processes. Therefore, if you have 10 spec
+ // files and you set maxInstances to 10, all spec files will get tested at the same time
+ // and 30 processes will get spawned. The property handles how many capabilities
+ // from the same test should run tests.
+ //
+ maxInstances: 10,
+ //
+ // If you have trouble getting all important capabilities together, check out the
+ // Sauce Labs platform configurator - a great tool to configure your capabilities:
+ // https://docs.saucelabs.com/reference/platforms-configurator
+ //
+ capabilities: [{
+ // maxInstances can get overwritten per capability. So if you have an in-house Selenium
+ // grid with only 5 firefox instance available you can make sure that not more than
+ // 5 instance gets started at a time.
+ maxInstances: 5,
+ //
+ browserName: 'phantomjs'
+ }],
+ //
+ // ===================
+ // Test Configurations
+ // ===================
+ // Define all options that are relevant for the WebdriverIO instance here
+ //
+ // By default WebdriverIO commands are executed in a synchronous way using
+ // the wdio-sync package. If you still want to run your tests in an async way
+ // e.g. using promises you can set the sync option to false.
+ sync: true,
+ //
+ // Level of logging verbosity: silent | verbose | command | data | result | error
+ logLevel: 'verbose',
+ //
+ // Enables colors for log output.
+ coloredLogs: true,
+ //
+ // Saves a screenshot to a given path if a command fails.
+ screenshotPath: './tests/screenshots/',
+ //
+ // Set a base URL in order to shorten url command calls. If your url parameter starts
+ // with "/", then the base url gets prepended.
+ baseUrl: 'http://localhost:8000',
+ //
+ // Default timeout for all waitFor* commands.
+ waitforTimeout: 10000,
+ //
+ // Default timeout in milliseconds for request
+ // if Selenium Grid doesn't send response
+ connectionRetryTimeout: 90000,
+ //
+ // Default request retries count
+ connectionRetryCount: 3,
+ //
+ // Initialize the browser instance with a WebdriverIO plugin. The object should have the
+ // plugin name as key and the desired plugin options as properties. Make sure you have
+ // the plugin installed before running any tests. The following plugins are currently
+ // available:
+ // WebdriverCSS: https://github.com/webdriverio/webdrivercss
+ // WebdriverRTC: https://github.com/webdriverio/webdriverrtc
+ // Browserevent: https://github.com/webdriverio/browserevent
+ // plugins: {
+ // webdrivercss: {
+ // screenshotRoot: 'my-shots',
+ // failedComparisonsRoot: 'diffs',
+ // misMatchTolerance: 0.05,
+ // screenWidth: [320,480,640,1024]
+ // },
+ // webdriverrtc: {},
+ // browserevent: {}
+ // },
+ //
+ // Test runner services
+ // Services take over a specific job you don't want to take care of. They enhance
+ // your test setup with almost no effort. Unlike plugins, they don't add new
+ // commands. Instead, they hook themselves up into the test process.
+ // services: [],//
+ // Framework you want to run your specs with.
+ // The following are supported: Mocha, Jasmine, and Cucumber
+ // see also: http://webdriver.io/guide/testrunner/frameworks.html
+ //
+ // Make sure you have the wdio adapter package for the specific framework installed
+ // before running any tests.
+ framework: 'mocha',
+ //
+ // Test reporter for stdout.
+ // The only one supported by default is 'dot'
+ // see also: http://webdriver.io/guide/testrunner/reporters.html
+ reporters: ['dot'],
+
+ //
+ // Options to be passed to Mocha.
+ // See the full list at http://mochajs.org/
+ mochaOpts: {
+ ui: 'bdd'
+ },
+ //
+ // =====
+ // Hooks
+ // =====
+ // WebdriverIO provides several hooks you can use to interfere with the test process in order to enhance
+ // it and to build services around it. You can either apply a single function or an array of
+ // methods to it. If one of them returns with a promise, WebdriverIO will wait until that promise got
+ // resolved to continue.
+ //
+ // Gets executed once before all workers get launched.
+ // onPrepare: function (config, capabilities) {
+ // },
+ //
+ // Gets executed before test execution begins. At this point you can access all global
+ // variables, such as `browser`. It is the perfect place to define custom commands.
+ before: function (capabilities, specs) {
+ //var chai = require('chai');
+ //global.expect = chai.expect;
+ //chai.Should();
+ },
+ //
+ // Hook that gets executed before the suite starts
+ // beforeSuite: function (suite) {
+ // },
+ //
+ // Hook that gets executed _before_ a hook within the suite starts (e.g. runs before calling
+ // beforeEach in Mocha)
+ // beforeHook: function () {
+ // },
+ //
+ // Hook that gets executed _after_ a hook within the suite starts (e.g. runs after calling
+ // afterEach in Mocha)
+ // afterHook: function () {
+ // },
+ //
+ // Function to be executed before a test (in Mocha/Jasmine) or a step (in Cucumber) starts.
+ // beforeTest: function (test) {
+ // },
+ //
+ // Runs before a WebdriverIO command gets executed.
+ // beforeCommand: function (commandName, args) {
+ // },
+ //
+ // Runs after a WebdriverIO command gets executed
+ // afterCommand: function (commandName, args, result, error) {
+ // },
+ //
+ // Function to be executed after a test (in Mocha/Jasmine) or a step (in Cucumber) starts.
+ // afterTest: function (test) {
+ // },
+ //
+ // Hook that gets executed after the suite has ended
+ // afterSuite: function (suite) {
+ // },
+ //
+ // Gets executed after all tests are done. You still have access to all global variables from
+ // the test.
+ // after: function (result, capabilities, specs) {
+ // },
+ //
+ // Gets executed after all workers got shut down and the process is about to exit. It is not
+ // possible to defer the end of the process using a promise.
+ // onComplete: function(exitCode) {
+ // }
+}