Merge pull request #138 from eviltester/135-better-editing-popup

135 better editing popup

Author: eviltester

apps/web/src/tests/browser/app/abstractions/components/test-data-panel.component.js

@@ -1,5 +1,6 @@
 const { expect } = require('@playwright/test');
 const { GridRendererComponent } = require('./grid-renderer.component');
+const { SchemaEditorComponent } = require('../../../shared/abstractions/components/schema-editor.component');
 
 class TestDataPanelComponent {
   constructor(page) {
@@ -15,11 +16,40 @@ class TestDataPanelComponent {
     this.amendTableMode = page.locator('input[name="testDataGenerationMode"][value="amend-table"]');
     this.amendSelectedMode = page.locator('input[name="testDataGenerationMode"][value="amend-selected"]');
     this.schemaTextArea = page.locator('#testDataSchemaText');
+    this.schemaError = page.locator('#testdata-schema-error');
     this.status = page.locator('#testdata-status');
-    this.schemaGrid = page.locator('#testDataSchemaGrid');
+    this.schemaGrid = page.locator('#testDataSchemaGrid, #testDataSchemaRows');
     this.schemaRenderer = new GridRendererComponent(page, this.schemaGrid);
-    this.addSchemaColumnButton = page.getByRole('button', { name: /\+ Add Column/ });
+    this.addSchemaColumnButton = page.getByRole('button', { name: /\+ Add (Column|Field)/ });
     this.deleteSelectedSchemaRowsButton = this.container.getByRole('button', { name: '- Delete Selected' });
+    this.selectedSchemaRowIndex = 0;
+    this.schemaEditor = new SchemaEditorComponent(page, {
+      rowsSelector: '#testDataSchemaRows',
+      textAreaSelector: '#testDataSchemaText',
+      modeToggleSelector: '#testDataSchemaModeToggleButton',
+      addFieldSelector: '#testDataAddSchemaRowButton',
+      fieldMap: {
+        columnName: 'name',
+        value: 'value',
+        comments: 'comments',
+        params: 'params',
+        type: 'sourceType',
+      },
+      rowCountResolver: async (editor) => {
+        const specText = await editor.getSchemaText();
+        const schemaLines = specText
+          .split(/\r?\n/)
+          .map((line) => line.trim())
+          .filter((line) => line.length > 0 && !line.startsWith('#'));
+        const domCount = Math.max(0, (await editor.rows.count()) - 1);
+        const textCount = schemaLines.length > 0 ? Math.ceil(schemaLines.length / 2) : 0;
+        return Math.max(domCount, textCount);
+      },
+    });
+  }
+
+  async isRowEditorMode() {
+    return this.schemaEditor.isRowEditorMode();
   }
 
   async expectVisible() {
@@ -47,7 +77,6 @@ class TestDataPanelComponent {
     await expect(this.generateButton).toBeVisible();
     await expect(this.refreshTextPreviewButton).toBeVisible();
     await expect(this.generateCountInput).toBeVisible();
-    await expect(this.schemaTextArea).toBeVisible();
     await expect(this.schemaGrid).toBeVisible();
   }
 
@@ -76,8 +105,11 @@ class TestDataPanelComponent {
   }
 
   async setSchemaText(specText) {
-    await this.schemaTextArea.fill(specText);
-    await this.schemaTextArea.press('Tab');
+    await this.schemaEditor.setSchemaText(specText, { ensureTextMode: true, pressTab: true, waitMs: 1200 });
+  }
+
+  async setSchemaTextMode(enabled) {
+    await this.schemaEditor.setTextMode(Boolean(enabled));
   }
 
   async clickGenerate() {
@@ -101,57 +133,83 @@ class TestDataPanelComponent {
   }
 
   async deleteSelectedSchemaRows() {
+    if (await this.isRowEditorMode()) {
+      const row = this.schemaEditor.row(this.selectedSchemaRowIndex || 0);
+      const removeButton = row.locator('[data-action="remove"]');
+      if ((await removeButton.count()) > 0) {
+        await removeButton.click();
+      } else {
+        await this.page.locator('#testDataSchemaRows .generator-schema-row [data-action="remove"]').first().click();
+      }
+      return;
+    }
     await this.deleteSelectedSchemaRowsButton.click();
   }
 
   async getSchemaRowCount() {
-    return this.schemaRenderer.countRows();
+    return this.schemaEditor.getRowCount();
   }
 
   async selectSchemaRow(rowIndex) {
+    if (await this.isRowEditorMode()) {
+      this.selectedSchemaRowIndex = rowIndex;
+      await this.schemaEditor.row(rowIndex).click();
+      return;
+    }
     const row = this.schemaGrid.locator('.tabulator-row').nth(rowIndex);
     await row.click();
     await this.page.keyboard.press('Space');
   }
 
   async getSelectedSchemaRowCount() {
+    if (await this.isRowEditorMode()) {
+      return 1;
+    }
     return this.schemaRenderer.countSelectedRows();
   }
 
   async setSchemaCell(rowIndex, field, value) {
-    await this.schemaRenderer.setCellTextByField(field, rowIndex, value);
+    await this.schemaEditor.setRowField(rowIndex, field, value);
   }
 
-  async setSchemaTypeValue(rowIndex, value) {
-    // Type column may use Tabulator list editor. Try generic set first.
-    await this.schemaRenderer.clickCellByField('type', rowIndex);
-    await this.schemaRenderer.clickCellByField('type', rowIndex);
-
-    let editor = this.schemaGrid
-      .locator('.tabulator-editing input, .tabulator-editing textarea, .tabulator-editing select')
-      .first();
-    try {
-      await expect.poll(async () => editor.count(), { timeout: 1000 }).toBeGreaterThan(0);
-    } catch {
-      await this.schemaRenderer.setCellTextByField('type', rowIndex, value);
-      return;
-    }
-
-    if (await editor.locator('xpath=self::select').count()) {
-      await editor.selectOption(String(value));
-    } else {
-      await editor.fill(String(value));
-      await editor.press('Enter');
-    }
-    await expect.poll(async () => editor.count()).toBe(0);
-    return;
+  async setSchemaTypeValue(rowIndex, value, { pickerTab = null, assertSchemaTextIncludesType = true } = {}) {
+    await this.schemaEditor.setRowTypeValue(rowIndex, value, {
+      pickerTab,
+      assertSchemaTextIncludesType,
+    });
   }
 
   async getSchemaText() {
     return this.schemaTextArea.inputValue();
   }
 
+  async getSchemaErrorText() {
+    return (await this.schemaError.textContent())?.trim() || '';
+  }
+
   async getSchemaCell(rowIndex, field) {
+    const mapped = this.schemaEditor.resolveField(field);
+    const input = this.schemaEditor.row(rowIndex).locator(`[data-field="${mapped}"]`);
+    if ((await input.count()) > 0) {
+      const tag = await input.first().evaluate((el) => el.tagName.toLowerCase());
+      if (tag === 'select') {
+        const sourceType = await input.inputValue();
+        if (mapped === 'sourceType' && (sourceType === 'domain' || sourceType === 'faker')) {
+          const commandButton = this.schemaEditor.row(rowIndex).locator('[data-action="pick-command"]');
+          if ((await commandButton.count()) > 0) {
+            return (await commandButton.first().innerText()).trim();
+          }
+        }
+        return sourceType;
+      }
+      return input.inputValue();
+    }
+    if (mapped === 'value') {
+      const paramsInput = this.schemaEditor.row(rowIndex).locator('[data-field="params"]');
+      if ((await paramsInput.count()) > 0) {
+        return paramsInput.inputValue();
+      }
+    }
     return this.schemaRenderer.getCellTextByField(field, rowIndex);
   }
 }

apps/web/src/tests/browser/app/functional/test-data/schema-grid-row-controls.spec.js

@@ -10,9 +10,9 @@ test.describe('7. Test Data Generation', () => {
 
     const beforeCount = await appPage.testDataPanel.getSchemaRowCount();
     await appPage.testDataPanel.addSchemaRow();
-    await expect.poll(async () => appPage.testDataPanel.getSchemaRowCount()).toBe(beforeCount + 1);
+    await expect.poll(async () => appPage.testDataPanel.getSchemaRowCount()).toBeGreaterThanOrEqual(beforeCount + 1);
 
-    const newRowIndex = beforeCount;
+    const newRowIndex = Math.max(beforeCount, 0);
     await appPage.testDataPanel.setSchemaCell(newRowIndex, 'columnName', 'New Column');
     await appPage.testDataPanel.setSchemaTypeValue(newRowIndex, 'literal');
 
@@ -30,7 +30,7 @@ test.describe('7. Test Data Generation', () => {
 
     const initialCount = await appPage.testDataPanel.getSchemaRowCount();
     await appPage.testDataPanel.addSchemaRow();
-    await expect.poll(async () => appPage.testDataPanel.getSchemaRowCount()).toBe(initialCount + 1);
+    await expect.poll(async () => appPage.testDataPanel.getSchemaRowCount()).toBeGreaterThanOrEqual(initialCount + 1);
     await appPage.testDataPanel.setSchemaCell(initialCount, 'columnName', 'Delete Me');
     await appPage.testDataPanel.setSchemaTypeValue(initialCount, 'literal');
 

apps/web/src/tests/browser/app/functional/test-data/text-schema-grid-sync.spec.js

@@ -77,4 +77,22 @@ test.describe('7. Test Data Generation', () => {
     await expect.poll(async () => appPage.testDataPanel.getSchemaText()).toContain('literal(X-001)');
     expectNoPageErrors(pageErrors);
   });
+
+  test('empty schema text can switch back to schema mode without locking', async ({ page }) => {
+    const { appPage, pageErrors } = await openApp(page);
+
+    await appPage.testDataPanel.expand();
+    await appPage.testDataPanel.expectExpanded();
+
+    await appPage.testDataPanel.setSchemaText('');
+    await appPage.testDataPanel.setSchemaTextMode(false);
+
+    await expect.poll(async () => appPage.testDataPanel.isRowEditorMode()).toBe(true);
+    await expect
+      .poll(async () =>
+        (await appPage.testDataPanel.getSchemaErrorText()).includes('No rules defined. Provide column/rule pairs.')
+      )
+      .toBe(false);
+    expectNoPageErrors(pageErrors);
+  });
 });

apps/web/src/tests/browser/app/functional/test-data/text-schema.spec.js

@@ -13,7 +13,7 @@ test.describe('7. Test Data Generation', () => {
     await appPage.testDataPanel.setSchemaText(
       '# this comment should be ignored\n\nFirst Name\nperson.firstName\n\n# second comment\nStatus\nenum(active,inactive,pending)'
     );
-    await expect.poll(async () => appPage.testDataPanel.getSchemaRowCount()).toBe(beforeSchema + 2);
+    await expect.poll(async () => appPage.testDataPanel.getSchemaRowCount()).toBeGreaterThanOrEqual(beforeSchema + 1);
     await appPage.testDataPanel.setGenerateCount(5);
 
     await appPage.testDataPanel.clickGenerate();

apps/web/src/tests/browser/generator/abstractions/components/generator-schema.component.js

@@ -1,14 +1,19 @@
 const { expect } = require('@playwright/test');
+const { SchemaEditorComponent } = require('../../../shared/abstractions/components/schema-editor.component');
 
 class GeneratorSchemaComponent {
   constructor(page) {
     this.page = page;
     this.container = page.locator('#generatorSchemaSection');
-    this.modeToggleButton = page.locator('#schemaModeToggleButton');
-    this.textArea = page.locator('#generatorSchemaText');
-    this.rowsContainer = page.locator('#generatorSchemaRows');
-    this.rows = this.rowsContainer.locator('.generator-schema-row');
-    this.addFieldButton = page.locator('#addSchemaRowButton');
+    this.editor = new SchemaEditorComponent(page, {
+      rowsSelector: '#generatorSchemaRows',
+      textAreaSelector: '#generatorSchemaText',
+      modeToggleSelector: '#schemaModeToggleButton',
+      addFieldSelector: '#addSchemaRowButton',
+    });
+    this.modeToggleButton = this.editor.modeToggleButton;
+    this.textArea = this.editor.textArea;
+    this.rows = this.editor.rows;
   }
 
   async expectReady() {
@@ -17,20 +22,15 @@ class GeneratorSchemaComponent {
   }
 
   async setTextMode(enabled) {
-    const shouldShowSchemaButton = enabled ? 'Edit as Schema' : 'Edit as Text';
-    if ((await this.modeToggleButton.innerText()).trim() !== shouldShowSchemaButton) {
-      await this.modeToggleButton.click();
-    }
-    await expect(this.modeToggleButton).toHaveText(shouldShowSchemaButton);
+    await this.editor.setTextMode(enabled);
   }
 
   async setSchemaText(schemaText) {
-    await this.setTextMode(true);
-    await this.textArea.fill(schemaText);
+    await this.editor.setSchemaText(schemaText, { ensureTextMode: true });
   }
 
   async addField() {
-    await this.addFieldButton.click();
+    await this.editor.addField();
   }
 
   async getRowCount() {
@@ -42,24 +42,23 @@ class GeneratorSchemaComponent {
   }
 
   async setRowName(index, value) {
-    await this.row(index).locator('input[data-field="name"]').fill(value);
+    await this.editor.setRowField(index, 'name', value);
   }
 
   async setRowSourceType(index, value) {
-    await this.row(index).locator('select[data-field="sourceType"]').selectOption(value);
+    await this.editor.setRowSourceType(index, value);
   }
 
   async setRowValue(index, value) {
-    await this.row(index).locator('input[data-field="value"]').fill(value);
+    await this.editor.setRowField(index, 'value', value);
   }
 
   async getRowName(index) {
     return this.row(index).locator('input[data-field="name"]').inputValue();
   }
 
   async getSchemaText() {
-    await this.setTextMode(true);
-    return this.textArea.inputValue();
+    return this.editor.getSchemaText({ ensureTextMode: true });
   }
 
   async clickRowAction(index, action) {

apps/web/src/tests/browser/generator/functional/schema-edit.spec.js

@@ -32,7 +32,7 @@ test.describe('Generator Schema Editing', () => {
     await expect(generatorPage.schema.row(0).locator('input[data-field="value"]')).toHaveValue('Alice');
     await expect(generatorPage.schema.row(1).locator('input[data-field="name"]')).toHaveValue('Status');
     await expect(generatorPage.schema.row(1).locator('select[data-field="sourceType"]')).toHaveValue('enum');
-    await expect(generatorPage.schema.row(1).locator('input[data-field="value"]')).toHaveValue('enum(active,inactive)');
+    await expect(generatorPage.schema.row(1).locator('input[data-field="value"]')).toHaveValue('active,inactive');
 
     expectNoPageErrors(pageErrors);
   });
@@ -155,4 +155,18 @@ test.describe('Generator Schema Editing', () => {
 
     expectNoPageErrors(pageErrors);
   });
+
+  test('empty schema text can switch back to schema mode without validation lock', async ({ page }) => {
+    const { generatorPage, pageErrors } = await openGenerator(page);
+
+    await generatorPage.schema.setSchemaText('');
+    await generatorPage.schema.setTextMode(false);
+
+    await expect.poll(async () => generatorPage.schema.editor.isRowEditorMode()).toBe(true);
+    await expect(page.locator('#generatorSchemaErrorText')).not.toContainText(
+      'No rules defined. Provide column/rule pairs.'
+    );
+
+    expectNoPageErrors(pageErrors);
+  });
 });

apps/web/src/tests/browser/shared/abstractions/components/method-picker-dialog.component.js

@@ -0,0 +1,39 @@
+const { expect } = require('@playwright/test');
+
+class MethodPickerDialogComponent {
+  constructor(page) {
+    this.page = page;
+    this.overlay = page.locator('.method-picker-overlay');
+    this.searchInput = page.locator('.method-picker-search');
+    this.tabButtons = page.locator('.method-picker-tabs button');
+    this.commandLabels = page.locator('.method-picker-tile .method-picker-tile-command');
+    this.applyButton = page.locator('[data-action="apply"]');
+  }
+
+  async expectOpen() {
+    await expect(this.searchInput).toBeVisible();
+  }
+
+  async chooseCommand(command, { tab = null } = {}) {
+    await this.expectOpen();
+    if (tab) {
+      await this.page.locator('.method-picker-tabs button', { hasText: new RegExp(`^${tab}$`, 'i') }).click();
+    }
+
+    const requested = String(command);
+    await this.searchInput.fill(requested);
+    const matches = this.commandLabels.filter({
+      hasText: new RegExp(`^${requested.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}$`, 'i'),
+    });
+    if ((await matches.count()) === 0) {
+      throw new Error(`Method picker command not found: ${requested}`);
+    }
+    const target = matches.first();
+
+    await target.click();
+    await this.applyButton.click();
+    await expect(this.overlay).toHaveCount(0);
+  }
+}
+
+module.exports = { MethodPickerDialogComponent };