Skip to content

Commit

Permalink
Add "point style" image tests
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
simonbrunel committed Jul 29, 2018
1 parent 9a29581 commit 9160839
Show file tree
Hide file tree
Showing 30 changed files with 1,000 additions and 470 deletions.
129 changes: 129 additions & 0 deletions test/fixtures/controller.bubble/point-style.json
@@ -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 added test/fixtures/controller.bubble/point-style.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
98 changes: 98 additions & 0 deletions test/fixtures/controller.line/point-style.json
@@ -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 added test/fixtures/controller.line/point-style.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
95 changes: 95 additions & 0 deletions test/fixtures/controller.radar/point-style.json
@@ -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 added test/fixtures/controller.radar/point-style.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
67 changes: 67 additions & 0 deletions test/fixtures/element.point/point-style-circle.json
@@ -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
}
}
}
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

3 comments on commit 9160839

@touletan
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

how can we debug when one of those tests failed?

@simonbrunel
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

gulp unittest --watch

@touletan
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

C'est bon. Merci

Please sign in to comment.