GitLab ist jetzt auf dem neuesten Stand! Die jüngsten Probleme wurden behoben. Wir entschuldigen uns für die dadurch verursachten Unannehmlichkeiten.

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) {
const xhr = new XMLHttpRequest(); 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); fileLoaded(loadEvent, resolve, reject) {
xhr.responseType = 'arraybuffer'; if (loadEvent.target.status !== 200) return reject();
xhr.onload = this.renderFile.bind(this); this.renderFile(loadEvent);
xhr.onerror = BalsamiqViewer.onError;
xhr.send(); 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);
}); });
});
describe('fileLoaded', () => {
it('should set .endpoint', () => {
expect(balsamiqViewer.endpoint).toBe(endpoint);
});
}); });
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