Add tests

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")
         );
     };

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 `<table>` 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());

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"
 }