Add constants and element helper class in test (#2409)

EzioLi01 · web-flow · commit acccf52d2cad · 2025-09-10T10:11:54.000+08:00
* Add constants and element helper class in test

* Update gulp file
diff --git a/.ci/smoke-tests-common-validation.yml b/.ci/smoke-tests-common-validation.yml
@@ -7,9 +7,11 @@ steps:
       Contents: |
         $(System.DefaultWorkingDirectory)/*.vsix
       TargetFolder: "$(System.DefaultWorkingDirectory)/test/smoke/resources/extension"
-  - bash: npm run prepare-smoke-tests
+  - script: npm run prepare-smoke-tests
     displayName: "Prepare smoke tests"
-  - bash: npm run smoke-tests --verbose
+  - script: npm run prepare-smoke-tests-project
+    displayName: "Prepare smoke tests sample project"
+  - script: npm run smoke-tests --verbose
     displayName: "Run smoke tests"
     env:
       DISPLAY: ":99.0"
diff --git a/.gitignore b/.gitignore
@@ -9,26 +9,27 @@ src/**/nodeDebugLocation.json
 nls.*.json
 test/*.xml
 test/resources/projects/*
+test/**/*.js
+!test/**/.eslintrc.js
+test/smoke/vscode
+test/smoke/resources/sampleReactNativeProject
+!test/smoke/resources/sampleReactNativeProject/*.js
+!test/resources/sampleReactNativeProject/metro.config.js
+!test/resources/newVersionReactNativeProject/*.js
+test/smoke/*.xml
+test/smoke/screenshots
 
 # Compiled files
 src/**/*.js
 dist/**
 !src/extension/appcenter/lib/**/*.js
-test/**/*.js
-!test/resources/sampleReactNativeProject/metro.config.js
-!test/resources/newVersionReactNativeProject/*.js
-!test/**/.eslintrc.js
-test/smoke/vscode
 !gulpfile.js
 SmokeTestLogs
 VSCodeUserData
 **/*.js.map
 vscode-react-native-*.vsix
 vscode-react-native-*.vsix.zip
 *-report
-!test/smoke/resources/sampleReactNativeProject/*.js
-test/smoke/*.xml
-test/smoke/screenshots
 
 # Sample Application auto-generated files
 SampleApplication/.vscode/.react/debuggerWorker.js
@@ -43,4 +44,4 @@ SampleApplication/.watchmanconfig
 SampleApplication/.vscode/launchReactNative.js
 SampleApplication/.vscode/settings.json
 SampleApplication/tsconfig.json
-SampleApplication/.vscode/typings/
+SampleApplication/.vscode/typings/
diff --git a/gulp_scripts/formatter.js b/gulp_scripts/formatter.js
@@ -15,6 +15,7 @@ const runPrettier = async fix => {
             "!test/smoke/.vscode-test/**",
             "!src/**/*.d.ts",
             "!SECURITY.md",
+            "!test/smoke/resources/sampleReactNativeProject/**"
         ],
         {
             stdio: "inherit",
diff --git a/package.json b/package.json
@@ -1418,6 +1418,7 @@
     "test-localization": "node ./test/localization/runTest.js",
     "prepare": "husky install",
     "prepare-smoke-tests": "cd test/smoke && npm ci",
+    "prepare-smoke-tests-project": "cd test/smoke/resources/sampleReactNativeProject && npm install",
     "smoke-tests": "cd test/smoke && tsc && node ./node_modules/mocha/bin/_mocha --config ./.mocharc.js --reporter mocha-multi-reporters"
   },
   "prettier": {
diff --git a/test/smoke/resources/sampleReactNativeProject/.gitignore b/test/smoke/resources/sampleReactNativeProject/.gitignore
diff --git a/test/smoke/resources/sampleReactNativeProject/.vscode/emptyTelemetrySettings.json b/test/smoke/resources/sampleReactNativeProject/.vscode/emptyTelemetrySettings.json
diff --git a/test/smoke/resources/sampleReactNativeProject/.vscode/settings.json b/test/smoke/resources/sampleReactNativeProject/.vscode/settings.json
diff --git a/test/smoke/resources/sampleReactNativeProject/package.json b/test/smoke/resources/sampleReactNativeProject/package.json
@@ -1,13 +1,34 @@
 {
-  "name": "sampleReactNativeProject",
+  "name": "rn_0_81_0",
   "version": "0.0.1",
   "private": true,
-  "scripts": {
-    "start": "node node_modules/react-native/local-cli/cli.js start"
-  },
   "dependencies": {
-    "react": "17.0.2",
-    "react-native": "0.65.0",
-    "react-native-windows": "0.65.9"
+    "react": "19.1.0",
+    "react-native": "0.81.0",
+    "@react-native/new-app-screen": "0.81.0",
+    "react-native-safe-area-context": "^5.5.2"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.25.2",
+    "@babel/preset-env": "^7.25.3",
+    "@babel/runtime": "^7.25.0",
+    "@react-native-community/cli": "20.0.0",
+    "@react-native-community/cli-platform-android": "20.0.0",
+    "@react-native-community/cli-platform-ios": "20.0.0",
+    "@react-native/babel-preset": "0.81.0",
+    "@react-native/eslint-config": "0.81.0",
+    "@react-native/metro-config": "0.81.0",
+    "@react-native/typescript-config": "0.81.0",
+    "@types/jest": "^29.5.13",
+    "@types/react": "^19.1.0",
+    "@types/react-test-renderer": "^19.1.0",
+    "eslint": "^8.19.0",
+    "jest": "^29.6.3",
+    "prettier": "2.8.8",
+    "react-test-renderer": "19.1.0",
+    "typescript": "^5.8.3"
+  },
+  "engines": {
+    "node": ">=18"
   }
-}
+}
diff --git a/test/smoke/suites/activation.test.ts b/test/smoke/suites/activation.test.ts
@@ -5,6 +5,8 @@ import { Page } from "playwright";
 import { SmokeTestLogger } from "./helper/smokeTestLogger";
 import { app, screenshots } from "./main";
 import assert = require("assert");
+import { ElementHelper } from "./helper/elementHelper";
+import { Constant } from "./helper/constants";
 
 export function startExtensionActivationTests(): void {
     describe("ExtensionActivationTest", () => {
@@ -40,8 +42,28 @@ export function startExtensionActivationTests(): void {
         afterEach(dispose);
 
         it("Verify extension is activated", async () => {
-            const page = await initApp();
-            const isActivited = await app.getExtension().checkExtensionActivated(page);
+            let isActivited = false;
+            await initApp();
+
+            try {
+                await ElementHelper.WaitElementSelectorVisible(
+                    `[id="${Constant.previewExtensionId}"]`,
+                    2000,
+                );
+                SmokeTestLogger.info("React-native-preview extension is activated");
+                isActivited = true;
+            } catch {
+                try {
+                    await ElementHelper.WaitElementSelectorVisible(
+                        `[id="${Constant.prodExtensionId}"]`,
+                        2000,
+                    );
+                    SmokeTestLogger.info("React-native-prod extension is activated");
+                    isActivited = true;
+                } catch {
+                    isActivited = false;
+                }
+            }
             assert.ok(isActivited, "Extension is not activated. Skip other test cases...");
         });
     });
diff --git a/test/smoke/suites/commands.test.ts b/test/smoke/suites/commands.test.ts
@@ -5,6 +5,8 @@ import { Page } from "playwright";
 import { SmokeTestLogger } from "./helper/smokeTestLogger";
 import { app, screenshots } from "./main";
 import * as assert from "assert";
+import { ElementHelper } from "./helper/elementHelper";
+import { Element } from "./helper/constants";
 
 export function startCommandPaletteTests(): void {
     describe("CommandPaletteTest", () => {
@@ -40,19 +42,20 @@ export function startCommandPaletteTests(): void {
         afterEach(dispose);
 
         it("Verify react native command is visible in command palette", async () => {
-            const page = await initApp();
+            const text = "React Native: Start Packager";
+            await initApp();
 
-            const cmdKey = process.platform === "darwin" ? "Meta" : "Control";
-            await page.keyboard.press(`${cmdKey}+Shift+P`);
-            await page.waitForSelector(".quick-input-widget", { timeout: 10000 });
+            await ElementHelper.openCommandPalette();
+            await ElementHelper.WaitElementClassNameVisible(Element.commandPaletteClassName, 5000);
 
-            await page.keyboard.type("React Native: Start Packager");
-            const option = await page.waitForSelector("#quickInput_list .monaco-list-row.focused", {
-                timeout: 30000,
-            });
+            await ElementHelper.inputText(text);
+            const option = await ElementHelper.WaitElementSelectorVisible(
+                Element.commandPaletteFocusedItemSelector,
+                5000,
+            );
 
             const value = await option.getAttribute("aria-label");
-            assert.ok(value?.includes("React Native: Start Packager"));
+            assert.ok(value?.includes(text));
         });
     });
 }
diff --git a/test/smoke/suites/helper/application.ts b/test/smoke/suites/helper/application.ts
@@ -8,12 +8,11 @@ import * as utilities from "./utilities";
 import { SmokeTestLogger } from "./smokeTestLogger";
 import * as fs from "fs";
 import * as rimraf from "rimraf";
-import { Extension } from "./extension";
+import { Element } from "./constants";
 
 export class Application {
     private app: ElectronApplication | null = null;
     private mainPage: Page | null = null;
-    private extension: Extension | null = null;
     private vscodeExecutablePath: string | null = null;
     private isExtensionActivited: boolean = false;
     private extensionDirectory = path.join(__dirname, "..", "..", ".vscode-test", "extensions");
@@ -51,7 +50,9 @@ export class Application {
         });
 
         this.mainPage = await this.app.firstWindow();
-        await this.mainPage.waitForSelector(".monaco-workbench");
+        await this.mainPage.waitForSelector(`.${Element.vscodeWorkbenchClassName}`, {
+            timeout: 10000,
+        });
 
         await utilities.sleep(5000);
         return this.mainPage;
@@ -71,7 +72,7 @@ export class Application {
         }
     }
 
-    async installExtensionFromVSIX(vscodeExecutablePath: string): Promise<Extension> {
+    async installExtensionFromVSIX(vscodeExecutablePath: string): Promise<void> {
         const [cliPath, ...args] = resolveCliArgsFromVSCodeExecutablePath(vscodeExecutablePath);
         args.push(`--extensions-dir=${this.extensionDirectory}`);
         let extensionFile = utilities.findFile(this.vsixDirectory, /.*\.(vsix)/);
@@ -87,10 +88,6 @@ export class Application {
         } else {
             utilities.spawnSync(cliPath, args, { stdio: "inherit" });
         }
-
-        const extension = new Extension();
-        this.extension = extension;
-        return extension;
     }
 
     getMainPage(): Page {
@@ -100,13 +97,6 @@ export class Application {
         return this.mainPage;
     }
 
-    getExtension(): Extension {
-        if (!this.extension) {
-            throw new Error("VSCode has not been launched yet.");
-        }
-        return this.extension;
-    }
-
     setVSCodeExecutablePath(vscodeExecutablePath: string) {
         this.vscodeExecutablePath = vscodeExecutablePath;
     }
diff --git a/test/smoke/suites/helper/constants.ts b/test/smoke/suites/helper/constants.ts
@@ -0,0 +1,10 @@
+export class Constant {
+    public static prodExtensionId = "msjsdiag.vscode-react-native.togglePackagerItem";
+    public static previewExtensionId = "msjsdiag.vscode-react-native-preview.togglePackagerItem";
+}
+
+export class Element {
+    public static vscodeWorkbenchClassName = "monaco-workbench";
+    public static commandPaletteClassName = "quick-input-widget";
+    public static commandPaletteFocusedItemSelector = "#quickInput_list .monaco-list-row.focused";
+}
diff --git a/test/smoke/suites/helper/elementHelper.ts b/test/smoke/suites/helper/elementHelper.ts
@@ -0,0 +1,42 @@
+import { ElementHandle, Page } from "playwright";
+import { app } from "../main";
+
+export class ElementHelper {
+    static setPage(): Page {
+        const application = app;
+        return application.getMainPage();
+    }
+
+    public static async openCommandPalette() {
+        const cmdKey = process.platform === "darwin" ? "Meta" : "Control";
+        await this.setPage().keyboard.press(`${cmdKey}+Shift+P`);
+    }
+
+    public static async inputText(input: string) {
+        await this.setPage().keyboard.type(input);
+    }
+
+    public static async WaitElementClassNameVisible(
+        className: string,
+        timeout: number,
+    ): Promise<ElementHandle<SVGElement | HTMLElement>> {
+        const element = await this.setPage().waitForSelector(`.${className}`, { timeout: timeout });
+        return element;
+    }
+
+    public static async WaitElementIdVisible(
+        id: string,
+        timeout: number,
+    ): Promise<ElementHandle<SVGElement | HTMLElement>> {
+        const element = await this.setPage().waitForSelector(`#${id}`, { timeout: timeout });
+        return element;
+    }
+
+    public static async WaitElementSelectorVisible(
+        selector: string,
+        timeout: number,
+    ): Promise<ElementHandle<SVGElement | HTMLElement>> {
+        const element = await this.setPage().waitForSelector(selector, { timeout: timeout });
+        return element;
+    }
+}
diff --git a/test/smoke/suites/helper/extension.ts b/test/smoke/suites/helper/extension.ts

Original file line number	Diff line number	Diff line change
`@@ -15,6 +15,7 @@ const runPrettier = async fix => {`
`15`	`15`	`"!test/smoke/.vscode-test/**",`
`16`	`16`	`"!src/*/.d.ts",`
`17`	`17`	`"!SECURITY.md",`
	`18`	`+ "!test/smoke/resources/sampleReactNativeProject/**"`
`18`	`19`	`],`
`19`	`20`	`{`
`20`	`21`	`stdio: "inherit",`