Commit b504b09b authored by Luke "Jared" Bennett's avatar Luke "Jared" Bennett Committed by Phil Hughes

Added balsamiq jasmine integration test

parent c48554ed
...@@ -48,6 +48,7 @@ eslint-report.html ...@@ -48,6 +48,7 @@ eslint-report.html
/public/uploads/ /public/uploads/
/shared/artifacts/ /shared/artifacts/
/spec/javascripts/fixtures/blob/pdf/ /spec/javascripts/fixtures/blob/pdf/
/spec/javascripts/fixtures/blob/balsamiq/
/rails_best_practices_output.html /rails_best_practices_output.html
/tags /tags
/tmp/* /tmp/*
......
/* global Flash */
import sqljs from 'sql.js'; import sqljs from 'sql.js';
import { template as _template } from 'underscore'; import { template as _template } from 'underscore';
...@@ -15,19 +13,27 @@ const PREVIEW_TEMPLATE = _template(` ...@@ -15,19 +13,27 @@ const PREVIEW_TEMPLATE = _template(`
class BalsamiqViewer { class BalsamiqViewer {
constructor(viewer) { constructor(viewer) {
this.viewer = viewer; this.viewer = viewer;
this.endpoint = this.viewer.dataset.endpoint;
} }
loadFile() { loadFile(endpoint) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest(); const xhr = new XMLHttpRequest();
xhr.open('GET', this.endpoint, true); xhr.open('GET', endpoint, true);
xhr.responseType = 'arraybuffer'; xhr.responseType = 'arraybuffer';
xhr.onload = loadEvent => this.fileLoaded(loadEvent, resolve, reject);
xhr.onload = this.renderFile.bind(this); xhr.onerror = reject;
xhr.onerror = BalsamiqViewer.onError;
xhr.send(); xhr.send();
});
}
fileLoaded(loadEvent, resolve, reject) {
if (loadEvent.target.status !== 200) return reject();
this.renderFile(loadEvent);
return resolve();
} }
renderFile(loadEvent) { renderFile(loadEvent) {
...@@ -103,12 +109,6 @@ class BalsamiqViewer { ...@@ -103,12 +109,6 @@ class BalsamiqViewer {
static parseTitle(resource) { static parseTitle(resource) {
return JSON.parse(resource.values[0][2]).name; 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; export default BalsamiqViewer;
/* global Flash */
import BalsamiqViewer from './balsamiq/balsamiq_viewer'; import BalsamiqViewer from './balsamiq/balsamiq_viewer';
document.addEventListener('DOMContentLoaded', () => { function onError() {
const balsamiqViewer = new BalsamiqViewer(document.getElementById('js-balsamiq-viewer')); const flash = new window.Flash('Balsamiq file could not be loaded.');
balsamiqViewer.loadFile();
}); 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);
...@@ -94,7 +94,7 @@ var config = { ...@@ -94,7 +94,7 @@ var config = {
query: { mimetype: 'image/gif' }, query: { mimetype: 'image/gif' },
}, },
{ {
test: /\.(worker\.js|pdf)$/, test: /\.(worker\.js|pdf|bmpr)$/,
exclude: /node_modules/, exclude: /node_modules/,
loader: 'file-loader', loader: 'file-loader',
}, },
......
/* 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);
});
});
});
...@@ -4,17 +4,11 @@ import ClassSpecHelper from '../../helpers/class_spec_helper'; ...@@ -4,17 +4,11 @@ import ClassSpecHelper from '../../helpers/class_spec_helper';
describe('BalsamiqViewer', () => { describe('BalsamiqViewer', () => {
let balsamiqViewer; let balsamiqViewer;
let endpoint;
let viewer; let viewer;
describe('class constructor', () => { describe('class constructor', () => {
beforeEach(() => { beforeEach(() => {
endpoint = 'endpoint'; viewer = {};
viewer = {
dataset: {
endpoint,
},
};
balsamiqViewer = new BalsamiqViewer(viewer); balsamiqViewer = new BalsamiqViewer(viewer);
}); });
...@@ -22,25 +16,25 @@ describe('BalsamiqViewer', () => { ...@@ -22,25 +16,25 @@ describe('BalsamiqViewer', () => {
it('should set .viewer', () => { it('should set .viewer', () => {
expect(balsamiqViewer.viewer).toBe(viewer); expect(balsamiqViewer.viewer).toBe(viewer);
}); });
it('should set .endpoint', () => {
expect(balsamiqViewer.endpoint).toBe(endpoint);
}); });
describe('fileLoaded', () => {
}); });
describe('loadFile', () => { describe('loadFile', () => {
let xhr; let xhr;
let loadFile;
const endpoint = 'endpoint';
beforeEach(() => { beforeEach(() => {
endpoint = 'endpoint';
xhr = jasmine.createSpyObj('xhr', ['open', 'send']); xhr = jasmine.createSpyObj('xhr', ['open', 'send']);
balsamiqViewer = jasmine.createSpyObj('balsamiqViewer', ['renderFile']); balsamiqViewer = jasmine.createSpyObj('balsamiqViewer', ['renderFile']);
balsamiqViewer.endpoint = endpoint;
spyOn(window, 'XMLHttpRequest').and.returnValue(xhr); spyOn(window, 'XMLHttpRequest').and.returnValue(xhr);
BalsamiqViewer.prototype.loadFile.call(balsamiqViewer); loadFile = BalsamiqViewer.prototype.loadFile.call(balsamiqViewer, endpoint);
}); });
it('should call .open', () => { it('should call .open', () => {
...@@ -54,6 +48,10 @@ describe('BalsamiqViewer', () => { ...@@ -54,6 +48,10 @@ describe('BalsamiqViewer', () => {
it('should call .send', () => { it('should call .send', () => {
expect(xhr.send).toHaveBeenCalled(); expect(xhr.send).toHaveBeenCalled();
}); });
it('should return a promise', () => {
expect(loadFile).toEqual(jasmine.any(Promise));
});
}); });
describe('renderFile', () => { describe('renderFile', () => {
...@@ -325,18 +323,4 @@ describe('BalsamiqViewer', () => { ...@@ -325,18 +323,4 @@ describe('BalsamiqViewer', () => {
expect(parseTitle).toBe('name'); 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.');
});
});
}); });
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
.file-content.balsamiq-viewer#js-balsamiq-viewer{ data: { endpoint: '/test' } }
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment