gentelella/vendors/flot/tests/jquery.flot.canvaswrapper.Test.js

/* 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]);
    }
});