1 files changed, 51 insertions, 0 deletions
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);
+    });
+  });
+});