Added balsamiq jasmine integration test

2 files changed, 36 insertions, 20 deletions

diff --git a/app/assets/javascripts/blob/balsamiq/balsamiq_viewer.js b/app/assets/javascripts/blob/balsamiq/balsamiq_viewer.js
index cdbfe36ca1c..c17877a276d 100644
--- a/app/assets/javascripts/blob/balsamiq/balsamiq_viewer.js
+++ b/app/assets/javascripts/blob/balsamiq/balsamiq_viewer.js
@@ -1,5 +1,3 @@
-/* global Flash */
-
 import sqljs from 'sql.js';
 import { template as _template } from 'underscore';
 
@@ -15,19 +13,27 @@ const PREVIEW_TEMPLATE = _template(`
 class BalsamiqViewer {
   constructor(viewer) {
     this.viewer = viewer;
-    this.endpoint = this.viewer.dataset.endpoint;
   }
 
-  loadFile() {
-    const xhr = new XMLHttpRequest();
+  loadFile(endpoint) {
+    return new Promise((resolve, reject) => {
+      const xhr = new XMLHttpRequest();
+
+      xhr.open('GET', endpoint, true);
+      xhr.responseType = 'arraybuffer';
+      xhr.onload = loadEvent => this.fileLoaded(loadEvent, resolve, reject);
+      xhr.onerror = reject;
+
+      xhr.send();
+    });
+  }
 
-    xhr.open('GET', this.endpoint, true);
-    xhr.responseType = 'arraybuffer';
+  fileLoaded(loadEvent, resolve, reject) {
+    if (loadEvent.target.status !== 200) return reject();
 
-    xhr.onload = this.renderFile.bind(this);
-    xhr.onerror = BalsamiqViewer.onError;
+    this.renderFile(loadEvent);
 
-    xhr.send();
+    return resolve();
   }
 
   renderFile(loadEvent) {
@@ -103,12 +109,6 @@ class BalsamiqViewer {
   static parseTitle(resource) {
     return JSON.parse(resource.values[0][2]).name;
   }
-
-  static onError() {
-    const flash = new Flash('Balsamiq file could not be loaded.');
-
-    return flash;
-  }
 }
 
 export default BalsamiqViewer;
diff --git a/app/assets/javascripts/blob/balsamiq_viewer.js b/app/assets/javascripts/blob/balsamiq_viewer.js
index 1dacf84470f..8641a6fdae6 100644
--- a/app/assets/javascripts/blob/balsamiq_viewer.js
+++ b/app/assets/javascripts/blob/balsamiq_viewer.js
@@ -1,6 +1,22 @@
+/* global Flash */
+
 import BalsamiqViewer from './balsamiq/balsamiq_viewer';
 
-document.addEventListener('DOMContentLoaded', () => {
-  const balsamiqViewer = new BalsamiqViewer(document.getElementById('js-balsamiq-viewer'));
-  balsamiqViewer.loadFile();
-});
+function onError() {
+  const flash = new window.Flash('Balsamiq file could not be loaded.');
+
+  return flash;
+}
+
+function loadBalsamiqFile() {
+  const viewer = document.getElementById('js-balsamiq-viewer');
+
+  if (!(viewer instanceof Element)) return;
+
+  const endpoint = viewer.dataset.endpoint;
+
+  const balsamiqViewer = new BalsamiqViewer(viewer);
+  balsamiqViewer.loadFile(endpoint).catch(onError);
+}
+
+$(loadBalsamiqFile);