Merge pull request #510 from mulesoft/demo

Demos and tests

Author: agustinlg

.jshintrc

@@ -14,6 +14,7 @@
   "undef": true,
   "unused": true,
   "newcap": false,
+  "mocha": true,
   "globals": {
     "Polymer": true,
     "ArcBehaviors": true,

api-console-request.html

@@ -105,33 +105,19 @@
       ],
 
       properties: {
-        /**
-         * Current path to the resource / method / documentation.
-         * This is updated when the user select a specific node in the RAML JSON structure that
-         * represents one of this properties. When changed from the outside (by the app) it will
-         * update the view to display selected path.
-         */
-        path: {
-          type: String,
-          notify: true
-        },
         // Selected object in the navigation menu and parsed by the
         // `raml-path-selector` element
         selectedObject: {
           type: Object,
           observer: '_selectedObjectChanged'
         },
-        // A parent endpoint of selected method object (if any).
-        selectedParent: Object,
         // If true it will display a narrow layout.
         narrow: {
           type: Boolean,
           notify: true
         },
         // The RAML definition JSON object
-        raml: {
-          type: Object
-        },
+        raml: Object,
         // OAuth2 redirect URL
         redirectUrl: String,
         /**
@@ -156,7 +142,6 @@
         // Computed value, true, when the response object is set.
         hasResponse: {
           type: Boolean,
-          value: false,
           computed: '_computeHasResponse(response)'
         },
         // Response full loading time.
@@ -226,7 +211,10 @@
          * Location of the `bower_components` folder.
          * It should be a path from server's root path including bower_components.
          */
-        bowerLocation: String,
+        bowerLocation: {
+          type: String,
+          observer: '_updateRedirectUrl'
+        },
         /**
          * Hides the URL editor from the view.
          * Note that the editor is still in the DOM. This property just hiddes
@@ -240,13 +228,14 @@
       },
 
       ready: function() {
-        this._setRedirectUrl();
+        if (!this.redirectUrl) {
+          this._updateRedirectUrl(this.bowerLocation);
+        }
         this._initExtensionBanner();
       },
       // Sets OAuth 2 redirect URL for the authorization panel
-      _setRedirectUrl: function() {
+      _updateRedirectUrl: function(location) {
         var a = document.createElement('a');
-        var location = this.bowerLocation;
         if (!location) {
           location = 'bower_components/';
         }

api-console.html

@@ -146,11 +146,8 @@
               no-extension-banner="[[noExtensionBanner]]"
               narrow="[[narrow]]"
               name="request"
-              page="[[page]]"
               scroll-target="[[scrollTarget]]"
               selected-object="[[selectedObject]]"
-              selected-parent="[[selectedParent]]"
-              path="{{path}}"
               append-headers="[[_computeAppendHeaders(appendHeaders)]]"
               proxy="[[proxy]]"
               proxy-encode-url="[[proxyEncodeUrl]]"

bower.json

@@ -47,19 +47,20 @@
   },
   "devDependencies": {
     "iron-component-page": "polymerelements/iron-component-page#1.0.0",
-    "web-component-tester": "^4.0.0",
+    "web-component-tester": "^6.0.0",
     "paper-styles": "polymerelements/paper-styles#^1.0.2",
     "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
-    "iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
-    "test-fixture": "PolymerElements/test-fixture#^1.0.0",
+    "iron-test-helpers": "PolymerElements/iron-test-helpers#^1.4.0",
+    "test-fixture": "PolymerElements/test-fixture#^3.0.0",
     "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
     "arc-demo-helpers": "advanced-rest-client/arc-demo-helpers#^1.0.4",
     "paper-dropdown-menu": "PolymerElements/paper-dropdown-menu#^1.4.3",
     "paper-listbox": "polymerelements/paper-listbox#^1.1.2",
     "paper-item": "PolymerElements/paper-item#^1.2.1",
     "raml-docs-helpers": "advanced-rest-client/raml-docs-helpers#^1.0.5",
     "app-route": "PolymerElements/app-route#^1.0.0",
-    "raml-aware": "advanced-rest-client/raml-aware#^1.0.3"
+    "raml-aware": "advanced-rest-client/raml-aware#^1.0.3",
+    "paper-toggle-button": "PolymerElements/paper-toggle-button#<2"
   },
   "ignore": [
     "**/.*",

demo/app.html

@@ -17,7 +17,7 @@
   <title>API Console</title>
   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
   <link rel="import" href="../../raml-docs-helpers/raml-docs-parser.html">
-  <link rel="import" href="../../paper-checkbox/paper-checkbox.html">
+  <link rel="import" href="../../paper-toggle-button/paper-toggle-button.html">
   <link rel="import" href="../../app-route/app-location.html">
   <link rel="import" href="../api-console.html">
 
@@ -43,18 +43,14 @@
 
   .wrapper {
     position: relative;
+    background-color: #fff;
     @apply(--layout-flex);
   }
 
   api-console {
     background-color: #fff;
   }
 
-  :root {
-    --paper-checkbox-unchecked-color: #fff;
-    --paper-checkbox-label-color: #fff;
-  }
-
   .powered-by {
     @apply(--layout-horizontal);
     @apply(--layout-center-center);
@@ -66,13 +62,40 @@
   a img {
     text-underline: none;
   }
+
+  .console-controls {
+    padding: 4px 12px;
+    @apply --layout-horizontal;
+    @apply --layout-center;
+  }
+
+  .console-controls > * {
+    margin-right: 12px;
+  }
+
+  .console-controls paper-toggle-button {
+    cursor: pointer;
+  }
+
+  .console-controls {
+    --paper-toggle-button-checked-button-color: #00A2DF;
+  }
+
+  raml-docs-parser {
+    margin: 4px 12px;
+  }
   </style>
 </head>
 
 <body unresolved>
   <app-location use-hash-as-path></app-location>
 
   <div id="content">
+    <div class="console-controls">
+      <paper-toggle-button data-action="parser" checked>Display RAML parser</paper-toggle-button>
+      <paper-toggle-button data-action="noTryIt">No try it</paper-toggle-button>
+      <paper-toggle-button data-action="narrow">Render narrow</paper-toggle-button>
+    </div>
     <raml-docs-parser></raml-docs-parser>
     <div class="wrapper">
       <api-console>

demo/app.js

@@ -34,6 +34,7 @@
     apiconsole.app.setInitialRouteData();
     apiconsole.app.addParserListeners();
     apiconsole.app.observeRouteEvents();
+    apiconsole.app.observeConsoleControls();
   };
 
   apiconsole.app.setInitialRouteData = function() {
@@ -159,6 +160,32 @@
     };
   };
 
+  apiconsole.app.observeConsoleControls = function() {
+    var toggles = document.querySelectorAll('.console-controls paper-toggle-button');
+    for (var i = 0, len = toggles.length; i < len; i++) {
+      toggles[i].addEventListener('checked-changed', apiconsole.app.consoleControlsChanged);
+    }
+  };
+
+  apiconsole.app.consoleControlsChanged = function(e) {
+    var action = e.target.dataset.action;
+    switch (action) {
+      case 'parser':
+        var parser = document.querySelector('raml-docs-parser');
+        if (e.detail.value) {
+          parser.removeAttribute('hidden');
+        } else {
+          parser.setAttribute('hidden', true);
+        }
+        break;
+      case 'noTryIt':
+      case 'narrow':
+        var apiConsole = document.querySelector('api-console');
+        apiConsole[action] = e.detail.value;
+        break;
+    }
+  };
+
   // Notifys user when something went wrong...
   apiconsole.app.notifyInitError = function(message) {
     window.alert('Cannot initialize API console. ' + message);

demo/index.html

@@ -18,6 +18,7 @@
   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
   <link rel="import" href="../../raml-docs-helpers/raml-docs-parser.html">
   <link rel="import" href="../../paper-checkbox/paper-checkbox.html">
+  <link rel="import" href="../../paper-toggle-button/paper-toggle-button.html">
   <link rel="import" href="../api-console.html">
   <link rel="import" href="../../font-roboto/roboto.html">
 
@@ -43,6 +44,7 @@
 
   .wrapper {
     position: relative;
+    background-color: #fff;
     @apply(--layout-flex);
   }
 
@@ -56,8 +58,8 @@
   }
 
   .powered-by {
-    @apply(--layout-horizontal);
-    @apply(--layout-center-center);
+    @apply --layout-horizontal;
+    @apply --layout-center-center;
     padding: 12px 0px;
     border-top: 1px rgba(0,0,0,0.24) solid;
     margin: 8px 12px 0 12px;
@@ -66,18 +68,43 @@
   a img {
     text-underline: none;
   }
+
+  .console-controls {
+    padding: 4px 12px;
+    @apply --layout-horizontal;
+    @apply --layout-center;
+  }
+
+  .console-controls > * {
+    margin-right: 12px;
+  }
+
+  .console-controls paper-toggle-button {
+    cursor: pointer;
+  }
+
+  .console-controls {
+    --paper-toggle-button-checked-button-color: #00A2DF;
+  }
+
+  raml-docs-parser {
+    margin: 4px 12px;
+  }
   </style>
 </head>
 
 <body unresolved>
   <template is="dom-bind" id="app">
 
     <div id="content">
-      <raml-docs-parser raml="{{raml}}"></raml-docs-parser>
+      <div class="console-controls">
+        <paper-toggle-button checked="{{parserEnabled}}">Display RAML parser</paper-toggle-button>
+        <paper-toggle-button checked="{{noTryIt}}">No try it</paper-toggle-button>
+        <paper-toggle-button checked="{{narrow}}">Render narrow</paper-toggle-button>
+      </div>
+      <raml-docs-parser raml="{{raml}}" hidden$="[[!parserEnabled]]"></raml-docs-parser>
       <div class="wrapper">
         <api-console raml="[[raml]]" append-headers="X-key: my-api-key\nOther-header:value" narrow="[[narrow]]" manual-navigation="[[manualNavigation]]" navigation-opened="{{navigationOpened}}" no-try-it="[[noTryIt]]">
-          <paper-checkbox nav checked="{{noTryIt}}">No try it</paper-checkbox>
-          <paper-checkbox nav checked="{{narrow}}">Render narrow</paper-checkbox>
           <paper-checkbox nav checked="{{manualNavigation}}">Manual navigation</paper-checkbox>
           <button nav hidden="[[!manualNavigation]]" on-tap="toggleNavigation">Toggle navigation</button>
           <div class="powered-by" nav-addon>
@@ -90,7 +117,7 @@
   <script>
   (function(scope) {
     'use strict';
-    // scope.navigationOpened = false;
+    scope.parserEnabled = true;
     scope.toggleNavigation = function() {
       if (scope.navigationOpened === undefined) {
         scope.navigationOpened = true;

package.json

@@ -4,7 +4,7 @@
   "license": "CPAL-1.0",
   "description": "The API console used in RAML platform.",
   "devDependencies": {
-    "polymer-cli": "^0.17.0"
+    "polymer-cli": "^1.2.0"
   },
   "engines": {
     "node": ">=0.10.0"
@@ -19,8 +19,8 @@
   "scripts": {
     "serve": "node_modules/.bin/polymer serve",
     "lint": "node_modules/.bin/polymer lint api-console.html api-console-request.html",
-    "test-sauce": "exit 0; node_modules/.bin/polymer test --plugin sauce --job-name \"api-console:local-test\"",
-    "test": "node_modules/.bin/polymer test",
+    "test-sauce": "node_modules/.bin/polymer test --plugin sauce --job-name \"api-console:local-test\"",
+    "test": "node_modules/.bin/polymer test --plugin local",
     "deps": "npm i --quiet && bower install --quiet",
     "update-deps": "npm i --quiet && bower update --quiet"
   },

polymer.json

@@ -0,0 +1,5 @@
+{
+  "lint": {
+    "rules": ["polymer-1"]
+  }
+}

test/index.html

@@ -24,7 +24,9 @@
         'basic-test.html',
         'basic-test.html?dom=shadow',
         'raml-aware-test.html',
-        'raml-aware-test.html?dom=shadow'
+        'raml-aware-test.html?dom=shadow',
+        'request-test.html',
+        'request-test.html?dom=shadow'
       ]);
     </script>
   </body>