Skip to content

Commit 66f21fe

Browse files
author
Jon M. Mease
committed
Add tests for clicking on category and path with/without hoverinfo skip
1 parent 98d76ee commit 66f21fe

File tree

2 files changed

+179
-12
lines changed

2 files changed

+179
-12
lines changed

‎src/traces/parcats/parcats.js

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1184,11 +1184,13 @@ function dragDimensionEnd(d) {
11841184

11851185
// Handle potential click event
11861186
// ----------------------------
1187-
if(!d.dragHasMoved && d.potentialClickBand) {
1188-
if(d.parcatsViewModel.hovermode === 'color') {
1189-
emitPointsEventColorHovermode(d.potentialClickBand, 'plotly_click', d3.event.sourceEvent);
1190-
} else {
1191-
emitPointsEventCategoryHovermode(d.potentialClickBand, 'plotly_click', d3.event.sourceEvent);
1187+
if(d.parcatsViewModel.hoverinfoItems.indexOf('skip') === -1) {
1188+
if (!d.dragHasMoved && d.potentialClickBand) {
1189+
if (d.parcatsViewModel.hovermode === 'color') {
1190+
emitPointsEventColorHovermode(d.potentialClickBand, 'plotly_click', d3.event.sourceEvent);
1191+
} else {
1192+
emitPointsEventCategoryHovermode(d.potentialClickBand, 'plotly_click', d3.event.sourceEvent);
1193+
}
11921194
}
11931195
}
11941196

‎test/jasmine/tests/parcats_test.js

Lines changed: 172 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ var createGraphDiv = require('../assets/create_graph_div');
55
var destroyGraphDiv = require('../assets/destroy_graph_div');
66
var failTest = require('../assets/fail_test');
77
var mouseEvent = require('../assets/mouse_event');
8+
var click = require('../assets/click');
89
var delay = require('../assets/delay');
910

1011
var CALLBACK_DELAY = 500;
@@ -802,7 +803,7 @@ describe('Drag to reordered categories', function() {
802803
function getDragPositions(parcatsViewModel) {
803804
var dragDimStartX = parcatsViewModel.dimensions[1].x;
804805

805-
var mouseStartY = parcatsViewModel.y + parcatsViewModel.dimensions[1].categories[2].y,
806+
var mouseStartY = parcatsViewModel.y + parcatsViewModel.dimensions[1].categories[2].y + 10,
806807
mouseStartX = parcatsViewModel.x + dragDimStartX + dimWidth / 2;
807808

808809
// Pause mouse half-way between the original location of
@@ -1092,7 +1093,7 @@ describe('Drag to reordered categories', function() {
10921093
it('should NOT support dragging category to reorder categories or dimensions in fixed arrangement', function(done) {
10931094

10941095
// Set arrangement
1095-
mock.data[0].arrangement = 'fixed';
1096+
mock.data[0].arrangement = 'fixed';
10961097

10971098
Plotly.newPlot(gd, mock)
10981099
.then(function() {
@@ -1161,6 +1162,174 @@ describe('Drag to reordered categories', function() {
11611162
});
11621163
});
11631164

1165+
1166+
describe('Click events', function() {
1167+
1168+
// Variable declarations
1169+
// ---------------------
1170+
// ### Trace level ###
1171+
var gd,
1172+
mock;
1173+
1174+
// Fixtures
1175+
// --------
1176+
beforeEach(function() {
1177+
gd = createGraphDiv();
1178+
mock = Lib.extendDeep({}, require('@mocks/parcats_basic_freeform.json'));
1179+
});
1180+
1181+
afterEach(destroyGraphDiv);
1182+
1183+
it('should fire on category click', function(done) {
1184+
1185+
var clickData;
1186+
Plotly.newPlot(gd, mock)
1187+
.then(function() {
1188+
/** @type {ParcatsViewModel} */
1189+
var parcatsViewModel = d3.select('g.trace.parcats').datum();
1190+
1191+
gd.on('plotly_click', function(data) {
1192+
clickData = data;
1193+
});
1194+
1195+
// Click on the lowest category in the middle dimension (category "C")
1196+
var dimStartX = parcatsViewModel.dimensions[1].x;
1197+
var mouseY = parcatsViewModel.y + parcatsViewModel.dimensions[1].categories[2].y + 10,
1198+
mouseX = parcatsViewModel.x + dimStartX + dimWidth / 2;
1199+
1200+
// Position mouse for start of drag
1201+
// --------------------------------
1202+
click(mouseX, mouseY);
1203+
})
1204+
.then(delay(CALLBACK_DELAY))
1205+
.then(function() {
1206+
// Check that click callback was called
1207+
expect(clickData).toBeDefined();
1208+
1209+
// Check that the right points were reported
1210+
var pts = clickData.points.sort(function(a, b) {
1211+
return a.pointNumber - b.pointNumber;
1212+
});
1213+
1214+
// Check points
1215+
expect(pts).toEqual([
1216+
{curveNumber: 0, pointNumber: 4},
1217+
{curveNumber: 0, pointNumber: 5},
1218+
{curveNumber: 0, pointNumber: 8}]);
1219+
})
1220+
.catch(failTest)
1221+
.then(done);
1222+
});
1223+
1224+
it('should NOT fire on category click if hoverinfo is skip', function(done) {
1225+
1226+
var clickData;
1227+
mock.data[0].hoverinfo = 'skip';
1228+
1229+
Plotly.newPlot(gd, mock)
1230+
.then(function() {
1231+
/** @type {ParcatsViewModel} */
1232+
var parcatsViewModel = d3.select('g.trace.parcats').datum();
1233+
1234+
console.log(gd.data[0]);
1235+
console.log(parcatsViewModel.hoverinfoItems);
1236+
1237+
gd.on('plotly_click', function(data) {
1238+
clickData = data;
1239+
});
1240+
1241+
// Click on the lowest category in the middle dimension (category "C")
1242+
var dimStartX = parcatsViewModel.dimensions[1].x;
1243+
var mouseY = parcatsViewModel.y + parcatsViewModel.dimensions[1].categories[2].y + 10,
1244+
mouseX = parcatsViewModel.x + dimStartX + dimWidth / 2;
1245+
1246+
// Position mouse for start of drag
1247+
// --------------------------------
1248+
click(mouseX, mouseY);
1249+
})
1250+
.then(delay(CALLBACK_DELAY))
1251+
.then(function() {
1252+
// Check that click callback was called
1253+
expect(clickData).toBeUndefined();
1254+
})
1255+
.catch(failTest)
1256+
.then(done);
1257+
});
1258+
1259+
it('should fire on path click', function(done) {
1260+
1261+
var clickData;
1262+
1263+
Plotly.newPlot(gd, mock)
1264+
.then(function() {
1265+
/** @type {ParcatsViewModel} */
1266+
var parcatsViewModel = d3.select('g.trace.parcats').datum();
1267+
1268+
gd.on('plotly_click', function(data) {
1269+
clickData = data;
1270+
});
1271+
1272+
// Click on the top path to the right of the lowest category in the middle dimension (category "C")
1273+
var dimStartX = parcatsViewModel.dimensions[1].x;
1274+
var mouseY = parcatsViewModel.y + parcatsViewModel.dimensions[1].categories[2].y + 10,
1275+
mouseX = parcatsViewModel.x + dimStartX + dimWidth + 10;
1276+
1277+
// Position mouse for start of drag
1278+
// --------------------------------
1279+
click(mouseX, mouseY);
1280+
})
1281+
.then(delay(CALLBACK_DELAY))
1282+
.then(function() {
1283+
// Check that click callback was called
1284+
expect(clickData).toBeDefined();
1285+
1286+
// Check that the right points were reported
1287+
var pts = clickData.points.sort(function(a, b) {
1288+
return a.pointNumber - b.pointNumber;
1289+
});
1290+
1291+
// Check points
1292+
expect(pts).toEqual([
1293+
{curveNumber: 0, pointNumber: 5},
1294+
{curveNumber: 0, pointNumber: 8}]);
1295+
})
1296+
.catch(failTest)
1297+
.then(done);
1298+
});
1299+
1300+
it('should NOT fire on path click if hoverinfo is skip', function(done) {
1301+
1302+
var clickData;
1303+
mock.data[0].hoverinfo = 'skip';
1304+
1305+
Plotly.newPlot(gd, mock)
1306+
.then(function() {
1307+
/** @type {ParcatsViewModel} */
1308+
var parcatsViewModel = d3.select('g.trace.parcats').datum();
1309+
1310+
gd.on('plotly_click', function(data) {
1311+
clickData = data;
1312+
});
1313+
1314+
// Click on the top path to the right of the lowest category in the middle dimension (category "C")
1315+
var dimStartX = parcatsViewModel.dimensions[1].x;
1316+
var mouseY = parcatsViewModel.y + parcatsViewModel.dimensions[1].categories[2].y + 10,
1317+
mouseX = parcatsViewModel.x + dimStartX + dimWidth + 10;
1318+
1319+
// Position mouse for start of drag
1320+
// --------------------------------
1321+
click(mouseX, mouseY);
1322+
})
1323+
.then(delay(CALLBACK_DELAY))
1324+
.then(function() {
1325+
// Check that click callback was called
1326+
expect(clickData).toBeUndefined();
1327+
})
1328+
.catch(failTest)
1329+
.then(done);
1330+
});
1331+
});
1332+
11641333
// To Test
11651334
// -------
11661335
// ### Hovering
@@ -1171,11 +1340,7 @@ describe('Drag to reordered categories', function() {
11711340
// - [ ] Events emitted on category hover in 'category', 'color', 'dimension', and 'none' `hovermode`
11721341
// - [ ] No events emitted on category or path in 'skip' `hovermode`
11731342
// In each case, check hoverinfo text
1174-
//
1175-
// ### Clicking
1176-
// - [ ] Path click events fired unless `hovermode` is 'skip'
1177-
// - [ ] Category/color click events fired unless `hovermode` is 'skip'
1178-
//
1343+
11791344
// ### Test that properties have the desired effect on models
11801345
// - [ ] visible
11811346
// - [ ] counts

0 commit comments

Comments
 (0)