Skip to content

Commit

Permalink
Improved tests for svgrenderer/symbol to prevent errors on different …
Browse files Browse the repository at this point in the history 
…browsers - Chrome on Windows and Safari on Mac.
  • Loading branch information
@KacperMadej @TorsteinHonsi
KacperMadej authored and TorsteinHonsi committed Jul 30, 2019
1 parent f0d2741 commit d6205f7
Showing 1 changed file with 131 additions and 123 deletions.
254 changes: 131 additions & 123 deletions samples/unit-tests/svgrenderer/symbol/demo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,14 @@ QUnit.test('Symbol tests', function (assert) {
h = 400,
done = assert.async(),
total = 0,
count = 0;

var ren = new Highcharts.Renderer(
document.getElementById('container'),
w,
h
);

var url = location.host.substr(0, 12) === 'localhost:98' ?
'url(base/test/testimage.png)' : // karma
'url(testimage.png)'; // utils
count = 0,
symbol1,
symbol2,
symbol3,
label,
url = location.host.substr(0, 12) === 'localhost:98' ?
'url(base/test/testimage.png)' : // karma
'url(testimage.png)'; // utils

function ifDone() {
count++;
Expand All @@ -23,117 +20,128 @@ QUnit.test('Symbol tests', function (assert) {
}
}

// Add a grid so we can see where they symbols are
for (var x = 99.5; x < w - 1; x += 100) {
ren.path(['M', x, 0, 'L', x, 400])
.attr({
stroke: 'silver',
'stroke-width': 1
})
.add();
}

for (var y = 99.5; y < h - 1; y += 100) {
ren.path(['M', 0, y, 'L', 400, y])
.attr({
stroke: 'silver',
'stroke-width': 1
})
.add();
}


// Basic symbol
var symbol1 = ren.symbol(url, 100, 100)
.add();

total++;
setTimeout(function () {
assert.strictEqual(
symbol1.element.getAttribute('width'),
'30',
'Width ok'
);
assert.strictEqual(
symbol1.element.getAttribute('transform') &&
symbol1.element.getAttribute('transform')
.replace(' ', ','), // MSIE
'translate(-15,-15)',
'Translate ok'
);
ifDone();
}, 100);


// With explicit size
var symbol2 = ren
.symbol(url.replace(')', '?' + Date.now() + ')'), 200, 100, null, null, {
width: 20,
height: 20
})
.add();

total++;
setTimeout(function () {
assert.strictEqual(
symbol2.element.getAttribute('width'),
'20',
'Width ok'
);
assert.strictEqual(
symbol2.element.getAttribute('transform') &&
symbol2.element.getAttribute('transform')
.replace(' ', ','), // MSIE
'translate(-10,-10)',
'Translate ok'
);
ifDone();
}, 100);

// Label with background
var label = ren
.label('Hello Label', 300, 100, url)
.attr({
padding: 0,
width: 100,
height: 30
})
.add();

total++;
setTimeout(function () {
assert.strictEqual(
label.box.element.getAttribute('width'),
'30',
'Label box width ok'
);
assert.strictEqual(
label.box.element.getAttribute('transform') &&
label.box.element.getAttribute('transform')
.replace('(35)', '(35,0)'), // MSIE
'translate(35,0)',
'Label box translate ok, centered in label'
);
ifDone();
// console.log(Highcharts.symbolSizes);
}, 100);

// Symbol with wrong name #6627
var symbol3 = ren
.symbol('krakow', 100, 200, 10, 10)
.attr({
fill: 'red'
})
.add();

total++;
setTimeout(function () {
assert.strictEqual(
symbol3.symbolName,
'circle',
'Wrong symbol name defualts to "circle" (#6627)'
);
ifDone();
}, 100);
// Add chart to get the onload event after images are loaded.
Highcharts.chart('container', {
chart: {
width: w,
height: h,
backgroundColor: 'none',
events: {
// set up images related elements
beforeRender: function () {
var ren = this.renderer;

// Add a grid so we can see where they symbols are
for (var x = 99.5; x < w - 1; x += 100) {
ren.path(['M', x, 0, 'L', x, 400])
.attr({
stroke: 'silver',
'stroke-width': 1
})
.add();
}

for (var y = 99.5; y < h - 1; y += 100) {
ren.path(['M', 0, y, 'L', 400, y])
.attr({
stroke: 'silver',
'stroke-width': 1
})
.add();
}

// Basic symbol
symbol1 = ren.symbol(url, 100, 100).add();
total++;

// With explicit size
symbol2 = ren
.symbol(url.replace(')', '?' + Date.now() + ')'),
200, 100, null, null, {
width: 20,
height: 20
})
.add();
total++;

// Label with background
label = ren
.label('Hello Label', 300, 100, url)
.attr({
padding: 0,
width: 100,
height: 30
})
.add();
total++;

// Symbol with wrong name #6627
symbol3 = ren
.symbol('krakow', 100, 200, 10, 10)
.attr({
fill: 'red'
})
.add();
total++;

},
// images are loaded
load: function () {
// Basic symbol
assert.strictEqual(
symbol1.element.getAttribute('width'),
'30',
'Width ok'
);
assert.strictEqual(
symbol1.element.getAttribute('transform') &&
symbol1.element.getAttribute('transform')
.replace(' ', ','), // MSIE
'translate(-15,-15)',
'Translate ok'
);
ifDone();

// With explicit size
assert.strictEqual(
symbol2.element.getAttribute('width'),
'20',
'Width ok'
);
assert.strictEqual(
symbol2.element.getAttribute('transform') &&
symbol2.element.getAttribute('transform')
.replace(' ', ','), // MSIE
'translate(-10,-10)',
'Translate ok'
);
ifDone();

// Label with background
assert.strictEqual(
label.box.element.getAttribute('width'),
'30',
'Label box width ok'
);
assert.strictEqual(
label.box.element.getAttribute('transform') &&
label.box.element.getAttribute('transform')
.replace('(35)', '(35,0)'), // MSIE
'translate(35,0)',
'Label box translate ok, centered in label'
);
ifDone();

// Symbol with wrong name #6627
assert.strictEqual(
symbol3.symbolName,
'circle',
'Wrong symbol name defualts to "circle" (#6627)'
);
ifDone();
}
}
}
});

});

0 comments on commit d6205f7

Please sign in to comment.