Commit ba5009de authored by Phil Hughes's avatar Phil Hughes

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

Added balsamiq jasmine integration test

Closes #31889

See merge request !11257
parents c48554ed b504b09b
......@@ -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/*
......
/* 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() {
loadFile(endpoint) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open('GET', this.endpoint, true);
xhr.open('GET', endpoint, true);
xhr.responseType = 'arraybuffer';
xhr.onload = this.renderFile.bind(this);
xhr.onerror = BalsamiqViewer.onError;
xhr.onload = loadEvent => this.fileLoaded(loadEvent, resolve, reject);
xhr.onerror = reject;
xhr.send();
});
}
fileLoaded(loadEvent, resolve, reject) {
if (loadEvent.target.status !== 200) return reject();
this.renderFile(loadEvent);
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;
/* 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);
......@@ -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',
},
......
/* 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';
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);
});
it('should set .endpoint', () => {
expect(balsamiqViewer.endpoint).toBe(endpoint);
});
describe('fileLoaded', () => {
});
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.');
});
});
});
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