Skip to content

Commit e0bbdf0

Browse files
ethanalvizoethanalvizo
authored
test: add e2e tests to context menu (#1571)
Closes #1379 Note: Wait for #1579 to merge first before merging this in
1 parent ba5b962 commit e0bbdf0

62 files changed

Lines changed: 267 additions & 7 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎packages/iris-grid/src/GotoRow.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -385,23 +385,23 @@ const GotoRow = forwardRef<GotoRowElement, GotoRowProps>(
385385

386386
<div>
387387
<Button
388+
tooltip="Next match"
389+
icon={vsArrowUp}
388390
kind="ghost"
389391
disabled={gotoValue === ''}
390392
onClick={() => {
391393
onGotoValueSubmit(true);
392394
}}
393-
>
394-
<FontAwesomeIcon icon={vsArrowUp} />
395-
</Button>
395+
/>
396396
<Button
397+
tooltip="Previous match"
398+
icon={vsArrowDown}
397399
kind="ghost"
398400
disabled={gotoValue === ''}
399401
onClick={() => {
400402
onGotoValueSubmit(false);
401403
}}
402-
>
403-
<FontAwesomeIcon icon={vsArrowDown} />
404-
</Button>
404+
/>
405405
</div>
406406
{gotoValueError && (
407407
<div className="text-danger">{gotoValueError}</div>

‎tests/context-menu.spec.ts‎

Lines changed: 261 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,262 @@
1-
import { test, expect } from '@playwright/test';
1+
import { test, expect, Page } from '@playwright/test';
2+
import {
3+
makeTableCommand,
4+
pasteInMonaco,
5+
TableTypes,
6+
waitForLoadingDone,
7+
generateVarName,
8+
} from './utils';
9+
10+
test.describe.configure({ mode: 'serial' });
11+
12+
async function openAdvancedFilters(page: Page) {
13+
await page
14+
.locator('.iris-grid .grid-wrapper')
15+
.click({ button: 'right', position: { x: 20, y: 20 } });
16+
await page.getByRole('button', { name: 'Advanced Filters' }).click();
17+
}
18+
19+
async function moveMouseAwayFromTable(page: Page) {
20+
await page.mouse.move(0, 0);
21+
await page.mouse.click(0, 0);
22+
}
23+
24+
const tableName = generateVarName('t');
25+
test.beforeEach(async ({ page }) => {
26+
await page.goto('');
27+
28+
const consoleInput = page.locator('.console-input');
29+
30+
const command = makeTableCommand(tableName, TableTypes.AllTypes);
31+
32+
await pasteInMonaco(consoleInput, command);
33+
await page.keyboard.press('Enter');
34+
35+
// Wait for the panel to show
36+
await expect(page.locator('.iris-grid-panel')).toHaveCount(1);
37+
38+
// Wait until it's done loading
39+
await expect(page.locator('.iris-grid-panel .loading-spinner')).toHaveCount(
40+
0
41+
);
42+
43+
// Model is loaded, need to make sure table data is also loaded
44+
await waitForLoadingDone(page);
45+
46+
const tableOperationsMenu = page.locator(
47+
'data-testid=btn-iris-grid-settings-button-table'
48+
);
49+
await tableOperationsMenu.click();
50+
51+
// Wait for Table Options menu to show
52+
await expect(page.locator('.table-sidebar')).toHaveCount(1);
53+
});
54+
55+
test.afterEach(async ({ page }) => {
56+
const consoleInput = page.locator('.console-input');
57+
await consoleInput.click();
58+
59+
const command = `del ${tableName}`;
60+
await pasteInMonaco(consoleInput, command);
61+
await page.keyboard.press('Enter');
62+
});
63+
64+
test('toggle column visibility', async ({ page }) => {
65+
await page
66+
.locator('.iris-grid .grid-wrapper')
67+
.click({ button: 'right', position: { x: 20, y: 20 } });
68+
69+
await page.getByRole('button', { name: 'Hide Column' }).click();
70+
await expect(page.locator('.iris-grid-column')).toHaveScreenshot();
71+
72+
await page
73+
.locator('.iris-grid .grid-wrapper')
74+
.click({ button: 'right', position: { x: 20, y: 20 } });
75+
76+
await page.getByRole('button', { name: 'Show All Columns' }).click();
77+
await expect(page.locator('.iris-grid-column')).toHaveScreenshot();
78+
});
79+
80+
test('quick filter and clear', async ({ page }) => {
81+
await page
82+
.locator('.iris-grid .grid-wrapper')
83+
.click({ button: 'right', position: { x: 20, y: 20 } });
84+
85+
await page.getByRole('button', { name: 'Quick Filters' }).click();
86+
await page.keyboard.type('a999');
87+
88+
await waitForLoadingDone(page);
89+
await expect(page.locator('.iris-grid-column')).toHaveScreenshot();
90+
91+
await page
92+
.locator('.iris-grid .grid-wrapper')
93+
.click({ button: 'right', position: { x: 20, y: 20 } });
94+
95+
await page.getByRole('button', { name: 'Clear Column Filter' }).click();
96+
97+
await page
98+
.locator('.iris-grid .grid-wrapper')
99+
.hover({ position: { x: 20, y: 20 } });
100+
await page.mouse.wheel(0, -100);
101+
102+
await waitForLoadingDone(page);
103+
await expect(page.locator('.iris-grid-column')).toHaveScreenshot();
104+
});
105+
106+
test('advanced filters', async ({ page }) => {
107+
await openAdvancedFilters(page);
108+
await page.getByLabel('Sort String Ascending').click();
109+
110+
await page.getByRole('button', { name: 'Done' }).click();
111+
await waitForLoadingDone(page);
112+
await moveMouseAwayFromTable(page);
113+
await expect(page.locator('.iris-grid-column')).toHaveScreenshot();
114+
115+
await openAdvancedFilters(page);
116+
await page.getByLabel('Sort String Descending').click();
117+
118+
await page.getByRole('button', { name: 'Done' }).click();
119+
await waitForLoadingDone(page);
120+
await moveMouseAwayFromTable(page);
121+
await expect(page.locator('.iris-grid-column')).toHaveScreenshot();
122+
123+
await openAdvancedFilters(page);
124+
await page.getByPlaceholder('Enter value').click();
125+
await page.keyboard.type('a999');
126+
127+
await page.getByRole('button', { name: 'Done' }).click();
128+
await waitForLoadingDone(page);
129+
await moveMouseAwayFromTable(page);
130+
await expect(page.locator('.iris-grid-column')).toHaveScreenshot();
131+
132+
await openAdvancedFilters(page);
133+
await page.getByLabel('Remove Filter').click();
134+
135+
await page.getByRole('button', { name: 'Done' }).click();
136+
await waitForLoadingDone(page);
137+
await moveMouseAwayFromTable(page);
138+
await expect(page.locator('.iris-grid-column')).toHaveScreenshot();
139+
140+
await openAdvancedFilters(page);
141+
await page.getByRole('button', { name: 'Clear', exact: true }).click();
142+
143+
await page.getByRole('button', { name: 'Done' }).click();
144+
await waitForLoadingDone(page);
145+
await moveMouseAwayFromTable(page);
146+
await expect(page.locator('.iris-grid-column')).toHaveScreenshot();
147+
148+
await openAdvancedFilters(page);
149+
await page.getByRole('button', { name: 'Select All' }).click();
150+
151+
await page.getByRole('button', { name: 'Done' }).click();
152+
await waitForLoadingDone(page);
153+
await moveMouseAwayFromTable(page);
154+
await expect(page.locator('.iris-grid-column')).toHaveScreenshot();
155+
});
156+
157+
test('sort by', async ({ page }) => {
158+
await page
159+
.locator('.iris-grid .grid-wrapper')
160+
.click({ button: 'right', position: { x: 20, y: 20 } });
161+
162+
await page.getByRole('button', { name: 'Sort By' }).hover();
163+
164+
await page.getByRole('button', { name: 'String Ascending' }).click();
165+
166+
await waitForLoadingDone(page);
167+
await expect(page.locator('.iris-grid-column')).toHaveScreenshot();
168+
169+
await page
170+
.locator('.iris-grid .grid-wrapper')
171+
.click({ button: 'right', position: { x: 20, y: 20 } });
172+
173+
await page.getByRole('button', { name: 'Sort By' }).hover();
174+
await page.getByRole('button', { name: 'String Descending' }).click();
175+
176+
await waitForLoadingDone(page);
177+
await expect(page.locator('.iris-grid-column')).toHaveScreenshot();
178+
179+
await page
180+
.locator('.iris-grid .grid-wrapper')
181+
.click({ button: 'right', position: { x: 20, y: 20 } });
182+
183+
await page.getByRole('button', { name: 'Sort By' }).hover();
184+
await page.getByRole('button', { name: 'Remove Sort' }).click();
185+
186+
await waitForLoadingDone(page);
187+
await expect(page.locator('.iris-grid-column')).toHaveScreenshot();
188+
});
189+
190+
test('freeze column', async ({ page }) => {
191+
await page
192+
.locator('.iris-grid .grid-wrapper')
193+
.click({ button: 'right', position: { x: 20, y: 20 } });
194+
195+
await page.getByRole('button', { name: 'Freeze Column' }).click();
196+
197+
await waitForLoadingDone(page);
198+
await expect(page.locator('.iris-grid-column')).toHaveScreenshot();
199+
200+
await page
201+
.locator('.iris-grid .grid-wrapper')
202+
.click({ button: 'right', position: { x: 20, y: 20 } });
203+
204+
await page.getByRole('button', { name: 'Unfreeze Column' }).click();
205+
206+
await waitForLoadingDone(page);
207+
await expect(page.locator('.iris-grid-column')).toHaveScreenshot();
208+
});
209+
210+
test('reverse table', async ({ page }) => {
211+
await page
212+
.locator('.iris-grid .grid-wrapper')
213+
.click({ button: 'right', position: { x: 20, y: 20 } });
214+
215+
await page.getByRole('button', { name: 'Reverse Table' }).click();
216+
217+
await waitForLoadingDone(page);
218+
await expect(page.locator('.iris-grid-column')).toHaveScreenshot();
219+
});
220+
221+
test('filter by value', async ({ page }) => {
222+
await page
223+
.locator('.iris-grid .grid-wrapper')
224+
.click({ button: 'right', position: { x: 20, y: 60 } });
225+
226+
await page.getByRole('button', { name: 'Filter by Value' }).hover();
227+
await page.getByRole('button', { name: 'text is exactly' }).click();
228+
229+
await waitForLoadingDone(page);
230+
await expect(page.locator('.iris-grid-column')).toHaveScreenshot();
231+
232+
await page
233+
.locator('.iris-grid .grid-wrapper')
234+
.click({ button: 'right', position: { x: 20, y: 60 } });
235+
await page.getByRole('button', { name: 'Clear Column Filter' }).click();
236+
});
237+
238+
test('go to', async ({ page }) => {
239+
await page
240+
.locator('.iris-grid .grid-wrapper')
241+
.click({ button: 'right', position: { x: 20, y: 60 } });
242+
243+
await page.getByRole('button', { name: 'Go to' }).click();
244+
await page.getByLabel('filter-type-select').selectOption('Equals');
245+
246+
await waitForLoadingDone(page);
247+
await expect(page.locator('.iris-grid-column')).toHaveScreenshot();
248+
249+
await page.locator('[aria-label="Previous match"]').first().click();
250+
await page.locator('[aria-label="Previous match"]').first().click();
251+
252+
await waitForLoadingDone(page);
253+
await expect(page.locator('.iris-grid-column')).toHaveScreenshot();
254+
255+
await page.locator('[aria-label="Next match"]').first().click();
256+
257+
await waitForLoadingDone(page);
258+
await expect(page.locator('.iris-grid-column')).toHaveScreenshot();
259+
});
2260

3261
test('open custom context menu with another custom context menu open', async ({
4262
page,
@@ -12,4 +270,6 @@ test('open custom context menu with another custom context menu open', async ({
12270
.getByText('Command History')
13271
.click({ button: 'right', force: true });
14272
await expect(page.getByText('Close', { exact: true })).toHaveCount(1);
273+
274+
await page.getByText('Console').click({ force: true });
15275
});

‎tests/context-menu.spec.ts-snapshots/advanced-filters-1-chromium-linux.png‎

52 KB

‎tests/context-menu.spec.ts-snapshots/advanced-filters-1-firefox-linux.png‎

86.3 KB

‎tests/context-menu.spec.ts-snapshots/advanced-filters-1-webkit-linux.png‎

49.4 KB

‎tests/context-menu.spec.ts-snapshots/advanced-filters-2-chromium-linux.png‎

53.3 KB

‎tests/context-menu.spec.ts-snapshots/advanced-filters-2-firefox-linux.png‎

88.5 KB

‎tests/context-menu.spec.ts-snapshots/advanced-filters-2-webkit-linux.png‎

50.5 KB

‎tests/context-menu.spec.ts-snapshots/advanced-filters-3-chromium-linux.png‎

28.3 KB

‎tests/context-menu.spec.ts-snapshots/advanced-filters-3-firefox-linux.png‎

50.7 KB

0 commit comments

Comments
 (0)
⚡