Updates to table page objects

change/@ni-nimble-angular-191b642d-e86c-429e-abca-60e140900a1e.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Export mapping column page object; extend the table page object in Angular to have an async function to wait for data to render when using the `data$` property of the table directive",
+  "packageName": "@ni/nimble-angular",
+  "email": "20542556+mollykreis@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@ni-nimble-components-465d704e-4a86-45c9-b5a6-4ccdfe6951b1.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Add function to the table page object for getting the text content of a column header",
+  "packageName": "@ni/nimble-components",
+  "email": "20542556+mollykreis@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/angular-workspace/nimble-angular/table-column/mapping/testing/ng-package.json

@@ -0,0 +1,6 @@
+{
+    "$schema": "../../../../../../node_modules/ng-packagr/ng-package.schema.json",
+    "lib": {
+      "entryFile": "public-api.ts"
+    }
+}

packages/angular-workspace/nimble-angular/table-column/mapping/testing/public-api.ts

@@ -0,0 +1 @@
+export * from './table-column-mapping.pageobject';

packages/angular-workspace/nimble-angular/table-column/mapping/testing/table-column-mapping.pageobject.ts

@@ -0,0 +1,3 @@
+import { TableColumnMappingPageObject } from '@ni/nimble-components/dist/esm/table-column/mapping/testing/table-column-mapping.pageobject';
+
+export { TableColumnMappingPageObject };

packages/angular-workspace/nimble-angular/table/testing/table.pageobject.ts

@@ -1,3 +1,35 @@
-import { TablePageObject } from '@ni/nimble-components/dist/esm/table/testing/table.pageobject';
+import { TablePageObject as NimbleComponentsTablePageObject } from '@ni/nimble-components/dist/esm/table/testing/table.pageobject';
+import { waitForUpdatesAsync } from '@ni/nimble-angular';
+import type { Table, TableRecord } from '@ni/nimble-angular/table';
 
-export { TablePageObject };
+/**
+ * The page object for the `nimble-table` component to provide consistent ways of querying
+ * and interacting with the component during tests.
+ *
+ * This Angular version of the page object extends the nimble-components version to add the ability
+ * to wait for data updates to be applied to the table since the timing isn't easily observable
+ * when using the `data$` property.
+ */
+export class TablePageObject<T extends TableRecord> extends NimbleComponentsTablePageObject<T> {
+    private mostRecentSetDataPromise?: Promise<void>;
+
+    public constructor(tableElement: Table<T>) {
+        super(tableElement);
+
+        // Cache the most recent promise returned from calls to setData() on the nimble table
+        // so that we can appropriately wait for them to complete to know when the Angular
+        // data$ Observable has been applied to the table.
+        const originalSetDataFn = tableElement.setData.bind(tableElement);
+        tableElement.setData = async (...args): Promise<void> => {
+            this.mostRecentSetDataPromise = originalSetDataFn(...args);
+            return this.mostRecentSetDataPromise;
+        };
+    }
+
+    public async waitForDataUpdatesToRender(): Promise<void> {
+        if (this.mostRecentSetDataPromise) {
+            await this.mostRecentSetDataPromise;
+        }
+        await waitForUpdatesAsync();
+    }
+}

packages/nimble-components/src/table/testing/table.pageobject.ts

@@ -80,6 +80,14 @@ export class TablePageObject<T extends TableRecord> {
         );
     }
 
+    public getHeaderTextContent(columnIndex: number): string {
+        return (
+            this.getHeaderContent(
+                columnIndex
+            )?.firstChild?.textContent?.trim() ?? ''
+        );
+    }
+
     public dispatchEventToHeader(
         columnIndex: number,
         event: Event