Skip to content

Commit 084e440

Browse files
texodustexodus
committed
Fix column style menus for string & date(time)
1 parent ca2c560 commit 084e440

File tree

4 files changed

+200
-88
lines changed

4 files changed

+200
-88
lines changed

‎packages/perspective-viewer-datagrid/test/js/column_style.spec.js‎

Lines changed: 195 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,195 @@
1+
/******************************************************************************
2+
*
3+
* Copyright (c) 2017, the Perspective Authors.
4+
*
5+
* This file is part of the Perspective library, distributed under the terms of
6+
* the Apache License 2.0. The full license can be found in the LICENSE file.
7+
*
8+
*/
9+
10+
const utils = require("@finos/perspective-test");
11+
const path = require("path");
12+
13+
const simple_tests = require("@finos/perspective-viewer/test/js/simple_tests.js");
14+
15+
async function get_contents(
16+
page,
17+
selector = "perspective-viewer perspective-viewer-datagrid regular-table",
18+
shadow = false
19+
) {
20+
return await page.evaluate(
21+
async (selector, shadow) => {
22+
const viewer = document.querySelector(selector);
23+
return (shadow ? viewer.shadowRoot : viewer).innerHTML || "MISSING";
24+
},
25+
selector,
26+
shadow
27+
);
28+
}
29+
30+
utils.with_server({}, () => {
31+
describe.page(
32+
"superstore.html",
33+
() => {
34+
test.capture(
35+
"perspective-config-update event is fired when column style is changed",
36+
async (page) => {
37+
// Await the viewer element to exist on the page
38+
const viewer = await page.waitForSelector(
39+
"perspective-viewer"
40+
);
41+
const {x, y} = await page.evaluate(async (viewer) => {
42+
// Await the table load
43+
await viewer.getTable();
44+
45+
// Open the config panel
46+
await viewer.toggleConfig();
47+
48+
// Register a listener for `perspective-config-update` event
49+
window.__events__ = [];
50+
viewer.addEventListener(
51+
"perspective-config-update",
52+
(evt) => {
53+
window.__events__.push(evt);
54+
}
55+
);
56+
57+
// Find the column config menu button
58+
const header_button = viewer.querySelector(
59+
"regular-table thead tr:last-child th"
60+
);
61+
62+
// Get the button coords (slightly lower than center
63+
// because of the location of the menu button within
64+
// this element)
65+
const rect = header_button.getBoundingClientRect();
66+
return {
67+
x: Math.floor(rect.left + rect.width / 2),
68+
y: Math.floor(rect.top + (3 * rect.height) / 4),
69+
};
70+
}, viewer);
71+
72+
// Click the menu button
73+
await page.mouse.click(x, y);
74+
75+
// Await the style menu existing on the page
76+
const style_menu = await page.waitForSelector(
77+
"perspective-number-column-style"
78+
);
79+
80+
const {x: xx, y: yy} = await page.evaluate(
81+
async (style_menu) => {
82+
// Find the 'bar' button
83+
const bar_button =
84+
style_menu.shadowRoot.querySelector(
85+
'#radio-list-1[name="foreground-list"]'
86+
);
87+
88+
// Get its coords
89+
const rect = bar_button.getBoundingClientRect();
90+
return {
91+
x: Math.floor(rect.left + rect.width / 2),
92+
y: Math.floor(rect.top + rect.height / 2),
93+
};
94+
},
95+
style_menu
96+
);
97+
98+
// Click the button
99+
await page.mouse.click(xx, yy);
100+
101+
const count = await page.evaluate(async (viewer) => {
102+
// Await the plugin rendering
103+
await viewer.flush();
104+
105+
// Count the events;
106+
return window.__events__.length;
107+
}, viewer);
108+
109+
// Expect 1 event
110+
expect(count).toEqual(1);
111+
112+
// Return the `<table>` contents
113+
return get_contents(page);
114+
}
115+
);
116+
117+
describe("Column style menu opens for", () => {
118+
async function test_column(page, selector, selector2) {
119+
const viewer = await page.waitForSelector(
120+
"perspective-viewer"
121+
);
122+
const {x, y} = await page.evaluate(
123+
async (viewer, selector) => {
124+
await viewer.getTable();
125+
await viewer.toggleConfig();
126+
window.__events__ = [];
127+
viewer.addEventListener(
128+
"perspective-config-update",
129+
(evt) => {
130+
window.__events__.push(evt);
131+
}
132+
);
133+
134+
const header_button = viewer.querySelector(
135+
"regular-table thead tr:last-child th" +
136+
selector
137+
);
138+
139+
const rect = header_button.getBoundingClientRect();
140+
return {
141+
x: Math.floor(rect.left + rect.width / 2),
142+
y: Math.floor(rect.top + (3 * rect.height) / 4),
143+
};
144+
},
145+
viewer,
146+
selector
147+
);
148+
149+
await page.mouse.click(x, y);
150+
const style_menu = await page.waitForSelector(
151+
`perspective-${selector2}-column-style`
152+
);
153+
154+
await new Promise((x) => setTimeout(x, 3000));
155+
156+
return get_contents(
157+
page,
158+
` perspective-${selector2}-column-style`,
159+
true
160+
);
161+
}
162+
163+
test.capture("numeric columns", async (page) => {
164+
return await test_column(page, "", "number");
165+
});
166+
167+
test.capture("string columns", async (page) => {
168+
return await test_column(page, ":nth-child(2)", "string");
169+
});
170+
171+
// TODO Intl.supportedValuesOf doesn't exist in Chromium
172+
test.skip("date columns", async (page) => {
173+
await test_column(page, ":nth-child(3)", "datetime");
174+
});
175+
});
176+
},
177+
{root: path.join(__dirname, "..", "..")}
178+
);
179+
});
180+
181+
// const click_details = async (page, x = 310, y = 300) => {
182+
// const viewer = await page.$("perspective-viewer");
183+
184+
// const click_event = page.evaluate(
185+
// element =>
186+
// new Promise(resolve => {
187+
// element.addEventListener("perspective-click", e => {
188+
// resolve(e.detail);
189+
// });
190+
// }),
191+
// viewer
192+
// );
193+
// await page.mouse.click(x, y);
194+
// return await click_event;
195+
// };

‎packages/perspective-viewer-datagrid/test/js/superstore.spec.js‎

Lines changed: 0 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -27,89 +27,6 @@ utils.with_server({}, () => {
2727
() => {
2828
simple_tests.default(get_contents);
2929

30-
test.capture(
31-
"perspective-config-update event is fired when column style is changed",
32-
async (page) => {
33-
// Await the viewer element to exist on the page
34-
const viewer = await page.waitForSelector(
35-
"perspective-viewer"
36-
);
37-
const {x, y} = await page.evaluate(async (viewer) => {
38-
// Await the table load
39-
await viewer.getTable();
40-
41-
// Open the config panel
42-
await viewer.toggleConfig();
43-
44-
// Register a listener for `perspective-config-update` event
45-
window.__events__ = [];
46-
viewer.addEventListener(
47-
"perspective-config-update",
48-
(evt) => {
49-
window.__events__.push(evt);
50-
}
51-
);
52-
53-
// Find the column config menu button
54-
const header_button = viewer.querySelector(
55-
"regular-table thead tr:last-child th"
56-
);
57-
58-
// Get the button coords (slightly lower than center
59-
// because of the location of the menu button within
60-
// this element)
61-
const rect = header_button.getBoundingClientRect();
62-
return {
63-
x: Math.floor(rect.left + rect.width / 2),
64-
y: Math.floor(rect.top + (3 * rect.height) / 4),
65-
};
66-
}, viewer);
67-
68-
// Click the menu button
69-
await page.mouse.click(x, y);
70-
71-
// Await the style menu existing on the page
72-
const style_menu = await page.waitForSelector(
73-
"perspective-number-column-style"
74-
);
75-
76-
const {x: xx, y: yy} = await page.evaluate(
77-
async (style_menu) => {
78-
// Find the 'bar' button
79-
const bar_button =
80-
style_menu.shadowRoot.querySelector(
81-
'#radio-list-1[name="foreground-list"]'
82-
);
83-
84-
// Get its coords
85-
const rect = bar_button.getBoundingClientRect();
86-
return {
87-
x: Math.floor(rect.left + rect.width / 2),
88-
y: Math.floor(rect.top + rect.height / 2),
89-
};
90-
},
91-
style_menu
92-
);
93-
94-
// Click the button
95-
await page.mouse.click(xx, yy);
96-
97-
const count = await page.evaluate(async (viewer) => {
98-
// Await the plugin rendering
99-
await viewer.flush();
100-
101-
// Count the events;
102-
return window.__events__.length;
103-
}, viewer);
104-
105-
// Expect 1 event
106-
expect(count).toEqual(1);
107-
108-
// Return the `<table>` contents
109-
return get_contents(page);
110-
}
111-
);
112-
11330
// test.capture("resets viewable area when the logical size expands.", async page => {
11431
// const viewer = await page.$("perspective-viewer");
11532
// await page.evaluate(async () => await document.querySelector("perspective-viewer").toggleConfig());

‎packages/perspective-viewer-datagrid/test/results/results.json‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
"superstore_displays_visible_columns_": "09dd14f0e60da0e8749b7dd514e929f0",
1515
"superstore_resets_viewable_area_when_the_logical_size_expands_": "e9dd1d275f46f6a0857e0168835d0b38",
1616
"superstore_resets_viewable_area_when_the_physical_size_expands_": "e469597235cc032619bc095a76f9ad6f",
17-
"__GIT_COMMIT__": "c744efa438393bf46bf0d0801d9807fd86b64f51",
17+
"__GIT_COMMIT__": "9c485e5c84b2e9b029fc13465390e14103493d66",
1818
"superstore_shows_a_grid_without_any_settings_applied": "192edc6b035af6432c5bd82d295987f1",
1919
"superstore_pivot_by_a_row": "709a4a6b40153d9bf013f90398ee568d",
2020
"superstore_pivot_by_two_rows": "23db46ccf9d8327ae992fe3b5f468b3b",
@@ -27,5 +27,7 @@
2727
"superstore_filters_filters_by_a_numeric_column": "6c6ba00b6edf9ee11f82848b7786fd91",
2828
"superstore_filters_filters_by_an_alpha_column": "4b9a40c2ffad050ff4cf059e22cb2b68",
2929
"superstore_filters_filters_with__in__comparator": "5882e2d2694519ba9880d0b2d5b19c44",
30-
"superstore_perspective-config-update_event_is_fired_when_column_style_is_changed": "9c6f8055955b560ac1418554c01046fc"
30+
"superstore_perspective-config-update_event_is_fired_when_column_style_is_changed": "3d03b2787f9b903050942052168f755a",
31+
"superstore_Column_style_menu_opens_for_numeric_columns": "8d4449c817e262b1a6e435912200f58c",
32+
"superstore_Column_style_menu_opens_for_string_columns": "b7eff686a96a57de363b3dd431032f40"
3133
}

‎rust/perspective-viewer/src/rust/components/style/style_cache.rs‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -56,9 +56,7 @@ impl StyleCache {
5656
let first = map.values().next().cloned();
5757
map.insert(name, style.clone());
5858
if let Some(x) = first {
59-
if x.is_connected() {
60-
x.get_root_node().insert_before(&style, Some(&x)).unwrap();
61-
}
59+
x.get_root_node().insert_before(&style, Some(&x)).unwrap();
6260
}
6361
}
6462
}

0 commit comments

Comments
 (0)