tequila backport: Fix validation error messages in the browser

src/source/video_source.js

@@ -119,7 +119,7 @@ class VideoSource extends ImageSource {
         if (this.video) {
             const seekableRange = this.video.seekable;
             if (seconds < seekableRange.start(0) || seconds > seekableRange.end(0)) {
-                this.fire(new ErrorEvent(new ValidationError(`Playback for this video can be set only between the ${seekableRange.start(0)} and ${seekableRange.end(0)}-second mark.`)));
+                this.fire(new ErrorEvent(new ValidationError(`sources.${this.id}`, null, `Playback for this video can be set only between the ${seekableRange.start(0)} and ${seekableRange.end(0)}-second mark.`)));
             } else this.video.currentTime = seconds;
         }
     }

src/style-spec/error/parsing_error.js

@@ -1,12 +1,15 @@
 // @flow
 
-export default class ParsingError extends Error {
+// Note: Do not inherit from Error. It breaks when transpiling to ES5.
+
+export default class ParsingError {
+    message: string;
     error: Error;
     line: number;
 
     constructor(error: Error) {
-        super(error.message);
         this.error = error;
+        this.message = error.message;
         const match = error.message.match(/line (\d+)/);
         this.line = match ? parseInt(match[1], 10) : 0;
     }

src/style-spec/error/validation_error.js

@@ -1,11 +1,14 @@
 // @flow
 
-export default class ValidationError extends Error {
+// Note: Do not inherit from Error. It breaks when transpiling to ES5.
+
+export default class ValidationError {
+    message: string;
     identifier: ?string;
     line: ?number;
 
-    constructor(key: string | null, value?: any, message?: string, identifier?: string) {
-        super([key, message].filter(a => a).join(': '));
+    constructor(key: ?string, value: ?{ __line__: number }, message: string, identifier: ?string) {
+        this.message = (key ? `${key}: ` : '') + message;
         if (identifier) this.identifier = identifier;
 
         if (value !== null && value !== undefined && value.__line__) {

src/util/evented.js

@@ -31,10 +31,14 @@ export class Event {
     }
 }
 
+interface ErrorLike {
+    message: string;
+}
+
 export class ErrorEvent extends Event {
-    error: Error;
+    error: ErrorLike;
 
-    constructor(error: Error, data: Object = {}) {
+    constructor(error: ErrorLike, data: Object = {}) {
         super('error', extend({error}, data));
     }
 }

test/unit/style-spec/validate.test.js

@@ -6,23 +6,14 @@ import validate from '../../../src/style-spec/validate_style';
 
 const UPDATE = !!process.env.UPDATE;
 
-function sanitizeError(error) {
-    const sanitized = {};
-    sanitized.message = error.message;
-    for (const key in error) {
-        sanitized[key] = error[key];
-    }
-    return sanitized;
-}
-
 glob.sync(`${__dirname}/fixture/*.input.json`).forEach((file) => {
     test(path.basename(file), (t) => {
         const outputfile = file.replace('.input', '.output');
         const style = fs.readFileSync(file);
         const result = validate(style);
         if (UPDATE) fs.writeFileSync(outputfile, JSON.stringify(result, null, 2));
         const expect = JSON.parse(fs.readFileSync(outputfile));
-        t.deepEqual(result.map(sanitizeError), expect);
+        t.deepEqual(result, expect);
         t.end();
     });
 });

test/unit/style-spec/validate_mapbox_api_supported.test.js

@@ -6,23 +6,14 @@ import validateMapboxApiSupported from '../../../src/style-spec/validate_mapbox_
 
 const UPDATE = !!process.env.UPDATE;
 
-function sanitizeError(error) {
-    const sanitized = {};
-    sanitized.message = error.message;
-    for (const key in error) {
-        sanitized[key] = error[key];
-    }
-    return sanitized;
-}
-
 glob.sync(`${__dirname}/fixture/*.input.json`).forEach((file) => {
     test(path.basename(file), (t) => {
         const outputfile = file.replace('.input', '.output-api-supported');
         const style = fs.readFileSync(file);
         const result = validateMapboxApiSupported(style);
         if (UPDATE) fs.writeFileSync(outputfile, JSON.stringify(result, null, 2));
         const expect = JSON.parse(fs.readFileSync(outputfile));
-        t.deepEqual(result.map(sanitizeError), expect);
+        t.deepEqual(result, expect);
         t.end();
     });
 });