[browser] Integration test app - replace parcel with vite

.vscode/settings.json

@@ -108,8 +108,8 @@
   "eslint.format.enable": true,
   "eslint.lintTask.enable": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll.markdownlint": true, // first run the markdown linter
-    "editor.action.fixAll": true, // Run the default formatter before eslint, it handles whitespace better
-    "source.fixAll.eslint": true // then run ESLint auto-fix
+    "source.fixAll.markdownlint": "explicit",
+    "editor.action.fixAll": "explicit",
+    "source.fixAll.eslint": "explicit"
   }
 }

change/@itwin-browser-authorization-cc3b2112-dbce-491a-96ac-6796f9258e4c.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "remove parcel from browser e2e tests",
+  "packageName": "@itwin/browser-authorization",
+  "email": "ben-polinsky@users.noreply.github.com",
+  "dependentChangeType": "none"
+}

change/@itwin-electron-authorization-d50363a6-f07e-422d-86b9-3f841e25f227.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "remove networkidle from electron integration tests",
+  "packageName": "@itwin/electron-authorization",
+  "email": "ben-polinsky@users.noreply.github.com",
+  "dependentChangeType": "none"
+}

packages/browser/README.md

@@ -76,5 +76,5 @@ For information about the browser authorization workflow please visit the [Autho
 - `rush test:integration` will run integration tests for the entire repo.
 - `rushx test:integration` runs the tests only in the Browser package.
 - Playwright options are in playwright.config.ts (head-ful vs headless, timeouts, etc).
-- The tests start the /test-app using parcel before running.
-- To run only the test app: `rushx test:integration:start-test-app` and access localhost:1234 in your browser.
+- The tests start the /test-app using vite before running.
+- To run only the test app: `rushx test:integration:start-test-app` and access <http://localhost:5173> in your browser.

packages/browser/package.json

@@ -14,8 +14,8 @@
     "lint": "eslint -f visualstudio \"./src/**/*.ts\" 1>&2",
     "lint:fix": "npm run lint -- --fix",
     "test": "mocha \"./lib/cjs/test/**/*.test.js\"",
-    "test:integration:start-test-app": "parcel src/integration-tests/test-app/index.html",
     "test:integration": "playwright test src/integration-tests",
+    "test:integration:start-test-app": "vite dev",
     "cover": "nyc npm test",
     "pack": "npm pack",
     "rebuild": "npm run clean && npm run build"
@@ -43,17 +43,15 @@
     "@types/mocha": "^8.2.3",
     "@types/node": "^18.11.5",
     "@types/sinon": "^10.0.13",
-    "buffer": "~6.0.3",
     "chai": "^4.2.2",
     "dotenv": "~16.0.3",
     "eslint": "^8.56.0",
     "mocha": "^10.2.0",
     "nyc": "^17.0.0",
-    "parcel": "~2.12.0",
-    "process": "~0.11.10",
     "rimraf": "^3.0.2",
     "sinon": "^15.0.1",
-    "typescript": "~5.3.3"
+    "typescript": "~5.3.3",
+    "vite": "^6.0.3"
   },
   "peerDependencies": {
     "@itwin/core-bentley": "^3.3.0 || ^4.0.0"

packages/browser/playwright.config.ts

@@ -13,7 +13,7 @@ export default defineConfig({
   reporter,
   webServer: {
     command: "npm run test:integration:start-test-app",
-    url: "http://localhost:1234",
+    url: "http://localhost:5173",
   },
   use: {
     screenshot: "only-on-failure",

packages/browser/src/integration-tests/helpers/TestHelper.ts

@@ -56,7 +56,7 @@ export class TestHelper {
     if (authType === AuthType.PopUp)
       url += "signin-via-popup";
     if (authType === AuthType.RedirectStatic)
-      url = "http://localhost:1234/?callbackFromStorage=true";
+      url = "http://localhost:5173/?callbackFromStorage=true";
 
     expect(page.url()).toEqual(url);
   }

packages/browser/vite.config.mts

@@ -0,0 +1,14 @@
+
+import { defineConfig, loadEnv } from 'vite';
+const env = loadEnv("", process.cwd(), '');
+
+export default defineConfig({
+  root: './src/integration-tests/test-app',
+  build: {
+    outDir: '../../../dist/integration-tests/test-app',
+    emptyOutDir: true,
+  },
+  define: {
+    'process.env': env,
+  },
+});

packages/electron/src/integration-test/integration.test.ts

@@ -80,7 +80,6 @@ test.afterEach(async () => {
 });
 
 test("buttons exist", async () => {
-  await electronPage.waitForLoadState("domcontentloaded");
   const signInButton = electronPage.getByTestId("signIn");
   const signOutButton = electronPage.getByTestId("signOut");
   const getStatusButton = electronPage.getByTestId("getStatus");
@@ -95,7 +94,6 @@ test("sign in successful", async ({ browser }) => {
   await testHelper.clickSignIn(electronPage);
   const url = await getUrl(electronApp);
   await testHelper.signIn(page, url);
-  await page.waitForLoadState("networkidle");
   await testHelper.checkStatus(electronPage, true);
   await page.close();
 });
@@ -104,10 +102,8 @@ test("sign out successful", async ({ browser }) => {
   const page = await browser.newPage();
   await testHelper.clickSignIn(electronPage);
   await testHelper.signIn(page, await getUrl(electronApp));
-  await page.waitForLoadState("networkidle");
   await testHelper.checkStatus(electronPage, true);
   await testHelper.clickSignOut(electronPage);
-  await page.waitForLoadState("networkidle");
   await testHelper.checkStatus(electronPage, false);
   await page.close();
 });
@@ -116,7 +112,6 @@ test("when scopes change, sign in is required", async ({ browser }) => {
   const page = await browser.newPage();
   await testHelper.clickSignIn(electronPage);
   await testHelper.signIn(page, await getUrl(electronApp));
-  await page.waitForLoadState("networkidle");
   await testHelper.checkStatus(electronPage, true);
 
   // Admittedly this is cheating: no user would interact