test: add tab docker sample

packages/tests/scripts/randomCases.json

@@ -186,7 +186,9 @@
         },
         "cases": [
             "sample-localdebug-bot-sso-docker",
-            "sample-remotedebug-bot-sso-docker"
+            "sample-remotedebug-bot-sso-docker",
+            "sample-localdebug-hello-world-tab-docker.test",
+            "sample-remotedebug-hello-world-tab-docker.test"
         ]
     }
 ]

packages/tests/src/ui-test/samples/sample-localdebug-hello-world-tab-docker.test.ts

@@ -0,0 +1,56 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+/**
+ * @author Ivan Chen <[email protected]>
+ */
+
+import { Page } from "playwright";
+import { TemplateProject, LocalDebugTaskLabel } from "../../utils/constants";
+import { validateTab, reopenPage } from "../../utils/playwrightOperation";
+import { CaseFactory } from "./sampleCaseFactory";
+import { Env } from "../../utils/env";
+import { SampledebugContext } from "./sampledebugContext";
+
+class HelloWorldTabDockerTestCase extends CaseFactory {
+  override async onValidate(
+    page: Page,
+    options?: { includeFunction: boolean }
+  ): Promise<void> {
+    return await validateTab(page, {
+      displayName: Env.displayName,
+      includeFunction: options?.includeFunction,
+    });
+  }
+  override async onCliValidate(
+    page: Page,
+    options?: { includeFunction: boolean }
+  ): Promise<void> {
+    return await validateTab(page, {
+      displayName: Env.displayName,
+      includeFunction: options?.includeFunction,
+    });
+  }
+  public override async onReopenPage(
+    sampledebugContext: SampledebugContext,
+    teamsAppId: string
+  ): Promise<Page> {
+    return await reopenPage(
+      sampledebugContext.context!,
+      teamsAppId,
+      Env.username,
+      Env.password,
+      undefined,
+      true,
+      true
+    );
+  }
+}
+
+new HelloWorldTabDockerTestCase(
+  TemplateProject.HelloWorldTabDocker,
+  27085868,
+  "[email protected]",
+  "local",
+  [LocalDebugTaskLabel.DockerTask]
+).test();

packages/tests/src/ui-test/samples/sample-remotedebug-bot-sso-docker.test.ts

@@ -6,7 +6,7 @@
  */
 
 import { Page } from "playwright";
-import { TemplateProject, LocalDebugTaskLabel } from "../../utils/constants";
+import { TemplateProject } from "../../utils/constants";
 import { validateBot } from "../../utils/playwrightOperation";
 import { CaseFactory } from "./sampleCaseFactory";
 import { Env } from "../../utils/env";

packages/tests/src/ui-test/samples/sample-remotedebug-hello-world-tab-docker.test.ts

@@ -0,0 +1,33 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+/**
+ * @author Ivan Chen <[email protected]>
+ */
+
+import { Page } from "playwright";
+import { TemplateProject } from "../../utils/constants";
+import { validateTab } from "../../utils/playwrightOperation";
+import { CaseFactory } from "./sampleCaseFactory";
+import { Env } from "../../utils/env";
+
+class HelloWorldTabDockerTestCase extends CaseFactory {
+  override async onValidate(
+    page: Page,
+    options?: { includeFunction: boolean }
+  ): Promise<void> {
+    return await validateTab(page, {
+      displayName: Env.displayName,
+      includeFunction: options?.includeFunction,
+    });
+  }
+}
+
+new HelloWorldTabDockerTestCase(
+  TemplateProject.HelloWorldTabDocker,
+  27852473,
+  "[email protected]",
+  "dev",
+  undefined,
+  { container: true }
+).test();

packages/tests/src/ui-test/samples/sampleCaseFactory.ts

@@ -101,7 +101,13 @@ const debugMap: Record<LocalDebugTaskLabel, () => Promise<void>> = {
   [LocalDebugTaskLabel.DockerRun]: async () => {
     await waitForTerminal(
       LocalDebugTaskLabel.DockerRun,
-      LocalDebugTaskResult.WebServerSuccess
+      LocalDebugTaskResult.DockerFinish
+    );
+  },
+  [LocalDebugTaskLabel.DockerTask]: async () => {
+    await waitForTerminal(
+      LocalDebugTaskLabel.DockerTask,
+      LocalDebugTaskResult.DockerFinish
     );
   },
 };
@@ -330,6 +336,8 @@ export abstract class CaseFactory {
           try {
             // create project
             await sampledebugContext.openResourceFolder();
+            // update manifest app name
+            await sampledebugContext.updateManifestAppName();
             // use 1st middleware to process typical sample
             await onAfterCreate(sampledebugContext, env, azSqlHelper);
 

packages/tests/src/ui-test/samples/sampledebugContext.ts

@@ -257,6 +257,22 @@ export class SampledebugContext extends TestContext {
     );
   }
 
+  public async updateManifestAppName(): Promise<void> {
+    console.log("[start] update manifest file");
+    const manifestFile =
+      path.resolve(this.projectPath, "appPackage", "manifest.json") ??
+      path.resolve(this.projectPath, "appManifest", "manifest.json");
+    const manifest = await fs.readJSON(manifestFile);
+    // manifest name can't be longer than 15 characters
+    manifest.name.short =
+      this.appName.substring(0, 10) + "${{APP_NAME_SUFFIX}}";
+    fs.writeJSON(manifestFile, manifest, { spaces: 4 });
+    console.log(
+      "[finish] update manifest file successfully, appName: ",
+      manifest.name.short
+    );
+  }
+
   public async openExistFolder(path: string): Promise<void> {
     await openExistingProject(path);
   }

packages/tests/src/utils/constants.ts

@@ -58,6 +58,7 @@ export enum TemplateProject {
   TabSSOApimProxy = "SSO Enabled Tab via APIM Proxy",
   LargeScaleBot = "Large Scale Notification Bot",
   BotSSODocker = "Containerized Bot App with SSO Enabled",
+  HelloWorldTabDocker = "Containerized Hello World Tab with Backend",
 }
 
 export enum TemplateProjectFolder {
@@ -91,6 +92,7 @@ export enum TemplateProjectFolder {
   RetailDashboard = "react-retail-dashboard",
   TabSSOApimProxy = "sso-enabled-tab-via-apim-proxy",
   LargeScaleBot = "large-scale-notification",
+  HelloWorldTabDocker = "hello-world-tab-docker",
   // v2 only
   Deeplinking = "deep-linking-hello-world-tab-without-sso-M365",
 }
@@ -130,6 +132,8 @@ export const sampleProjectMap: Record<TemplateProject, TemplateProjectFolder> =
     [TemplateProject.TabSSOApimProxy]: TemplateProjectFolder.TabSSOApimProxy,
     [TemplateProject.LargeScaleBot]: TemplateProjectFolder.LargeScaleBot,
     [TemplateProject.BotSSODocker]: TemplateProjectFolder.BotSSODocker,
+    [TemplateProject.HelloWorldTabDocker]:
+      TemplateProjectFolder.HelloWorldTabDocker,
   };
 
 export enum Resource {
@@ -383,6 +387,7 @@ export enum LocalDebugTaskLabel {
   Compile = "Compile typescript",
   StartWebServer = "Start web server",
   DockerRun = "docker-run: debug",
+  DockerTask = "docker",
 }
 
 export class LocalDebugTaskResult {
@@ -397,7 +402,7 @@ export class LocalDebugTaskResult {
   static readonly Error = "error";
   static readonly DebuggerAttached = "Debugger attached";
   static readonly WebServerSuccess = "press h to show help";
-  static readonly DockerRunFinish = "press any key to close it";
+  static readonly DockerFinish = "press any key to close it";
 }
 
 export enum LocalDebugTaskLabel2 {

packages/tests/src/utils/playwrightOperation.ts

@@ -104,6 +104,9 @@ export const debugInitMap: Record<TemplateProject, () => Promise<void>> = {
   [TemplateProject.BotSSODocker]: async () => {
     await startDebugging("Debug in Docker (Chrome)");
   },
+  [TemplateProject.HelloWorldTabDocker]: async () => {
+    await startDebugging("Debug in Teams (Chrome)");
+  },
 };
 
 export async function initPage(