Update fontawesome docs

Update integration paths for webdriverio tests
First iteration of integration webdriverio.

.sauce.yml

@@ -0,0 +1,4 @@
+---
+  language: "javascript"
+  framework: "webdriverio"
+  configPath: "wdio.conf.js"

dist/jquery.contextMenu.css

@@ -12,7 +12,7 @@
  * Licensed under
  *   MIT License http://www.opensource.org/licenses/mit-license
  *
- * Date: 2016-07-17T19:45:35.350Z
+ * Date: 2016-08-26T12:03:55.082Z
  */
 @font-face {
   font-family: "context-menu-icons";

dist/jquery.contextMenu.js

@@ -12,7 +12,7 @@
  *   MIT License http://www.opensource.org/licenses/mit-license
  *   GPL v3 http://opensource.org/licenses/GPL-3.0
  *
- * Date: 2016-08-26T11:25:39.329Z
+ * Date: 2016-08-26T12:03:55.490Z
  */
 
 (function (factory) {

documentation/couscous.yml

@@ -15,6 +15,7 @@ scripts:
     - cp -R ../dist/* website/dist/
   after:
     - rm -rf website/dist/
+    - cp .couscous/generated/demo/* ../test/integration/html
 
 
 github:
@@ -51,6 +52,9 @@ menu:
                 custom-icons:
                     text: Customize icons
                     relativeUrl: docs/customize.html
+                fontawesome-icons:
+                    text: FontAwesome icons
+                    relativeUrl: demo/fontawesome-icons.html
                 font-awesome:
                     text: Font Awesome support
                     relativeUrl: docs/font-awesome.html
@@ -73,6 +77,9 @@ menu:
               simple-context-menu:
                   text: Simple Context Menu
                   relativeUrl: demo.html
+              fontawesome-icons:
+                  text: FontAwesome icons
+                  relativeUrl: demo/fontawesome-icons.html
               accesskeys:
                   text: Accesskeys
                   relativeUrl: demo/accesskeys.html

documentation/demo/fontawesome-icons.md

@@ -0,0 +1,45 @@
+---
+currentMenu: accesskeys
+---
+
+# Demo: Accesskeys
+
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+
+
+- [Example code](#example-code)
+- [Example HTML](#example-html)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+
+The menu allows you to use [FontAwesome](http://fontawesome.io/) [icons](http://fontawesome.io/icons/) in your menu. Just include the CSS for FontAwesome and you are ready to go.
+
+<span class="context-menu-one btn btn-neutral">right click me</span>
+
+## Example code
+
+<script type="text/javascript" class="showcase">
+ $(function() {
+    $.contextMenu({
+        selector: '.context-menu-one',
+        callback: function(key, options) {
+            var m = "clicked: " + key;
+            window.console && console.log(m) || alert(m);
+        },
+        items: {
+            "edit": {name: "Edit", icon: "fa-edit"},
+            "cut": {name: "Beer", icon: "fa-beer"},
+            copy: {name: "Cloud download", icon: "fa-cloud-download"},
+            "paste": {name: "Certificate", icon: "fa-certificate"}
+        }
+    });
+
+    $('.context-menu-one').on('click', function(e){
+        console.log('clicked', this);
+    })
+});
+</script>
+
+## Example HTML
+<div style="display:none;" class="showcase" data-showcase-import=".context-menu-one"></div>

documentation/docs/customize.md

@@ -8,6 +8,8 @@ You can add icons to src/icons and run ``gulp build-icons``. This will make the
 
 So for example the file checkmark.svg wil result in the CSS context-menu-icon-checkmark which you can use by using the [icon option](items#icon) when defining a menu item.
 
+Is is also possible to just use FontAwesome icons, see the [demo of FontAwesome](demo/fontawesome-icons). 
+
 ### Example
 
 ```javascript

documentation/docs/font-awesome.md

@@ -6,17 +6,8 @@ currentMenu: font-awesome
 
 It is possible to use font-awesome icons if you like. You need to include the [Font Awesome CSS](https://www.bootstrapcdn.com/fontawesome/) in your application. That will enable you to use the icon classes to use those icons.
 
-### Example
-
-```javascript
-var items = {
-    firstCommand: {        
-        name: "Paste",
-        icon: "fa-trash" // Font-awesome trash icon
-    }
-}
-```
+Check out the [demo](demo/fontawesome-icons)
 
 ## Bring your own icons
 
-It is also possible to use your own SVG icons if you like, you can [customize](customize) this by using the SASS files.
+It is also possible to use your own SVG icons if you like, you can [customize](customize) this by using the SASS files.

gulpfile.js

@@ -158,11 +158,26 @@ gulp.task('build-icons', function () {
         .pipe(gulp.dest(icons.fontOutputPath));
 });
 
+/**
+ * Update paths in integration tests that are generated by the documentation
+ * generator so they use the local source.
+ */
+gulp.task('integration-test-paths', function(){
+
+
+    return gulp.src('test/integration/html/*.html').
+    pipe(plugins.replace('https\:\/\/swisnl\.github\.io\/jQuery-contextMenu\/dist\/jquery\.ui\.position\.min\.js', '\.\.\/\.\.\/\.\.\/dist\/jquery\.ui\.position\.min\.js')).
+    pipe(plugins.replace('https\:\/\/swisnl\.github\.io\/jQuery\-contextMenu\/dist\/', '\.\.\/\.\.\/\.\.\/src\/')).
+    pipe(plugins.replace('\/src\/jquery.contextMenu.css', '\/dist\/jquery.contextMenu.css')).
+    pipe(gulp.dest('test/integration/html/'));
+});
+
+
 gulp.task('watch', ['js', 'css'], function () {
-  gulp.watch(scripts.src, ['js']);
-  gulp.watch(styles.all, ['css']);
+    gulp.watch(scripts.src, ['js']);
+    gulp.watch(styles.all, ['css']);
 });
 
-gulp.task('build', ['build-icons', 'css', 'js']);
+gulp.task('build', ['build-icons', 'css', 'js', 'integration-test-paths']);
 
 gulp.task('default', ['watch']);

package.json

@@ -38,7 +38,12 @@
     "karma-phantomjs-launcher": "^1.0.0",
     "karma-qunit": "^1.0.0",
     "lodash": "^4.13.1",
-    "qunitjs": "^2.0.0"
+    "qunitjs": "^2.0.0",
+    "wdio-dot-reporter": "0.0.6",
+    "wdio-mocha-framework": "^0.4.0",
+    "wdio-sauce-service": "^0.2.4",
+    "wdio-selenium-standalone-service": "0.0.5",
+    "webdriverio": "^4.2.7"
   },
   "description": "Management facility for context menus. Developed for a large number of triggering objects. HTML5 Polyfill",
   "keywords": [
@@ -89,6 +94,8 @@
   ],
   "scripts": {
     "test": "npm run test-unit",
-    "test-unit": "./node_modules/karma/bin/karma start"
+    "test-unit": "./node_modules/karma/bin/karma start",
+    "test-sauce": "./node_modules/.bin/wdio wdio.conf.js",
+    "install-wdio": "npm install wdio-dot-reporter wdio-mocha-framework wdio-sauce-service wdio-selenium-standalone-service webdriverio"
   }
 }

src/sass/icons/_variables.scss

@@ -1,5 +1,5 @@
 // DON'T MANUALLY EDIT THIS FILE; run `gulp build-icons` instead.
-$context-menu-icons-cachebust: "14l1a";
+$context-menu-icons-cachebust: "2cl8a";
 $context-menu-icons: (
 add: "EA01",
 copy: "EA02",

test/integration/accesskeys.js

@@ -0,0 +1,48 @@
+var pwd = process.cwd();
+var helper = require('../integration_test_helper.js');
+
+// this test uses custom HTML because PhantomJS
+// has problems showing alert modal dialogs.
+// We are testing callbacks against simple DOM
+// manipulations instead.
+module.exports = {
+  'Typing <e> on keyboard triggers "edit" menu item callback': function (test) {
+    test
+      .open('file://' + pwd + '/test/integration/html/accesskeys_test.html')
+      .execute(helper.rightClick, '.context-menu-one')
+      .waitForElement('#context-menu-layer')
+      .sendKeys('body', 'e')
+      .assert.text('#msg', 'clicked: edit', 'Edit menu item callback is triggered by accesskey')
+      .done();
+  },
+
+  'Typing <c> on keyboard triggers "cut" menu item callback': function (test) {
+    test
+      .open('file://' + pwd + '/test/integration/html/accesskeys_test.html')
+      .execute(helper.rightClick, '.context-menu-one')
+      .waitForElement('#context-menu-layer')
+      .sendKeys('body', 'c')
+      .assert.text('#msg', 'clicked: cut', 'Cut menu item callback is triggered by accesskey')
+      .done();
+  },
+
+  'Typing <o> on keyboard triggers "copy" menu item callback': function (test) {
+    test
+      .open('file://' + pwd + '/test/integration/html/accesskeys_test.html')
+      .execute(helper.rightClick, '.context-menu-one')
+      .waitForElement('#context-menu-layer')
+      .sendKeys('body', 'o')
+      .assert.text('#msg', 'clicked: copy', 'Copy menu item callback is triggered by accesskey')
+      .done();
+  },
+
+  'Typing <p> on keyboard triggers "paste" menu item callback': function (test) {
+    test
+      .open('file://' + pwd + '/test/integration/html/accesskeys_test.html')
+      .execute(helper.rightClick, '.context-menu-one')
+      .waitForElement('#context-menu-layer')
+      .sendKeys('body', 'p')
+      .assert.text('#msg', 'clicked: paste', 'Paste menu item callback is triggered by accesskey')
+      .done();
+  }
+};

test/integration/async-create.js

@@ -0,0 +1,15 @@
+var pwd = process.cwd();
+var helper = require('../integration_test_helper.js');
+
+module.exports = {
+  'Render async context menu': function (test) {
+    test
+      .open('file://' + pwd + '/test/integration/html/async-create.html')
+      .execute(helper.rightClick, '.context-menu-one', 'mouseup')
+      .waitForElement('#context-menu-layer')
+      .assert.exists('.context-menu-root', 'It opens context menu')
+      .assert.numberOfElements('.context-menu-root li')
+        .is(3, '3 context menu items are shown')
+      .done();
+  }
+};

test/integration/callback.js

@@ -0,0 +1,60 @@
+var pwd = process.cwd();
+var helper = require('../integration_test_helper.js');
+
+// this test uses custom HTML because PhantomJS
+// has problems showing alert modal dialogs.
+// We are testing callbacks against simple DOM
+// manipulations instead.
+module.exports = {
+  'Ensure edit menu item triggers callback': function (test) {
+    test
+      .open('file://' + pwd + '/test/integration/html/callback_test.html')
+      .execute(helper.rightClick, '.context-menu-one')
+      .waitForElement('#context-menu-layer')
+      .wait(100)
+      .assert.visible('.context-menu-root', 'Menu is present')
+      .click('.context-menu-root li:nth-child(1)') // edit
+      .assert.text('#msg', 'edit was clicked', 'Edit item triggers callback')
+      .assert.doesntExist('#context-menu-layer', 'It closes context menu')
+      .done();
+  },
+
+  'Ensure cut menu item triggers global callback': function (test) {
+    test
+      .open('file://' + pwd + '/test/integration/html/callback_test.html')
+      .execute(helper.rightClick, '.context-menu-one')
+      .waitForElement('#context-menu-layer')
+      .wait(100)
+      .assert.visible('.context-menu-root', 'Menu is present')
+      .click('.context-menu-root li:nth-child(2)') // cut
+      .assert.text('#msg', 'global: cut', 'Cut item triggers callback')
+      .assert.doesntExist('#context-menu-layer', 'It closes context menu')
+      .done();
+  },
+
+  'Ensure delete menu item triggers global callback': function (test) {
+    test
+      .open('file://' + pwd + '/test/integration/html/callback_test.html')
+      .execute(helper.rightClick, '.context-menu-one')
+      .waitForElement('#context-menu-layer')
+      .wait(100)
+      .assert.visible('.context-menu-root', 'Menu is present')
+      .click('.context-menu-root li:nth-child(5)') // delete
+      .assert.text('#msg', 'global: delete', 'delete item triggers callback')
+      .assert.doesntExist('#context-menu-layer', 'It closes context menu')
+      .done();
+  },
+
+  'Ensure quit menu item triggers global callback': function (test) {
+    test
+      .open('file://' + pwd + '/test/integration/html/callback_test.html')
+      .execute(helper.rightClick, '.context-menu-one')
+      .waitForElement('#context-menu-layer')
+      .wait(100)
+      .assert.visible('.context-menu-root', 'Menu is present')
+      .click('.context-menu-root li:nth-child(7)') // quit
+      .assert.text('#msg', 'global: quit', 'quit item triggers callback')
+      .assert.doesntExist('#context-menu-layer', 'It closes context menu')
+      .done();
+  }
+};

test/integration/custom-command.js

@@ -0,0 +1,42 @@
+var pwd = process.cwd();
+var helper = require('../integration_test_helper.js');
+
+// this test uses custom HTML because PhantomJS
+// has problems showing alert modal dialogs.
+// We are testing callbacks against simple DOM
+// manipulations instead.
+module.exports = {
+  'Click custom comand menu item triggers menu callback': function (test) {
+    test
+      .open('file://' + pwd + '/test/integration/html/custom-command_test.html')
+      .execute(helper.rightClick, '.context-menu-one')
+      .waitForElement('#context-menu-layer')
+      .assert.numberOfElements('.context-menu-root>li')
+        .is(3, '3 context menu items are shown')
+      .click('.context-menu-root li.labels')
+      .assert.text('#msg').to.contain('clicked: label', 'contextMenu callback was triggered')
+      .done();
+  },
+
+  'Click custom comand menu item label triggers custom action - red': function (test) {
+    test
+      .open('file://' + pwd + '/test/integration/html/custom-command_test.html')
+      .execute(helper.rightClick, '.context-menu-one')
+      .waitForElement('#context-menu-layer')
+      .wait(100)
+      .click('.context-menu-root li.labels .label1')
+      .assert.text('#msg', 'clicked: label | text: label 1', 'custom action was triggered')
+      .done();
+  },
+
+  'Click custom comand menu item label triggers custom action - blue': function (test) {
+    test
+      .open('file://' + pwd + '/test/integration/html/custom-command_test.html')
+      .execute(helper.rightClick, '.context-menu-one')
+      .waitForElement('#context-menu-layer')
+      .wait(100)
+      .click('.context-menu-root li.labels .label3')
+      .assert.text('#msg', 'clicked: label | text: label 3', 'custom action was triggered')
+      .done();
+  }
+};

test/integration/disabled-callback.js

@@ -0,0 +1,32 @@
+var pwd = process.cwd();
+var helper = require('../integration_test_helper.js');
+
+// this test uses custom HTML because PhantomJS
+// has problems showing alert modal dialogs.
+// We are testing callbacks against simple DOM
+// manipulations instead.
+module.exports = {
+  'Clicking on disabled item has no effect': function (test) {
+    test
+      .open('file://' + pwd + '/test/integration/html/disabled-callback_test.html')
+      .execute(helper.rightClick, '.context-menu-one')
+      .waitForElement('#context-menu-layer')
+      .wait(100)
+      .assert.numberOfElements('.context-menu-root li')
+        .is(2, '2 context menu items are shown')
+      .click('.context-menu-root li:last-child')
+      .assert.text('#msg', '', 'Disabled menu item didnt set text')
+      .done();
+  },
+
+  'Clicking on enabled item works': function (test) {
+    test
+      .open('file://' + pwd + '/test/integration/html/disabled_test.html')
+      .execute(helper.rightClick, '.context-menu-one')
+      .waitForElement('#context-menu-layer')
+      .wait(100)
+      .click('.context-menu-root li:first-child')
+      .assert.text('#msg', 'clicked: edit', 'Enabled menu item sets text')
+      .done();
+  }
+};