@memberjunction/ng-testing

Angular components, widgets, and services for building testing and evaluation interfaces within MemberJunction applications. This package provides a comprehensive UI toolkit for running tests, reviewing results, providing feedback, and visualizing evaluation data.

Overview

The @memberjunction/ng-testing package delivers a full suite of Angular components purpose-built for MemberJunction’s testing framework. It includes dialog components for executing tests and collecting feedback, a collection of reusable widget components for displaying scores, statuses, costs, and evaluation data, and services that orchestrate test execution and manage evaluation preferences.

graph TD
    A[TestingModule] --> B[Dialog Components]
    A --> C[Widget Components]
    A --> D[Services]

    B --> B1[TestRunDialogComponent]
    B --> B2[TestFeedbackDialogComponent]

    C --> C1[TestStatusBadgeComponent]
    C --> C2[ScoreIndicatorComponent]
    C --> C3[CostDisplayComponent]
    C --> C4[TestResultsMatrixComponent]
    C --> C5[EvaluationBadgeComponent]
    C --> C6[EvaluationModeToggleComponent]
    C --> C7[ReviewStatusIndicatorComponent]
    C --> C8[ExecutionContextComponent]

    D --> D1[TestingDialogService]
    D --> D2[TestingExecutionService]
    D --> D3[EvaluationPreferencesService]

    style A fill:#2d6a9f,stroke:#1a4971,color:#fff
    style B fill:#7c5295,stroke:#563a6b,color:#fff
    style C fill:#2d8659,stroke:#1a5c3a,color:#fff
    style D fill:#b8762f,stroke:#8a5722,color:#fff

Installation

npm install @memberjunction/ng-testing

Usage

Import the Module

import { TestingModule } from '@memberjunction/ng-testing';

@NgModule({
  imports: [
    TestingModule,
    // ... other imports
  ]
})
export class YourModule { }

Dialog Components

Test Run Dialog

Opens a dialog for executing and monitoring test runs:

<mj-test-run-dialog
  [visible]="showTestRunDialog"
  [testSuiteId]="selectedSuiteId"
  (dialogClosed)="onTestRunClosed($event)">
</mj-test-run-dialog>

Test Feedback Dialog

Collects user feedback on individual test results:

<mj-test-feedback-dialog
  [visible]="showFeedbackDialog"
  [testRunId]="selectedTestRunId"
  (feedbackSubmitted)="onFeedbackSubmitted($event)">
</mj-test-feedback-dialog>

Widget Components

Test Status Badge

Displays a color-coded badge indicating test status (passed, failed, running, etc.):

<mj-test-status-badge [status]="testResult.Status"></mj-test-status-badge>

Score Indicator

Visual indicator for numeric scores with color gradients:

<mj-score-indicator [score]="testResult.Score"></mj-score-indicator>

Cost Display

Formats and displays execution cost data:

<mj-cost-display [cost]="testResult.Cost"></mj-cost-display>

Test Results Matrix

Grid display comparing test results across multiple suite runs:

<mj-test-results-matrix
  [matrixData]="matrixData"
  (cellClicked)="onMatrixCellClicked($event)">
</mj-test-results-matrix>

Evaluation Badge and Mode Toggle

<mj-evaluation-badge [evaluationType]="'automated'"></mj-evaluation-badge>
<mj-evaluation-mode-toggle
  [mode]="currentMode"
  (modeChanged)="onModeChanged($event)">
</mj-evaluation-mode-toggle>

Review Status Indicator and Execution Context

<mj-review-status-indicator [status]="reviewStatus"></mj-review-status-indicator>
<mj-execution-context [context]="executionContext"></mj-execution-context>

Services

TestingDialogService

Programmatically open testing dialogs:

import { TestingDialogService } from '@memberjunction/ng-testing';

constructor(private testingDialog: TestingDialogService) {}

openTestRun() {
  this.testingDialog.openTestRunDialog(testSuiteId);
}

TestingExecutionService

Manages test execution lifecycle:

import { TestingExecutionService } from '@memberjunction/ng-testing';

constructor(private testExecution: TestingExecutionService) {}

async runTests() {
  const result = await this.testExecution.executeTestSuite(suiteId);
}

EvaluationPreferencesService

Manages user preferences for evaluation settings:

import { EvaluationPreferencesService } from '@memberjunction/ng-testing';

constructor(private evalPrefs: EvaluationPreferencesService) {}

getPreferences() {
  return this.evalPrefs.getPreferences();
}

Models and Types

The package exports several TypeScript interfaces for working with test data:

• TestTag — Tag metadata applied to test runs with optional category and color
• TagsHelper — Utility class for parsing, serializing, and managing test tags
• TestRunDataPoint — Analytics data point for charting test run results
• TestAnalyticsSummary — Aggregated analytics for a time period
• TestRunComparison — Comparison data between two test suite runs
• TestAnalyticsFilter — Filter options for test analytics queries
• MatrixCellData / MatrixColumnData / MatrixRowData — Data structures for the test results matrix component

Dependencies

Runtime Dependencies

Package	Description
@memberjunction/core	Core MemberJunction framework
@memberjunction/core-entities	Entity type definitions
@memberjunction/global	Global utilities and event system
@memberjunction/graphql-dataprovider	GraphQL data access
@memberjunction/ng-base-types	Base Angular component types
@memberjunction/ng-code-editor	Code editor component
@memberjunction/ng-container-directives	Layout directives
@memberjunction/ng-notifications	Notification system
@memberjunction/ng-shared	Shared Angular utilities
@memberjunction/testing-engine-base	Testing engine core
@progress/kendo-angular-*	Kendo UI components

Peer Dependencies

• @angular/common ^21.x
• @angular/core ^21.x
• @angular/forms ^21.x
• @angular/platform-browser ^21.x

Build

cd packages/Angular/Generic/Testing
npm run build

License

ISC