Updated all dependencies except eslint

.github/workflows/CI.yml

@@ -46,6 +46,13 @@ jobs:
       - name: Check unit test coverage
         run: npm run test:cover --prefix ./presentation-rules-editor-react
 
-      - name: Run end-to-end tests
-        run: npm test --prefix ./app/e2e-tests
+      - name: Run end-to-end tests with local configuration
+        run: npm run test --prefix ./app/e2e-tests
         timeout-minutes: 5
+        env:
+          CI: true
+      - name: Run end-to-end tests with web configuration
+        run: npm run test:web --prefix ./app/e2e-tests
+        timeout-minutes: 5
+        env:
+          CI: true

.gitignore

@@ -1,6 +1,8 @@
-.env
+.env.local
 .pnpm-debug.log
 build
 coverage
 lib
 node_modules
+/**/playwright-report
+/**/test-results

.vscode/settings.json

@@ -41,6 +41,7 @@
     "unstringified",
     "unsymlinking",
     "viewports",
+    "vite",
     "widgetid"
   ],
   "cSpell.ignoreWords": [

CONTRIBUTING.md

@@ -11,6 +11,10 @@ Follow the [steps for running the application](./README.md#using). These actuall
 - `app/` — contains source code for the editor application.
 - `presentation-rules-editor-react/` — contains reusable components that can be added to other applications that wish to integrate a presentation ruleset editor.
 
+### Environment variables
+
+- `app/frontend/` — has a `.env` file which has `OAUTH_CLIENT_ID` set to the same value that used in production. However, if you try to Sign In using this client, it won't work. You need to set create a new client and use it's value in `.env.local`. See [.env](app/frontend/.env) for details.
+
 ### Localization
 
 Localization provides very limited value to Presentation Rules Editor because the ruleset schema and the documentation is only available in the English language. Nevertheless, we do attempt to prepare user-facing strings for localization when it is not inconvenient.

README.md

@@ -15,17 +15,23 @@ To start editing rulesets, you will need to build the editor application:
    npx pnpm install
    ```
 
-3. Start the application:
+3. Build presentation-rules-editor-react (if it was never built prior):
+
+   ```shell
+   npm run build:components
+   ```
+
+4. Start the application:
 
    ```shell
    npm start
    ```
 
-4. Select an imodel within the launched browser window.
+5. Select an imodel within the launched browser window.
 
    > If you have a snapshot imodel, put it inside `app/backend/assets/imodels` folder.
 
-5. You will now be presented with a ruleset editor.
+6. You will now be presented with a ruleset editor.
 
 ## Contributing
 

app/backend/package.json

@@ -15,24 +15,23 @@
   },
   "dependencies": {
     "@app/common": "workspace:*",
-    "@itwin/core-backend": "^4.10.0",
-    "@itwin/core-bentley": "^4.10.0",
-    "@itwin/core-common": "^4.10.0",
-    "@itwin/core-geometry": "^4.10.0",
-    "@itwin/core-quantity": "^4.10.0",
-    "@itwin/ecschema-metadata": "^4.10.0",
-    "@itwin/ecschema-rpcinterface-common": "^4.10.0",
-    "@itwin/ecschema-rpcinterface-impl": "^4.10.0",
+    "@itwin/core-backend": "^4.10.2",
+    "@itwin/core-bentley": "^4.10.2",
+    "@itwin/core-common": "^4.10.2",
+    "@itwin/core-geometry": "^4.10.2",
+    "@itwin/core-quantity": "^4.10.2",
+    "@itwin/ecschema-metadata": "^4.10.2",
+    "@itwin/ecschema-rpcinterface-common": "^4.10.2",
+    "@itwin/ecschema-rpcinterface-impl": "^4.10.2",
     "@itwin/eslint-plugin": "^4.1.1",
-    "@itwin/express-server": "^4.10.0",
-    "@itwin/imodels-access-backend": "^4.1.5",
-    "@itwin/presentation-backend": "^4.10.0",
-    "@itwin/presentation-common": "^4.10.0",
+    "@itwin/express-server": "^4.10.2",
+    "@itwin/imodels-access-backend": "^5.2.3",
+    "@itwin/presentation-backend": "^4.10.2",
+    "@itwin/presentation-common": "^4.10.2",
     "@types/node": "^20.17.6",
-    "dotenv": "^10.0.0",
+    "dotenv": "^16.4.5",
     "eslint": "^8.57.1",
-    "pretty-bytes": "^5.6.0",
     "ts-node-dev": "^2.0.0",
-    "typescript": "^4.9.5"
+    "typescript": "^5.7.2"
   }
 }

app/backend/src/PresentationRulesEditorRpcImpl.ts

@@ -3,13 +3,12 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 
+import { IModelMetadata, PresentationRulesEditorRpcInterface } from "@app/common";
+import { RpcManager } from "@itwin/core-common";
 import { execFileSync } from "child_process";
 import * as fs from "fs";
 import * as os from "os";
 import * as path from "path";
-import * as prettyBytes from "pretty-bytes";
-import { IModelMetadata, PresentationRulesEditorRpcInterface } from "@app/common";
-import { RpcManager } from "@itwin/core-common";
 import { SnapshotFileNameResolver } from "./SnapshotFileNameResolver";
 
 /** The backend implementation of PresentationRulesEditorRpcInterface. */
@@ -25,10 +24,19 @@ export class PresentationRulesEditorRpcImpl extends PresentationRulesEditorRpcIn
       .filter((entry) => entry.isFile() && (entry.name.endsWith(".ibim") || entry.name.endsWith(".bim")))
       .map((file) => {
         const entry = fs.statSync(path.join(dir, file.name));
-        return { name: file.name, dateModified: entry.mtime, size: prettyBytes(entry.size) };
+        return { name: file.name, dateModified: entry.mtime, size: this.formatBytes(entry.size) };
       });
   }
 
+  private formatBytes(bytes: number) {
+    const k = 1024;
+    const dm = 2;
+    const sizes = ["B", "KB", "MB", "GB", "TB", "PB"];
+
+    const i = Math.max(0, Math.floor(Math.log(bytes) / Math.log(k)));
+    return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
+  }
+
   public override async openIModelsDirectory(): Promise<void> {
     let command: string;
     let args: string[];

app/common/package.json

@@ -11,15 +11,15 @@
     "lint": "eslint **/*.{ts,tsx}"
   },
   "dependencies": {
-    "@itwin/core-bentley": "^4.10.0",
-    "@itwin/core-common": "^4.10.0",
-    "@itwin/core-geometry": "^4.10.0",
-    "@itwin/core-quantity": "^4.10.0",
-    "@itwin/ecschema-metadata": "^4.10.0",
-    "@itwin/ecschema-rpcinterface-common": "^4.10.0",
+    "@itwin/core-bentley": "^4.10.2",
+    "@itwin/core-common": "^4.10.2",
+    "@itwin/core-geometry": "^4.10.2",
+    "@itwin/core-quantity": "^4.10.2",
+    "@itwin/ecschema-metadata": "^4.10.2",
+    "@itwin/ecschema-rpcinterface-common": "^4.10.2",
     "@itwin/eslint-plugin": "^4.1.1",
-    "@itwin/presentation-common": "^4.10.0",
+    "@itwin/presentation-common": "^4.10.2",
     "eslint": "^8.57.1",
-    "typescript": "^4.9.5"
+    "typescript": "^5.7.2"
   }
 }

app/e2e-tests/package.json

@@ -3,34 +3,29 @@
   "version": "0.0.1",
   "license": "MIT",
   "private": true,
+  "type": "module",
   "author": {
     "name": "Bentley Systems, Inc.",
     "url": "https://www.bentley.com"
   },
   "scripts": {
     "start": "npm test",
     "lint": "eslint ./src/**/*.{ts,tsx}",
-    "test": "mocha -r ts-node/register/transpile-only --timeout 60000 --exit --grep '#local' '**/*.test.ts'",
-    "test:web": "cross-env WEB_TEST=1 mocha -r ts-node/register/transpile-only --timeout 60000 --exit --grep '#web' '**/*.test.ts'",
-    "test:web:junit": "npm run test:web -- --reporter mocha-junit-reporter",
-    "test:debug": "cross-env PWDEBUG=1 mocha -r ts-node/register/transpile-only --timeout 99999999 --exit --grep '#local' '**/*.test.ts'",
+    "test": "npx playwright test --grep=#local",
+    "test:web": "cross-env WEB_TEST=1 npx playwright test --grep=#web",
+    "test:debug": "npx playwright test --grep=#local --ui",
+    "test:web:debug": "npx playwright test --grep=#web --ui",
     "typecheck": "tsc --noEmit",
     "typecheck:watch": "tsc --noEmit --watch",
     "prepare": "playwright install chromium"
   },
   "dependencies": {
+    "@playwright/test": "^1.49.0",
     "@itwin/eslint-plugin": "^4.1.1",
-    "@types/chai": "^4.3.12",
-    "@types/mocha": "^10.0.6",
     "@types/node": "^20.17.6",
-    "chai": "^4.4.1",
     "cross-env": "^7.0.3",
     "eslint": "^8.57.1",
-    "jest-dev-server": "^10.0.0",
-    "mocha": "^10.3.0",
-    "mocha-junit-reporter": "^2.2.1",
-    "playwright": "^1.48.2",
-    "ts-node": "^10.9.2",
-    "typescript": "^4.9.5"
+    "playwright": "^1.49.0",
+    "typescript": "^5.7.2"
   }
 }

app/e2e-tests/playwright.config.ts

@@ -0,0 +1,62 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import { defineConfig, devices } from "@playwright/test";
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: "./src",
+  /* Maximum time one test can run for. */
+  timeout: 60000,
+  /** Settings for `expect` calls */
+  expect: {
+    /** Increase the timeout from 5 s. to 30 s. */
+    timeout: 30 * 1000,
+  },
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: [["list"], ["html", { open: "never" }]],
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: "http://localhost:3000",
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: "on-first-retry",
+    headless: true,
+  },
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: "setup",
+      testMatch: /.*\.setup\.ts/,
+    },
+    {
+      name: "chromium",
+      use: {
+        ...devices["Desktop Chrome"],
+      },
+      dependencies: ["setup"],
+    },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: [
+    {
+      command: "npm start --prefix ../frontend",
+      url: "http://localhost:3000/",
+      reuseExistingServer: !process.env.CI,
+    },
+    {
+      command: "npm start --prefix ../backend",
+      url: "http://localhost:3001/",
+    },
+  ],
+});

app/e2e-tests/src/demo-imodel.test.ts

@@ -3,12 +3,12 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 
-import { page } from "./setup";
-import { getWidget, openDemoIModel } from "./utils";
+import { test } from "@playwright/test";
+import { getWidget, openDemoIModel } from "./utils.js";
 
 // TODO: enable this test when demo imodels work in all environments.
-describe.skip("demo iModel #web", () => {
-  it("opens", async () => {
+test.describe.skip("demo iModel #web", () => {
+  test("opens", async ({ page }) => {
     await openDemoIModel(page);
     const treeWidget = getWidget(page, "Tree");
     await treeWidget.locator(".core-tree-node").first().waitFor();

app/e2e-tests/src/header.test.ts

@@ -3,55 +3,56 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 
-import { expect } from "chai";
-import { page } from "./setup";
-import { openDemoIModel, openTestIModel } from "./utils";
+import { expect, test } from "@playwright/test";
+import { openDemoIModel, openTestIModel } from "./utils.js";
 
-describe("header #local", () => {
-  beforeEach(async () => {
+test.describe("header #local", () => {
+  test.beforeEach(async ({ page }) => {
     await openTestIModel(page);
   });
 
-  it("populates header with opened snapshot information", async () => {
+  test("populates header with opened snapshot information", async ({ page }) => {
     const header = page.getByRole("navigation", { name: "breadcrumbs" });
-    expect(await header.getByText("Local snapshots").isVisible()).to.be.true;
-    expect(await header.getByText("Baytown.bim").isVisible()).to.be.true;
+    expect(await header.getByText("Local snapshots").isVisible()).toBeTruthy();
+    expect(await header.getByText("Baytown.bim").isVisible()).toBeTruthy();
   });
 
-  it("allows navigating to snapshot iModels browser", async () => {
+  test("allows navigating to snapshot iModels browser", async ({ page }) => {
     await page.getByText("Local snapshots").click();
     await page.getByRole("tab", { name: "Local snapshots", selected: true }).waitFor();
   });
 
-  it("clears breadcrumbs after navigating to home", async () => {
+  test("clears breadcrumbs after navigating to home", async ({ page }) => {
     await page.getByText("Local snapshots").click();
+    await page.getByText("Demo iModels").waitFor({ state: "visible" });
     const header = page.getByRole("navigation", { name: "breadcrumbs" });
     await header.waitFor({ state: "attached" });
-    expect(await header.textContent()).to.be.empty;
+    expect(await header.textContent()).toEqual("");
   });
 });
 
-describe("header #web", () => {
-  beforeEach(async () => {
+test.describe("header #web", () => {
+  test.beforeEach(async ({ page }) => {
     await openDemoIModel(page);
   });
 
-  it("populates header with opened demo iModel information", async () => {
+  test("populates header with opened demo iModel information", async ({ page }) => {
     const header = page.getByRole("navigation", { name: "breadcrumbs" });
     await header.waitFor();
-    expect(await header.getByText("Demo iModel").isVisible()).to.be.true;
-    expect(await header.getByText("Bay Town Process Plant").isVisible()).to.be.true;
+    expect(await header.getByText("Demo iModel").isVisible()).toBeTruthy();
+    expect(await header.getByText("Bay Town Process Plant").isVisible()).toBeTruthy();
   });
 
-  it("allows navigating to demo iModels browser", async () => {
+  test("allows navigating to demo iModels browser", async ({ page }) => {
     await page.getByText("Demo iModels").click();
     await page.getByRole("tab", { name: "Demo iModels", selected: true }).waitFor();
   });
 
-  it("clears breadcrumbs after navigating to home", async () => {
+  test("clears breadcrumbs after navigating to home", async ({ page }) => {
     await page.getByText("Presentation Rules Editor").click();
+    await page.getByText("Demo iModels").waitFor({ state: "visible" });
     const header = page.getByRole("navigation", { name: "breadcrumbs" });
     await header.waitFor({ state: "attached" });
-    expect(await header.textContent()).to.be.empty;
+    expect(await header.textContent()).toEqual("");
   });
 });