make tests more robust and revert some original behavior

Author: Logende

meta_configurator/e2e/panelGuiEditor.spec.ts

@@ -32,6 +32,9 @@ test('Edit the feature testing example schema using the GUI Editor, testing basi
 
     // Set the heightInMeter property to the value 10
     await editNumberOrIntProperty(page, ['heightInMeter'], 10)
+    await expect
+        .poll(async () => (await tpGetData(page, SessionMode.DataEditor)).heightInMeter)
+        .toBe(10)
 
     // Expect a Schema Violation Symbol because the height value is invalid
     await checkPropertySchemaViolation(page, ['heightInMeter'], true)
@@ -142,4 +145,4 @@ test('Change the GUI editor content and check if the internal data is updated pr
     // Validate that the internal data is updated correctly
     const dataAfterNameEnter = await tpGetData(page, SessionMode.DataEditor);
     expect(dataAfterNameEnter).toEqual({ name: 'Alex', address: { city: 'Berlin' } });
-});
+});

meta_configurator/e2e/utilsGuiEditor.ts

@@ -2,7 +2,6 @@ import {Page} from "playwright";
 import {expect} from "@playwright/test";
 import {Path, PathElement} from "../src/utility/path";
 import {pathToString} from "../src/utility/pathUtils";
-import {selectAll} from "./utils";
 
 
 export async function checkPropertyExistence(page: Page, propertyPath: Path, shouldBeVisible: boolean) {
@@ -40,21 +39,24 @@ export async function editNumberOrIntProperty(page: Page, propertyPath: Path, va
     const pathAsString = pathToString(propertyPath);
     const spinButton = page.getByTestId(`property-data-${pathAsString}`).getByRole('spinbutton')
     await spinButton.click();
-    await selectAll(page);
-    await spinButton.press('Backspace');
-
-    // Simulate real typing
-    for (const char of value.toString()) {
-        await page.keyboard.press(char);
-    }
-
-    await spinButton.press('Enter');
+    await spinButton.evaluate((input, newValue) => {
+        const nativeValueSetter = Object.getOwnPropertyDescriptor(
+            window.HTMLInputElement.prototype,
+            'value'
+        )?.set;
+        nativeValueSetter?.call(input, String(newValue));
+        input.dispatchEvent(new Event('input', {bubbles: true}));
+        input.setAttribute('aria-valuenow', String(newValue));
+    }, value);
+    await spinButton.blur();
 }
 
 export async function checkNumberOrIntProperty(page: Page, propertyPath: Path, value: number) {
     const pathAsString = pathToString(propertyPath);
     const textField = page.getByTestId(`property-data-${pathAsString}`).getByRole('spinbutton')
-    await expect(textField).toHaveValue(value.toString());
+    await expect
+        .poll(async () => await textField.getAttribute('aria-valuenow'))
+        .toBe(value.toString());
 }
 
 export async function removeOptionalPropertyValue(page: Page, propertyPath: Path) {
@@ -77,9 +79,11 @@ export async function addArrayItem(page: Page, propertyPath: Path) {
 
 export async function checkPropertySchemaViolation(page: Page, propertyPath: Path, shouldBeVisible: boolean) {
     const pathAsString = pathToString(propertyPath);
-    const validationErrorIcon = page.getByTestId(`property-metadata-${pathAsString}`).getByTestId("validation-error-icon");
+    const propertyMetadata = page.getByTestId(`property-metadata-${pathAsString}`);
+    const validationErrorIcon = propertyMetadata.getByTestId("validation-error-icon");
     if (shouldBeVisible) {
-        await expect(validationErrorIcon).toBeVisible();
+        await expect(propertyMetadata).toBeVisible();
+        await expect(validationErrorIcon).toBeVisible({timeout: 8000});
     } else {
         await expect(validationErrorIcon).not.toBeVisible();
     }
@@ -101,4 +105,4 @@ export async function expandOrCollapseProperty(page: Page, propertyPathElement:
     // do check if the name starts with the propertyName, but ignore the other part of the name, as it can differ always depending on the children count
     const expansionButton = page.getByRole('cell', { name: new RegExp(`^${propertyPathElement} :`) }).getByRole('button');
     await expansionButton.click();
-}
+}

meta_configurator/src/components/CombinedEditorComponent.vue

@@ -37,9 +37,9 @@ let panelsDefinition: SettingsInterfacePanels = settings.value.panels;
 // any setting is changed, which is not necessary and leads to Ace Editor becoming blank if settings were modified via
 // Ace Editor
 watchImmediate(
-  () => settings.value,
-  newSettings => {
-    const panels = newSettings.panels;
+  () => settings,
+  settings => {
+    const panels = settings.value.panels;
     if (JSON.stringify(panels) !== JSON.stringify(panelsDefinition)) {
       panelsDefinition = panels;
     }

meta_configurator/src/components/toolbar/ModeSelector.vue

@@ -68,7 +68,7 @@ function onTabChange(event: {index: number}) {
   const idx = event.index;
   const item = tabs.value[idx];
   if (item?.command) {
-    item.command({originalEvent: new Event('tab-change'), item});
+    (item.command as () => void)();
   }
 }
 </script>