feat(components/grids): add test harness for grid component

libs/components/grids/package.json

@@ -16,6 +16,7 @@
   },
   "homepage": "https://github.com/blackbaud/skyux#readme",
   "peerDependencies": {
+    "@angular/cdk": "^20.2.3",
     "@angular/common": "^20.3.0",
     "@angular/core": "^20.3.0",
     "@angular/forms": "^20.3.0",

libs/components/grids/project.json

@@ -4,6 +4,7 @@
   "projectType": "library",
   "sourceRoot": "libs/components/grids/src",
   "prefix": "sky",
+  "tags": ["component", "npm"],
   "targets": {
     "build": {
       "executor": "@nx/angular:package",
@@ -19,7 +20,21 @@
           "tsConfig": "libs/components/grids/tsconfig.lib.json"
         }
       },
-      "defaultConfiguration": "production"
+      "defaultConfiguration": "production",
+      "dependsOn": [
+        "^build",
+        {
+          "projects": ["core"],
+          "target": "build"
+        }
+      ],
+      "inputs": [
+        "buildInputs",
+        "^buildInputs",
+        "{workspaceRoot}/libs/components/grids/testing/src/**/*",
+        "!{workspaceRoot}/libs/components/grids/testing/src/**/*.spec.ts",
+        "!{workspaceRoot}/libs/components/grids/testing/src/**/fixtures/**/*"
+      ]
     },
     "test": {
       "executor": "@angular-devkit/build-angular:karma",
@@ -61,6 +76,5 @@
         ]
       }
     }
-  },
-  "tags": ["component", "npm"]
+  }
 }

libs/components/grids/testing/eslint.config.js

@@ -0,0 +1,5 @@
+const prettier = require('eslint-config-prettier');
+const baseConfig = require('../../../../eslint-base.config');
+const overrides = require('../../../../eslint-overrides.config');
+
+module.exports = [...baseConfig, ...overrides, prettier];

libs/components/grids/testing/karma.conf.js

@@ -0,0 +1,19 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+const { join } = require('path');
+const getBaseKarmaConfig = require('../../../../karma.conf');
+
+module.exports = function (config) {
+  const baseConfig = getBaseKarmaConfig();
+  config.set({
+    ...baseConfig,
+    coverageReporter: {
+      ...baseConfig.coverageReporter,
+      dir: join(
+        __dirname,
+        '../../../../coverage/libs/components/grids/testing',
+      ),
+    },
+  });
+};

libs/components/grids/testing/ng-package.json

@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

libs/components/grids/testing/project.json

@@ -0,0 +1,47 @@
+{
+  "name": "grids-testing",
+  "$schema": "../../../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "library",
+  "sourceRoot": "libs/components/grids/testing/src",
+  "prefix": "sky",
+  "tags": ["testing"],
+  "targets": {
+    "test": {
+      "executor": "@angular-devkit/build-angular:karma",
+      "options": {
+        "tsConfig": "libs/components/grids/testing/tsconfig.spec.json",
+        "karmaConfig": "libs/components/grids/testing/karma.conf.js",
+        "codeCoverage": true,
+        "codeCoverageExclude": ["**/fixtures/**"],
+        "styles": [
+          "libs/components/theme/src/lib/styles/sky.scss",
+          "libs/components/theme/src/lib/styles/themes/modern/styles.scss"
+        ],
+        "polyfills": [
+          "zone.js",
+          "zone.js/testing",
+          "libs/components/packages/src/polyfills.js"
+        ],
+        "inlineStyleLanguage": "scss",
+        "stylePreprocessorOptions": {
+          "includePaths": ["{workspaceRoot}"]
+        }
+      },
+      "configurations": {
+        "ci": {
+          "browsers": "ChromeHeadlessNoSandbox",
+          "codeCoverage": true,
+          "progress": false,
+          "sourceMap": true,
+          "watch": false
+        }
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "options": {
+        "lintFilePatterns": ["{projectRoot}/src/**/*.ts"]
+      }
+    }
+  }
+}

libs/components/grids/testing/src/modules/grid/grid-column-harness-filters.ts

@@ -0,0 +1,16 @@
+import { BaseHarnessFilters } from '@angular/cdk/testing';
+
+/**
+ * A set of criteria that can be used to filter a list of `SkyGridColumnHarness` instances.
+ */
+export interface SkyGridColumnHarnessFilters extends BaseHarnessFilters {
+  /**
+   * Only find instances whose column ID matches the given value.
+   */
+  columnId?: string | RegExp;
+
+  /**
+   * Only find instances whose heading text matches the given value.
+   */
+  headingText?: string | RegExp;
+}

libs/components/grids/testing/src/modules/grid/grid-column-harness.ts

@@ -0,0 +1,77 @@
+import { ComponentHarness, HarnessPredicate } from '@angular/cdk/testing';
+
+import { SkyGridColumnHarnessFilters } from './grid-column-harness-filters';
+
+/**
+ * Harness for interacting with a grid column header in tests.
+ */
+export class SkyGridColumnHarness extends ComponentHarness {
+  /**
+   * @internal
+   */
+  public static hostSelector = 'th.sky-grid-heading';
+
+  #getHeaderText = this.locatorFor('.sky-grid-header-text');
+
+  /**
+   * Gets a `HarnessPredicate` that can be used to search for a
+   * `SkyGridColumnHarness` that meets certain criteria.
+   */
+  public static with(
+    filters: SkyGridColumnHarnessFilters,
+  ): HarnessPredicate<SkyGridColumnHarness> {
+    return new HarnessPredicate(SkyGridColumnHarness, filters)
+      .addOption('columnId', filters.columnId, async (harness, columnId) => {
+        const id = await harness.getColumnId();
+        return await HarnessPredicate.stringMatches(id, columnId);
+      })
+      .addOption(
+        'headingText',
+        filters.headingText,
+        async (harness, headingText) => {
+          const text = await harness.getHeadingText();
+          return await HarnessPredicate.stringMatches(text, headingText);
+        },
+      );
+  }
+
+  /**
+   * Gets the column ID.
+   */
+  public async getColumnId(): Promise<string | null> {
+    return await (await this.host()).getAttribute('sky-cmp-id');
+  }
+
+  /**
+   * Gets the heading text of the column.
+   */
+  public async getHeadingText(): Promise<string> {
+    return (await (await this.#getHeaderText()).text()).trim();
+  }
+
+  /**
+   * Gets the sort direction of the column.
+   * Returns 'ascending', 'descending', 'none', or null if not sortable.
+   */
+  public async getSortDirection(): Promise<string | null> {
+    return await (await this.host()).getAttribute('aria-sort');
+  }
+
+  /**
+   * Whether the column is sortable.
+   */
+  public async isSortable(): Promise<boolean> {
+    const tabIndex = await (await this.host()).getAttribute('tabindex');
+    return tabIndex === '0';
+  }
+
+  /**
+   * Clicks the column header to sort by this column.
+   */
+  public async sort(): Promise<void> {
+    if (!(await this.isSortable())) {
+      throw new Error('Cannot sort by this column because it is not sortable.');
+    }
+    await (await this.host()).click();
+  }
+}

libs/components/grids/testing/src/modules/grid/grid-harness-filters.ts

@@ -0,0 +1,7 @@
+import { SkyHarnessFilters } from '@skyux/core/testing';
+
+/**
+ * A set of criteria that can be used to filter a list of `SkyGridHarness` instances.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-interface, @typescript-eslint/no-empty-object-type
+export interface SkyGridHarnessFilters extends SkyHarnessFilters {}