Merge branch 'add-balsamiq-integration-test' into 'master'

Added balsamiq jasmine integration test

Closes #31889

See merge request !11257

8 files changed, 119 insertions, 48 deletions

diff --git a/.gitignore b/.gitignore
index 0fb97ffb98e..f3decfd7dfe 100644
--- a/.gitignore
+++ b/.gitignore
@@ -48,6 +48,7 @@ eslint-report.html
 /public/uploads/
 /shared/artifacts/
 /spec/javascripts/fixtures/blob/pdf/
+/spec/javascripts/fixtures/blob/balsamiq/
 /rails_best_practices_output.html
 /tags
 /tmp/*
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);
diff --git a/config/webpack.config.js b/config/webpack.config.js
index ed71ee09963..5d5a42512b1 100644
--- a/config/webpack.config.js
+++ b/config/webpack.config.js
@@ -94,7 +94,7 @@ var config = {
         query: { mimetype: 'image/gif' },
       },
       {
-        test: /\.(worker\.js|pdf)$/,
+        test: /\.(worker\.js|pdf|bmpr)$/,
         exclude: /node_modules/,
         loader: 'file-loader',
       },
diff --git a/spec/javascripts/blob/balsamiq/balsamiq_viewer_integration_spec.js b/spec/javascripts/blob/balsamiq/balsamiq_viewer_integration_spec.js
new file mode 100644
index 00000000000..acd0aaf2a86
--- /dev/null
+++ b/spec/javascripts/blob/balsamiq/balsamiq_viewer_integration_spec.js
@@ -0,0 +1,51 @@
+/* eslint-disable import/no-unresolved */
+
+import BalsamiqViewer from '~/blob/balsamiq/balsamiq_viewer';
+import bmprPath from '../../fixtures/blob/balsamiq/test.bmpr';
+
+describe('Balsamiq integration spec', () => {
+  let container;
+  let endpoint;
+  let balsamiqViewer;
+
+  preloadFixtures('static/balsamiq_viewer.html.raw');
+
+  beforeEach(() => {
+    loadFixtures('static/balsamiq_viewer.html.raw');
+
+    container = document.getElementById('js-balsamiq-viewer');
+    balsamiqViewer = new BalsamiqViewer(container);
+  });
+
+  describe('successful response', () => {
+    beforeEach((done) => {
+      endpoint = bmprPath;
+
+      balsamiqViewer.loadFile(endpoint).then(done).catch(done.fail);
+    });
+
+    it('does not show loading icon', () => {
+      expect(document.querySelector('.loading')).toBeNull();
+    });
+
+    it('renders the balsamiq previews', () => {
+      expect(document.querySelectorAll('.previews .preview').length).not.toEqual(0);
+    });
+  });
+
+  describe('error getting file', () => {
+    beforeEach((done) => {
+      endpoint = 'invalid/path/to/file.bmpr';
+
+      balsamiqViewer.loadFile(endpoint).then(done.fail, null).catch(done);
+    });
+
+    it('does not show loading icon', () => {
+      expect(document.querySelector('.loading')).toBeNull();
+    });
+
+    it('does not render the balsamiq previews', () => {
+      expect(document.querySelectorAll('.previews .preview').length).toEqual(0);
+    });
+  });
+});
diff --git a/spec/javascripts/blob/balsamiq/balsamiq_viewer_spec.js b/spec/javascripts/blob/balsamiq/balsamiq_viewer_spec.js
index 85816ee1f11..aa87956109f 100644
--- a/spec/javascripts/blob/balsamiq/balsamiq_viewer_spec.js
+++ b/spec/javascripts/blob/balsamiq/balsamiq_viewer_spec.js
@@ -4,17 +4,11 @@ import ClassSpecHelper from '../../helpers/class_spec_helper';
 
 describe('BalsamiqViewer', () => {
   let balsamiqViewer;
-  let endpoint;
   let viewer;
 
   describe('class constructor', () => {
     beforeEach(() => {
-      endpoint = 'endpoint';
-      viewer = {
-        dataset: {
-          endpoint,
-        },
-      };
+      viewer = {};
 
       balsamiqViewer = new BalsamiqViewer(viewer);
     });
@@ -22,25 +16,25 @@ describe('BalsamiqViewer', () => {
     it('should set .viewer', () => {
       expect(balsamiqViewer.viewer).toBe(viewer);
     });
+  });
+
+  describe('fileLoaded', () => {
 
-    it('should set .endpoint', () => {
-      expect(balsamiqViewer.endpoint).toBe(endpoint);
-    });
   });
 
   describe('loadFile', () => {
     let xhr;
+    let loadFile;
+    const endpoint = 'endpoint';
 
     beforeEach(() => {
-      endpoint = 'endpoint';
       xhr = jasmine.createSpyObj('xhr', ['open', 'send']);
 
       balsamiqViewer = jasmine.createSpyObj('balsamiqViewer', ['renderFile']);
-      balsamiqViewer.endpoint = endpoint;
 
       spyOn(window, 'XMLHttpRequest').and.returnValue(xhr);
 
-      BalsamiqViewer.prototype.loadFile.call(balsamiqViewer);
+      loadFile = BalsamiqViewer.prototype.loadFile.call(balsamiqViewer, endpoint);
     });
 
     it('should call .open', () => {
@@ -54,6 +48,10 @@ describe('BalsamiqViewer', () => {
     it('should call .send', () => {
       expect(xhr.send).toHaveBeenCalled();
     });
+
+    it('should return a promise', () => {
+      expect(loadFile).toEqual(jasmine.any(Promise));
+    });
   });
 
   describe('renderFile', () => {
@@ -325,18 +323,4 @@ describe('BalsamiqViewer', () => {
       expect(parseTitle).toBe('name');
     });
   });
-
-  describe('onError', () => {
-    beforeEach(() => {
-      spyOn(window, 'Flash');
-
-      BalsamiqViewer.onError();
-    });
-
-    ClassSpecHelper.itShouldBeAStaticMethod(BalsamiqViewer, 'onError');
-
-    it('should instantiate Flash', () => {
-      expect(window.Flash).toHaveBeenCalledWith('Balsamiq file could not be loaded.');
-    });
-  });
 });
diff --git a/spec/javascripts/fixtures/balsamiq.rb b/spec/javascripts/fixtures/balsamiq.rb
new file mode 100644
index 00000000000..b5372821bf5
--- /dev/null
+++ b/spec/javascripts/fixtures/balsamiq.rb
@@ -0,0 +1,18 @@
+require 'spec_helper'
+
+describe 'Balsamiq file', '(JavaScript fixtures)', type: :controller do
+  include JavaScriptFixturesHelpers
+
+  let(:namespace) { create(:namespace, name: 'frontend-fixtures' )}
+  let(:project) { create(:project, namespace: namespace, path: 'balsamiq-project') }
+
+  before(:all) do
+    clean_frontend_fixtures('blob/balsamiq/')
+  end
+
+  it 'blob/balsamiq/test.bmpr' do |example|
+    blob = project.repository.blob_at('b89b56d79', 'files/images/balsamiq.bmpr')
+
+    store_frontend_fixture(blob.data.force_encoding('utf-8'), example.description)
+  end
+end
diff --git a/spec/javascripts/fixtures/balsamiq_viewer.html.haml b/spec/javascripts/fixtures/balsamiq_viewer.html.haml
new file mode 100644
index 00000000000..18166ba4901
--- /dev/null
+++ b/spec/javascripts/fixtures/balsamiq_viewer.html.haml
@@ -0,0 +1 @@
+.file-content.balsamiq-viewer#js-balsamiq-viewer{ data: { endpoint: '/test' } }