test: experiment list sort [INFENG-766]

webui/react/src/components/MultiSortMenu.tsx

@@ -131,6 +131,7 @@ export const sortMenuItemsForColumn = (
 
 const DirectionOptions: React.FC<DirectionOptionsProps> = ({ onChange, type, value }) => (
   <Select
+    data-test="direction"
     options={optionsByColumnType[type]}
     placeholder="Select direction"
     value={value}
@@ -147,6 +148,7 @@ const ColumnOptions: React.FC<ColumnOptionsProps> = ({
 }) => (
   <Select
     autoFocus
+    data-test="column"
     dropdownMatchSelectWidth={300}
     loading={Loadable.isNotLoaded(columns)}
     options={Loadable.getOrElse([], columns)
@@ -173,7 +175,7 @@ const MultiSortRow: React.FC<MultiSortRowProps> = ({
     Loadable.getOrElse([], columns).find((c) => c.column === sort.column)?.type ||
     V1ColumnType.UNSPECIFIED;
   return (
-    <div className={css.sortRow}>
+    <div className={css.sortRow} data-test-component="multiSortRow">
       <div className={css.select}>
         <ColumnOptions
           bannedSortColumns={bannedSortColumns}
@@ -191,6 +193,7 @@ const MultiSortRow: React.FC<MultiSortRowProps> = ({
       </div>
       <div>
         <Button
+          data-test="remove"
           icon={<Icon name="close" title={REMOVE_SORT_TITLE} />}
           size="small"
           type="text"
@@ -222,9 +225,9 @@ const MultiSort: React.FC<MultiSortProps> = ({ sorts, columns, onChange, bannedS
   };
 
   return (
-    <div className={css.base}>
+    <div className={css.base} data-test-component="multiSort">
       <div>{SORT_MENU_TITLE}</div>
-      <div className={css.rows}>
+      <div className={css.rows} data-test="rows">
         {sorts.map((sort, idx) => {
           const seenColumns = sorts.slice(0, idx).map((s) => s.column);
           const columnOptions = Loadable.map(columns, (cols) =>
@@ -243,10 +246,14 @@ const MultiSort: React.FC<MultiSortProps> = ({ sorts, columns, onChange, bannedS
         })}
       </div>
       <div className={css.actions}>
-        <Button icon={<Icon decorative name="add" size="tiny" />} type="text" onClick={addRow}>
+        <Button
+          data-test="add"
+          icon={<Icon decorative name="add" size="tiny" />}
+          type="text"
+          onClick={addRow}>
           {ADD_SORT_TEXT}
         </Button>
-        <Button type="text" onClick={clearAll}>
+        <Button data-test="reset" type="text" onClick={clearAll}>
           {RESET_SORT_TEXT}
         </Button>
       </div>

webui/react/src/e2e/models/components/MultiSortMenu.ts

@@ -32,7 +32,7 @@ class MultiSort extends NamedComponent {
   readonly defaultSelector = '[data-test-component="multiSort"]';
   readonly add = new BaseComponent({ parent: this, selector: '[data-test="add"]' });
   readonly reset = new BaseComponent({ parent: this, selector: '[data-test="reset"]' });
-  readonly rows = new MultiSortRow({ parent: this, selector: '[data-test="reset"]' });
+  readonly rows = new MultiSortRow({ parent: this, selector: '[data-test="rows"]' });
 }
 
 /**
@@ -41,7 +41,7 @@ class MultiSort extends NamedComponent {
 class MultiSortRow extends NamedComponent {
   readonly defaultSelector = '[data-test-component="multiSortRow"]';
   readonly column = new ColumnOptions({ parent: this, selector: '[data-test="column"]' });
-  readonly order = new DirectionOptions({ parent: this, selector: '[data-test="order"]' });
+  readonly order = new DirectionOptions({ parent: this, selector: '[data-test="direction"]' });
   readonly remove = new BaseComponent({ parent: this, selector: '[data-test="remove"]' });
 }
 

webui/react/src/e2e/tests/experimentList.spec.ts

@@ -46,6 +46,7 @@ test.describe('Experiment List', () => {
   });
 
   test.beforeEach(async ({ authedPage }) => {
+    test.slow();
     projectDetailsPage = new ProjectDetails(authedPage);
     const grid = projectDetailsPage.f_experimentList.dataGrid;
 
@@ -66,14 +67,31 @@ test.describe('Experiment List', () => {
         await projectDetailsPage.f_experimentList.tableActionBar.columnPickerMenu.open();
       await columnPicker.columnPickerTab.reset.pwLocator.click();
       await columnPicker.close();
+      await waitTableStable();
+    });
+    await test.step('Sort Oldest → Newest', async () => {
+      // reset
+      const sortContent =
+        await projectDetailsPage.f_experimentList.tableActionBar.multiSortMenu.open();
+      await sortContent.multiSort.reset.pwLocator.click();
+      // the menu doesn't close in local automation, but it works with mouse events
+      // manually and sometimes on ci. let's just close it manually
+      await sortContent.close();
+      await sortContent.open();
+      // set sort
+      const firstRow = sortContent.multiSort.rows.nth(0);
+      await firstRow.column.selectMenuOption('Start time');
+      await firstRow.order.selectMenuOption('Oldest → Newest');
+      await sortContent.close();
+      await waitTableStable();
     });
     await test.step('Reset Filters', async () => {
       const tableFilter =
         await projectDetailsPage.f_experimentList.tableActionBar.tableFilter.open();
       await tableFilter.filterForm.clearFilters.pwLocator.click();
       await tableFilter.close();
+      await waitTableStable();
     });
-    await waitTableStable();
     await grid.setColumnHeight();
     await grid.headRow.setColumnDefs();
   });
@@ -107,7 +125,6 @@ test.describe('Experiment List', () => {
   });
 
   test('Column Picker Show All and Hide All', async () => {
-    test.slow();
     const columnPicker = projectDetailsPage.f_experimentList.tableActionBar.columnPickerMenu;
     const grid = projectDetailsPage.f_experimentList.dataGrid;
     let previousTabs = grid.headRow.columnDefs.size;
@@ -161,7 +178,6 @@ test.describe('Experiment List', () => {
   });
 
   test('Table Filter', async () => {
-    test.slow();
     const tableFilter = projectDetailsPage.f_experimentList.tableActionBar.tableFilter;
     const totalExperiments = await getExpNum();