2017-04-10 13:20:54 -04:00
|
|
|
import sqljs from 'sql.js';
|
|
|
|
import BalsamiqViewer from '~/blob/balsamiq/balsamiq_viewer';
|
|
|
|
import ClassSpecHelper from '../../helpers/class_spec_helper';
|
|
|
|
|
|
|
|
describe('BalsamiqViewer', () => {
|
|
|
|
let balsamiqViewer;
|
|
|
|
let viewer;
|
|
|
|
|
|
|
|
describe('class constructor', () => {
|
|
|
|
beforeEach(() => {
|
2017-05-15 03:48:54 -04:00
|
|
|
viewer = {};
|
2017-04-10 13:20:54 -04:00
|
|
|
|
|
|
|
balsamiqViewer = new BalsamiqViewer(viewer);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should set .viewer', () => {
|
|
|
|
expect(balsamiqViewer.viewer).toBe(viewer);
|
|
|
|
});
|
2017-05-15 03:48:54 -04:00
|
|
|
});
|
|
|
|
|
2017-04-10 13:20:54 -04:00
|
|
|
describe('loadFile', () => {
|
|
|
|
let xhr;
|
2017-05-15 03:48:54 -04:00
|
|
|
let loadFile;
|
|
|
|
const endpoint = 'endpoint';
|
2017-04-10 13:20:54 -04:00
|
|
|
|
|
|
|
beforeEach(() => {
|
|
|
|
xhr = jasmine.createSpyObj('xhr', ['open', 'send']);
|
|
|
|
|
|
|
|
balsamiqViewer = jasmine.createSpyObj('balsamiqViewer', ['renderFile']);
|
|
|
|
|
|
|
|
spyOn(window, 'XMLHttpRequest').and.returnValue(xhr);
|
|
|
|
|
2017-05-15 03:48:54 -04:00
|
|
|
loadFile = BalsamiqViewer.prototype.loadFile.call(balsamiqViewer, endpoint);
|
2017-04-10 13:20:54 -04:00
|
|
|
});
|
|
|
|
|
|
|
|
it('should call .open', () => {
|
|
|
|
expect(xhr.open).toHaveBeenCalledWith('GET', endpoint, true);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should set .responseType', () => {
|
|
|
|
expect(xhr.responseType).toBe('arraybuffer');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should call .send', () => {
|
|
|
|
expect(xhr.send).toHaveBeenCalled();
|
|
|
|
});
|
2017-05-15 03:48:54 -04:00
|
|
|
|
|
|
|
it('should return a promise', () => {
|
|
|
|
expect(loadFile).toEqual(jasmine.any(Promise));
|
|
|
|
});
|
2017-04-10 13:20:54 -04:00
|
|
|
});
|
|
|
|
|
|
|
|
describe('renderFile', () => {
|
|
|
|
let container;
|
|
|
|
let loadEvent;
|
|
|
|
let previews;
|
|
|
|
|
|
|
|
beforeEach(() => {
|
|
|
|
loadEvent = { target: { response: {} } };
|
|
|
|
viewer = jasmine.createSpyObj('viewer', ['appendChild']);
|
2017-04-28 12:32:50 -04:00
|
|
|
previews = [document.createElement('ul'), document.createElement('ul')];
|
2017-04-10 13:20:54 -04:00
|
|
|
|
2018-10-17 03:13:26 -04:00
|
|
|
balsamiqViewer = jasmine.createSpyObj('balsamiqViewer', [
|
|
|
|
'initDatabase',
|
|
|
|
'getPreviews',
|
|
|
|
'renderPreview',
|
|
|
|
]);
|
2017-04-10 13:20:54 -04:00
|
|
|
balsamiqViewer.viewer = viewer;
|
|
|
|
|
|
|
|
balsamiqViewer.getPreviews.and.returnValue(previews);
|
|
|
|
balsamiqViewer.renderPreview.and.callFake(preview => preview);
|
2018-10-17 03:13:26 -04:00
|
|
|
viewer.appendChild.and.callFake(containerElement => {
|
2017-04-10 13:20:54 -04:00
|
|
|
container = containerElement;
|
|
|
|
});
|
|
|
|
|
|
|
|
BalsamiqViewer.prototype.renderFile.call(balsamiqViewer, loadEvent);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should call .initDatabase', () => {
|
|
|
|
expect(balsamiqViewer.initDatabase).toHaveBeenCalledWith(loadEvent.target.response);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should call .getPreviews', () => {
|
|
|
|
expect(balsamiqViewer.getPreviews).toHaveBeenCalled();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should call .renderPreview for each preview', () => {
|
|
|
|
const allArgs = balsamiqViewer.renderPreview.calls.allArgs();
|
|
|
|
|
2017-04-28 12:32:50 -04:00
|
|
|
expect(allArgs.length).toBe(2);
|
2017-04-10 13:20:54 -04:00
|
|
|
|
|
|
|
previews.forEach((preview, i) => {
|
|
|
|
expect(allArgs[i][0]).toBe(preview);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2017-04-28 12:32:50 -04:00
|
|
|
it('should set the container HTML', () => {
|
|
|
|
expect(container.innerHTML).toBe('<ul></ul><ul></ul>');
|
2017-04-10 13:20:54 -04:00
|
|
|
});
|
|
|
|
|
|
|
|
it('should add inline preview classes', () => {
|
|
|
|
expect(container.classList[0]).toBe('list-inline');
|
|
|
|
expect(container.classList[1]).toBe('previews');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should call viewer.appendChild', () => {
|
|
|
|
expect(viewer.appendChild).toHaveBeenCalledWith(container);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('initDatabase', () => {
|
|
|
|
let database;
|
|
|
|
let uint8Array;
|
|
|
|
let data;
|
|
|
|
|
|
|
|
beforeEach(() => {
|
|
|
|
uint8Array = {};
|
|
|
|
database = {};
|
|
|
|
data = 'data';
|
|
|
|
|
|
|
|
balsamiqViewer = {};
|
|
|
|
|
|
|
|
spyOn(window, 'Uint8Array').and.returnValue(uint8Array);
|
|
|
|
spyOn(sqljs, 'Database').and.returnValue(database);
|
|
|
|
|
|
|
|
BalsamiqViewer.prototype.initDatabase.call(balsamiqViewer, data);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should instantiate Uint8Array', () => {
|
|
|
|
expect(window.Uint8Array).toHaveBeenCalledWith(data);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should call sqljs.Database', () => {
|
|
|
|
expect(sqljs.Database).toHaveBeenCalledWith(uint8Array);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should set .database', () => {
|
|
|
|
expect(balsamiqViewer.database).toBe(database);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('getPreviews', () => {
|
|
|
|
let database;
|
|
|
|
let thumbnails;
|
|
|
|
let getPreviews;
|
|
|
|
|
|
|
|
beforeEach(() => {
|
|
|
|
database = jasmine.createSpyObj('database', ['exec']);
|
|
|
|
thumbnails = [{ values: [0, 1, 2] }];
|
|
|
|
|
|
|
|
balsamiqViewer = {
|
|
|
|
database,
|
|
|
|
};
|
|
|
|
|
|
|
|
spyOn(BalsamiqViewer, 'parsePreview').and.callFake(preview => preview.toString());
|
|
|
|
database.exec.and.returnValue(thumbnails);
|
|
|
|
|
|
|
|
getPreviews = BalsamiqViewer.prototype.getPreviews.call(balsamiqViewer);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should call database.exec', () => {
|
|
|
|
expect(database.exec).toHaveBeenCalledWith('SELECT * FROM thumbnails');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should call .parsePreview for each value', () => {
|
|
|
|
const allArgs = BalsamiqViewer.parsePreview.calls.allArgs();
|
|
|
|
|
|
|
|
expect(allArgs.length).toBe(3);
|
|
|
|
|
|
|
|
thumbnails[0].values.forEach((value, i) => {
|
|
|
|
expect(allArgs[i][0]).toBe(value);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should return an array of parsed values', () => {
|
|
|
|
expect(getPreviews).toEqual(['0', '1', '2']);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2017-04-28 12:32:50 -04:00
|
|
|
describe('getResource', () => {
|
2017-04-11 06:28:17 -04:00
|
|
|
let database;
|
|
|
|
let resourceID;
|
|
|
|
let resource;
|
2017-04-28 12:32:50 -04:00
|
|
|
let getResource;
|
2017-04-11 06:28:17 -04:00
|
|
|
|
|
|
|
beforeEach(() => {
|
|
|
|
database = jasmine.createSpyObj('database', ['exec']);
|
|
|
|
resourceID = 4;
|
2017-04-28 12:32:50 -04:00
|
|
|
resource = ['resource'];
|
2017-04-11 06:28:17 -04:00
|
|
|
|
|
|
|
balsamiqViewer = {
|
|
|
|
database,
|
|
|
|
};
|
|
|
|
|
|
|
|
database.exec.and.returnValue(resource);
|
|
|
|
|
2017-04-28 12:32:50 -04:00
|
|
|
getResource = BalsamiqViewer.prototype.getResource.call(balsamiqViewer, resourceID);
|
2017-04-11 06:28:17 -04:00
|
|
|
});
|
|
|
|
|
|
|
|
it('should call database.exec', () => {
|
2018-10-17 03:13:26 -04:00
|
|
|
expect(database.exec).toHaveBeenCalledWith(
|
|
|
|
`SELECT * FROM resources WHERE id = '${resourceID}'`,
|
|
|
|
);
|
2017-04-11 06:28:17 -04:00
|
|
|
});
|
|
|
|
|
|
|
|
it('should return the selected resource', () => {
|
2017-04-28 12:32:50 -04:00
|
|
|
expect(getResource).toBe(resource[0]);
|
2017-04-11 06:28:17 -04:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2017-04-10 13:20:54 -04:00
|
|
|
describe('renderPreview', () => {
|
|
|
|
let previewElement;
|
|
|
|
let innerHTML;
|
|
|
|
let preview;
|
|
|
|
let renderPreview;
|
|
|
|
|
|
|
|
beforeEach(() => {
|
|
|
|
innerHTML = '<a>innerHTML</a>';
|
|
|
|
previewElement = {
|
|
|
|
outerHTML: '<p>outerHTML</p>',
|
|
|
|
classList: jasmine.createSpyObj('classList', ['add']),
|
|
|
|
};
|
|
|
|
preview = {};
|
|
|
|
|
|
|
|
balsamiqViewer = jasmine.createSpyObj('balsamiqViewer', ['renderTemplate']);
|
|
|
|
|
|
|
|
spyOn(document, 'createElement').and.returnValue(previewElement);
|
|
|
|
balsamiqViewer.renderTemplate.and.returnValue(innerHTML);
|
|
|
|
|
|
|
|
renderPreview = BalsamiqViewer.prototype.renderPreview.call(balsamiqViewer, preview);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should call classList.add', () => {
|
|
|
|
expect(previewElement.classList.add).toHaveBeenCalledWith('preview');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should call .renderTemplate', () => {
|
|
|
|
expect(balsamiqViewer.renderTemplate).toHaveBeenCalledWith(preview);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should set .innerHTML', () => {
|
|
|
|
expect(previewElement.innerHTML).toBe(innerHTML);
|
|
|
|
});
|
|
|
|
|
2017-04-28 12:32:50 -04:00
|
|
|
it('should return element', () => {
|
|
|
|
expect(renderPreview).toBe(previewElement);
|
2017-04-10 13:20:54 -04:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('renderTemplate', () => {
|
|
|
|
let preview;
|
2017-04-11 06:28:17 -04:00
|
|
|
let name;
|
2017-04-28 12:32:50 -04:00
|
|
|
let resource;
|
2017-04-11 06:28:17 -04:00
|
|
|
let template;
|
2017-04-10 13:20:54 -04:00
|
|
|
let renderTemplate;
|
|
|
|
|
|
|
|
beforeEach(() => {
|
2017-04-11 06:28:17 -04:00
|
|
|
preview = { resourceID: 1, image: 'image' };
|
|
|
|
name = 'name';
|
2017-04-28 12:32:50 -04:00
|
|
|
resource = 'resource';
|
2017-04-11 06:28:17 -04:00
|
|
|
template = `
|
2018-04-10 13:11:34 -04:00
|
|
|
<div class="card">
|
|
|
|
<div class="card-header">name</div>
|
|
|
|
<div class="card-body">
|
2017-04-11 06:28:17 -04:00
|
|
|
<img class="img-thumbnail" src="data:image/png;base64,image"/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
`;
|
2017-04-10 13:20:54 -04:00
|
|
|
|
2017-04-28 12:32:50 -04:00
|
|
|
balsamiqViewer = jasmine.createSpyObj('balsamiqViewer', ['getResource']);
|
2017-04-10 13:20:54 -04:00
|
|
|
|
2017-04-11 06:28:17 -04:00
|
|
|
spyOn(BalsamiqViewer, 'parseTitle').and.returnValue(name);
|
2017-04-28 12:32:50 -04:00
|
|
|
balsamiqViewer.getResource.and.returnValue(resource);
|
2017-04-10 13:20:54 -04:00
|
|
|
|
|
|
|
renderTemplate = BalsamiqViewer.prototype.renderTemplate.call(balsamiqViewer, preview);
|
|
|
|
});
|
|
|
|
|
2017-04-28 12:32:50 -04:00
|
|
|
it('should call .getResource', () => {
|
|
|
|
expect(balsamiqViewer.getResource).toHaveBeenCalledWith(preview.resourceID);
|
2017-04-10 13:20:54 -04:00
|
|
|
});
|
|
|
|
|
2017-04-11 06:28:17 -04:00
|
|
|
it('should call .parseTitle', () => {
|
2017-04-28 12:32:50 -04:00
|
|
|
expect(BalsamiqViewer.parseTitle).toHaveBeenCalledWith(resource);
|
2017-04-10 13:20:54 -04:00
|
|
|
});
|
|
|
|
|
2018-10-17 03:13:26 -04:00
|
|
|
it('should return the template string', function() {
|
2017-04-28 12:32:50 -04:00
|
|
|
expect(renderTemplate.replace(/\s/g, '')).toEqual(template.replace(/\s/g, ''));
|
2017-04-10 13:20:54 -04:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('parsePreview', () => {
|
|
|
|
let preview;
|
|
|
|
let parsePreview;
|
|
|
|
|
|
|
|
beforeEach(() => {
|
|
|
|
preview = ['{}', '{ "id": 1 }'];
|
|
|
|
|
|
|
|
spyOn(JSON, 'parse').and.callThrough();
|
|
|
|
|
|
|
|
parsePreview = BalsamiqViewer.parsePreview(preview);
|
|
|
|
});
|
|
|
|
|
|
|
|
ClassSpecHelper.itShouldBeAStaticMethod(BalsamiqViewer, 'parsePreview');
|
|
|
|
|
|
|
|
it('should return the parsed JSON', () => {
|
|
|
|
expect(parsePreview).toEqual(JSON.parse('{ "id": 1 }'));
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2017-04-11 06:28:17 -04:00
|
|
|
describe('parseTitle', () => {
|
|
|
|
let title;
|
|
|
|
let parseTitle;
|
|
|
|
|
|
|
|
beforeEach(() => {
|
2017-04-28 12:32:50 -04:00
|
|
|
title = { values: [['{}', '{}', '{"name":"name"}']] };
|
2017-04-11 06:28:17 -04:00
|
|
|
|
|
|
|
spyOn(JSON, 'parse').and.callThrough();
|
|
|
|
|
|
|
|
parseTitle = BalsamiqViewer.parseTitle(title);
|
|
|
|
});
|
|
|
|
|
|
|
|
ClassSpecHelper.itShouldBeAStaticMethod(BalsamiqViewer, 'parsePreview');
|
|
|
|
|
|
|
|
it('should return the name value', () => {
|
|
|
|
expect(parseTitle).toBe('name');
|
|
|
|
});
|
|
|
|
});
|
2017-04-10 13:20:54 -04:00
|
|
|
});
|