Merge pull request #365 from mulesoft/bugs/console-loader-error-handling

Handler raml parser 1.0 errors properly on raml-console-loader directive

Author: agustinlg

dist/scripts/api-console.js

@@ -1163,18 +1163,14 @@
         $scope.vm.error  = void(0);
 
         if(RAML.LoaderUtils.ramlOriginValidate(url, $scope.options)) {
-          $scope.vm.error = {buffer : 'RAML origin check failed. Raml does not reside underneath the path:' + RAML.LoaderUtils.allowedRamlOrigin($scope.options)};
+          $scope.vm.error = {message : 'RAML origin check failed. Raml does not reside underneath the path:' + RAML.LoaderUtils.allowedRamlOrigin($scope.options)};
         } else {
           return ramlParser.loadPath($window.resolveUrl(url), null, $scope.options)
             .then(function (raml) {
               $scope.vm.raml = raml;
             })
             .catch(function (error) {
-              $scope.vm.error = angular.extend(error, {
-                /*jshint camelcase: false */
-                buffer: (error.context_mark || error.problem_mark).buffer
-                /*jshint camelcase: true */
-              });
+              $scope.vm.error = error;
             })
             .finally(function () {
               $scope.vm.loaded = true;
@@ -6979,17 +6975,12 @@ angular.module('ramlConsoleApp').run(['$templateCache', function($templateCache)
     "        </header>\n" +
     "\n" +
     "        <div class=\"raml-console-initializer-row\">\n" +
-    "          <p class=\"raml-console-initializer-input-container\" style=\"height: 550px;\">\n" +
-    "            <textarea id=\"raml\" ui-codemirror=\"{\n" +
-    "              gutters:      ['CodeMirror-lint-markers'],\n" +
-    "              lineNumbers:  true,\n" +
-    "              lineWrapping: false,\n" +
-    "              lint:         true,\n" +
-    "              mode:         'yaml',\n" +
-    "              tabSize:      2,\n" +
-    "              theme:        'raml-console'\n" +
-    "            }\" ng-model=\"vm.error.buffer\"></textarea>\n" +
-    "          </p>\n" +
+    "          <div class=\"raml-console-parser-error\">\n" +
+    "            <span>{{ vm.error.message }}</span>\n" +
+    "          </div>\n" +
+    "          <div class=\"raml-console-error-pre\" ng-repeat=\"err in vm.error.parserErrors\">\n" +
+    "            {{err.message}}\n" +
+    "          </div>\n" +
     "        </div>\n" +
     "      </section>\n" +
     "    </div>\n" +

src/app/directives/raml-console-loader.js

@@ -41,18 +41,14 @@
         $scope.vm.error  = void(0);
 
         if(RAML.LoaderUtils.ramlOriginValidate(url, $scope.options)) {
-          $scope.vm.error = {buffer : 'RAML origin check failed. Raml does not reside underneath the path:' + RAML.LoaderUtils.allowedRamlOrigin($scope.options)};
+          $scope.vm.error = {message : 'RAML origin check failed. Raml does not reside underneath the path:' + RAML.LoaderUtils.allowedRamlOrigin($scope.options)};
         } else {
           return ramlParser.loadPath($window.resolveUrl(url), null, $scope.options)
             .then(function (raml) {
               $scope.vm.raml = raml;
             })
             .catch(function (error) {
-              $scope.vm.error = angular.extend(error, {
-                /*jshint camelcase: false */
-                buffer: (error.context_mark || error.problem_mark).buffer
-                /*jshint camelcase: true */
-              });
+              $scope.vm.error = error;
             })
             .finally(function () {
               $scope.vm.loaded = true;

src/app/directives/raml-console-loader.tpl.html

@@ -13,17 +13,12 @@ <h4 class="raml-console-initializer-subhead">Error while parsing</h4>
         </header>
 
         <div class="raml-console-initializer-row">
-          <p class="raml-console-initializer-input-container" style="height: 550px;">
-            <textarea id="raml" ui-codemirror="{
-              gutters:      ['CodeMirror-lint-markers'],
-              lineNumbers:  true,
-              lineWrapping: false,
-              lint:         true,
-              mode:         'yaml',
-              tabSize:      2,
-              theme:        'raml-console'
-            }" ng-model="vm.error.buffer"></textarea>
-          </p>
+          <div class="raml-console-parser-error">
+            <span>{{ vm.error.message }}</span>
+          </div>
+          <div class="raml-console-error-pre" ng-repeat="err in vm.error.parserErrors">
+            {{err.message}}
+          </div>
         </div>
       </section>
     </div>

test/regression/assets/directive-wrong.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>API Console</title>
+  <link href="styles/api-console-light-theme.css" rel="stylesheet" class="theme">
+</head>
+<body ng-app="ramlConsoleApp" ng-cloak class="raml-console-body">
+  <raml-console-loader src="raml/wrong.raml"></raml-console-loader>
+  <script src="scripts/api-console-vendor.js"></script>
+  <script src="scripts/api-console.js"></script>
+  <script type="text/javascript">
+    $.noConflict();
+  </script>
+</body>
+</html>

test/regression/page_objects/errorPO.js

@@ -4,7 +4,7 @@ var basePO = require('./basePO');
 
 function ErrorPO () {
   this.title        = element(by.css('.raml-console-heading'));
-  this.errorMessage = element(by.css('.raml-console-error-message'));
+  this.errorMessage = element(by.css('.raml-console-parser-error'));
   this.errorSnippet = element(by.css('.raml-console-error-snippet'));
 
   this.getTitle = function () {

test/regression/standalone/directiveSpec.js

@@ -4,6 +4,18 @@ var assertions = require('../assertions');
 var factory    = require('../page_objects');
 
 module.exports = function() {
+
+  it('should be able to diplay errors for wrong raml', function () {
+    // Arrange
+    var assert = assertions.create('error');
+
+    // Act
+    browser.get('http://localhost:9000/directive-wrong.html');
+
+    // Assert
+    assert.ifErrorMessageIsPresent('Api contains errors.');
+  });
+
   it('should be able to diplay the API title', function () {
     // Arrange
     var assert = assertions.create('resource');