Add "point style" image tests

Replace the old style canvas "mock" context checks by image based unit tests which are easier to maintain and allow more flexibility in the drawing logic since we are not testing the context calls but the final painted result.
This commit is contained in:
Simon Brunel 2018-07-09 21:14:25 +02:00
parent 9a295816b3
commit 91608398b6
30 changed files with 1000 additions and 470 deletions

View File

@ -0,0 +1,129 @@
{
"config": {
"type": "bubble",
"data": {
"datasets": [{
"data": [
{"x": 0, "y": 3},
{"x": 1, "y": 3},
{"x": 2, "y": 3},
{"x": 3, "y": 3},
{"x": 4, "y": 3},
{"x": 5, "y": 3},
{"x": 6, "y": 3},
{"x": 7, "y": 3},
{"x": 8, "y": 3},
{"x": 9, "y": 3}
],
"backgroundColor": "#00ff00",
"borderColor": "transparent",
"borderWidth": 0,
"pointStyle": [
"circle",
"cross",
"crossRot",
"dash",
"line",
"rect",
"rectRounded",
"rectRot",
"star",
"triangle"
]
}, {
"data": [
{"x": 0, "y": 2},
{"x": 1, "y": 2},
{"x": 2, "y": 2},
{"x": 3, "y": 2},
{"x": 4, "y": 2},
{"x": 5, "y": 2},
{"x": 6, "y": 2},
{"x": 7, "y": 2},
{"x": 8, "y": 2},
{"x": 9, "y": 2}
],
"backgroundColor": "transparent",
"borderColor": "0000ff",
"borderWidth": 0,
"pointStyle": [
"circle",
"cross",
"crossRot",
"dash",
"line",
"rect",
"rectRounded",
"rectRot",
"star",
"triangle"
]
}, {
"data": [
{"x": 0, "y": 1},
{"x": 1, "y": 1},
{"x": 2, "y": 1},
{"x": 3, "y": 1},
{"x": 4, "y": 1},
{"x": 5, "y": 1},
{"x": 6, "y": 1},
{"x": 7, "y": 1},
{"x": 8, "y": 1},
{"x": 9, "y": 1}
],
"backgroundColor": "#00ff00",
"borderColor": "#0000ff",
"borderWidth": 0,
"pointStyle": [
"circle",
"cross",
"crossRot",
"dash",
"line",
"rect",
"rectRounded",
"rectRot",
"star",
"triangle"
]
}]
},
"options": {
"responsive": false,
"legend": false,
"title": false,
"scales": {
"xAxes": [{"display": false}],
"yAxes": [{
"display": false,
"ticks": {
"min": 0,
"max": 4
}
}]
},
"elements": {
"line": {
"borderColor": "transparent",
"borderWidth": 0,
"fill": false
},
"point": {
"radius": 16
}
},
"layout": {
"padding": {
"left": 24,
"right": 24
}
}
}
},
"options": {
"canvas": {
"height": 256,
"width": 512
}
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.4 KiB

View File

@ -0,0 +1,98 @@
{
"config": {
"type": "line",
"data": {
"labels": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
"datasets": [{
"borderColor": "transparent",
"data": [3, 3, 3, 3, 3, 3, 3, 3, 3, 3],
"pointBackgroundColor": "#00ff00",
"pointBorderColor": "transparent",
"pointBorderWidth": 0,
"pointStyle": [
"circle",
"cross",
"crossRot",
"dash",
"line",
"rect",
"rectRounded",
"rectRot",
"star",
"triangle"
]
}, {
"borderColor": "transparent",
"data": [2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
"pointBackgroundColor": "transparent",
"pointBorderColor": "#0000ff",
"pointBorderWidth": 1,
"pointStyle": [
"circle",
"cross",
"crossRot",
"dash",
"line",
"rect",
"rectRounded",
"rectRot",
"star",
"triangle"
]
}, {
"borderColor": "transparent",
"data": [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
"pointBackgroundColor": "#00ff00",
"pointBorderColor": "#0000ff",
"pointBorderWidth": 1,
"pointStyle": [
"circle",
"cross",
"crossRot",
"dash",
"line",
"rect",
"rectRounded",
"rectRot",
"star",
"triangle"
]
}]
},
"options": {
"responsive": false,
"legend": false,
"title": false,
"scales": {
"xAxes": [{"display": false}],
"yAxes": [{
"display": false,
"ticks": {
"min": 0,
"max": 4
}
}]
},
"elements": {
"line": {
"fill": false
},
"point": {
"radius": 16
}
},
"layout": {
"padding": {
"left": 24,
"right": 24
}
}
}
},
"options": {
"canvas": {
"height": 256,
"width": 512
}
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.1 KiB

View File

@ -0,0 +1,95 @@
{
"config": {
"type": "radar",
"data": {
"labels": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
"datasets": [{
"borderColor": "transparent",
"data": [3, 3, 3, 3, 3, 3, 3, 3, 3, 3],
"pointBackgroundColor": "#00ff00",
"pointBorderColor": "transparent",
"pointBorderWidth": 0,
"pointRadius": 16,
"pointStyle": [
"circle",
"cross",
"crossRot",
"dash",
"line",
"rect",
"rectRounded",
"rectRot",
"star",
"triangle"
]
}, {
"borderColor": "transparent",
"data": [2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
"pointBackgroundColor": "transparent",
"pointBorderColor": "#0000ff",
"pointBorderWidth": 1,
"pointRadius": 16,
"pointStyle": [
"circle",
"cross",
"crossRot",
"dash",
"line",
"rect",
"rectRounded",
"rectRot",
"star",
"triangle"
]
}, {
"borderColor": "transparent",
"data": [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
"pointBackgroundColor": "#00ff00",
"pointBorderColor": "#0000ff",
"pointBorderWidth": 1,
"pointRadius": 16,
"pointStyle": [
"circle",
"cross",
"crossRot",
"dash",
"line",
"rect",
"rectRounded",
"rectRot",
"star",
"triangle"
]
}]
},
"options": {
"responsive": false,
"legend": false,
"title": false,
"scale": {
"display": false,
"ticks": {
"min": 0,
"max": 3
}
},
"elements": {
"line": {
"fill": false
}
},
"layout": {
"padding": {
"left": 24,
"right": 24
}
}
}
},
"options": {
"canvas": {
"height": 512,
"width": 512
}
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.8 KiB

View File

@ -0,0 +1,67 @@
{
"config": {
"type": "bubble",
"data": {
"datasets": [{
"data": [
{"x": 0, "y": 3, "r": 0},
{"x": 1, "y": 3, "r": 2},
{"x": 2, "y": 3, "r": 4},
{"x": 3, "y": 3, "r": 8},
{"x": 4, "y": 3, "r": 16},
{"x": 5, "y": 3, "r": 32}
],
"backgroundColor": "#00ff00",
"borderColor": "transparent",
"borderWidth": 0
}, {
"data": [
{"x": 0, "y": 2, "r": 0},
{"x": 1, "y": 2, "r": 2},
{"x": 2, "y": 2, "r": 4},
{"x": 3, "y": 2, "r": 8},
{"x": 4, "y": 2, "r": 16},
{"x": 5, "y": 2, "r": 32}
],
"backgroundColor": "transparent",
"borderColor": "#0000ff",
"borderWidth": 1
}, {
"data": [
{"x": 0, "y": 1, "r": 0},
{"x": 1, "y": 1, "r": 2},
{"x": 2, "y": 1, "r": 4},
{"x": 3, "y": 1, "r": 8},
{"x": 4, "y": 1, "r": 16},
{"x": 5, "y": 1, "r": 32}
],
"backgroundColor": "#00ff00",
"borderColor": "#0000ff",
"borderWidth": 2
}]
},
"options": {
"responsive": false,
"legend": false,
"title": false,
"elements": {
"point": {
"pointStyle": "circle"
}
},
"layout": {
"padding": 40
},
"scales": {
"xAxes": [{"display": false}],
"yAxes": [{"display": false}]
}
}
},
"options": {
"canvas": {
"height": 256,
"width": 512
}
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

View File

@ -0,0 +1,67 @@
{
"config": {
"type": "bubble",
"data": {
"datasets": [{
"data": [
{"x": 0, "y": 3, "r": 0},
{"x": 1, "y": 3, "r": 2},
{"x": 2, "y": 3, "r": 4},
{"x": 3, "y": 3, "r": 8},
{"x": 4, "y": 3, "r": 16},
{"x": 5, "y": 3, "r": 32}
],
"backgroundColor": "#00ff00",
"borderColor": "transparent",
"borderWidth": 0
}, {
"data": [
{"x": 0, "y": 2, "r": 0},
{"x": 1, "y": 2, "r": 2},
{"x": 2, "y": 2, "r": 4},
{"x": 3, "y": 2, "r": 8},
{"x": 4, "y": 2, "r": 16},
{"x": 5, "y": 2, "r": 32}
],
"backgroundColor": "transparent",
"borderColor": "#0000ff",
"borderWidth": 1
}, {
"data": [
{"x": 0, "y": 1, "r": 0},
{"x": 1, "y": 1, "r": 2},
{"x": 2, "y": 1, "r": 4},
{"x": 3, "y": 1, "r": 8},
{"x": 4, "y": 1, "r": 16},
{"x": 5, "y": 1, "r": 32}
],
"backgroundColor": "#00ff00",
"borderColor": "#0000ff",
"borderWidth": 2
}]
},
"options": {
"responsive": false,
"legend": false,
"title": false,
"elements": {
"point": {
"pointStyle": "crossRot"
}
},
"layout": {
"padding": 40
},
"scales": {
"xAxes": [{"display": false}],
"yAxes": [{"display": false}]
}
}
},
"options": {
"canvas": {
"height": 256,
"width": 512
}
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.3 KiB

View File

@ -0,0 +1,67 @@
{
"config": {
"type": "bubble",
"data": {
"datasets": [{
"data": [
{"x": 0, "y": 3, "r": 0},
{"x": 1, "y": 3, "r": 2},
{"x": 2, "y": 3, "r": 4},
{"x": 3, "y": 3, "r": 8},
{"x": 4, "y": 3, "r": 16},
{"x": 5, "y": 3, "r": 32}
],
"backgroundColor": "#00ff00",
"borderColor": "transparent",
"borderWidth": 0
}, {
"data": [
{"x": 0, "y": 2, "r": 0},
{"x": 1, "y": 2, "r": 2},
{"x": 2, "y": 2, "r": 4},
{"x": 3, "y": 2, "r": 8},
{"x": 4, "y": 2, "r": 16},
{"x": 5, "y": 2, "r": 32}
],
"backgroundColor": "transparent",
"borderColor": "#0000ff",
"borderWidth": 1
}, {
"data": [
{"x": 0, "y": 1, "r": 0},
{"x": 1, "y": 1, "r": 2},
{"x": 2, "y": 1, "r": 4},
{"x": 3, "y": 1, "r": 8},
{"x": 4, "y": 1, "r": 16},
{"x": 5, "y": 1, "r": 32}
],
"backgroundColor": "#00ff00",
"borderColor": "#0000ff",
"borderWidth": 2
}]
},
"options": {
"responsive": false,
"legend": false,
"title": false,
"elements": {
"point": {
"pointStyle": "cross"
}
},
"layout": {
"padding": 40
},
"scales": {
"xAxes": [{"display": false}],
"yAxes": [{"display": false}]
}
}
},
"options": {
"canvas": {
"height": 256,
"width": 512
}
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 KiB

View File

@ -0,0 +1,67 @@
{
"config": {
"type": "bubble",
"data": {
"datasets": [{
"data": [
{"x": 0, "y": 3, "r": 0},
{"x": 1, "y": 3, "r": 2},
{"x": 2, "y": 3, "r": 4},
{"x": 3, "y": 3, "r": 8},
{"x": 4, "y": 3, "r": 16},
{"x": 5, "y": 3, "r": 32}
],
"backgroundColor": "#00ff00",
"borderColor": "transparent",
"borderWidth": 0
}, {
"data": [
{"x": 0, "y": 2, "r": 0},
{"x": 1, "y": 2, "r": 2},
{"x": 2, "y": 2, "r": 4},
{"x": 3, "y": 2, "r": 8},
{"x": 4, "y": 2, "r": 16},
{"x": 5, "y": 2, "r": 32}
],
"backgroundColor": "transparent",
"borderColor": "#0000ff",
"borderWidth": 1
}, {
"data": [
{"x": 0, "y": 1, "r": 0},
{"x": 1, "y": 1, "r": 2},
{"x": 2, "y": 1, "r": 4},
{"x": 3, "y": 1, "r": 8},
{"x": 4, "y": 1, "r": 16},
{"x": 5, "y": 1, "r": 32}
],
"backgroundColor": "#00ff00",
"borderColor": "#0000ff",
"borderWidth": 2
}]
},
"options": {
"responsive": false,
"legend": false,
"title": false,
"elements": {
"point": {
"pointStyle": "dash"
}
},
"layout": {
"padding": 40
},
"scales": {
"xAxes": [{"display": false}],
"yAxes": [{"display": false}]
}
}
},
"options": {
"canvas": {
"height": 256,
"width": 512
}
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 KiB

View File

@ -0,0 +1,67 @@
{
"config": {
"type": "bubble",
"data": {
"datasets": [{
"data": [
{"x": 0, "y": 3, "r": 0},
{"x": 1, "y": 3, "r": 2},
{"x": 2, "y": 3, "r": 4},
{"x": 3, "y": 3, "r": 8},
{"x": 4, "y": 3, "r": 16},
{"x": 5, "y": 3, "r": 32}
],
"backgroundColor": "#00ff00",
"borderColor": "transparent",
"borderWidth": 0
}, {
"data": [
{"x": 0, "y": 2, "r": 0},
{"x": 1, "y": 2, "r": 2},
{"x": 2, "y": 2, "r": 4},
{"x": 3, "y": 2, "r": 8},
{"x": 4, "y": 2, "r": 16},
{"x": 5, "y": 2, "r": 32}
],
"backgroundColor": "transparent",
"borderColor": "#0000ff",
"borderWidth": 1
}, {
"data": [
{"x": 0, "y": 1, "r": 0},
{"x": 1, "y": 1, "r": 2},
{"x": 2, "y": 1, "r": 4},
{"x": 3, "y": 1, "r": 8},
{"x": 4, "y": 1, "r": 16},
{"x": 5, "y": 1, "r": 32}
],
"backgroundColor": "#00ff00",
"borderColor": "#0000ff",
"borderWidth": 2
}]
},
"options": {
"responsive": false,
"legend": false,
"title": false,
"elements": {
"point": {
"pointStyle": "line"
}
},
"layout": {
"padding": 40
},
"scales": {
"xAxes": [{"display": false}],
"yAxes": [{"display": false}]
}
}
},
"options": {
"canvas": {
"height": 256,
"width": 512
}
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 KiB

View File

@ -0,0 +1,67 @@
{
"config": {
"type": "bubble",
"data": {
"datasets": [{
"data": [
{"x": 0, "y": 3, "r": 0},
{"x": 1, "y": 3, "r": 2},
{"x": 2, "y": 3, "r": 4},
{"x": 3, "y": 3, "r": 8},
{"x": 4, "y": 3, "r": 16},
{"x": 5, "y": 3, "r": 32}
],
"backgroundColor": "#00ff00",
"borderColor": "transparent",
"borderWidth": 0
}, {
"data": [
{"x": 0, "y": 2, "r": 0},
{"x": 1, "y": 2, "r": 2},
{"x": 2, "y": 2, "r": 4},
{"x": 3, "y": 2, "r": 8},
{"x": 4, "y": 2, "r": 16},
{"x": 5, "y": 2, "r": 32}
],
"backgroundColor": "transparent",
"borderColor": "#0000ff",
"borderWidth": 1
}, {
"data": [
{"x": 0, "y": 1, "r": 0},
{"x": 1, "y": 1, "r": 2},
{"x": 2, "y": 1, "r": 4},
{"x": 3, "y": 1, "r": 8},
{"x": 4, "y": 1, "r": 16},
{"x": 5, "y": 1, "r": 32}
],
"backgroundColor": "#00ff00",
"borderColor": "#0000ff",
"borderWidth": 2
}]
},
"options": {
"responsive": false,
"legend": false,
"title": false,
"elements": {
"point": {
"pointStyle": "rectRot"
}
},
"layout": {
"padding": 40
},
"scales": {
"xAxes": [{"display": false}],
"yAxes": [{"display": false}]
}
}
},
"options": {
"canvas": {
"height": 256,
"width": 512
}
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.4 KiB

View File

@ -0,0 +1,67 @@
{
"config": {
"type": "bubble",
"data": {
"datasets": [{
"data": [
{"x": 0, "y": 3, "r": 0},
{"x": 1, "y": 3, "r": 2},
{"x": 2, "y": 3, "r": 4},
{"x": 3, "y": 3, "r": 8},
{"x": 4, "y": 3, "r": 16},
{"x": 5, "y": 3, "r": 32}
],
"backgroundColor": "#00ff00",
"borderColor": "transparent",
"borderWidth": 0
}, {
"data": [
{"x": 0, "y": 2, "r": 0},
{"x": 1, "y": 2, "r": 2},
{"x": 2, "y": 2, "r": 4},
{"x": 3, "y": 2, "r": 8},
{"x": 4, "y": 2, "r": 16},
{"x": 5, "y": 2, "r": 32}
],
"backgroundColor": "transparent",
"borderColor": "#0000ff",
"borderWidth": 1
}, {
"data": [
{"x": 0, "y": 1, "r": 0},
{"x": 1, "y": 1, "r": 2},
{"x": 2, "y": 1, "r": 4},
{"x": 3, "y": 1, "r": 8},
{"x": 4, "y": 1, "r": 16},
{"x": 5, "y": 1, "r": 32}
],
"backgroundColor": "#00ff00",
"borderColor": "#0000ff",
"borderWidth": 2
}]
},
"options": {
"responsive": false,
"legend": false,
"title": false,
"elements": {
"point": {
"pointStyle": "rectRounded"
}
},
"layout": {
"padding": 40
},
"scales": {
"xAxes": [{"display": false}],
"yAxes": [{"display": false}]
}
}
},
"options": {
"canvas": {
"height": 256,
"width": 512
}
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.1 KiB

View File

@ -0,0 +1,67 @@
{
"config": {
"type": "bubble",
"data": {
"datasets": [{
"data": [
{"x": 0, "y": 3, "r": 0},
{"x": 1, "y": 3, "r": 2},
{"x": 2, "y": 3, "r": 4},
{"x": 3, "y": 3, "r": 8},
{"x": 4, "y": 3, "r": 16},
{"x": 5, "y": 3, "r": 32}
],
"backgroundColor": "#00ff00",
"borderColor": "transparent",
"borderWidth": 0
}, {
"data": [
{"x": 0, "y": 2, "r": 0},
{"x": 1, "y": 2, "r": 2},
{"x": 2, "y": 2, "r": 4},
{"x": 3, "y": 2, "r": 8},
{"x": 4, "y": 2, "r": 16},
{"x": 5, "y": 2, "r": 32}
],
"backgroundColor": "transparent",
"borderColor": "#0000ff",
"borderWidth": 1
}, {
"data": [
{"x": 0, "y": 1, "r": 0},
{"x": 1, "y": 1, "r": 2},
{"x": 2, "y": 1, "r": 4},
{"x": 3, "y": 1, "r": 8},
{"x": 4, "y": 1, "r": 16},
{"x": 5, "y": 1, "r": 32}
],
"backgroundColor": "#00ff00",
"borderColor": "#0000ff",
"borderWidth": 2
}]
},
"options": {
"responsive": false,
"legend": false,
"title": false,
"elements": {
"point": {
"pointStyle": "rect"
}
},
"layout": {
"padding": 40
},
"scales": {
"xAxes": [{"display": false}],
"yAxes": [{"display": false}]
}
}
},
"options": {
"canvas": {
"height": 256,
"width": 512
}
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.7 KiB

View File

@ -0,0 +1,67 @@
{
"config": {
"type": "bubble",
"data": {
"datasets": [{
"data": [
{"x": 0, "y": 3, "r": 0},
{"x": 1, "y": 3, "r": 2},
{"x": 2, "y": 3, "r": 4},
{"x": 3, "y": 3, "r": 8},
{"x": 4, "y": 3, "r": 16},
{"x": 5, "y": 3, "r": 32}
],
"backgroundColor": "#00ff00",
"borderColor": "transparent",
"borderWidth": 0
}, {
"data": [
{"x": 0, "y": 2, "r": 0},
{"x": 1, "y": 2, "r": 2},
{"x": 2, "y": 2, "r": 4},
{"x": 3, "y": 2, "r": 8},
{"x": 4, "y": 2, "r": 16},
{"x": 5, "y": 2, "r": 32}
],
"backgroundColor": "transparent",
"borderColor": "#0000ff",
"borderWidth": 1
}, {
"data": [
{"x": 0, "y": 1, "r": 0},
{"x": 1, "y": 1, "r": 2},
{"x": 2, "y": 1, "r": 4},
{"x": 3, "y": 1, "r": 8},
{"x": 4, "y": 1, "r": 16},
{"x": 5, "y": 1, "r": 32}
],
"backgroundColor": "#00ff00",
"borderColor": "#0000ff",
"borderWidth": 2
}]
},
"options": {
"responsive": false,
"legend": false,
"title": false,
"elements": {
"point": {
"pointStyle": "star"
}
},
"layout": {
"padding": 40
},
"scales": {
"xAxes": [{"display": false}],
"yAxes": [{"display": false}]
}
}
},
"options": {
"canvas": {
"height": 256,
"width": 512
}
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.0 KiB

View File

@ -0,0 +1,67 @@
{
"config": {
"type": "bubble",
"data": {
"datasets": [{
"data": [
{"x": 0, "y": 3, "r": 0},
{"x": 1, "y": 3, "r": 2},
{"x": 2, "y": 3, "r": 4},
{"x": 3, "y": 3, "r": 8},
{"x": 4, "y": 3, "r": 16},
{"x": 5, "y": 3, "r": 32}
],
"backgroundColor": "#00ff00",
"borderColor": "transparent",
"borderWidth": 0
}, {
"data": [
{"x": 0, "y": 2, "r": 0},
{"x": 1, "y": 2, "r": 2},
{"x": 2, "y": 2, "r": 4},
{"x": 3, "y": 2, "r": 8},
{"x": 4, "y": 2, "r": 16},
{"x": 5, "y": 2, "r": 32}
],
"backgroundColor": "transparent",
"borderColor": "#0000ff",
"borderWidth": 1
}, {
"data": [
{"x": 0, "y": 1, "r": 0},
{"x": 1, "y": 1, "r": 2},
{"x": 2, "y": 1, "r": 4},
{"x": 3, "y": 1, "r": 8},
{"x": 4, "y": 1, "r": 16},
{"x": 5, "y": 1, "r": 32}
],
"backgroundColor": "#00ff00",
"borderColor": "#0000ff",
"borderWidth": 2
}]
},
"options": {
"responsive": false,
"legend": false,
"title": false,
"elements": {
"point": {
"pointStyle": "triangle"
}
},
"layout": {
"padding": 40
},
"scales": {
"xAxes": [{"display": false}],
"yAxes": [{"display": false}]
}
}
},
"options": {
"canvas": {
"height": 256,
"width": 512
}
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.0 KiB

View File

@ -1,4 +1,6 @@
describe('Chart.controllers.bubble', function() {
describe('auto', jasmine.specsFromFixtures('controller.bubble'));
it('should be constructed', function() {
var chart = window.acquireChart({
type: 'bubble',

View File

@ -1,4 +1,6 @@
describe('Chart.controllers.line', function() {
describe('auto', jasmine.specsFromFixtures('controller.line'));
it('should be constructed', function() {
var chart = window.acquireChart({
type: 'line',

View File

@ -1,4 +1,6 @@
describe('Chart.controllers.radar', function() {
describe('auto', jasmine.specsFromFixtures('controller.radar'));
it('Should be constructed', function() {
var chart = window.acquireChart({
type: 'radar',

View File

@ -1,6 +1,6 @@
// Test the point element
describe('Chart.elements.Point', function() {
describe('auto', jasmine.specsFromFixtures('element.point'));
describe('Point element tests', function() {
it ('Should be constructed', function() {
var point = new Chart.elements.Point({
_datasetIndex: 2,
@ -94,474 +94,6 @@ describe('Point element tests', function() {
expect(point.getCenterPoint()).toEqual({x: 10, y: 10});
});
it ('should draw correctly', function() {
var mockContext = window.createMockContext();
var point = new Chart.elements.Point({
_datasetIndex: 2,
_index: 1,
_chart: {
ctx: mockContext,
}
});
// Attach a view object as if we were the controller
point._view = {
radius: 2,
pointStyle: 'circle',
rotation: 25,
hitRadius: 3,
borderColor: 'rgba(1, 2, 3, 1)',
borderWidth: 6,
backgroundColor: 'rgba(0, 255, 0)',
x: 10,
y: 15,
ctx: mockContext
};
point.draw();
expect(mockContext.getCalls()).toEqual([{
name: 'setStrokeStyle',
args: ['rgba(1, 2, 3, 1)']
}, {
name: 'setLineWidth',
args: [6]
}, {
name: 'setFillStyle',
args: ['rgba(0, 255, 0)']
}, {
name: 'save',
args: []
}, {
name: 'translate',
args: [10, 15]
}, {
name: 'rotate',
args: [25 * Math.PI / 180]
}, {
name: 'beginPath',
args: []
}, {
name: 'arc',
args: [0, 0, 2, 0, 2 * Math.PI]
}, {
name: 'closePath',
args: [],
}, {
name: 'fill',
args: [],
}, {
name: 'stroke',
args: []
}, {
name: 'restore',
args: []
}]);
mockContext.resetCalls();
point._view.pointStyle = 'triangle';
point.draw();
expect(mockContext.getCalls()).toEqual([{
name: 'setStrokeStyle',
args: ['rgba(1, 2, 3, 1)']
}, {
name: 'setLineWidth',
args: [6]
}, {
name: 'setFillStyle',
args: ['rgba(0, 255, 0)']
}, {
name: 'save',
args: []
}, {
name: 'translate',
args: [10, 15]
}, {
name: 'rotate',
args: [25 * Math.PI / 180]
}, {
name: 'beginPath',
args: []
}, {
name: 'moveTo',
args: [0 - 3 * 2 / Math.sqrt(3) / 2, 0 + 3 * 2 / Math.sqrt(3) * Math.sqrt(3) / 2 / 3]
}, {
name: 'lineTo',
args: [0 + 3 * 2 / Math.sqrt(3) / 2, 0 + 3 * 2 / Math.sqrt(3) * Math.sqrt(3) / 2 / 3],
}, {
name: 'lineTo',
args: [0, 0 - 2 * 3 * 2 / Math.sqrt(3) * Math.sqrt(3) / 2 / 3],
}, {
name: 'closePath',
args: [],
}, {
name: 'fill',
args: [],
}, {
name: 'stroke',
args: []
}, {
name: 'restore',
args: []
}]);
mockContext.resetCalls();
point._view.pointStyle = 'rect';
point.draw();
expect(mockContext.getCalls()).toEqual([{
name: 'setStrokeStyle',
args: ['rgba(1, 2, 3, 1)']
}, {
name: 'setLineWidth',
args: [6]
}, {
name: 'setFillStyle',
args: ['rgba(0, 255, 0)']
}, {
name: 'save',
args: []
}, {
name: 'translate',
args: [10, 15]
}, {
name: 'rotate',
args: [25 * Math.PI / 180]
}, {
name: 'beginPath',
args: []
}, {
name: 'rect',
args: [0 - 1 / Math.SQRT2 * 2, 0 - 1 / Math.SQRT2 * 2, 2 / Math.SQRT2 * 2, 2 / Math.SQRT2 * 2]
}, {
name: 'fill',
args: []
}, {
name: 'stroke',
args: []
}, {
name: 'restore',
args: []
}]);
var drawRoundedRectangleSpy = jasmine.createSpy('drawRoundedRectangle');
var drawRoundedRectangle = Chart.helpers.canvas.roundedRect;
var offset = point._view.radius / Math.SQRT2;
Chart.helpers.canvas.roundedRect = drawRoundedRectangleSpy;
mockContext.resetCalls();
point._view.pointStyle = 'rectRounded';
point.draw();
expect(drawRoundedRectangleSpy).toHaveBeenCalledWith(
mockContext,
0 - offset,
0 - offset,
Math.SQRT2 * 2,
Math.SQRT2 * 2,
2 * 0.425
);
expect(mockContext.getCalls()).toContain(
jasmine.objectContaining({
name: 'fill',
args: [],
})
);
Chart.helpers.canvas.roundedRect = drawRoundedRectangle;
mockContext.resetCalls();
point._view.pointStyle = 'rectRot';
point.draw();
expect(mockContext.getCalls()).toEqual([{
name: 'setStrokeStyle',
args: ['rgba(1, 2, 3, 1)']
}, {
name: 'setLineWidth',
args: [6]
}, {
name: 'setFillStyle',
args: ['rgba(0, 255, 0)']
}, {
name: 'save',
args: []
}, {
name: 'translate',
args: [10, 15]
}, {
name: 'rotate',
args: [25 * Math.PI / 180]
}, {
name: 'beginPath',
args: []
}, {
name: 'moveTo',
args: [0 - 1 / Math.SQRT2 * 2, 0]
}, {
name: 'lineTo',
args: [0, 0 + 1 / Math.SQRT2 * 2]
}, {
name: 'lineTo',
args: [0 + 1 / Math.SQRT2 * 2, 0],
}, {
name: 'lineTo',
args: [0, 0 - 1 / Math.SQRT2 * 2],
}, {
name: 'closePath',
args: []
}, {
name: 'fill',
args: [],
}, {
name: 'stroke',
args: []
}, {
name: 'restore',
args: []
}]);
mockContext.resetCalls();
point._view.pointStyle = 'cross';
point.draw();
expect(mockContext.getCalls()).toEqual([{
name: 'setStrokeStyle',
args: ['rgba(1, 2, 3, 1)']
}, {
name: 'setLineWidth',
args: [6]
}, {
name: 'setFillStyle',
args: ['rgba(0, 255, 0)']
}, {
name: 'save',
args: []
}, {
name: 'translate',
args: [10, 15]
}, {
name: 'rotate',
args: [25 * Math.PI / 180]
}, {
name: 'beginPath',
args: []
}, {
name: 'moveTo',
args: [0, 2]
}, {
name: 'lineTo',
args: [0, -2],
}, {
name: 'moveTo',
args: [-2, 0],
}, {
name: 'lineTo',
args: [2, 0],
}, {
name: 'fill',
args: []
}, {
name: 'stroke',
args: []
}, {
name: 'restore',
args: []
}]);
mockContext.resetCalls();
point._view.pointStyle = 'crossRot';
point.draw();
expect(mockContext.getCalls()).toEqual([{
name: 'setStrokeStyle',
args: ['rgba(1, 2, 3, 1)']
}, {
name: 'setLineWidth',
args: [6]
}, {
name: 'setFillStyle',
args: ['rgba(0, 255, 0)']
}, {
name: 'save',
args: []
}, {
name: 'translate',
args: [10, 15]
}, {
name: 'rotate',
args: [25 * Math.PI / 180]
}, {
name: 'beginPath',
args: []
}, {
name: 'moveTo',
args: [0 - Math.cos(Math.PI / 4) * 2, 0 - Math.sin(Math.PI / 4) * 2]
}, {
name: 'lineTo',
args: [0 + Math.cos(Math.PI / 4) * 2, 0 + Math.sin(Math.PI / 4) * 2],
}, {
name: 'moveTo',
args: [0 - Math.cos(Math.PI / 4) * 2, 0 + Math.sin(Math.PI / 4) * 2],
}, {
name: 'lineTo',
args: [0 + Math.cos(Math.PI / 4) * 2, 0 - Math.sin(Math.PI / 4) * 2],
}, {
name: 'fill',
args: []
}, {
name: 'stroke',
args: []
}, {
name: 'restore',
args: []
}]);
mockContext.resetCalls();
point._view.pointStyle = 'star';
point.draw();
expect(mockContext.getCalls()).toEqual([{
name: 'setStrokeStyle',
args: ['rgba(1, 2, 3, 1)']
}, {
name: 'setLineWidth',
args: [6]
}, {
name: 'setFillStyle',
args: ['rgba(0, 255, 0)']
}, {
name: 'save',
args: []
}, {
name: 'translate',
args: [10, 15]
}, {
name: 'rotate',
args: [25 * Math.PI / 180]
}, {
name: 'beginPath',
args: []
}, {
name: 'moveTo',
args: [0, 2]
}, {
name: 'lineTo',
args: [0, -2],
}, {
name: 'moveTo',
args: [-2, 0],
}, {
name: 'lineTo',
args: [2, 0],
}, {
name: 'moveTo',
args: [0 - Math.cos(Math.PI / 4) * 2, 0 - Math.sin(Math.PI / 4) * 2]
}, {
name: 'lineTo',
args: [0 + Math.cos(Math.PI / 4) * 2, 0 + Math.sin(Math.PI / 4) * 2],
}, {
name: 'moveTo',
args: [0 - Math.cos(Math.PI / 4) * 2, 0 + Math.sin(Math.PI / 4) * 2],
}, {
name: 'lineTo',
args: [0 + Math.cos(Math.PI / 4) * 2, 0 - Math.sin(Math.PI / 4) * 2],
}, {
name: 'fill',
args: []
}, {
name: 'stroke',
args: []
}, {
name: 'restore',
args: []
}]);
mockContext.resetCalls();
point._view.pointStyle = 'line';
point.draw();
expect(mockContext.getCalls()).toEqual([{
name: 'setStrokeStyle',
args: ['rgba(1, 2, 3, 1)']
}, {
name: 'setLineWidth',
args: [6]
}, {
name: 'setFillStyle',
args: ['rgba(0, 255, 0)']
}, {
name: 'save',
args: []
}, {
name: 'translate',
args: [10, 15]
}, {
name: 'rotate',
args: [25 * Math.PI / 180]
}, {
name: 'beginPath',
args: []
}, {
name: 'moveTo',
args: [-2, 0]
}, {
name: 'lineTo',
args: [2, 0],
}, {
name: 'fill',
args: []
}, {
name: 'stroke',
args: []
}, {
name: 'restore',
args: []
}]);
mockContext.resetCalls();
point._view.pointStyle = 'dash';
point.draw();
expect(mockContext.getCalls()).toEqual([{
name: 'setStrokeStyle',
args: ['rgba(1, 2, 3, 1)']
}, {
name: 'setLineWidth',
args: [6]
}, {
name: 'setFillStyle',
args: ['rgba(0, 255, 0)']
}, {
name: 'save',
args: []
}, {
name: 'translate',
args: [10, 15]
}, {
name: 'rotate',
args: [25 * Math.PI / 180]
}, {
name: 'beginPath',
args: []
}, {
name: 'moveTo',
args: [0, 0]
}, {
name: 'lineTo',
args: [2, 0],
}, {
name: 'fill',
args: []
}, {
name: 'stroke',
args: []
}, {
name: 'restore',
args: []
}]);
});
it ('should draw correctly with default settings if necessary', function() {
var mockContext = window.createMockContext();
var point = new Chart.elements.Point({