Merge pull request #119 from eviltester/117-ui-bug-fixes-and-alert-usage

117 UI bug fixes and alert usage

Author: eviltester

apps/cli/src/run-cli.js

@@ -10,6 +10,20 @@ function writeLine(output, text = '') {
   output(`${text}\n`);
 }
 
+function formatCanonicalErrors(errors = []) {
+  const safeErrors = Array.isArray(errors) ? errors : [];
+  return safeErrors.map((error) => {
+    if (!error || typeof error !== 'object') {
+      return String(error ?? '');
+    }
+    const code = String(error.code || 'error');
+    const message = String(error.message || '');
+    const column = error.column != null ? ` column=${error.column}` : '';
+    const line = Number.isInteger(error.line) ? ` line=${error.line}` : '';
+    return `[${code}] ${message}${column}${line}`.trim();
+  });
+}
+
 export async function runCliCommand({ options, platform }) {
   const progress = (message) => {
     if (options.showProgress) {
@@ -78,7 +92,7 @@ export async function runCliCommand({ options, platform }) {
     });
 
     if (!result.ok) {
-      writeLine(platform.stderr, result.errors.join('\n'));
+      writeLine(platform.stderr, formatCanonicalErrors(result.errors).join('\n'));
       return 1;
     }
 
@@ -128,7 +142,7 @@ export async function runCliCommand({ options, platform }) {
       });
 
       if (!streamResult.ok) {
-        writeLine(platform.stderr, streamResult.errors.join('\n'));
+        writeLine(platform.stderr, formatCanonicalErrors(streamResult.errors).join('\n'));
         return 1;
       }
 
@@ -176,7 +190,7 @@ export async function runCliCommand({ options, platform }) {
   });
 
   if (!result.ok) {
-    writeLine(platform.stderr, result.errors.join('\n'));
+    writeLine(platform.stderr, formatCanonicalErrors(result.errors).join('\n'));
     return 1;
   }
 

apps/web/src/tests/browser/abstraction-smoke-tests/grid-header-controls.spec.js

@@ -60,3 +60,26 @@ test('grid header sorting and per-column filter change visible results', async (
     .toEqual(['Apple', 'Banana', 'Cherry']);
   expect(pageErrors).toEqual([]);
 });
+
+test('grid header validation errors render in inline grid error surface', async ({ page }) => {
+  const pageErrors = trackPageErrors(page);
+  const appPage = new AppPage(page);
+
+  await appPage.goto();
+  await appPage.gridEditor.setUniqueColumnNames(true);
+  const initialColumnName = (await appPage.gridEditor.header.getColumnNames())[0];
+  const gridError = page.locator('#grid-column-error');
+
+  await appPage.gridEditor.header.addColumnRight(initialColumnName, 'Existing Name');
+  await expect.poll(async () => appPage.gridEditor.header.getColumnNames()).toContain('Existing Name');
+
+  await appPage.gridEditor.header.renameColumn(initialColumnName, 'Existing Name');
+  await expect(gridError).toContainText('A column with name Existing Name already exists');
+
+  await appPage.gridEditor.header.deleteColumn('Existing Name');
+  await expect.poll(async () => appPage.gridEditor.header.getColumnNames()).toEqual([initialColumnName]);
+  await appPage.gridEditor.header.deleteColumn(initialColumnName);
+  await expect(gridError).toContainText('Cannot Delete The Only Column');
+
+  expect(pageErrors).toEqual([]);
+});

apps/web/src/tests/browser/abstractions/components/grid-editor.component.js

@@ -17,6 +17,7 @@ class GridEditorComponent {
     this.clearFiltersButton = page.getByRole('button', { name: 'Clear Filters' });
     this.clearSortButton = page.getByRole('button', { name: 'Clear Sort' });
     this.resetTableButton = page.getByRole('button', { name: 'Reset Table' });
+    this.uniqueColumnNamesCheckbox = page.locator('#uniqueColumnNamesCheckbox');
   }
 
   async expectVisible() {
@@ -64,17 +65,8 @@ class GridEditorComponent {
   }
 
   async deleteSelectedRows() {
-    const handler = async (dialog) => {
-      if (dialog.message() === 'Are you Sure You Want to Delete Rows?') {
-        await dialog.accept();
-      }
-    };
-    this.page.on('dialog', handler);
-    try {
-      await this.deleteSelectedRowsButton.click();
-    } finally {
-      this.page.off('dialog', handler);
-    }
+    await this.deleteSelectedRowsButton.click();
+    await this._acceptConfirmIfVisible();
   }
 
   async selectRow(rowIndex) {
@@ -179,10 +171,24 @@ class GridEditorComponent {
   }
 
   async resetTable() {
-    this.page.once('dialog', async (dialog) => {
-      await dialog.accept();
-    });
     await this.resetTableButton.click();
+    await this._acceptConfirmIfVisible();
+  }
+
+  async setUniqueColumnNames(enabled = true) {
+    if (enabled) {
+      await this.uniqueColumnNamesCheckbox.check();
+      return;
+    }
+    await this.uniqueColumnNamesCheckbox.uncheck();
+  }
+
+  async _acceptConfirmIfVisible() {
+    const confirmBackdrop = this.page.locator('#confirm-modal-backdrop');
+    if ((await confirmBackdrop.count()) > 0 && (await confirmBackdrop.isVisible())) {
+      await confirmBackdrop.locator('#confirm-modal-ok').click();
+      await expect(confirmBackdrop).toBeHidden();
+    }
   }
 }
 

apps/web/src/tests/browser/abstractions/components/grid-header.component.js

@@ -46,38 +46,32 @@ class GridHeaderComponent {
   }
 
   async renameColumn(columnName, newName) {
-    this.page.once('dialog', async (dialog) => {
-      await dialog.accept(newName);
-    });
     await this.clickAction(columnName, 'rename');
+    await this.fillTextInputModal(newName);
   }
 
   async addColumnLeft(columnName, newName) {
-    this.page.once('dialog', async (dialog) => {
-      await dialog.accept(newName);
-    });
     await this.clickAction(columnName, 'add-left');
+    await this.fillTextInputModal(newName);
   }
 
   async addColumnRight(columnName, newName) {
-    this.page.once('dialog', async (dialog) => {
-      await dialog.accept(newName);
-    });
     await this.clickAction(columnName, 'add-right');
+    await this.fillTextInputModal(newName);
   }
 
   async duplicateColumn(columnName, newName) {
-    this.page.once('dialog', async (dialog) => {
-      await dialog.accept(newName);
-    });
     await this.clickAction(columnName, 'duplicate');
+    await this.fillTextInputModal(newName);
   }
 
   async deleteColumn(columnName) {
-    this.page.once('dialog', async (dialog) => {
-      await dialog.accept();
-    });
     await this.clickAction(columnName, 'delete');
+    const confirmBackdrop = this.page.locator('#confirm-modal-backdrop');
+    if ((await confirmBackdrop.count()) > 0 && (await confirmBackdrop.isVisible())) {
+      await confirmBackdrop.locator('#confirm-modal-ok').click();
+      await expect(confirmBackdrop).toBeHidden();
+    }
   }
 
   async sortAsc(columnName) {
@@ -131,6 +125,15 @@ class GridHeaderComponent {
       .split('\n')[0]
       .trim();
   }
+
+  async fillTextInputModal(value) {
+    const backdrop = this.page.locator('#text-input-modal-backdrop');
+    await expect(backdrop).toBeVisible();
+    const input = backdrop.locator('#text-input-modal-field');
+    await input.fill(String(value ?? ''));
+    await backdrop.locator('#text-input-modal-ok').click();
+    await expect(backdrop).toBeHidden();
+  }
 }
 
 module.exports = { GridHeaderComponent };

apps/web/src/tests/browser/abstractions/components/tabbed-text.component.js

@@ -58,23 +58,13 @@ class TabbedTextComponent {
   }
 
   async preview() {
-    this.page.once('dialog', async (dialog) => {
-      await dialog.accept();
-    });
     await this.previewOrEditButton.click();
+    await this._resolveConfirmModal(true);
   }
 
   async togglePreviewEdit(confirmPrompt = true) {
-    if (confirmPrompt === true) {
-      this.page.once('dialog', async (dialog) => {
-        await dialog.accept();
-      });
-    } else if (confirmPrompt === false) {
-      this.page.once('dialog', async (dialog) => {
-        await dialog.dismiss();
-      });
-    }
     await this.previewOrEditButton.click();
+    await this._resolveConfirmModal(confirmPrompt !== false);
   }
 
   async isCopyButtonVisible() {
@@ -129,6 +119,19 @@ class TabbedTextComponent {
   async expectOutputContains(value) {
     await expect(this.outputTextArea).toHaveValue(new RegExp(value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')));
   }
+
+  async _resolveConfirmModal(accept = true) {
+    const confirmBackdrop = this.page.locator('#confirm-modal-backdrop');
+    if ((await confirmBackdrop.count()) === 0 || !(await confirmBackdrop.isVisible())) {
+      return;
+    }
+    if (accept) {
+      await confirmBackdrop.locator('#confirm-modal-ok').click();
+    } else {
+      await confirmBackdrop.locator('#confirm-modal-cancel').click();
+    }
+    await expect(confirmBackdrop).toBeHidden();
+  }
 }
 
 module.exports = { TabbedTextComponent };