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.
129
test/fixtures/controller.bubble/point-style.json
vendored
Normal 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
|
||||
}
|
||||
}
|
||||
}
|
||||
BIN
test/fixtures/controller.bubble/point-style.png
vendored
Normal file
|
After Width: | Height: | Size: 6.4 KiB |
98
test/fixtures/controller.line/point-style.json
vendored
Normal 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
|
||||
}
|
||||
}
|
||||
}
|
||||
BIN
test/fixtures/controller.line/point-style.png
vendored
Normal file
|
After Width: | Height: | Size: 6.1 KiB |
95
test/fixtures/controller.radar/point-style.json
vendored
Normal 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
|
||||
}
|
||||
}
|
||||
}
|
||||
BIN
test/fixtures/controller.radar/point-style.png
vendored
Normal file
|
After Width: | Height: | Size: 6.8 KiB |
67
test/fixtures/element.point/point-style-circle.json
vendored
Normal 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
|
||||
}
|
||||
}
|
||||
}
|
||||
BIN
test/fixtures/element.point/point-style-circle.png
vendored
Normal file
|
After Width: | Height: | Size: 12 KiB |
67
test/fixtures/element.point/point-style-cross-rot.json
vendored
Normal 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
|
||||
}
|
||||
}
|
||||
}
|
||||
BIN
test/fixtures/element.point/point-style-cross-rot.png
vendored
Normal file
|
After Width: | Height: | Size: 5.3 KiB |
67
test/fixtures/element.point/point-style-cross.json
vendored
Normal 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
|
||||
}
|
||||
}
|
||||
}
|
||||
BIN
test/fixtures/element.point/point-style-cross.png
vendored
Normal file
|
After Width: | Height: | Size: 3.9 KiB |
67
test/fixtures/element.point/point-style-dash.json
vendored
Normal 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
|
||||
}
|
||||
}
|
||||
}
|
||||
BIN
test/fixtures/element.point/point-style-dash.png
vendored
Normal file
|
After Width: | Height: | Size: 3.3 KiB |
67
test/fixtures/element.point/point-style-line.json
vendored
Normal 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
|
||||
}
|
||||
}
|
||||
}
|
||||
BIN
test/fixtures/element.point/point-style-line.png
vendored
Normal file
|
After Width: | Height: | Size: 3.3 KiB |
67
test/fixtures/element.point/point-style-rect-rot.json
vendored
Normal 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
|
||||
}
|
||||
}
|
||||
}
|
||||
BIN
test/fixtures/element.point/point-style-rect-rot.png
vendored
Normal file
|
After Width: | Height: | Size: 6.4 KiB |
67
test/fixtures/element.point/point-style-rect-rounded.json
vendored
Normal 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
|
||||
}
|
||||
}
|
||||
}
|
||||
BIN
test/fixtures/element.point/point-style-rect-rounded.png
vendored
Normal file
|
After Width: | Height: | Size: 8.1 KiB |
67
test/fixtures/element.point/point-style-rect.json
vendored
Normal 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
|
||||
}
|
||||
}
|
||||
}
|
||||
BIN
test/fixtures/element.point/point-style-rect.png
vendored
Normal file
|
After Width: | Height: | Size: 4.7 KiB |
67
test/fixtures/element.point/point-style-star.json
vendored
Normal 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
|
||||
}
|
||||
}
|
||||
}
|
||||
BIN
test/fixtures/element.point/point-style-star.png
vendored
Normal file
|
After Width: | Height: | Size: 6.0 KiB |
67
test/fixtures/element.point/point-style-triangle.json
vendored
Normal 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
|
||||
}
|
||||
}
|
||||
}
|
||||
BIN
test/fixtures/element.point/point-style-triangle.png
vendored
Normal file
|
After Width: | Height: | Size: 9.0 KiB |
@ -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',
|
||||
|
||||
@ -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',
|
||||
|
||||
@ -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',
|
||||
|
||||
@ -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({
|
||||
|
||||