Skip to content

Commit d13ad63

Browse files
marthacryanmarthacryan
authored
Merge pull request #1235 from mito-ds/column-control-panel-tests
Add column control panel tests
2 parents 27f8d01 + fbd8d6e commit d13ad63

File tree

2 files changed

+171
-0
lines changed

2 files changed

+171
-0
lines changed

‎tests/streamlit_ui_tests/features/column_control_panel.spec.ts

+159
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
import { FrameLocator, Page, expect, test } from '@playwright/test';
2+
import { awaitResponse, getMitoFrameWithTestCSV, checkColumnCellsHaveExpectedValues } from '../utils';
3+
4+
const openColumnControlPanel = async (mito: any, columnName: string) => {
5+
const columnHeader = await mito.locator('.endo-column-header-final-container', { hasText: columnName });
6+
await columnHeader.getByTitle('Edit filters').click();
7+
await expect(mito.locator('.spacing-col', { hasText: 'Dtype' })).toBeVisible();
8+
};
9+
10+
const changeDtypeInColumnControlPanel = async (mito: FrameLocator, page: Page, dtype: string) => {
11+
await mito.locator('.spacing-row', { hasText: 'Dtype' }).locator('.select-text').click();
12+
await mito.locator('.mito-dropdown-item', { hasText: dtype }).click();
13+
await awaitResponse(page);
14+
}
15+
16+
const changeNumTypeInColumnControlPanel = async (mito: FrameLocator, page: Page, numType: string) => {
17+
await mito.locator('.spacing-row', { hasText: 'Num Type' }).locator('.select-text').click();
18+
await mito.locator('.mito-dropdown-item', { hasText: numType }).click();
19+
await awaitResponse(page);
20+
}
21+
22+
const checkValuesTabHasExpectedValues = async (mito: FrameLocator, expectedValues: any[]) => {
23+
const values = await mito.locator('.multi-toggle-box').locator('.multi-toggle-box-row').all();
24+
for (const valueIndex in values) {
25+
const value = values[valueIndex];
26+
await expect(value).toHaveText(expectedValues[valueIndex]);
27+
}
28+
};
29+
30+
test.describe('Column Control Panel', () => {
31+
test('Changing dtype', async ({ page }) => {
32+
const mito = await getMitoFrameWithTestCSV(page);
33+
34+
await openColumnControlPanel(mito, 'Column1');
35+
36+
await changeDtypeInColumnControlPanel(mito, page, 'bool');
37+
await checkColumnCellsHaveExpectedValues(mito, 0, ['true', 'true', 'true', 'true']);
38+
39+
await changeDtypeInColumnControlPanel(mito, page, 'str');
40+
await checkColumnCellsHaveExpectedValues(mito, 0, ['1', '4', '7', '10']);
41+
42+
await changeDtypeInColumnControlPanel(mito, page, 'float');
43+
await checkColumnCellsHaveExpectedValues(mito, 0, ['1.00', '4.00', '7.00', '10.00']);
44+
45+
await changeDtypeInColumnControlPanel(mito, page, 'datetime');
46+
await checkColumnCellsHaveExpectedValues(mito, 0, ['1970-01-01 00:00:01', '1970-01-01 00:00:04', '1970-01-01 00:00:07', '1970-01-01 00:00:10']);
47+
})
48+
49+
test('Adding filter', async ({ page }) => {
50+
const mito = await getMitoFrameWithTestCSV(page);
51+
52+
await openColumnControlPanel(mito, 'Column1');
53+
54+
await mito.getByText('Add Filter').click();
55+
await mito.getByText('Add a Filter').click();
56+
await mito.locator('.spacing-row', { hasText: 'Where' }).locator('input').fill('4');
57+
await awaitResponse(page);
58+
59+
await checkColumnCellsHaveExpectedValues(mito, 0, ['7', '10']);
60+
});
61+
62+
test('Adding a group of filters', async ({ page }) => {
63+
const mito = await getMitoFrameWithTestCSV(page);
64+
65+
await openColumnControlPanel(mito, 'Column1');
66+
67+
await mito.getByText('Add Filter').click();
68+
await mito.getByText('Add a Group').click();
69+
await mito.locator('.spacing-row', { hasText: 'Where' }).locator('input').fill('7');
70+
await awaitResponse(page);
71+
72+
await checkColumnCellsHaveExpectedValues(mito, 0, ['10']);
73+
74+
// Add another filter to the group
75+
await mito.getByText('Add a Filter').click();
76+
77+
// Change the "and" to an "or" for the second condition
78+
await mito.locator('.filter-group .spacing-row').nth(1).locator('.select-text', { hasText: 'And' }).click();
79+
await mito.getByText('Or', { exact: true }).click();
80+
81+
// Add a filter to the second condition
82+
await mito.locator('.filter-group .spacing-row').nth(1).locator('.select-text', { hasText: '>' }).click();
83+
await mito.locator('.mito-dropdown-item', { hasText: '<' }).click();
84+
await mito.locator('.filter-group .spacing-row').nth(1).locator('input').fill('4');
85+
await awaitResponse(page);
86+
await checkColumnCellsHaveExpectedValues(mito, 0, ['1', '10']);
87+
});
88+
89+
test('Sorting', async ({ page }) => {
90+
const mito = await getMitoFrameWithTestCSV(page);
91+
92+
await openColumnControlPanel(mito, 'Column1');
93+
94+
await mito.getByText('Descending').click();
95+
await awaitResponse(page);
96+
97+
await checkColumnCellsHaveExpectedValues(mito, 0, ['10', '7', '4', '1']);
98+
99+
await mito.getByText('Ascending').click();
100+
await awaitResponse(page);
101+
102+
await checkColumnCellsHaveExpectedValues(mito, 0, ['1', '4', '7', '10']);
103+
});
104+
105+
test('Change the number type', async ({ page }) => {
106+
const mito = await getMitoFrameWithTestCSV(page);
107+
await openColumnControlPanel(mito, 'Column1');
108+
109+
await changeNumTypeInColumnControlPanel(mito, page, 'Currency');
110+
await checkColumnCellsHaveExpectedValues(mito, 0, ['$1', '$4', '$7', '$10']);
111+
112+
await changeNumTypeInColumnControlPanel(mito, page, 'Accounting');
113+
await checkColumnCellsHaveExpectedValues(mito, 0, ['$1', '$4', '$7', '$10']);
114+
115+
await changeNumTypeInColumnControlPanel(mito, page, 'Percent');
116+
await checkColumnCellsHaveExpectedValues(mito, 0, ['100%', '400%', '700%', '1,000%']);
117+
118+
await changeNumTypeInColumnControlPanel(mito, page, 'Scientific Notation');
119+
await checkColumnCellsHaveExpectedValues(mito, 0, ['1e+0', '4e+0', '7e+0', '1e+1']);
120+
});
121+
122+
test('Values tab: filtering values by clicking on them', async ({ page }) => {
123+
const mito = await getMitoFrameWithTestCSV(page);
124+
await openColumnControlPanel(mito, 'Column1');
125+
126+
await mito.locator('.control-panel-taskpane-tab', { hasText: 'Values'}).click();
127+
await checkValuesTabHasExpectedValues(mito, ['1', '4', '7', '10']);
128+
129+
await mito.locator('.multi-toggle-box-row', { hasText: '4' }).locator('input[type="checkbox"]').click();
130+
await awaitResponse(page);
131+
await checkColumnCellsHaveExpectedValues(mito, 0, ['1', '7', '10']);
132+
})
133+
134+
test('Loads summary stats', async ({ page }) => {
135+
const mito = await getMitoFrameWithTestCSV(page);
136+
await openColumnControlPanel(mito, 'Column1');
137+
138+
await mito.locator('.control-panel-taskpane-tab', { hasText: 'Stats'}).click();
139+
await expect(mito.locator('.column-describe-table-row', { hasText: 'mean' })).toContainText('5.5')
140+
await expect(mito.locator('.column-describe-table-row', { hasText: 'std' })).toContainText('3.87')
141+
await expect(mito.locator('.column-describe-table-row', { hasText: 'min' })).toContainText('1.0')
142+
})
143+
144+
test('Updates the taskpane when selected column changes', async ({ page }) => {
145+
const mito = await getMitoFrameWithTestCSV(page);
146+
await openColumnControlPanel(mito, 'Column1');
147+
await expect(mito.locator('.default-taskpane-header-div', { hasText: 'Column1' })).toBeVisible();
148+
149+
// Navigate to the stats tab
150+
await mito.locator('.control-panel-taskpane-tab', { hasText: 'Stats'}).click();
151+
152+
// Click on another column
153+
await mito.locator('.endo-column-header-final-container', { hasText: 'Column2' }).click();
154+
155+
// Expect the tab to still be "Stats" and the header to be "Column2"
156+
await expect(mito.locator('.default-taskpane-header-div', { hasText: 'Column2' })).toBeVisible();
157+
await expect(mito.getByText('Column Summary Statistics', { exact: true })).toBeVisible();
158+
});
159+
});

‎tests/streamlit_ui_tests/utils.ts

+12
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,18 @@ export const getMitoFrameWithTestCSV = async (page: Page): Promise<FrameLocator>
3636
return mito;
3737
}
3838

39+
export const checkColumnCellsHaveExpectedValues = async (mito: FrameLocator, columnIndex: number, values: any[]) => {
40+
const cells = await mito.locator(`.mito-grid-cell[mito-col-index="${columnIndex}"]`).all()
41+
await expect(mito.locator('.index-header-container')).toHaveCount(values.length);
42+
for (const cellIndex in values) {
43+
const cell = cells[cellIndex];
44+
if (cell === undefined) {
45+
continue;
46+
}
47+
await expect(cell).toHaveText(values[cellIndex]);
48+
}
49+
}
50+
3951
export const hasExpectedNumberOfRows = async (mito: any, expectedRows: number) => {
4052
await expect(mito.locator('.index-header-container', { hasText: `${expectedRows - 1}` })).toBeVisible();
4153
await expect(mito.locator('.index-header-container', { hasText: `${expectedRows}` })).not.toBeVisible();

0 commit comments

Comments
 (0)