Adapt UI tests to Kaoto next

part of #400

Signed-off-by: Aurélien Pupier <[email protected]>

it-tests/BasicFlow.test.ts

@@ -30,14 +30,15 @@ describe('Kaoto basic development flow', function () {
     await editorView.closeAllEditors();
   });
 
-  it('Open "emptyKameletBinding.kaoto.yaml" file and check Kaoto UI is loading', async function () {
+  it('Open "emptyPipe.kaoto.yaml" file and check Kaoto UI is loading', async function () {
     const { kaotoWebview, kaotoEditor } = await openAndSwitchToKaotoFrame(
       workspaceFolder,
-      'emptyKameletBinding.kaoto.yaml',
+      'emptyPipe.kaoto.yaml',
       driver,
       true
     );
-    await checkIntegrationNameInTopBarLoaded(driver, 'my-integration-name');
+    // Route name is not displayed with Kaoto next
+    // await checkIntegrationNameInTopBarLoaded(driver, 'my-integration-name');
     await checkEmptyCanvasLoaded(driver);
     await kaotoWebview.switchBack();
     assert.isFalse(
@@ -54,8 +55,9 @@ describe('Kaoto basic development flow', function () {
       false
     );
     await checkEmptyCanvasLoaded(driver);
+    await createNewRoute(driver);
     await addActiveMQStep(driver);
-    await checkStepWithTestIdPresent(driver, 'viz-step-activemq');
+    await checkStepWithTestIdPresent(driver, 'custom-node__amqp-*');
 
     await kaotoWebview.switchBack();
     assert.isTrue(
@@ -79,7 +81,7 @@ describe('Kaoto basic development flow', function () {
       driver,
       true
     ));
-    await checkStepWithTestIdPresent(driver, 'viz-step-activemq');
+    await checkStepWithTestIdPresent(driver, 'custom-node__amqp-*');
     await kaotoWebview.switchBack();
   });
 
@@ -90,8 +92,8 @@ describe('Kaoto basic development flow', function () {
       driver,
       true
     );
-    await checkStepWithTestIdPresent(driver, 'viz-step-timer');
-    await checkStepWithTestIdPresent(driver, 'viz-step-log');
+    await checkStepWithTestIdPresent(driver, 'custom-node__timer-*');
+    await checkStepWithTestIdPresent(driver, 'custom-node__tlog-*');
     await kaotoWebview.switchBack();
     assert.isFalse(
       await kaotoEditor.isDirty(),
@@ -100,36 +102,29 @@ describe('Kaoto basic development flow', function () {
   });
 });
 
+async function createNewRoute(driver: WebDriver) {
+  await (await driver.findElement(By.xpath("//button[@data-testid='dsl-list-btn']"))).click();
+}
+
 async function addActiveMQStep(driver: WebDriver) {
-  await waitUntil(
-    async () => {
-      try {
-        await clickOnAddAStep(driver);
-      } catch {
-        console.log(
-          'Clicked on step failed surely due to Kaoto UI redrawing the content of the canvas. Will retry as a workaround'
-        );
-        return false;
-      }
-      return true;
-    },
-    10_000,
-    2_000
-  );
+  console.log('will add an activemq step');
   await driver.wait(
-    until.elementLocated(By.xpath("//button[@data-testid='miniCatalog__stepItem--activemq']"))
+    until.elementLocated(By.xpath("//g[@class='pf-topology__node__action-icon']"))
   );
-  await (
-    await driver.findElement(By.xpath("//button[@data-testid='miniCatalog__stepItem--activemq']"))
-  ).click();
-}
+  await (await driver.findElement(By.xpath("//g[@class='pf-topology__node__action-icon']"))).click();
 
-async function clickOnAddAStep(driver: WebDriver) {
-  await (await driver.findElement(By.xpath("//div[@data-testid='viz-step-slot']"))).click();
+  console.log('open context menu opened, will click on insert');
+  await (await driver.findElement(By.xpath("//li[@date-testid='context-menu-item-insert']"))).click();
+
+  console.log('will click on the activemq tile');
+  await driver.wait(
+    until.elementLocated(By.xpath("//div[@data-testid='tile-activemq']"))
+  );
+  await (await driver.findElement(By.xpath("//div[@data-testid='tile-activemq']"))).click();
 }
 
 async function checkStepWithTestIdPresent(driver: WebDriver, testId: string) {
-  await driver.wait(until.elementLocated(By.xpath(`//div[@data-testid='${testId}']`)));
+  await driver.wait(until.elementLocated(By.xpath(`//g[@data-testid='${testId}']`)));
 }
 
 async function checkIntegrationNameInTopBarLoaded(driver: WebDriver, name: string) {

it-tests/PropertyPanelLoading.test.ts

@@ -0,0 +1,37 @@
+import { By, EditorView, until, VSBrowser, WebDriver } from 'vscode-extension-tester';
+import * as path from 'path';
+import { openAndSwitchToKaotoFrame } from './Util';
+
+describe('property panel loading test', function () {
+  this.timeout(60_000);
+
+  const workspaceFolder = path.join(__dirname, '../test Fixture with speci@l chars');
+
+  let driver: WebDriver;
+
+  before(async function () {
+    this.timeout(60_000);
+    driver = VSBrowser.instance.driver;
+  });
+
+  afterEach(async function () {
+    const editorView = new EditorView();
+    await editorView.closeAllEditors();
+  });
+
+  it('Open "choice.camel.yaml" file and check property panel is loading', async function () {
+    const { kaotoWebview, } = await openAndSwitchToKaotoFrame(
+      workspaceFolder,
+      'choice.camel.yaml',
+      driver,
+      true
+    );
+    const stepWhenXpath = By.xpath("//g[@data-testid='custom-node__when-*']");
+    await driver.wait(until.elementLocated(stepWhenXpath));
+    await (await driver.findElement(stepWhenXpath)).click();
+    await driver.wait(
+      until.elementLocated(By.xpath("//input[@value='${header.foo} == 1']"))
+    );
+    await kaotoWebview.switchBack();
+  });
+});

it-tests/Util.ts

@@ -41,5 +41,5 @@ export async function switchToKaotoFrame(driver: WebDriver, checkNotDirty: boole
 }
 
 export async function checkEmptyCanvasLoaded(driver: WebDriver) {
-  await driver.wait(until.elementLocated(By.xpath("//div[@data-testid='viz-step-slot']")));
+  await driver.wait(until.elementLocated(By.xpath("//div[@data-test-id='topology']")));
 }

test Fixture with speci@l chars/emptyPipe.kaoto.yaml

@@ -0,0 +1,7 @@
+apiVersion: camel.apache.org/v1
+kind: Pipe
+metadata:
+  name: my-integration-name
+spec:
+  source: {}
+  sink: {}