Skip to content

[APM] Extend React flow service map test coverage#251624

Merged
jennypavlova merged 4 commits intoelastic:mainfrom
jennypavlova:250217-apm-react-flow-service-map-testing-unit-component-e2e
Feb 4, 2026
Merged

[APM] Extend React flow service map test coverage#251624
jennypavlova merged 4 commits intoelastic:mainfrom
jennypavlova:250217-apm-react-flow-service-map-testing-unit-component-e2e

Conversation

@jennypavlova
Copy link
Copy Markdown
Member

Closes #250217

Summary

This PR extends React flow service map test coverage. It adds navigation links e2e and hooks (useEdgeHighlighting and useReducedMotion) tests and extends useKeyboardNavigation tests

How to run the scout tests

Start the server with the React Flow feature flag enabled:

node scripts/scout.js start-server --serverless=oblt --config-dir react_flow_service_map

Run the React Flow tests:

npx playwright test --config=x-pack/solutions/observability/plugins/apm/test/scout_react_flow_service_map/ui/parallel.playwright.config.ts --grep=@svlOblt --project=local 

How to run the service map unit tests

node scripts/jest x-pack/solutions/observability/plugins/apm/public/components/app/service_map

@jennypavlova jennypavlova self-assigned this Feb 4, 2026
@jennypavlova jennypavlova added the release_note:skip Skip the PR/issue when compiling release notes label Feb 4, 2026
@jennypavlova jennypavlova requested a review from a team as a code owner February 4, 2026 10:25
@jennypavlova jennypavlova added backport:skip This PR does not require backporting Team:obs-presentation Focus: APM UI, Infra UI, Hosts UI, Universal Profiling, Obs Overview and left Navigation labels Feb 4, 2026
@elasticmachine
Copy link
Copy Markdown
Contributor

Pinging @elastic/obs-presentation-team (Team:obs-presentation)

Copy link
Copy Markdown
Contributor

@crespocarlos crespocarlos left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM. left some nits

type: MarkerType.ArrowClosed,
width: DEFAULT_MARKER_SIZE,
height: DEFAULT_MARKER_SIZE,
color: '#98A2B3',
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: we could create constants for these colors

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, I moved all the eui mocked theme colors and reused them ✅

Comment on lines +652 to +657
edgeElement.focus();

act(() => {
const event = new KeyboardEvent('keydown', { key: 'Enter', bubbles: true });
document.dispatchEvent(event);
});
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: to prevent repeating this

const pressKeyOnEdge = (key: string) => {
  edgeElement.focus();
  act(() => {
    const event = new KeyboardEvent('keydown', { key, bubbles: true });
    document.dispatchEvent(event);
  });
};

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch, thanks! Reused ✅

});
});

describe('Enter/Space on node elements', () => {
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we test screen reader announcement?

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Those announcements will change in a follow up issue after some a11y feedback (also the component used for it) - I added the testing part to the AC there so we can have the test in the final version

@jennypavlova
Copy link
Copy Markdown
Member Author

@crespocarlos Thank you for the review! I added the suggestions and I will merge once the build is ready.

@jennypavlova jennypavlova enabled auto-merge (squash) February 4, 2026 17:02
@jennypavlova jennypavlova merged commit ef27742 into elastic:main Feb 4, 2026
17 checks passed
@elasticmachine
Copy link
Copy Markdown
Contributor

💚 Build Succeeded

Metrics [docs]

✅ unchanged

History

cc @jennypavlova

mbondyra added a commit to mbondyra/kibana that referenced this pull request Feb 5, 2026
* commit '5c0872d56bc0268177cd3c7150a1685481fb5238': (221 commits)
  Add .cursorignore file (elastic#251709)
  [Search] Add descriptions to semantic_text field inference endpoint select (elastic#249265)
  [Agent Builder] Agent skills implementation (elastic#251209)
  [Lens] [ES|QL] Improve types for ES|QL conversion. (elastic#251042)
  Update the trace waterfall to make it easy to understand (elastic#250442)
  [ES|QL] [Lens] Adds query stats (elastic#251029)
  [Lens] Fix KQL character escaping when query is generated from Top values column (breakdown). (elastic#250925)
  fix(kbn-elastic-assistant): fix a11y issue with missing label on flyout (elastic#251656)
  Update dependency @elastic/monaco-esql to v3.1.16 (main) (elastic#251666)
  [Automatic Import V2] Add langsmith tracing (elastic#251592)
  [scout] fix duplicated test failure reports in Buildkite annotations (elastic#251455)
  chore(NA): remove us-central1-b from gcp zones on high load jobs (elastic#251748)
  skip flaky suite (elastic#250973)
  [Lens] Allow read only view for users with write permissions but having no write access to the dashboard (elastic#247746)
  [CI] Increase artifacts disk to 180gb (elastic#251774)
  [content-list] 1. Provider Foundation (elastic#251344)
  [AI Infra] Add missing ES|QL commands and functions documentation for inference tasks (elastic#249089)
  [docs-utils] 4️⃣ pre-req: Prepare for new validations (elastic#250810)
  [APM] Extend React flow service map test coverage (elastic#251624)
  [scout] discover tests with custom server configs (elastic#251297)
  ...

# Conflicts:
#	src/platform/plugins/shared/dashboard/tsconfig.json
#	x-pack/platform/plugins/shared/agent_builder_platform/server/tools/create_visualization/create_visualization.ts
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

backport:skip This PR does not require backporting release_note:skip Skip the PR/issue when compiling release notes Team:obs-presentation Focus: APM UI, Infra UI, Hosts UI, Universal Profiling, Obs Overview and left Navigation v9.4.0

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[APM] React flow service map testing (Unit, component, E2E)

4 participants