Merging the rendering code from main.js and regexper.js

This commit is contained in:
Jeff Avallone
2014-12-29 21:31:36 -05:00
parent d6e81a2932
commit e271115d24
7 changed files with 182 additions and 130 deletions
+53 -19
View File
@@ -6,7 +6,30 @@ import Q from 'q';
describe('parser/javascript.js', function() {
beforeEach(function() {
this.parser = new Parser();
this.container = document.createElement('div');
this.parser = new Parser(this.container);
});
describe('container property', function() {
it('sets the content of the element', function() {
var element = document.createElement('div');
this.parser.container = element;
expect(element.innerHTML).not.toEqual('');
});
it('keeps the original content if the keepContent option is set', function() {
var element = document.createElement('div');
element.innerHTML = 'example content';
this.parser.options.keepContent = true;
this.parser.container = element;
expect(element.innerHTML).toContain('example content');
expect(element.innerHTML).not.toEqual('example content');
});
});
describe('#parse', function() {
@@ -15,6 +38,12 @@ describe('parser/javascript.js', function() {
spyOn(regexpParser, 'parse');
});
it('adds the "loading" class', function() {
spyOn(this.parser, '_addClass');
this.parser.parse('example expression');
expect(this.parser._addClass).toHaveBeenCalledWith('loading');
});
it('parses the expression', function(done) {
this.parser.parse('example expression')
.then(() => {
@@ -59,23 +88,10 @@ describe('parser/javascript.js', function() {
this.renderPromise = Q.defer();
this.parser.parsed = jasmine.createSpyObj('parsed', ['render']);
this.parser.parsed.render.and.returnValue(this.renderPromise.promise);
this.svgBase = '<svg xmlns="http://www.w3.org/2000/svg" version="1.1"></svt>';
this.svgContainer = document.createElement('div');
});
it('creates the SVG element', function() {
var svg;
this.parser.render(this.svgContainer, this.svgBase);
svg = this.svgContainer.querySelector('svg');
expect(svg.getAttribute('xmlns')).toEqual('http://www.w3.org/2000/svg');
expect(svg.getAttribute('version')).toEqual('1.1');
});
it('render the parsed expression', function() {
this.parser.render(this.svgContainer, this.svgBase);
this.parser.render();
expect(this.parser.parsed.render).toHaveBeenCalled();
});
@@ -90,12 +106,11 @@ describe('parser/javascript.js', function() {
height: 24
});
this.parser.render(this.svgContainer, this.svgBase);
this.renderPromise.resolve(this.result);
});
it('positions the renderd expression', function(done) {
this.parser.render(this.svgContainer, this.svgBase)
this.parser.render()
.then(() => {
expect(this.result.transform).toHaveBeenCalledWith(Snap.matrix()
.translate(6, 8));
@@ -105,9 +120,9 @@ describe('parser/javascript.js', function() {
});
it('sets the dimensions of the image', function(done) {
this.parser.render(this.svgContainer, this.svgBase)
this.parser.render()
.then(() => {
var svg = this.svgContainer.querySelector('svg');
var svg = this.container.querySelector('svg');
expect(svg.getAttribute('width')).toEqual('62');
expect(svg.getAttribute('height')).toEqual('44');
@@ -116,6 +131,25 @@ describe('parser/javascript.js', function() {
.done();
});
it('removes the "loading" class', function(done) {
spyOn(this.parser, '_removeClass');
this.parser.render()
.then(() => {
expect(this.parser._removeClass).toHaveBeenCalledWith('loading');
})
.finally(done)
.done();
});
it('removes the progress element', function(done) {
this.parser.render()
.then(() => {
expect(this.container.querySelector('.loading')).toBeNull();
})
.finally(done)
.done();
});
});
});
+17 -18
View File
@@ -15,7 +15,6 @@ describe('regexper.js', function() {
'<div><a href="#" data-glyph="link-intact"></a></div>',
'<div><a href="#" data-glyph="data-transfer-download"></a></div>',
'<div id="regexp-render"></div>',
'<script type="text/html" id="svg-base"><svg></svg></script>'
].join('');
this.regexper = new Regexper(this.root);
@@ -102,7 +101,7 @@ describe('regexper.js', function() {
beforeEach(function() {
this.event = util.customEvent('keyup');
this.regexper.runningParser = jasmine.createSpyObj('parser', ['cancel']);
this.regexper.running = jasmine.createSpyObj('parser', ['cancel']);
});
describe('when the keyCode is not 27 (Escape)', function() {
@@ -113,7 +112,7 @@ describe('regexper.js', function() {
it('does not cancel the parser', function() {
this.regexper.documentKeypressListener(this.event);
expect(this.regexper.runningParser.cancel).not.toHaveBeenCalled();
expect(this.regexper.running.cancel).not.toHaveBeenCalled();
});
});
@@ -126,7 +125,7 @@ describe('regexper.js', function() {
it('cancels the parser', function() {
this.regexper.documentKeypressListener(this.event);
expect(this.regexper.runningParser.cancel).toHaveBeenCalled();
expect(this.regexper.running.cancel).toHaveBeenCalled();
});
});
@@ -375,14 +374,14 @@ describe('regexper.js', function() {
expect(this.regexper._trackEvent).toHaveBeenCalledWith('visualization', 'start');
});
it('keeps a copy of the running parser', function() {
it('keeps a copy of the running property parser', function() {
this.regexper.renderRegexp('example expression');
expect(this.regexper.runningParser).toBeTruthy();
expect(this.regexper.running).toBeTruthy();
});
it('parses the expression', function() {
this.regexper.renderRegexp('example expression');
expect(this.regexper.runningParser.parse).toHaveBeenCalledWith('example expression');
expect(this.regexper.running.parse).toHaveBeenCalledWith('example expression');
});
describe('when parsing fails', function() {
@@ -423,7 +422,7 @@ describe('regexper.js', function() {
describe('when parsing succeeds', function() {
beforeEach(function() {
this.parser = new Parser();
this.parser = new Parser(this.regexper.svgContainer);
this.parsePromise.resolve(this.parser);
this.renderPromise.resolve();
});
@@ -431,7 +430,7 @@ describe('regexper.js', function() {
it('renders the expression', function(done) {
this.regexper.renderRegexp('example expression')
.then(() => {
expect(this.parser.render).toHaveBeenCalledWith(this.regexper.svgContainer.querySelector('.svg'), this.regexper.svgBase);
expect(this.parser.render).toHaveBeenCalled();
}, fail)
.finally(done)
.done();
@@ -442,7 +441,7 @@ describe('regexper.js', function() {
describe('when rendering is complete', function() {
beforeEach(function() {
this.parser = new Parser();
this.parser = new Parser(this.regexper.svgContainer);
this.parsePromise.resolve(this.parser);
this.renderPromise.resolve();
});
@@ -483,10 +482,10 @@ describe('regexper.js', function() {
.done();
});
it('sets the runningParser to false', function(done) {
it('sets the running property to false', function(done) {
this.regexper.renderRegexp('example expression')
.then(() => {
expect(this.regexper.runningParser).toBeFalsy();
expect(this.regexper.running).toBeFalsy();
}, fail)
.finally(done)
.done();
@@ -497,7 +496,7 @@ describe('regexper.js', function() {
describe('when the rendering is cancelled', function() {
beforeEach(function() {
this.parser = new Parser();
this.parser = new Parser(this.regexper.svgContainer);
this.parsePromise.resolve(this.parser);
this.renderPromise.reject('Render cancelled');
});
@@ -520,10 +519,10 @@ describe('regexper.js', function() {
.done();
});
it('sets the runningParser to false', function(done) {
it('sets the running property to false', function(done) {
this.regexper.renderRegexp('example expression')
.then(() => {
expect(this.regexper.runningParser).toBeFalsy();
expect(this.regexper.running).toBeFalsy();
}, fail)
.finally(done)
.done();
@@ -534,15 +533,15 @@ describe('regexper.js', function() {
describe('when the rendering fails', function() {
beforeEach(function() {
this.parser = new Parser();
this.parser = new Parser(this.regexper.svgContainer);
this.parsePromise.resolve(this.parser);
this.renderPromise.reject('example render failure');
});
it('sets the runningParser to false', function(done) {
it('sets the running property to false', function(done) {
this.regexper.renderRegexp('example expression')
.then(fail, () => {
expect(this.regexper.runningParser).toBeFalsy();
expect(this.regexper.running).toBeFalsy();
})
.finally(done)
.done();
+14
View File
@@ -0,0 +1,14 @@
beforeEach(function() {
var template = document.createElement('script');
template.setAttribute('type', 'text/html');
template.setAttribute('id', 'svg-container-base');
template.innerHTML = [
'<div class="svg"><svg></svg></div>',
'<div class="progress"><div></div></div>'
].join('');
document.body.appendChild(template);
});
afterEach(function() {
document.body.removeChild(document.body.querySelector('#svg-container-base'));
});