[components + fullstack tests]: warning fixes (#799)

* initial test fixes

* style fixes

* docs update

* adjustments

.vscode/settings.json

@@ -89,5 +89,6 @@
   },
   "terminal.integrated.env.windows": {
     "NODE_ENV": "development"
-  }
+  },
+  "terminal.integrated.scrollback": 5000,
 }

apps/full-stack-tests/src/components/properties/ErrorHandling.test.tsx

@@ -32,6 +32,8 @@ describe("Learning snippets", () => {
     });
 
     it("handles errors", async function () {
+      // stub console log to avoid ErrorBoundary warning in console
+      const consoleStub = sinon.stub(console, "error").callsFake(() => {});
       if (Number.parseInt(PresentationRpcInterface.interfaceVersion.split(".")[0], 10) < 4) {
         // property grid started supporting error boundaries since [email protected]
         this.skip();
@@ -87,6 +89,7 @@ describe("Learning snippets", () => {
       // re-render the component, ensure we now get an error
       rerender(<MyPropertyGrid imodel={imodel} elementKey={{ ...elementKey }} />);
       await ensureHasError(container, "Network error");
+      consoleStub.restore();
     });
   });
 });

apps/full-stack-tests/src/components/properties/PresentationFilterBuilderValueRenderer.test.tsx

@@ -133,7 +133,7 @@ describe("Presentation filter builder value renderer", () => {
       },
     ];
 
-    const { baseElement, getByRole, user } = render(
+    const { baseElement, findByRole, user } = render(
       <PresentationFilterBuilderValueRenderer
         property={testProperty}
         onChange={() => {}}
@@ -146,7 +146,7 @@ describe("Presentation filter builder value renderer", () => {
     );
 
     // trigger loadTargets function
-    const combobox = await waitFor(() => getByRole("combobox"));
+    const combobox = await findByRole("combobox");
     await user.click(combobox);
     await waitFor(async () => {
       expect(queryByText(baseElement, "Value1")).to.not.be.null;
@@ -249,7 +249,7 @@ describe("Presentation filter builder value renderer", () => {
       },
     ];
 
-    const { baseElement, getByRole, user } = render(
+    const { baseElement, findByRole, user } = render(
       <PresentationFilterBuilderValueRenderer
         property={testProperty}
         onChange={() => {}}
@@ -261,7 +261,7 @@ describe("Presentation filter builder value renderer", () => {
     );
 
     // trigger loadTargets function
-    const combobox = await waitFor(() => getByRole("combobox"));
+    const combobox = await findByRole("combobox");
     await user.click(combobox);
     await waitFor(async () => {
       expect(queryByText(baseElement, "Value1")).to.not.be.null;

apps/full-stack-tests/src/components/table/ErrorHandling.test.tsx

@@ -31,6 +31,8 @@ describe("Learning snippets", () => {
     });
 
     it("handles errors", async function () {
+      // stub console log to avoid ErrorBoundary warning in console
+      const consoleStub = sinon.stub(console, "error").callsFake(() => {});
       // __PUBLISH_EXTRACT_START__ Presentation.Components.Table.ErrorHandling
       /** Props for `MyTable` and `MyProtectedTable` components */
       interface MyTableProps {
@@ -133,6 +135,7 @@ describe("Learning snippets", () => {
       // re-render the component, ensure we now get an error
       rerender(<MyTable imodel={imodel} keys={new KeySet([modelKey])} />);
       await ensureHasError(container, "Network error");
+      consoleStub.restore();
     });
   });
 });

apps/full-stack-tests/src/components/tree/ErrorHandling.test.tsx

@@ -34,6 +34,8 @@ describe("Learning snippets", () => {
     });
 
     it("handles errors", async function () {
+      // stub console log to avoid expected network error in console
+      const consoleStub = sinon.stub(console, "error").callsFake(() => {});
       // __PUBLISH_EXTRACT_START__ Presentation.Components.Tree.ErrorHandling
       function MyTree(props: { imodel: IModelConnection }) {
         const state = usePresentationTreeState({
@@ -98,6 +100,7 @@ describe("Learning snippets", () => {
       expect(() => getNodeByLabel(container, `My Model A`)).to.throw();
       expect(() => getNodeByLabel(container, `My Model B`)).to.throw();
       expect(getByText("Èrrór ¢rëätíñg thë hìérärçhý lévêl")).is.not.null;
+      consoleStub.restore();
     });
   });
 });

apps/full-stack-tests/src/components/tree/HierarchyLevelLimiting.test.tsx

@@ -7,6 +7,7 @@
 import { expect } from "chai";
 import { insertPhysicalElement, insertPhysicalModelWithPartition, insertSpatialCategory } from "presentation-test-utilities";
 import { useState } from "react";
+import sinon from "sinon";
 import { SelectionMode, TreeRendererProps, UiComponents } from "@itwin/components-react";
 import { IModelApp, IModelConnection } from "@itwin/core-frontend";
 import { PresentationRpcInterface, Ruleset } from "@itwin/presentation-common";
@@ -31,6 +32,8 @@ describe("Learning snippets", () => {
     });
 
     it("limits hierarchy level size", async function () {
+      // stub console log to avoid hierarchy limit warning in console
+      const consoleStub = sinon.stub(console, "log").callsFake(() => {});
       if (Number.parseInt(PresentationRpcInterface.interfaceVersion.split(".")[0], 10) < 4) {
         // hierarchy level size limiting requires core libraries at least @4.0
         this.skip();
@@ -98,6 +101,7 @@ describe("Learning snippets", () => {
         expect(() => getNodeByLabel(container, `B element ${i + 1}`)).to.throw();
       }
       await waitFor(() => expect(getByText(`thèré ârë möré îtëms thâñ älløwèd límît õf ${hierarchyLevelSizeLimit}`, { exact: false })).is.not.null);
+      consoleStub.restore();
     });
   });
 });

apps/full-stack-tests/src/components/tree/TreeDataProvider.test.ts

@@ -92,6 +92,8 @@ describe("TreeDataProvider", async () => {
   });
 
   it("creates error node when requesting root nodes with invalid paging", async () => {
+    // stub console log to avoid expected error in console
+    const consoleStub = sinon.stub(console, "error").callsFake(() => {});
     provider.pagingSize = 5;
     const nodes = await provider.getNodes(undefined, { start: 1, size: 5 });
     if (nodes.length === 1) {
@@ -102,6 +104,7 @@ describe("TreeDataProvider", async () => {
       // [email protected] returns an empty list in case of invalid page options
       expect(nodes).to.be.empty;
     }
+    consoleStub.restore();
   });
 
   it("returns child nodes count", async () => {
@@ -124,6 +127,8 @@ describe("TreeDataProvider", async () => {
   });
 
   it("returns error node when requesting child nodes with invalid paging", async () => {
+    // stub console log to avoid expected error in console
+    const consoleStub = sinon.stub(console, "error").callsFake(() => {});
     const rootNodes = await provider.getNodes();
     provider.pagingSize = 5;
     const nodes = await provider.getNodes(rootNodes[0], { start: 1, size: 5 });
@@ -135,6 +140,7 @@ describe("TreeDataProvider", async () => {
       // [email protected] returns an empty list in case of invalid page options
       expect(nodes).to.be.empty;
     }
+    consoleStub.restore();
   });
 
   it("requests backend only once to get first page", async () => {

apps/full-stack-tests/src/hierarchies-react/learning-snipptets/Localization.test.tsx

@@ -138,7 +138,7 @@ describe("Hierarchies React", () => {
         type TreeProps = ComponentPropsWithoutRef<typeof Tree<RenderedTreeNode>>;
         type TreeRendererProps = Props<typeof TreeRenderer>;
 
-        function MyTreeRenderer(props: TreeRendererProps) {
+        function MyTreeRenderer({ rootNodes }: TreeRendererProps) {
           const nodeRenderer = useCallback<TreeProps["nodeRenderer"]>((nodeProps) => {
             return <TreeNodeRenderer {...nodeProps} onFilterClick={() => {}} expandNode={() => {}} />;
           }, []);
@@ -147,7 +147,7 @@ describe("Hierarchies React", () => {
 
           return (
             <LocalizationContextProvider localizedStrings={localizedStrings}>
-              <Tree<RenderedTreeNode> {...props} data={props.rootNodes} nodeRenderer={nodeRenderer} getNode={getNode} />
+              <Tree<RenderedTreeNode> data={rootNodes} nodeRenderer={nodeRenderer} getNode={getNode} enableVirtualization={true} />
             </LocalizationContextProvider>
           );
         }

apps/full-stack-tests/src/hierarchies-react/learning-snipptets/ReadmeExample.test.tsx

@@ -183,7 +183,7 @@ describe("Hierarchies React", () => {
 
         const { getByText } = render(<MyTreeComponentInternal imodelAccess={createIModelAccess(iModel)} />);
 
-        expect(getByText("No data to display")).to.not.be.null;
+        await waitFor(() => expect(getByText("No data to display")).to.not.be.null);
       });
     });
   });

apps/full-stack-tests/src/unified-selection/HiliteSet.test.ts

@@ -4,7 +4,6 @@
  *--------------------------------------------------------------------------------------------*/
 
 import { expect } from "chai";
-import * as fs from "fs";
 import path from "path";
 import {
   getDefaultSubcategoryKey,
@@ -28,6 +27,7 @@ import { ECSchemaRpcImpl } from "@itwin/ecschema-rpcinterface-impl";
 import { buildTestIModel, initialize, terminate } from "@itwin/presentation-testing";
 import { createHiliteSetProvider, SelectableInstanceKey, Selectables } from "@itwin/unified-selection";
 import { createIModelAccess } from "../hierarchies/Utils.js";
+import { getSchemaFromPackage } from "./getSchema.js";
 
 describe("HiliteSet", () => {
   let iModel: IModelConnection;
@@ -201,6 +201,8 @@ describe("HiliteSet", () => {
         // eslint-disable-next-line @typescript-eslint/no-deprecated
         iModel = await buildTestIModel(this, async (builder) => {
           const modelKey = insertPhysicalModelWithPartition({ builder, codeValue: "test model" });
+          const schema = await getSchemaFromPackage("functional-schema", "Functional.ecschema.xml");
+          await builder.importSchema(schema);
           const categoryKey = insertSpatialCategory({ builder, codeValue: "test category" });
           assemblyKey = insertPhysicalElement({ builder, userLabel: "element 1", modelId: modelKey.id, categoryId: categoryKey.id });
           const element2 = insertPhysicalElement({
@@ -236,6 +238,8 @@ describe("HiliteSet", () => {
         // eslint-disable-next-line @typescript-eslint/no-deprecated
         iModel = await buildTestIModel(this, async (builder) => {
           const modelKey = insertPhysicalModelWithPartition({ builder, codeValue: "test model" });
+          const schema = await getSchemaFromPackage("functional-schema", "Functional.ecschema.xml");
+          await builder.importSchema(schema);
           const categoryKey = insertSpatialCategory({ builder, codeValue: "test category" });
           elementKey = insertPhysicalElement({ builder, userLabel: "element", modelId: modelKey.id, categoryId: categoryKey.id });
         });
@@ -252,6 +256,8 @@ describe("HiliteSet", () => {
         // eslint-disable-next-line @typescript-eslint/no-deprecated
         iModel = await buildTestIModel(this, async (builder) => {
           const modelKey = insertPhysicalModelWithPartition({ builder, codeValue: "test model" });
+          const schema = await getSchemaFromPackage("functional-schema", "Functional.ecschema.xml");
+          await builder.importSchema(schema);
           const categoryKey = insertSpatialCategory({ builder, codeValue: "test category" });
           elementKeys = [
             insertPhysicalElement({ builder, userLabel: "element", modelId: modelKey.id, categoryId: categoryKey.id }),
@@ -271,11 +277,6 @@ describe("HiliteSet", () => {
     });
 
     describe("Functional element", () => {
-      async function getSchemaFromPackage(packageName: string, schemaFileName: string): Promise<string> {
-        const schemaFile = path.join(import.meta.dirname, "..", "..", "node_modules", "@bentley", packageName, schemaFileName);
-        return fs.readFileSync(schemaFile, "utf8");
-      }
-
       it("hilites functional element related physical elements", async function () {
         let functionalElement: SelectableInstanceKey;
         let physicalElement: SelectableInstanceKey;
@@ -378,6 +379,8 @@ describe("HiliteSet", () => {
         // eslint-disable-next-line @typescript-eslint/no-deprecated
         iModel = await buildTestIModel(this, async (builder) => {
           const groupModel = insertGroupInformationModelWithPartition({ builder, codeValue: "group information model" });
+          const schema = await getSchemaFromPackage("functional-schema", "Functional.ecschema.xml");
+          await builder.importSchema(schema);
           const physicalModelKey = insertPhysicalModelWithPartition({ builder, codeValue: "test physical model" });
           const categoryKey = insertSpatialCategory({ builder, codeValue: "test category" });
           groupInformationElement = insertGroupInformationElement({

apps/full-stack-tests/src/unified-selection/SelectionScope.test.ts

@@ -4,7 +4,6 @@
  *--------------------------------------------------------------------------------------------*/
 
 import { expect } from "chai";
-import * as fs from "fs";
 import path from "path";
 import {
   insertDrawingCategory,
@@ -24,6 +23,7 @@ import { createECSqlQueryExecutor } from "@itwin/presentation-core-interop";
 import { Props } from "@itwin/presentation-shared";
 import { buildTestIModel, initialize, terminate } from "@itwin/presentation-testing";
 import { computeSelection, SelectableInstanceKey } from "@itwin/unified-selection";
+import { getSchemaFromPackage } from "./getSchema.js";
 
 describe("SelectionScope", () => {
   let iModel: IModelConnection;
@@ -43,11 +43,6 @@ describe("SelectionScope", () => {
     await terminate();
   });
 
-  async function getSchemaFromPackage(packageName: string, schemaFileName: string): Promise<string> {
-    const schemaFile = path.join(import.meta.dirname, "..", "..", "node_modules", "@bentley", packageName, schemaFileName);
-    return fs.readFileSync(schemaFile, "utf8");
-  }
-
   async function getSelection(keys: string[], scope: Props<typeof computeSelection>["scope"]): Promise<SelectableInstanceKey[]> {
     const selectables: SelectableInstanceKey[] = [];
     for await (const selectable of computeSelection({ queryExecutor: createECSqlQueryExecutor(iModel), elementIds: keys, scope })) {

apps/full-stack-tests/src/unified-selection/getSchema.ts

@@ -0,0 +1,12 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+
+import * as fs from "fs";
+import path from "path";
+
+export async function getSchemaFromPackage(packageName: string, schemaFileName: string): Promise<string> {
+  const schemaFile = path.join(import.meta.dirname, "..", "..", "node_modules", "@bentley", packageName, schemaFileName);
+  return fs.readFileSync(schemaFile, "utf8");
+}

packages/components/src/presentation-components/properties/inputs/UniquePropertyValuesSelector.tsx

@@ -35,7 +35,7 @@ export interface UniquePropertyValuesSelectorProps {
 export function UniquePropertyValuesSelector(props: UniquePropertyValuesSelectorProps) {
   const { imodel, descriptor, property, onChange, value, descriptorInputKeys, selectedClasses } = props;
   const [field, setField] = useState<Field | undefined>(() => findField(descriptor, getInstanceFilterFieldName(property)));
-  const [searchInput, setSearchInput] = useState<string>();
+  const [searchInput, setSearchInput] = useState<string>("");
   const selectedValues = useMemo(() => getUniqueValueFromProperty(value)?.map((val) => val.displayValue), [value]);
   const ruleset = useUniquePropertyValuesRuleset(descriptor.ruleset, field, descriptorInputKeys, selectedClasses);
   const { selectOptions, loadedOptions, isLoading } = useUniquePropertyValuesLoader({

packages/components/src/presentation-components/table/CellRenderer.tsx

@@ -10,7 +10,7 @@ import { useState } from "react";
 import { ArrayValue, PropertyRecord, PropertyValueFormat } from "@itwin/appui-abstract";
 import { NonPrimitivePropertyRenderer, PropertyValueRendererManager } from "@itwin/components-react";
 import { Orientation } from "@itwin/core-react";
-import { Anchor, Modal } from "@itwin/itwinui-react";
+import { Anchor, Modal, ModalContent } from "@itwin/itwinui-react";
 
 /**
  * Props for [[TableCellRenderer]] component.
@@ -74,6 +74,7 @@ function NonPrimitiveCellRenderer(props: NonPrimitiveCellRendererProps) {
   const { record, dialogLabel, buttonLabel, uniqueKey } = props;
   const [isOpen, setIsOpen] = useState(false);
 
+  // modal window when opened causes findDOMNode warning https://github.com/iTwin/iTwinUI/issues/2199
   return (
     <>
       <Anchor
@@ -84,9 +85,11 @@ function NonPrimitiveCellRenderer(props: NonPrimitiveCellRendererProps) {
         {buttonLabel}
       </Anchor>
       <Modal isOpen={isOpen} title={dialogLabel} onClose={/* c8 ignore next */ () => setIsOpen(false)} className="presentation-components-non-primitive-value">
-        {/* Can't change our import to `components-react`, because it was added there in a version later than our peer dependency */}
-        {/* eslint-disable-next-line @typescript-eslint/no-deprecated */}
-        <NonPrimitivePropertyRenderer uniqueKey={uniqueKey} propertyRecord={record} orientation={Orientation.Horizontal} />
+        <ModalContent>
+          {/* Can't change our import to `components-react`, because it was added there in a version later than our peer dependency */}
+          {/* eslint-disable-next-line @typescript-eslint/no-deprecated */}
+          <NonPrimitivePropertyRenderer uniqueKey={uniqueKey} propertyRecord={record} orientation={Orientation.Horizontal} />
+        </ModalContent>
       </Modal>
     </>
   );

packages/components/src/test/instance-filter-builder/PresentationInstanceFilterDialog.test.tsx

@@ -327,6 +327,8 @@ describe("PresentationInstanceFilterDialog", () => {
 
   it("throws error when filter is missing presentation metadata", async () => {
     const fromComponentsPropertyFilterStub = sinon.stub(PresentationInstanceFilter, "fromComponentsPropertyFilter").throws(new Error("Some Error"));
+    // stub console log to avoid expected error in console
+    const consoleErrorStub = sinon.stub(console, "error").callsFake(() => {});
     const spy = sinon.spy();
     const { baseElement, user } = render(<PresentationInstanceFilterDialog imodel={imodel} propertiesSource={propertiesSource} onApply={spy} isOpen={true} />, {
       addThemeProvider: true,
@@ -350,6 +352,7 @@ describe("PresentationInstanceFilterDialog", () => {
 
     await waitFor(() => expect(queryByText(baseElement, "general.error")).to.not.be.null);
     fromComponentsPropertyFilterStub.restore();
+    consoleErrorStub.restore();
   });
 
   it("renders custom title", async () => {
@@ -383,6 +386,8 @@ describe("PresentationInstanceFilterDialog", () => {
   });
 
   it("renders error boundary if error is thrown", async () => {
+    // stub console log to avoid expected error in console
+    const consoleErrorStub = sinon.stub(console, "error").callsFake(() => {});
     const propertiesSourceGetter = () => {
       throw new Error("Cannot load descriptor");
     };
@@ -392,6 +397,7 @@ describe("PresentationInstanceFilterDialog", () => {
     );
 
     await waitFor(() => expect(queryByText(baseElement, "general.error")).to.not.be.null);
+    consoleErrorStub.restore();
   });
 
   it("renders with lazy-loaded descriptor", async () => {