test: add e2e test for custom columns

packages/iris-grid/src/sidebar/InputEditor.tsx

@@ -172,6 +172,7 @@ export default class InputEditor extends Component<
           ref={editorContainer => {
             this.editorContainer = editorContainer;
           }}
+          data-testid="custom-column-formula"
         />
         {isEditorEmpty && !value && (
           <div className="editor-placeholder text-muted">Column Formula</div>

tests/table.spec.ts

@@ -428,6 +428,84 @@ test.describe('tests complex table operations', () => {
       await expect(page.locator('.iris-grid-column')).toHaveScreenshot();
     });
   });
+
+  test('can custom column', async () => {
+    // open Custom Columns panel
+    await page.locator('data-testid=menu-item-Custom Columns').click();
+
+    await test.step('Create custom column', async () => {
+      const columnName = page.getByPlaceholder('Column Name');
+      await expect(columnName).toHaveCount(1);
+      await columnName.click();
+      await page.keyboard.type('Test');
+
+      const columnFormula = page.locator('.editor-container');
+      await expect(columnFormula).toHaveCount(1);
+      await columnFormula.click({ force: true });
+      await page.keyboard.type('Double * 2');
+    });
+
+    const addColumnButton = page.getByRole('button', {
+      name: 'Add Another Column',
+    });
+    const saveButton = page.getByRole('button', { name: 'Save Column' });
+
+    await test.step('Create 2nd custom columns from 1st', async () => {
+      await addColumnButton.click();
+
+      const newColumnName = page.getByPlaceholder('Column Name').nth(1);
+      await newColumnName.click();
+      await page.keyboard.type('Test2');
+
+      const newColumnFormula = page.locator('.editor-container').nth(1);
+      await newColumnFormula.click();
+      await page.keyboard.type('Test * 2');
+
+      await saveButton.click();
+
+      await waitForLoadingDone(page);
+      await expect(page.locator('.iris-grid-column')).toHaveScreenshot();
+    });
+
+    await test.step('Drag', async () => {
+      await addColumnButton.click();
+
+      const dragColumn = page.getByPlaceholder('Column Name').nth(2);
+      await dragColumn.click();
+      await page.keyboard.type('Drag');
+
+      const dragColumnFormula = page.locator('.editor-container').nth(2);
+      await dragColumnFormula.click();
+      await page.keyboard.type('String');
+
+      const reorderButton = page
+        .getByRole('button', { name: 'Drag column to re-order' })
+        .nth(2);
+      const [x, y] = await reorderButton
+        .boundingBox()
+        .then(pos => (pos && pos.x && pos.y ? [pos.x, pos.y - 100] : [0, 0]));
+      await reorderButton.hover();
+      await page.mouse.down();
+      await page.mouse.move(x, y, { steps: 500 });
+      await page.mouse.up();
+
+      await saveButton.click();
+
+      await waitForLoadingDone(page);
+      await expect(page.locator('.iris-grid-column')).toHaveScreenshot();
+    });
+
+    await test.step('Delete', async () => {
+      const deleteLastColumnButton = page
+        .getByRole('button', { name: 'Delete custom column' })
+        .nth(1);
+      await deleteLastColumnButton.click();
+      await saveButton.click();
+
+      await waitForLoadingDone(page);
+      await expect(page.locator('.iris-grid-column')).toHaveScreenshot();
+    });
+  });
 });
 
 test.describe('tests simple table operations', () => {

tests/utils.ts

@@ -4,7 +4,7 @@ import shortid from 'shortid';
 export enum TableTypes {
   Number,
   StringAndNumber,
-  AllTypes
+  AllTypes,
 }
 
 /**
@@ -30,13 +30,16 @@ export function makeTableCommand(
   tableName = generateVarName('t'),
   type = TableTypes.Number
 ): string {
-  switch (type) { 
+  switch (type) {
     case TableTypes.AllTypes:
-      return `from deephaven import empty_table, time_table
+      return (
+        `from deephaven import empty_table, time_table
 size = 20
 scale = 999
 ${tableName} = empty_table(size).update([
-"String=(i%11==0? null : ` + '`a`' +`+(int)(scale*(i%2==0? i+1 : 1)))",
+"String=(i%11==0? null : ` +
+        '`a`' +
+        `+(int)(scale*(i%2==0? i+1 : 1)))",
 "Int=(i%12==0 ? null : (int)(scale*(i*2-1)))",
 "Long=(i%13==0 ? null : (long)(scale*(i*2-1)))",
 "Float=(float)(i%14==0 ? null : i%10==0 ? 1.0F/0.0F: i%5==0 ? -1.0F/0.0F : (float) scale*(i*2-1))",
@@ -48,6 +51,7 @@ ${tableName} = empty_table(size).update([
 "BigInt=(i%22==0 ? null : new java.math.BigInteger(Integer.toString((int)(scale*(i*2-1)))))",
 "Byte=(Byte)(i%19==0 ? null : new Byte( Integer.toString((int)(i))))",
 ])`
+      );
     case TableTypes.StringAndNumber:
       return `from deephaven import new_table
 from deephaven.column import string_col, double_col