@openmrs/esm-report-builder 0.1.1-pre.87

package/e2e/pages/etl-sources.page.ts

@@ -0,0 +1,35 @@
+import type { Page } from '@playwright/test';
+import { expect } from '@playwright/test';
+
+export class ETLSourcesPage {
+  constructor(private readonly page: Page) {}
+
+  async goto() {
+    await this.page.goto('/admin/etl-sources');
+  }
+
+  async expectLoaded() {
+    await expect(this.page.getByRole('heading', { name: 'ETL Sources' })).toBeVisible();
+  }
+
+  async clickNew() {
+    await this.page.getByTestId('etl-source-new').click();
+  }
+
+  async fillForm(data: { name: string; code?: string; schemaName?: string; sourceType?: string; description?: string; tablePatterns?: string }) {
+    await this.page.locator('[data-testid="etl-source-name"] input').fill(data.name);
+    if (data.code !== undefined) await this.page.locator('[data-testid="etl-source-code"] input').fill(data.code);
+    if (data.schemaName !== undefined) await this.page.locator('[data-testid="etl-source-schema"] input').fill(data.schemaName);
+    if (data.sourceType !== undefined) await this.page.locator('[data-testid="etl-source-type"] input').fill(data.sourceType);
+    if (data.description !== undefined) await this.page.locator('[data-testid="etl-source-description"] textarea').fill(data.description);
+    if (data.tablePatterns !== undefined) await this.page.locator('[data-testid="etl-source-table-patterns"] textarea').fill(data.tablePatterns);
+  }
+
+  async save() {
+    await this.page.getByRole('button', { name: 'Save' }).click();
+  }
+
+  row(name: string) {
+    return this.page.getByRole('row').filter({ hasText: name });
+  }
+}

package/e2e/pages/report-sections.page.ts

@@ -0,0 +1,20 @@
+import type { Page } from '@playwright/test';
+import { expect } from '@playwright/test';
+
+export class ReportSectionsPage {
+  constructor(private readonly page: Page) {}
+
+  async goto() {
+    await this.page.goto('/sections');
+  }
+
+  async expectLoaded() {
+    await expect(this.page.getByRole('heading', { name: 'Sections' })).toBeVisible();
+  }
+
+  async openPreviewFor(sectionName: string) {
+    const row = this.page.getByTestId(`section-row-${sectionName.replace(/\s+/g, '-')}`);
+    await row.getByLabel('Actions').click();
+    await this.page.getByText('Preview', { exact: true }).click();
+  }
+}

package/e2e/pages/section-preview.modal.ts

@@ -0,0 +1,29 @@
+import type { Page } from '@playwright/test';
+import { expect } from '@playwright/test';
+
+export class SectionPreviewModal {
+  constructor(private readonly page: Page) {}
+
+  async expectOpen() {
+    await expect(this.page.getByRole('dialog')).toBeVisible();
+  }
+
+  async fillPreviewRequest(data: { startDate: string; endDate: string; indicatorUuid?: string; maxRows?: number }) {
+    await this.page.locator('[data-testid="section-preview-startdate"] input').fill(data.startDate);
+    await this.page.locator('[data-testid="section-preview-enddate"] input').fill(data.endDate);
+    if (data.indicatorUuid !== undefined) await this.page.locator('[data-testid="section-preview-indicatoruuid"] input').fill(data.indicatorUuid);
+    if (data.maxRows !== undefined) await this.page.locator('[data-testid="section-preview-maxrows"] input').fill(String(data.maxRows));
+  }
+
+  async run() {
+    await this.page.getByTestId('section-preview-run').click();
+  }
+
+  async expectMatrixVisible() {
+    await expect(this.page.getByTestId('section-preview-matrix')).toBeVisible();
+  }
+
+  async expectError(message: string) {
+    await expect(this.page.getByText(message)).toBeVisible();
+  }
+}

package/e2e/specs/etl-sources.spec.ts

@@ -0,0 +1,51 @@
+import { test, expect } from '../core/test';
+
+test.describe('ETL Sources', () => {
+  test('creates an ETL source and sends the expected payload', async ({ page, etlSourcesPage }) => {
+    await page.route('**/ws/rest/v1/reportbuilder/etlsource**', async (route) => {
+      const request = route.request();
+
+      if (request.method() === 'GET') {
+        await route.fulfill({
+          status: 200,
+          contentType: 'application/json',
+          body: JSON.stringify({ results: [] }),
+        });
+        return;
+      }
+
+      if (request.method() === 'POST') {
+        const body = request.postDataJSON();
+        expect(body).toMatchObject({
+          name: 'E2E Source',
+          code: 'E2E_SRC',
+          schemaName: 'reporting',
+          sourceType: 'mysql',
+          active: true,
+        });
+
+        await route.fulfill({
+          status: 201,
+          contentType: 'application/json',
+          body: JSON.stringify({ uuid: 'etl-1', ...body }),
+        });
+        return;
+      }
+
+      await route.continue();
+    });
+
+    await etlSourcesPage.goto();
+    await etlSourcesPage.expectLoaded();
+    await etlSourcesPage.clickNew();
+    await etlSourcesPage.fillForm({
+      name: 'E2E Source',
+      code: 'E2E_SRC',
+      schemaName: 'reporting',
+      sourceType: 'mysql',
+      description: 'Created from Playwright',
+      tablePatterns: 'encounter_%',
+    });
+    await etlSourcesPage.save();
+  });
+});

package/e2e/specs/navigation.spec.ts

@@ -0,0 +1,13 @@
+import { test } from '../core/test';
+
+test.describe('report builder navigation', () => {
+  test('loads the sections page', async ({ reportSectionsPage }) => {
+    await reportSectionsPage.goto();
+    await reportSectionsPage.expectLoaded();
+  });
+
+  test('loads the ETL Sources page', async ({ etlSourcesPage }) => {
+    await etlSourcesPage.goto();
+    await etlSourcesPage.expectLoaded();
+  });
+});

package/e2e/specs/section-preview-validation.spec.ts

@@ -0,0 +1,38 @@
+import { test } from '../core/test';
+
+const sectionUuid = '4278ebf9-47ab-40b8-aeca-df3e4a050c79';
+
+test.describe('section preview validation', () => {
+  test('shows a validation error when dates are missing', async ({ page, reportSectionsPage, sectionPreviewModal }) => {
+    await page.route('**/ws/rest/v1/reportbuilder/section?**', async (route) => {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({ results: [{ uuid: sectionUuid, name: 'Monthly HTS Summary', configJson: '{}' }] }),
+      });
+    });
+
+    await page.route(`**/ws/rest/v1/reportbuilder/section/${sectionUuid}**`, async (route) => {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({ uuid: sectionUuid, name: 'Monthly HTS Summary', configJson: '{}' }),
+      });
+    });
+
+    await page.route('**/ws/rest/v1/reportbuilder/indicator**', async (route) => {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({ results: [] }),
+      });
+    });
+
+    await reportSectionsPage.goto();
+    await reportSectionsPage.expectLoaded();
+    await reportSectionsPage.openPreviewFor('Monthly HTS Summary');
+    await sectionPreviewModal.expectOpen();
+    await sectionPreviewModal.run();
+    await sectionPreviewModal.expectError('Start date and End date are required.');
+  });
+});

package/e2e/specs/section-preview.spec.ts

@@ -0,0 +1,94 @@
+import { test, expect } from '../core/test';
+
+const sectionUuid = '4278ebf9-47ab-40b8-aeca-df3e4a050c79';
+const indicatorUuid = '2b9c6c8e-1234-4d9f-8abc-1234567890ab';
+
+test.describe('section preview', () => {
+  test('submits preview payload and renders the matrix', async ({ page, reportSectionsPage, sectionPreviewModal }) => {
+    await page.route('**/ws/rest/v1/reportbuilder/section?**', async (route) => {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({
+          results: [
+            {
+              uuid: sectionUuid,
+              name: 'Monthly HTS Summary',
+              code: 'HTS_MONTHLY',
+              configJson: JSON.stringify({ indicators: [{ uuid: indicatorUuid }] }),
+            },
+          ],
+        }),
+      });
+    });
+
+    await page.route(`**/ws/rest/v1/reportbuilder/section/${sectionUuid}**`, async (route) => {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({
+          uuid: sectionUuid,
+          name: 'Monthly HTS Summary',
+          code: 'HTS_MONTHLY',
+          configJson: JSON.stringify({ indicators: [{ uuid: indicatorUuid }] }),
+        }),
+      });
+    });
+
+    await page.route('**/ws/rest/v1/reportbuilder/indicator**', async (route) => {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({ results: [] }),
+      });
+    });
+
+    await page.route('**/ws/rest/v1/reportbuilder/sectionpreview', async (route) => {
+      const body = route.request().postDataJSON();
+      expect(body).toEqual({
+        sectionUuid,
+        indicatorUuid,
+        startDate: '2026-01-01',
+        endDate: '2026-01-31',
+        maxRows: 100,
+        params: {},
+      });
+
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({
+          sectionUuid,
+          results: [
+            {
+              indicatorUuid,
+              name: 'HTS TST',
+              kind: 'base',
+              columns: ['age_group', 'gender', 'value'],
+              rows: [
+                ['0-28d', 'F', 2],
+                ['0-28d', 'M', 1],
+              ],
+              rowCount: 2,
+              truncated: false,
+            },
+          ],
+        }),
+      });
+    });
+
+    await reportSectionsPage.goto();
+    await reportSectionsPage.expectLoaded();
+    await reportSectionsPage.openPreviewFor('Monthly HTS Summary');
+    await sectionPreviewModal.expectOpen();
+    await sectionPreviewModal.fillPreviewRequest({
+      startDate: '2026-01-01',
+      endDate: '2026-01-31',
+      indicatorUuid,
+      maxRows: 100,
+    });
+    await sectionPreviewModal.run();
+    await sectionPreviewModal.expectMatrixVisible();
+    await expect(page.getByText('HTS TST')).toBeVisible();
+  });
+});

package/e2e/support/github/Dockerfile

@@ -0,0 +1,22 @@
+# syntax=docker/dockerfile:1
+FROM node:22-alpine AS build
+
+WORKDIR /app
+
+# Install dependencies first so Docker layer caching short-circuits it
+COPY package.json yarn.lock .yarnrc.yml ./
+COPY .yarn ./.yarn/
+RUN corepack enable && yarn install --immutable
+
+COPY . .
+
+# Build the module, pack it, and assemble the SPA (shell + this app)
+RUN yarn build
+RUN yarn pack -o /app/_openmrs_esm_report_builder.tgz
+RUN yarn openmrs assemble --manifest --mode config --config e2e/support/github/spa-assemble-config.json --target /app/spa
+RUN yarn openmrs build --target /app/spa
+
+FROM openmrs/openmrs-reference-application-3-frontend:nightly
+
+RUN rm -rf /usr/share/nginx/html/*
+COPY --from=build /app/spa/ /usr/share/nginx/html/

package/e2e/support/github/Dockerfile.dockerignore

@@ -0,0 +1,13 @@
+node_modules
+.git
+.github
+dist
+docs
+logs
+playwright-report
+test-results
+e2e/storageState.json
+package.tgz
+*.md
+*.sql
+.mf

package/e2e/support/github/docker-compose.yml

@@ -0,0 +1,31 @@
+# This docker compose file is used to create a backend environment for the e2e.yml
+# workflow. The images are pre-filled with data so that the backend environment can
+# be started within a short time. Adapted from openmrs-esm-core for this repo.
+services:
+  gateway:
+    image: openmrs/openmrs-reference-application-3-gateway:${TAG:-nightly}
+    hostname: gateway
+    depends_on:
+      - frontend
+      - backend
+    ports:
+      - "${E2E_PORT:-8080}:80"
+
+  frontend:
+    build:
+      context: .
+      dockerfile: e2e/support/github/Dockerfile
+    hostname: frontend
+    environment:
+      SPA_PATH: /openmrs/spa
+      API_URL: /openmrs
+
+  backend:
+    image: openmrs/openmrs-reference-application-3-backend:nightly-with-data
+    hostname: backend
+    depends_on:
+      - db
+
+  db:
+    image: openmrs/openmrs-reference-application-3-db:nightly-with-data
+    hostname: db

package/e2e/support/github/run-e2e-docker-env.sh

@@ -0,0 +1,131 @@
+#!/usr/bin/env bash
+set -eu
+
+# Builds and starts the OpenMRS 3.x reference stack (gateway, frontend, backend, db)
+# with this module assembled into the frontend, and waits for the backend to be
+# ready. Adapted from openmrs-esm-core's e2e setup for this single-module repo.
+#
+# In CI it exits once the stack is ready, exporting E2E_BASE_URL and E2E_PORT for
+# the workflow. Locally it runs Playwright afterwards and tears the stack down.
+
+script_dir=$(cd -- "$(dirname -- "${BASH_SOURCE[0]}")" &>/dev/null && pwd)
+repository_root=$(cd -- "$script_dir/../../.." && pwd)
+compose_file="$script_dir/docker-compose.yml"
+
+find_available_port() {
+  local port=8080
+  while lsof -i:"$port" >/dev/null 2>&1 || nc -z localhost "$port" 2>/dev/null; do
+    port=$((port + 1))
+    if [[ $port -gt 9000 ]]; then
+      echo "ERROR: Could not find available port in range 8080-9000" >&2
+      exit 1
+    fi
+  done
+  echo "$port"
+}
+
+generate_project_name() {
+  local branch
+  branch=$(git rev-parse --abbrev-ref HEAD 2>/dev/null || echo "local")
+  # Sanitize: lowercase, replace non-alphanumeric with dash, limit length
+  echo "openmrs-e2e-$(echo "$branch" | tr '[:upper:]' '[:lower:]' | sed 's/[^a-z0-9]/-/g' | cut -c1-40)"
+}
+
+wait_for_gateway() {
+  local max_attempts=30
+  local attempt=0
+  echo "Waiting for gateway container to start..."
+  while ! docker compose --project-directory "$repository_root" -p "$project_name" -f "$compose_file" ps --status running --services 2>/dev/null | grep -q "^gateway$"; do
+    attempt=$((attempt + 1))
+    if [[ $attempt -ge $max_attempts ]]; then
+      echo "ERROR: Gateway container failed to start within 60 seconds" >&2
+      echo "Container status:" >&2
+      docker compose --project-directory "$repository_root" -p "$project_name" -f "$compose_file" ps >&2
+      echo "Gateway logs:" >&2
+      docker compose --project-directory "$repository_root" -p "$project_name" -f "$compose_file" logs gateway >&2
+      exit 1
+    fi
+    sleep 2
+  done
+  echo "Gateway container is running!"
+}
+
+wait_for_backend() {
+  local url="$1"
+  local max_attempts=60
+  local attempt=0
+  echo "Waiting for backend to be ready at $url..."
+  while ! curl -sf "$url/login.htm" >/dev/null 2>&1; do
+    attempt=$((attempt + 1))
+    if [[ $attempt -ge $max_attempts ]]; then
+      echo "ERROR: Backend failed to start within 5 minutes" >&2
+      exit 1
+    fi
+    echo "  Attempt $attempt/$max_attempts - waiting 5 seconds..."
+    sleep 5
+  done
+  echo "Backend is ready!"
+}
+
+cleanup() {
+  # In CI mode, don't clean up (CI handles its own cleanup)
+  if [[ "${CI:-}" == "true" || "${GITHUB_ACTIONS:-}" == "true" ]]; then
+    echo "CI environment detected - skipping cleanup"
+    return
+  fi
+  echo ""
+  echo "Stopping Docker containers..."
+  docker compose --project-directory "$repository_root" -p "$project_name" -f "$compose_file" down -v 2>/dev/null || true
+  echo "Cleanup complete."
+}
+trap cleanup EXIT
+
+project_name=$(generate_project_name)
+export E2E_PORT=$(find_available_port)
+base_url="http://localhost:$E2E_PORT/openmrs"
+
+echo "========================================"
+echo "OpenMRS E2E Test Runner"
+echo "Project name: $project_name"
+echo "Port: $E2E_PORT"
+echo "Base URL: $base_url"
+echo "========================================"
+
+echo ""
+echo "Building and starting Docker containers..."
+docker compose --project-directory "$repository_root" -p "$project_name" -f "$compose_file" build frontend
+docker compose --project-directory "$repository_root" -p "$project_name" -f "$compose_file" up -d
+
+wait_for_gateway
+wait_for_backend "$base_url"
+
+if [[ "${CI:-}" == "true" || "${GITHUB_ACTIONS:-}" == "true" ]]; then
+  echo ""
+  echo "CI environment detected - backend ready, exiting for CI to run tests"
+  echo "Base URL: $base_url"
+  # Export environment variables for GitHub Actions
+  if [[ -n "${GITHUB_ENV:-}" ]]; then
+    echo "E2E_BASE_URL=$base_url" >> "$GITHUB_ENV"
+    echo "E2E_PORT=$E2E_PORT" >> "$GITHUB_ENV"
+  fi
+  exit 0
+fi
+
+# Local mode: run Playwright from the repository root, then clean up via trap
+cd "$repository_root"
+if [[ ! -f .env ]]; then
+  echo "Copying example.env to .env..."
+  cp example.env .env
+fi
+
+echo ""
+echo "========================================"
+echo "Running Playwright tests..."
+echo "========================================"
+
+set +e # Don't exit on test failure so cleanup still runs
+E2E_BASE_URL="$base_url" yarn playwright test "$@"
+test_exit_code=$?
+set -e
+
+exit $test_exit_code

package/e2e/support/github/spa-assemble-config.json

@@ -0,0 +1,9 @@
+{
+  "frontendModules": {
+    "@openmrs/esm-login-app": "next",
+    "@openmrs/esm-primary-navigation-app": "next",
+    "@openmrs/esm-home-app": "next",
+    "@openmrs/esm-system-admin-app": "next",
+    "@openmrs/esm-report-builder": "file:/app/_openmrs_esm_report_builder.tgz"
+  }
+}

package/e2e/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "types": ["node", "@playwright/test"],
+    "noEmit": true
+  },
+  "include": [
+    "./**/*.ts",
+    "../playwright.config.ts"
+  ]
+}

package/example.env

@@ -0,0 +1,5 @@
+E2E_BASE_URL=http://localhost:8080/openmrs
+E2E_USERNAME=admin
+E2E_PASSWORD=Admin123
+E2E_LOGIN_LOCATION=8d6c993e-c2cc-11de-8d13-0010c6dffd0f
+PLAYWRIGHT_BASE_URL=

package/jest.config.js

@@ -0,0 +1,28 @@
+/** @type {import('jest').Config} */
+module.exports = {
+  clearMocks: true,
+  transform: {
+    '^.+\\.[jt]sx?$': ['@swc/jest'],
+  },
+  transformIgnorePatterns: ['/node_modules/(?!@openmrs|.+\\.pnp\\.[^\\/]+$)'],
+  moduleDirectories: ['node_modules', '__mocks__', 'tools', 'src', __dirname],
+  moduleNameMapper: {
+    '^@resources/(.*)$': '<rootDir>/src/resources/$1',
+    '^@hooks/(.*)$': '<rootDir>/src/hooks/$1',
+    '^@types$': '<rootDir>/src/types.ts',
+    '^@tools/(.*)$': '<rootDir>/tools/$1',
+    '^@constants$': '<rootDir>/src/constants.ts',
+    '^@carbon/icons-react/es/(.*)$': '@carbon/icons-react/lib/$1',
+    '^carbon-components-react/es/(.*)$': 'carbon-components-react/lib/$1',
+    '@openmrs/esm-framework': '@openmrs/esm-framework/mock',
+    '\\.(s?css)$': '<rootDir>/tools/scss-stub.js',
+    '^lodash-es/(.*)$': 'lodash/$1',
+    'lodash-es': 'lodash',
+    '^dexie$': '<rootDir>/node_modules/dexie',
+    '^react-i18next$': '<rootDir>/__mocks__/react-i18next.js',
+    'react-markdown': '<rootDir>/__mocks__/react-markdown.tsx',
+  },
+  setupFilesAfterEnv: ['<rootDir>/tools/setup-tests.ts'],
+  testEnvironment: 'jsdom',
+  testPathIgnorePatterns: ['<rootDir>/e2e'],
+};