Bump @vscode-elements/react-elements and fix resulting test failures

extensions/ql-vscode/package.json

@@ -2073,7 +2073,7 @@
     "@octokit/plugin-retry": "^8.1.0",
     "@octokit/plugin-throttling": "^9.6.0",
     "@octokit/rest": "^22.0.1",
-    "@vscode-elements/react-elements": "^0.9.0",
+    "@vscode-elements/react-elements": "^2.4.0",
     "@vscode/codicons": "^0.0.44",
     "@vscode/debugadapter": "^1.68.0",
     "@vscode/debugprotocol": "^1.68.0",

extensions/ql-vscode/src/view/jest.setup.ts

@@ -18,6 +18,14 @@ Object.defineProperty(window, "matchMedia", {
 // Used by Primer React
 window.CSS.supports = jest.fn().mockResolvedValue(false);
 
+// ResizeObserver is not implemented in jsdom but is used by some
+// @vscode-elements/elements components (e.g. vscode-table, vscode-form-container).
+window.ResizeObserver = class ResizeObserver {
+  observe = jest.fn();
+  unobserve = jest.fn();
+  disconnect = jest.fn();
+};
+
 // Functions that are not implemented in jsdom
 window.CSSStyleSheet.prototype.replaceSync = jest
   .fn()

extensions/ql-vscode/src/view/variant-analysis/__tests__/RepoRow.spec.tsx

@@ -1,4 +1,9 @@
-import { act, render as reactRender, screen } from "@testing-library/react";
+import {
+  act,
+  render as reactRender,
+  screen,
+  waitFor,
+} from "@testing-library/react";
 import {
   VariantAnalysisRepoStatus,
   VariantAnalysisScannedRepositoryDownloadStatus,
@@ -24,6 +29,29 @@ describe(RepoRow.name, () => {
     );
   };
 
+  // The `vscode-checkbox` web component no longer exposes a `checkbox` ARIA role
+  // on its host element (the role now lives on an <input> inside its shadow DOM,
+  // which testing-library cannot reach), so find it by tag name instead. The
+  // `disabled` property is reflected to a `disabled` attribute asynchronously by
+  // Lit, so wait for the expected state.
+  const findCheckbox = async (
+    container: HTMLElement,
+    expected: "enabled" | "disabled",
+  ): Promise<HTMLElement> => {
+    return waitFor(() => {
+      const checkbox = container.querySelector("vscode-checkbox");
+      if (!checkbox) {
+        throw new Error("Unable to find a vscode-checkbox element");
+      }
+      if (expected === "disabled") {
+        expect(checkbox).toBeDisabled();
+      } else {
+        expect(checkbox).toBeEnabled();
+      }
+      return checkbox as HTMLElement;
+    });
+  };
+
   it("renders the pending state", () => {
     render();
 
@@ -394,38 +422,35 @@ describe(RepoRow.name, () => {
   });
 
   it("does not allow selecting the item if the item has not succeeded", async () => {
-    render({
+    const { container } = render({
       status: VariantAnalysisRepoStatus.InProgress,
     });
 
-    const checkbox = await screen.findByRole("checkbox");
-    expect(checkbox).toBeDisabled();
+    await findCheckbox(container, "disabled");
   });
 
   it("does not allow selecting the item if the item has not been downloaded", async () => {
-    render({
+    const { container } = render({
       status: VariantAnalysisRepoStatus.Succeeded,
     });
 
-    const checkbox = await screen.findByRole("checkbox");
-    expect(checkbox).toBeDisabled();
+    await findCheckbox(container, "disabled");
   });
 
   it("does not allow selecting the item if the item has not been downloaded successfully", async () => {
-    render({
+    const { container } = render({
       status: VariantAnalysisRepoStatus.Succeeded,
       downloadState: {
         repositoryId: 1,
         downloadStatus: VariantAnalysisScannedRepositoryDownloadStatus.Failed,
       },
     });
 
-    const checkbox = await screen.findByRole("checkbox");
-    expect(checkbox).toBeDisabled();
+    await findCheckbox(container, "disabled");
   });
 
   it("allows selecting the item if the item has been downloaded", async () => {
-    render({
+    const { container } = render({
       status: VariantAnalysisRepoStatus.Succeeded,
       downloadState: {
         repositoryId: 1,
@@ -434,7 +459,6 @@ describe(RepoRow.name, () => {
       },
     });
 
-    const checkbox = await screen.findByRole("checkbox");
-    expect(checkbox).toBeEnabled();
+    await findCheckbox(container, "enabled");
   });
 });