test: add apimsg with multiple parameters case (#12034)

packages/tests/scripts/pvt.json

@@ -70,7 +70,8 @@
       "remotedebug-spfx-minimal",
       "remotedebug-spfx-react",
       "remotedebug-msg-newapi-microsoftentra-ts-win-only",
-      "remotedebug-msg-newapi-microsoftentra-win-only"
+      "remotedebug-msg-newapi-microsoftentra-win-only",
+      "remotedebug-msg-multiple-params-win-only"
     ],
     "node-20": ["localdebug-obo-tab"]
   },

packages/tests/src/ui-test/remotedebug/remotedebug-msg-multiple-params-win-only.test.ts

@@ -0,0 +1,92 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+/**
+ * @author Anne Fu <[email protected]>
+ */
+import * as path from "path";
+import { VSBrowser } from "vscode-extension-tester";
+import {
+  CommandPaletteCommands,
+  Timeout,
+  Notification,
+} from "../../utils/constants";
+import { RemoteDebugTestContext } from "./remotedebugContext";
+import {
+  execCommandIfExist,
+  getNotification,
+  createNewProject,
+  clearNotifications,
+} from "../../utils/vscodeOperation";
+import { cleanUpLocalProject, cleanTeamsApp } from "../../utils/cleanHelper";
+import { it } from "../../utils/it";
+import {
+  initPage,
+  validateMultiParamsApiMeResult,
+} from "../../utils/playwrightOperation";
+import { Env } from "../../utils/env";
+
+describe("Remote debug Tests", function () {
+  this.timeout(Timeout.testAzureCase);
+  let remoteDebugTestContext: RemoteDebugTestContext;
+  let testRootFolder: string;
+  let appName: string;
+  const appNameCopySuffix = "copy";
+  let newAppFolderName: string;
+  let projectPath: string;
+
+  beforeEach(async function () {
+    // ensure workbench is ready
+    this.timeout(Timeout.prepareTestCase);
+    remoteDebugTestContext = new RemoteDebugTestContext("msgmulparams");
+    testRootFolder = remoteDebugTestContext.testRootFolder;
+    appName = remoteDebugTestContext.appName;
+    newAppFolderName = appName + appNameCopySuffix;
+    projectPath = path.resolve(testRootFolder, newAppFolderName);
+    await remoteDebugTestContext.before();
+  });
+
+  afterEach(async function () {
+    this.timeout(Timeout.finishAzureTestCase);
+    await remoteDebugTestContext.after();
+    //Close the folder and cleanup local sample project
+    await execCommandIfExist("Workspaces: Close Workspace", Timeout.webView);
+    console.log(`[Successfully] start to clean up for ${projectPath}`);
+    // uninstall Teams app
+    cleanTeamsApp(appName), cleanUpLocalProject(projectPath);
+  });
+
+  it(
+    "[auto] Remote debug for new API message extension with multiple parameters",
+    {
+      testPlanCaseId: 25860087,
+      author: "[email protected]",
+    },
+    async function () {
+      const driver = VSBrowser.instance.driver;
+      await createNewProject("msgmulparams", appName);
+      await clearNotifications();
+      await execCommandIfExist(CommandPaletteCommands.ProvisionCommand);
+      await driver.sleep(Timeout.openAPIProvision);
+      await getNotification(
+        Notification.ProvisionSucceeded,
+        Timeout.shortTimeWait
+      );
+      await clearNotifications();
+      const teamsAppId = await remoteDebugTestContext.getTeamsAppId(
+        projectPath
+      );
+
+      const page = await initPage(
+        remoteDebugTestContext.context!,
+        teamsAppId,
+        Env.username,
+        Env.password
+      );
+      await validateMultiParamsApiMeResult(
+        page,
+        remoteDebugTestContext.appName
+      );
+    }
+  );
+});

packages/tests/src/ui-test/remotedebug/remotedebug-msg-openapi-win-only.test.ts

@@ -20,10 +20,7 @@ import {
 } from "../../utils/vscodeOperation";
 import { cleanUpLocalProject, cleanTeamsApp } from "../../utils/cleanHelper";
 import { it } from "../../utils/it";
-import {
-  initNoAddappPage,
-  validateSearchCmdResult,
-} from "../../utils/playwrightOperation";
+import { initPage, validateApiMeResult } from "../../utils/playwrightOperation";
 import { Env } from "../../utils/env";
 
 describe("Remote debug Tests", function () {
@@ -76,16 +73,14 @@ describe("Remote debug Tests", function () {
       const teamsAppId = await remoteDebugTestContext.getTeamsAppId(
         projectPath
       );
-      /*
-      const page = await initNoAddappPage(
+
+      const page = await initPage(
         remoteDebugTestContext.context!,
         teamsAppId,
         Env.username,
         Env.password
       );
-      const envName = "dev";*/
-      //disable validation
-      //await validateSearchCmdResult(page, appName, envName);
+      await validateApiMeResult(page, remoteDebugTestContext.appName);
     }
   );
 });

packages/tests/src/utils/constants.ts

@@ -363,7 +363,8 @@ export type AppType =
   | "msgopenapi"
   | "msgapikey"
   | "msgmicroentra"
-  | "importspfx";
+  | "importspfx"
+  | "msgmulparams";
 
 export class FeatureFlagName {
   static readonly InsiderPreview = "__TEAMSFX_INSIDER_PREVIEW";

packages/tests/src/utils/playwrightOperation.ts

@@ -2739,3 +2739,38 @@ export async function validateApiMeResult(page: Page, appName: string) {
     throw error;
   }
 }
+
+export async function validateMultiParamsApiMeResult(
+  page: Page,
+  appName: string
+) {
+  try {
+    await messageExtensionActivate(page, appName);
+    console.log("start to validate search command");
+    const petIdInput = await page?.waitForSelector(
+      "div.ac-input-container span.fui-SpinButton input[type='text']"
+    );
+    await petIdInput?.fill("4");
+    const testInput = await page?.waitForSelector(
+      "div.ac-input-container span.fui-Input input[type='text']"
+    );
+    await testInput?.fill("5");
+    await page.click("button[type='submit']");
+    await page.waitForTimeout(Timeout.shortTimeWait);
+    try {
+      await page?.waitForSelector('ul[datatid="app-picker-list"]');
+      console.log("verify search successfully!!!");
+    } catch (error) {
+      await page?.waitForSelector(
+        'div.ui-box span:has-text("Unable to reach app. Please try again.")'
+      );
+      assert.fail("Unable to reach app. Please try again.");
+    }
+  } catch (error) {
+    await page.screenshot({
+      path: getPlaywrightScreenshotPath("error"),
+      fullPage: true,
+    });
+    throw error;
+  }
+}

packages/tests/src/utils/vscodeOperation.ts

@@ -873,22 +873,9 @@ export async function createNewProject(
       break;
     }
     case "msgopenapi": {
-      const openapiSpecFilePath =
+      const apiSpecFilePath =
         "https://piercerepairsapi.azurewebsites.net/openapi.yml";
-      await input.selectQuickPick(CreateProjectQuestion.MessageExtension);
-      await input.selectQuickPick("Custom Search Results");
-      await input.setText("Start with an OpenAPI Description Document");
-      await input.confirm();
-      await input.selectQuickPick(
-        "Enter OpenAPI Description Document Location"
-      );
-      await inputFolderPath(driver, input, openapiSpecFilePath);
-      await input.confirm();
-      await driver.sleep(Timeout.shortTimeWait);
-      const ckAll = await driver.findElement(By.css(".quick-input-check-all"));
-      await ckAll?.click();
-      await driver.sleep(Timeout.input);
-      await input.confirm();
+      await createNewProjectByApispec(apiSpecFilePath, driver, input);
       break;
     }
     case "msgapikey": {
@@ -909,6 +896,12 @@ export async function createNewProject(
       await input.selectQuickPick(lang);
       break;
     }
+    case "msgmulparams": {
+      const apiSpecFilePath =
+        "https://raw.githubusercontent.com/SLdragon/example-openapi-spec/main/multiparam.yml";
+      await createNewProjectByApispec(apiSpecFilePath, driver, input);
+      break;
+    }
     default:
       break;
   }
@@ -1261,3 +1254,22 @@ export async function createEnvironmentWithPython() {
     Timeout.shortTimeWait
   );
 }
+
+export async function createNewProjectByApispec(
+  apispec: string,
+  driver: WebDriver,
+  input: InputBox
+): Promise<void> {
+  await input.selectQuickPick(CreateProjectQuestion.MessageExtension);
+  await input.selectQuickPick("Custom Search Results");
+  await input.setText("Start with an OpenAPI Description Document");
+  await input.confirm();
+  await input.selectQuickPick("Enter OpenAPI Description Document Location");
+  await inputFolderPath(driver, input, apispec);
+  await input.confirm();
+  await driver.sleep(Timeout.shortTimeWait);
+  const ckAll = await driver.findElement(By.css(".quick-input-check-all"));
+  await ckAll?.click();
+  await driver.sleep(Timeout.input);
+  await input.confirm();
+}