progress indicators, bug fixes, after a while
This commit is contained in:
Kwesi Banson
332
public/assets/vendors/Flot/tests/jquery.flot.canvaswrapper.Test.js
vendored
Normal file
332
public/assets/vendors/Flot/tests/jquery.flot.canvaswrapper.Test.js
vendored
Normal file
@@ -0,0 +1,332 @@
|
||||
/* eslint-disable */
|
||||
/* global $, describe, it, xit, xdescribe, after, afterEach, expect*/
|
||||
|
||||
describe('CanvasWrapper', function() {
|
||||
var placeholder;
|
||||
beforeEach(function() {
|
||||
placeholder = setFixtures('<div id="test-container" style="width: 600px;height: 400px">')
|
||||
.find('#test-container');
|
||||
});
|
||||
|
||||
it('should create a new canvas element', function() {
|
||||
var canvas = new Flot.Canvas('myCanvas', placeholder[0]);
|
||||
|
||||
expect(canvas.element).toBeTruthy();
|
||||
expect(placeholder.find('.myCanvas')).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should reuse an existing canvas with the same class', function() {
|
||||
var canvas1 = new Flot.Canvas('myCanvas', placeholder[0]);
|
||||
var element1 = placeholder.find('.myCanvas')[0];
|
||||
|
||||
var canvas2 = new Flot.Canvas('myCanvas', placeholder[0]);
|
||||
var element2 = placeholder.find('.myCanvas')[0];
|
||||
|
||||
expect(element1).toBe(element2);
|
||||
expect(placeholder.find('.myCanvas').length).toBe(1);
|
||||
});
|
||||
|
||||
it('should resize the canvas to the given width and height', function() {
|
||||
var canvas = newCanvas(placeholder);
|
||||
|
||||
canvas.resize(222, 333);
|
||||
|
||||
expect(canvas.width).toBe(222);
|
||||
expect(canvas.height).toBe(333);
|
||||
expect(canvas.element.style.width).toBe('222px');
|
||||
expect(canvas.element.style.height).toBe('333px');
|
||||
});
|
||||
|
||||
it('should resize the canvas but not less than a minimum width and height', function() {
|
||||
var canvas = newCanvas(placeholder);
|
||||
|
||||
canvas.resize(0, 0);
|
||||
|
||||
expect(canvas.width).toBe(10);
|
||||
expect(canvas.height).toBe(10);
|
||||
expect(canvas.element.style.width).toBe('10px');
|
||||
expect(canvas.element.style.height).toBe('10px');
|
||||
});
|
||||
|
||||
it('should measure the width and height of a text', function() {
|
||||
var canvas = newCanvas(placeholder);
|
||||
|
||||
var info = canvas.getTextInfo('', 'text');
|
||||
|
||||
expect(info.width).toBeGreaterThan(0);
|
||||
expect(info.height).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it('should measure the width and height of a text based on its own CSS', function() {
|
||||
var canvas = newCanvas(placeholder);
|
||||
appendSetStyleFixtures('.a { font-size: 10px; }');
|
||||
appendSetStyleFixtures('.b { font-size: 20px; }');
|
||||
|
||||
var info1 = canvas.getTextInfo('', 'text', 'a');
|
||||
var info2 = canvas.getTextInfo('', 'text', 'b');
|
||||
|
||||
expect(info2.width).toBeGreaterThan(info1.width);
|
||||
expect(info2.height).toBeGreaterThan(info1.height);
|
||||
});
|
||||
|
||||
it('should measure the width and height of a text based on its layer CSS', function() {
|
||||
var canvas = newCanvas(placeholder);
|
||||
appendSetStyleFixtures('.a { font-size: 10px; }');
|
||||
appendSetStyleFixtures('.b { font-size: 20px; }');
|
||||
|
||||
var info1 = canvas.getTextInfo('a', 'text');
|
||||
var info2 = canvas.getTextInfo('b', 'text');
|
||||
|
||||
expect(info2.width).toBeGreaterThan(info1.width);
|
||||
expect(info2.height).toBeGreaterThan(info1.height);
|
||||
});
|
||||
|
||||
it('should measure the width of a text based on its actual length', function() {
|
||||
var canvas = newCanvas(placeholder);
|
||||
appendSetStyleFixtures('.a { font-size: 10px; }');
|
||||
|
||||
var info1 = canvas.getTextInfo('a', 'text');
|
||||
var info2 = canvas.getTextInfo('a', 'longer text');
|
||||
|
||||
expect(info2.width).toBeGreaterThan(info1.width);
|
||||
});
|
||||
|
||||
it('should return the same width and height for numbers with the same digit count', function() {
|
||||
var canvas = newCanvas(placeholder);
|
||||
var info1 = canvas.getTextInfo('', '01234');
|
||||
var info2 = canvas.getTextInfo('', '56789');
|
||||
|
||||
expect(info2.width).toBe(info1.width);
|
||||
});
|
||||
|
||||
it('should add text at the given layer, coords, and font CSS', function() {
|
||||
var canvas = newCanvas(placeholder);
|
||||
canvas.addText('layer', 100, 200, '123', 'a');
|
||||
canvas.render();
|
||||
|
||||
var elem = placeholder.find('.a')[0],
|
||||
box = elem.getBoundingClientRect();
|
||||
//TODO Raluca: This should be fixed. Given the starting position for drawing SVG text element, there is a difference between HTML and SVG element placement.
|
||||
//expect(box.left).toBe(100);
|
||||
//expect(box.top).toBe(200);
|
||||
expect(elem.className.baseVal).toBe('a');
|
||||
expect(elem.parentNode.className.baseVal).toBe('layer');
|
||||
});
|
||||
|
||||
it('should add the same text with the same CSS at different coords', function() {
|
||||
var canvas = newCanvas(placeholder);
|
||||
canvas.addText('layerA', 100, 200, '123', 'a');
|
||||
canvas.addText('layerA', 300, 400, '123', 'a');
|
||||
canvas.render();
|
||||
|
||||
var elem1 = placeholder.find('.a')[0],
|
||||
elem2 = placeholder.find('.a')[1],
|
||||
box1 = elem1.getBoundingClientRect(),
|
||||
box2 = elem2.getBoundingClientRect();
|
||||
expect(elem2.textContent).toBe(elem2.textContent);
|
||||
expect(box2.left).not.toBe(box1.left);
|
||||
expect(box2.top).not.toBe(box1.top);
|
||||
});
|
||||
|
||||
it('should add different text with the same CSS at different coords', function() {
|
||||
var canvas = newCanvas(placeholder);
|
||||
canvas.addText('layerA', 100, 200, '123', 'a');
|
||||
canvas.addText('layerA', 300, 400, '456', 'a');
|
||||
canvas.render();
|
||||
|
||||
var elem1 = placeholder.find('.a')[0],
|
||||
elem2 = placeholder.find('.a')[1],
|
||||
box1 = elem1.getBoundingClientRect(),
|
||||
box2 = elem2.getBoundingClientRect();
|
||||
expect(elem2.textContent).not.toBe(elem1.textContent);
|
||||
expect(box2.left).not.toBe(box1.left);
|
||||
expect(box2.top).not.toBe(box1.top);
|
||||
});
|
||||
|
||||
it('should add different text with the same CSS and the same coords', function() {
|
||||
var canvas = newCanvas(placeholder);
|
||||
canvas.addText('layerA', 100, 200, '123', 'a');
|
||||
canvas.addText('layerA', 100, 200, '456', 'a');
|
||||
canvas.addText('layerA', 100, 200, '7890', 'a');
|
||||
canvas.render();
|
||||
|
||||
var elems = placeholder.find('.a');
|
||||
expect(elems.length).toBe(3);
|
||||
});
|
||||
|
||||
it('should add multiple tspan for text that contains br tag', function() {
|
||||
var canvas = newCanvas(placeholder);
|
||||
canvas.addText('layerA', 100, 200, '1<br>2<br>3<br>4', 'a');
|
||||
canvas.render();
|
||||
|
||||
var elem = placeholder.find('.a')[0];
|
||||
expect(elem.childNodes.length).toBe(4);
|
||||
});
|
||||
|
||||
it('should update the tspan element content', function() {
|
||||
var canvas = newCanvas(placeholder);
|
||||
canvas.addText('layerA', 100, 200, '1<br>2<br>3', 'a');
|
||||
canvas.render();
|
||||
|
||||
canvas.removeText('layerA', 100, 200, '1<br>2<br>3', 'a');
|
||||
canvas.addText('layerA', 130, 230, '1<br>2<br>3<br>4', 'a');
|
||||
canvas.render();
|
||||
|
||||
var elem = placeholder.find('.a')[0];
|
||||
expect(elem.childNodes.length).toBe(4);
|
||||
});
|
||||
|
||||
it('should update the cache position of the elements', function() {
|
||||
var canvas = newCanvas(placeholder);
|
||||
canvas.addText('layerA', 100, 200, '123', 'a');
|
||||
canvas.render();
|
||||
|
||||
canvas.removeText('layerA', 100, 200, '123', 'a');
|
||||
canvas.addText('layerA', 130, 230, '123', 'a');
|
||||
canvas.render();
|
||||
|
||||
canvas.addText('layerA', 100, 200, '123', 'a');
|
||||
canvas.render();
|
||||
|
||||
var elems = placeholder.find('.a');
|
||||
expect(elems.length).toBe(2);
|
||||
});
|
||||
|
||||
it('should not add the same text with the same CSS and the same coords twice', function() {
|
||||
var canvas = newCanvas(placeholder);
|
||||
canvas.addText('layerA', 100, 200, '123', 'a');
|
||||
canvas.addText('layerA', 100, 200, '123', 'a');
|
||||
canvas.render();
|
||||
|
||||
var elems = placeholder.find('.a');
|
||||
expect(elems.length).toBe(1);
|
||||
});
|
||||
|
||||
it('should remove all text from a given layer', function() {
|
||||
var canvas = newCanvas(placeholder);
|
||||
canvas.addText('layerA', 100, 200, '123', 'a');
|
||||
canvas.addText('layerA', 300, 400, '123', 'a');
|
||||
canvas.addText('layerA', 500, 600, '456', 'b');
|
||||
canvas.addText('layerA', 700, 800, '456', 'b');
|
||||
canvas.addText('layerB', 200, 100, '123', 'c');
|
||||
canvas.addText('layerB', 400, 300, '456', 'c');
|
||||
canvas.render();
|
||||
|
||||
canvas.removeText('layerA', NaN, NaN, null);
|
||||
canvas.render();
|
||||
|
||||
var as = placeholder.find('.a'),
|
||||
bs = placeholder.find('.b'),
|
||||
cs = placeholder.find('.c');
|
||||
expect(as.length).toBe(0);
|
||||
expect(bs.length).toBe(0);
|
||||
expect(cs.length).toBe(2);
|
||||
});
|
||||
|
||||
it('should remove specific text from specific layer and coords', function() {
|
||||
var canvas = newCanvas(placeholder);
|
||||
canvas.addText('layerA', 100, 200, '123', 'a');
|
||||
canvas.addText('layerA', 300, 400, '123', 'a');
|
||||
canvas.addText('layerA', 500, 600, '123', 'b');
|
||||
canvas.addText('layerA', 700, 800, '123', 'b');
|
||||
canvas.addText('layerB', 200, 100, '123', 'c');
|
||||
canvas.addText('layerB', 400, 300, '123', 'c');
|
||||
canvas.render();
|
||||
|
||||
canvas.removeText('layerA', 300, 400, '123', 'a');
|
||||
canvas.render();
|
||||
|
||||
var as = placeholder.find('.a'),
|
||||
bs = placeholder.find('.b'),
|
||||
cs = placeholder.find('.c');
|
||||
expect(as.length).toBe(1);
|
||||
expect(bs.length).toBe(2);
|
||||
expect(cs.length).toBe(2);
|
||||
});
|
||||
|
||||
it('should remove specific text from specific layer and coords when more texts overlaps', function() {
|
||||
var canvas = newCanvas(placeholder);
|
||||
canvas.addText('layerA', 100, 200, '123', 'a');
|
||||
canvas.addText('layerA', 100, 200, '456', 'a');
|
||||
canvas.addText('layerA', 100, 200, '7890', 'a');
|
||||
canvas.render();
|
||||
var initialTextElements = placeholder.find('.a');
|
||||
expect(initialTextElements.length).toBe(3);
|
||||
|
||||
canvas.removeText('layerA', 100, 200, '456', 'a');
|
||||
canvas.render();
|
||||
|
||||
var finalTextElements = placeholder.find('.a');
|
||||
expect(finalTextElements.length).toBe(2);
|
||||
var remainingTexts = [finalTextElements[0].textContent, finalTextElements[1].textContent];
|
||||
expect(remainingTexts).toContain('123');
|
||||
expect(remainingTexts).toContain('7890');
|
||||
});
|
||||
|
||||
it('should remove all text', function() {
|
||||
var canvas = newCanvas(placeholder);
|
||||
canvas.addText('layerA', 100, 200, '123', 'a');
|
||||
canvas.addText('layerA', 300, 400, '456', 'b');
|
||||
canvas.addText('layerB', 500, 600, '789', 'c');
|
||||
canvas.render();
|
||||
|
||||
canvas.clearCache();
|
||||
|
||||
var as = placeholder.find('.a'),
|
||||
bs = placeholder.find('.b'),
|
||||
cs = placeholder.find('.c');
|
||||
expect(as.length).toBe(0);
|
||||
expect(bs.length).toBe(0);
|
||||
expect(cs.length).toBe(0);
|
||||
});
|
||||
|
||||
it('should move&replace obsolete text', function() {
|
||||
var canvas = newCanvas(placeholder);
|
||||
canvas.addText('layerA', 100, 200, '123', 'a');
|
||||
canvas.render();
|
||||
|
||||
var elem = placeholder.find('.a')[0];
|
||||
elem._marker = '_marker';
|
||||
|
||||
canvas.removeText('layerA', NaN, NaN, null);
|
||||
canvas.addText('layerA', 300, 400, '456', 'a');
|
||||
canvas.render();
|
||||
|
||||
elem = placeholder.find('.a')[0];
|
||||
expect(elem._marker).toBe('_marker');
|
||||
});
|
||||
|
||||
it('should work with an object instead of a class name', function() {
|
||||
var canvas = newCanvas(placeholder)
|
||||
settings = {
|
||||
style: 'normal',
|
||||
variant: 'normal',
|
||||
weight: '400',
|
||||
size: '40',
|
||||
lineHeight: '23',
|
||||
family: '"Times New Roman"',
|
||||
fill: 'rgb(100, 200, 0)'
|
||||
};
|
||||
var info = canvas.getTextInfo('layerA', '123', settings);
|
||||
expect(info.width).toBeGreaterThan(10);
|
||||
|
||||
canvas.addText('layerA', 100, 200, '123', settings);
|
||||
canvas.render();
|
||||
var as = placeholder.find('.layerA'),
|
||||
style = window.getComputedStyle(as[0].firstChild),
|
||||
layerAColor = $.color.parse(style.fill),
|
||||
styleColor = $.color.parse(settings.fill);
|
||||
expect(as.length).toBe(1);
|
||||
expect(style.fontFamily).toContain(settings.family.slice(1, -1));
|
||||
expect(layerAColor.toString()).toBe(styleColor.toString());
|
||||
|
||||
canvas.removeText('layerA', 100, 200, '123', settings);
|
||||
canvas.render();
|
||||
as = placeholder.find('.a');
|
||||
expect(as.length).toBe(0);
|
||||
});
|
||||
|
||||
function newCanvas(placeholder) {
|
||||
return new Flot.Canvas('myCanvas', placeholder[0]);
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user