From: Simon Brunel Date: Mon, 9 Jul 2018 19:14:25 +0000 (+0200) Subject: Add "point style" image tests X-Git-Tag: v2.7.3~1^2~11 X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=91608398b683afa627c9ab65a65d3e9b50cdb794;p=thirdparty%2FChart.js.git 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. --- diff --git a/test/fixtures/controller.bubble/point-style.json b/test/fixtures/controller.bubble/point-style.json new file mode 100644 index 000000000..a64507516 --- /dev/null +++ b/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 + } + } +} diff --git a/test/fixtures/controller.bubble/point-style.png b/test/fixtures/controller.bubble/point-style.png new file mode 100644 index 000000000..f1d3b8168 Binary files /dev/null and b/test/fixtures/controller.bubble/point-style.png differ diff --git a/test/fixtures/controller.line/point-style.json b/test/fixtures/controller.line/point-style.json new file mode 100644 index 000000000..ef295ad59 --- /dev/null +++ b/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 + } + } +} diff --git a/test/fixtures/controller.line/point-style.png b/test/fixtures/controller.line/point-style.png new file mode 100644 index 000000000..f177fbfe1 Binary files /dev/null and b/test/fixtures/controller.line/point-style.png differ diff --git a/test/fixtures/controller.radar/point-style.json b/test/fixtures/controller.radar/point-style.json new file mode 100644 index 000000000..913c1cb87 --- /dev/null +++ b/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 + } + } +} diff --git a/test/fixtures/controller.radar/point-style.png b/test/fixtures/controller.radar/point-style.png new file mode 100644 index 000000000..562cb620b Binary files /dev/null and b/test/fixtures/controller.radar/point-style.png differ diff --git a/test/fixtures/element.point/point-style-circle.json b/test/fixtures/element.point/point-style-circle.json new file mode 100644 index 000000000..714d421a0 --- /dev/null +++ b/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 + } + } +} diff --git a/test/fixtures/element.point/point-style-circle.png b/test/fixtures/element.point/point-style-circle.png new file mode 100644 index 000000000..d7b9bf531 Binary files /dev/null and b/test/fixtures/element.point/point-style-circle.png differ diff --git a/test/fixtures/element.point/point-style-cross-rot.json b/test/fixtures/element.point/point-style-cross-rot.json new file mode 100644 index 000000000..e81b8b731 --- /dev/null +++ b/test/fixtures/element.point/point-style-cross-rot.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": "crossRot" + } + }, + "layout": { + "padding": 40 + }, + "scales": { + "xAxes": [{"display": false}], + "yAxes": [{"display": false}] + } + } + }, + "options": { + "canvas": { + "height": 256, + "width": 512 + } + } +} diff --git a/test/fixtures/element.point/point-style-cross-rot.png b/test/fixtures/element.point/point-style-cross-rot.png new file mode 100644 index 000000000..3f6d1df09 Binary files /dev/null and b/test/fixtures/element.point/point-style-cross-rot.png differ diff --git a/test/fixtures/element.point/point-style-cross.json b/test/fixtures/element.point/point-style-cross.json new file mode 100644 index 000000000..5eb99441f --- /dev/null +++ b/test/fixtures/element.point/point-style-cross.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": "cross" + } + }, + "layout": { + "padding": 40 + }, + "scales": { + "xAxes": [{"display": false}], + "yAxes": [{"display": false}] + } + } + }, + "options": { + "canvas": { + "height": 256, + "width": 512 + } + } +} diff --git a/test/fixtures/element.point/point-style-cross.png b/test/fixtures/element.point/point-style-cross.png new file mode 100644 index 000000000..ecf3cda77 Binary files /dev/null and b/test/fixtures/element.point/point-style-cross.png differ diff --git a/test/fixtures/element.point/point-style-dash.json b/test/fixtures/element.point/point-style-dash.json new file mode 100644 index 000000000..16f059eef --- /dev/null +++ b/test/fixtures/element.point/point-style-dash.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": "dash" + } + }, + "layout": { + "padding": 40 + }, + "scales": { + "xAxes": [{"display": false}], + "yAxes": [{"display": false}] + } + } + }, + "options": { + "canvas": { + "height": 256, + "width": 512 + } + } +} diff --git a/test/fixtures/element.point/point-style-dash.png b/test/fixtures/element.point/point-style-dash.png new file mode 100644 index 000000000..9c381d83d Binary files /dev/null and b/test/fixtures/element.point/point-style-dash.png differ diff --git a/test/fixtures/element.point/point-style-line.json b/test/fixtures/element.point/point-style-line.json new file mode 100644 index 000000000..eda6d98f6 --- /dev/null +++ b/test/fixtures/element.point/point-style-line.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": "line" + } + }, + "layout": { + "padding": 40 + }, + "scales": { + "xAxes": [{"display": false}], + "yAxes": [{"display": false}] + } + } + }, + "options": { + "canvas": { + "height": 256, + "width": 512 + } + } +} diff --git a/test/fixtures/element.point/point-style-line.png b/test/fixtures/element.point/point-style-line.png new file mode 100644 index 000000000..2911fea97 Binary files /dev/null and b/test/fixtures/element.point/point-style-line.png differ diff --git a/test/fixtures/element.point/point-style-rect-rot.json b/test/fixtures/element.point/point-style-rect-rot.json new file mode 100644 index 000000000..85875655e --- /dev/null +++ b/test/fixtures/element.point/point-style-rect-rot.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": "rectRot" + } + }, + "layout": { + "padding": 40 + }, + "scales": { + "xAxes": [{"display": false}], + "yAxes": [{"display": false}] + } + } + }, + "options": { + "canvas": { + "height": 256, + "width": 512 + } + } +} diff --git a/test/fixtures/element.point/point-style-rect-rot.png b/test/fixtures/element.point/point-style-rect-rot.png new file mode 100644 index 000000000..09c0adac3 Binary files /dev/null and b/test/fixtures/element.point/point-style-rect-rot.png differ diff --git a/test/fixtures/element.point/point-style-rect-rounded.json b/test/fixtures/element.point/point-style-rect-rounded.json new file mode 100644 index 000000000..6d65b46d8 --- /dev/null +++ b/test/fixtures/element.point/point-style-rect-rounded.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": "rectRounded" + } + }, + "layout": { + "padding": 40 + }, + "scales": { + "xAxes": [{"display": false}], + "yAxes": [{"display": false}] + } + } + }, + "options": { + "canvas": { + "height": 256, + "width": 512 + } + } +} diff --git a/test/fixtures/element.point/point-style-rect-rounded.png b/test/fixtures/element.point/point-style-rect-rounded.png new file mode 100644 index 000000000..a58e9e623 Binary files /dev/null and b/test/fixtures/element.point/point-style-rect-rounded.png differ diff --git a/test/fixtures/element.point/point-style-rect.json b/test/fixtures/element.point/point-style-rect.json new file mode 100644 index 000000000..5e2be5963 --- /dev/null +++ b/test/fixtures/element.point/point-style-rect.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": "rect" + } + }, + "layout": { + "padding": 40 + }, + "scales": { + "xAxes": [{"display": false}], + "yAxes": [{"display": false}] + } + } + }, + "options": { + "canvas": { + "height": 256, + "width": 512 + } + } +} diff --git a/test/fixtures/element.point/point-style-rect.png b/test/fixtures/element.point/point-style-rect.png new file mode 100644 index 000000000..493c9a692 Binary files /dev/null and b/test/fixtures/element.point/point-style-rect.png differ diff --git a/test/fixtures/element.point/point-style-star.json b/test/fixtures/element.point/point-style-star.json new file mode 100644 index 000000000..58ea577d4 --- /dev/null +++ b/test/fixtures/element.point/point-style-star.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": "star" + } + }, + "layout": { + "padding": 40 + }, + "scales": { + "xAxes": [{"display": false}], + "yAxes": [{"display": false}] + } + } + }, + "options": { + "canvas": { + "height": 256, + "width": 512 + } + } +} diff --git a/test/fixtures/element.point/point-style-star.png b/test/fixtures/element.point/point-style-star.png new file mode 100644 index 000000000..b5b58c0a4 Binary files /dev/null and b/test/fixtures/element.point/point-style-star.png differ diff --git a/test/fixtures/element.point/point-style-triangle.json b/test/fixtures/element.point/point-style-triangle.json new file mode 100644 index 000000000..e7657f1af --- /dev/null +++ b/test/fixtures/element.point/point-style-triangle.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": "triangle" + } + }, + "layout": { + "padding": 40 + }, + "scales": { + "xAxes": [{"display": false}], + "yAxes": [{"display": false}] + } + } + }, + "options": { + "canvas": { + "height": 256, + "width": 512 + } + } +} diff --git a/test/fixtures/element.point/point-style-triangle.png b/test/fixtures/element.point/point-style-triangle.png new file mode 100644 index 000000000..d2cc5c6f1 Binary files /dev/null and b/test/fixtures/element.point/point-style-triangle.png differ diff --git a/test/specs/controller.bubble.tests.js b/test/specs/controller.bubble.tests.js index 4799883dd..2597b9ae6 100644 --- a/test/specs/controller.bubble.tests.js +++ b/test/specs/controller.bubble.tests.js @@ -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', diff --git a/test/specs/controller.line.tests.js b/test/specs/controller.line.tests.js index b03162ea9..ed8f4ec5c 100644 --- a/test/specs/controller.line.tests.js +++ b/test/specs/controller.line.tests.js @@ -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', diff --git a/test/specs/controller.radar.tests.js b/test/specs/controller.radar.tests.js index 8e3b8d491..2bc0a2e0d 100644 --- a/test/specs/controller.radar.tests.js +++ b/test/specs/controller.radar.tests.js @@ -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', diff --git a/test/specs/element.point.tests.js b/test/specs/element.point.tests.js index f1da35a50..8d1227003 100644 --- a/test/specs/element.point.tests.js +++ b/test/specs/element.point.tests.js @@ -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({