diff --git a/packages/perspective-viewer-datagrid/src/js/plugin_menu.js b/packages/perspective-viewer-datagrid/src/js/plugin_menu.js index a8c7545f75..0c9e53fc86 100644 --- a/packages/perspective-viewer-datagrid/src/js/plugin_menu.js +++ b/packages/perspective-viewer-datagrid/src/js/plugin_menu.js @@ -84,7 +84,7 @@ export function activate_plugin_menu(regularTable, target, column_max) { regularTable[PLUGIN_SYMBOL] = regularTable[PLUGIN_SYMBOL] || {}; regularTable[PLUGIN_SYMBOL][column_name] = config; regularTable.draw({preserve_width: true}); - regularTable.parentElement.dispatchEvent( + regularTable.parentElement.parentElement.dispatchEvent( new Event("perspective-config-update") ); }; @@ -102,7 +102,7 @@ export function activate_plugin_menu(regularTable, target, column_max) { MENU.destroy(); this._open_column_styles_menu.pop(); await regularTable.draw({preserve_width: true}); - regularTable.parentElement.dispatchEvent( + regularTable.parentElement.parentElement.dispatchEvent( new Event("perspective-config-update") ); }; diff --git a/packages/perspective-viewer-datagrid/test/js/superstore.spec.js b/packages/perspective-viewer-datagrid/test/js/superstore.spec.js index 570155135a..dfed1a19a4 100644 --- a/packages/perspective-viewer-datagrid/test/js/superstore.spec.js +++ b/packages/perspective-viewer-datagrid/test/js/superstore.spec.js @@ -27,6 +27,87 @@ utils.with_server({}, () => { () => { simple_tests.default(get_contents); + test.capture( + "perspective-config-update event is fired when column style is changed", + async (page) => { + // Await the viewer element to exist on the page + const viewer = await page.$("perspective-viewer"); + const {x, y} = await page.evaluate(async (viewer) => { + // Await the table load + await viewer.getTable(); + + // Open the config panel + await viewer.toggleConfig(); + + // Register a listener for `perspective-config-update` event + window.__events__ = []; + viewer.addEventListener( + "perspective-config-update", + (evt) => { + window.__events__.push(evt); + } + ); + + // Find the column config menu button + const header_button = viewer.querySelector( + "regular-table thead tr:last-child th" + ); + + // Get the button coords (slightly lower than center + // because of the location of the menu button within + // this element) + const rect = header_button.getBoundingClientRect(); + return { + x: Math.floor(rect.left + rect.width / 2), + y: Math.floor(rect.top + (3 * rect.height) / 4), + }; + }, viewer); + + // Click the menu button + await page.mouse.click(x, y); + + // Await the style menu existing on the page + const style_menu = await page.$( + "perspective-number-column-style" + ); + + const {x: xx, y: yy} = await page.evaluate( + async (style_menu) => { + // Find the 'bar' button + const bar_button = + style_menu.shadowRoot.querySelector( + "#radio-list-3" + ); + + // Get its coords + const rect = bar_button.getBoundingClientRect(); + return { + x: Math.floor(rect.left + rect.width / 2), + y: Math.floor(rect.top + rect.height / 2), + }; + }, + style_menu + ); + + // Click the button + await page.mouse.click(xx, yy); + + const count = await page.evaluate(async (viewer) => { + // Await the plugin rendering + await viewer.flush(); + + // Count the events; + return window.__events__.length; + }, viewer); + + // Expect 1 event + expect(count).toEqual(1); + + // Return the `