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 `` contents + return get_contents(page); + } + ); + // test.capture("resets viewable area when the logical size expands.", async page => { // const viewer = await page.$("perspective-viewer"); // await page.evaluate(async () => await document.querySelector("perspective-viewer").toggleConfig()); diff --git a/packages/perspective-viewer-datagrid/test/results/results.json b/packages/perspective-viewer-datagrid/test/results/results.json index 68a0892435..77f4b8c2e6 100644 --- a/packages/perspective-viewer-datagrid/test/results/results.json +++ b/packages/perspective-viewer-datagrid/test/results/results.json @@ -14,7 +14,7 @@ "superstore_displays_visible_columns_": "0b95713a81bc8af9b2db97111cdba9fa", "superstore_resets_viewable_area_when_the_logical_size_expands_": "e9dd1d275f46f6a0857e0168835d0b38", "superstore_resets_viewable_area_when_the_physical_size_expands_": "e469597235cc032619bc095a76f9ad6f", - "__GIT_COMMIT__": "873143d3b5980471697ac1acd8b261d7805bf7fa", + "__GIT_COMMIT__": "051dbb89de8bae97970b5988950cfcb41a1e51c8", "superstore_shows_a_grid_without_any_settings_applied": "2bf7d29b6483e16ad1ff65a1814f2230", "superstore_pivot_by_a_row": "293fedf936989ef0a3f05d2e06b9ab97", "superstore_pivot_by_two_rows": "ed33f1f97a87fffecf9de84db6130af6", @@ -26,5 +26,6 @@ "superstore_sort_by_an_alpha_column": "9e7a551308497ddca3e1b058cc69ba8c", "superstore_filters_filters_by_a_numeric_column": "ce3bed9620c8fde9929d3a3ed548279c", "superstore_filters_filters_by_an_alpha_column": "5cac36a354a18935179afe6b8c3c10da", - "superstore_filters_filters_with__in__comparator": "d7047b2da9afe8df7e7f8ceebea13f43" + "superstore_filters_filters_with__in__comparator": "d7047b2da9afe8df7e7f8ceebea13f43", + "superstore_perspective-config-update_event_is_fired_when_column_style_is_changed": "8aa6557c21232f592904e73cf26c6675" } \ No newline at end of file