Add snapshot tests for sequence-diagram package

[Copilot]

Problem

The sequence-diagram package was missing snapshot tests for regression testing, unlike its sibling packages bi-diagram and component-diagram which already have comprehensive snapshot test coverage (see issues wso2#1391 and wso2#1392).

Solution

This PR adds snapshot tests for the sequence-diagram package following the same approach used in bi-diagram and component-diagram packages.

Changes

Testing Infrastructure

• Added Jest, ts-jest, and @testing-library dependencies to package.json
• Created jest.config.js with proper module resolution for workspace packages (@wso2/ui-toolkit, @wso2/ballerina-core, @wso2/syntax-tree)
• Created babel.config.js for transpiling TypeScript and React code
• Added test setup files (jest.env.ts and matchMedia.ts) to mock browser APIs (ResizeObserver, canvas context, getBoundingClientRect)

Test Implementation

Created src/test/Diagram.test.tsx with 10 comprehensive snapshot tests covering:

• Endpoint call diagrams
• Function call diagrams (3 variations)
• If node diagrams (4 variations)
• While node diagrams
• Sample with return statements (using the sample data from issue Fix completions for method access wso2/vscode-extensions#1394)

The test implementation:

• Uses React Testing Library to render the Diagram component
• Waits for the progress ring to be removed, indicating the diagram is fully rendered
• Sanitizes dynamic IDs and non-deterministic attributes (marker-end, id, data-linkid, href) before snapshot comparison
• Generates DOM snapshots stored in src/test/__snapshots__/Diagram.test.tsx.snap

Test Data

Added sample-with-return.json test data file from the issue description, which includes:

• HTTP client endpoint interactions
• Function with multiple return statements
• ViewState information for rendering

Results

✅ All 10 tests pass successfully
✅ Tests run in ~13.6 seconds
✅ Snapshots properly generated (197KB snapshot file)
✅ Test scripts added: test, test:watch, test:updateSnapshots

Example Test Output

PASS src/test/Diagram.test.tsx (12.926 s)
  Sequence Diagram - Snapshot Tests
    ✓ renders endpoint call diagram correctly (1267 ms)
    ✓ renders function call 1 diagram correctly (1049 ms)
    ✓ renders function call 2 diagram correctly (1052 ms)
    ✓ renders function call 3 diagram correctly (1058 ms)
    ✓ renders if node 1 diagram correctly (1158 ms)
    ✓ renders if node 4 diagram correctly (1085 ms)
    ✓ renders if node 5 diagram correctly (1152 ms)
    ✓ renders if node 8 diagram correctly (1141 ms)
    ✓ renders while node diagram correctly (1079 ms)
    ✓ renders sample with return diagram correctly (1027 ms)

Test Suites: 1 passed, 1 total
Tests:       10 passed, 10 total
Snapshots:   10 passed, 10 total

This implementation ensures consistency with the existing test patterns in bi-diagram and component-diagram packages, enabling regression testing for the sequence-diagram component.

Fixes wso2#1394

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• downloads.sentry-cdn.com
• esm.ubuntu.com

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

let's fix this issue. @wso2/product-ballerina-integratorwso2/issues/1394 use these PRs and use same approach to create snapshot test

@wso2/product-ballerina-integratorwso2/issues/1391
@wso2/product-ballerina-integratorwso2/issues/1392

this is sample seaquance diagram input
{
"participants": [
{
"id": "33785",
"name": "httpClient",
"kind": "ENDPOINT",
"moduleName": "test_sample",
"location": {
"fileName": "connections.bal",
"startLine": {
"line": 2,
"offset": 0
},
"endLine": {
"line": 2,
"offset": 57
}
},
"viewState": {
"bBox": {
"x": 440,
"y": 0,
"h": 40,
"w": 160
},
"xIndex": 2,
"lifelineHeight": 99
}
},
{
"id": "37174",
"name": "get",
"kind": "FUNCTION",
"moduleName": "test_sample",
"nodes": [
{
"interactionType": "ENDPOINT_CALL",
"targetId": "33785",
"kind": "INTERACTION",
"properties": {
"name": {
"type": "string",
"value": "get"
},
"expr": {
"type": "http:Client",
"value": "httpClient"
},
"params": [
{
"type": "string",
"value": ""path""
}
],
"value": {
"type": "json|http:ClientError",
"value": "var1"
}
},
"location": {
"fileName": "main.bal",
"startLine": {
"line": 7,
"offset": 30
},
"endLine": {
"line": 7,
"offset": 53
}
},
"viewStates": [
{
"callNodeId": "participant-37174",
"bBox": {
"x": 0,
"y": 0,
"h": 0,
"w": 0
},
"points": {
"start": {
"bBox": {
"x": 220,
"y": 68,
"h": 20,
"w": 20
},
"participantId": "37174"
},
"end": {
"bBox": {
"x": 440,
"y": 68,
"h": 20,
"w": 20
},
"participantId": "33785"
},
"returnStart": {
"bBox": {
"x": 440,
"y": 96,
"h": 20,
"w": 20
},
"participantId": "33785"
},
"returnEnd": {
"bBox": {
"x": 220,
"y": 96,
"h": 20,
"w": 20
},
"participantId": "37174"
}
}
}
]
},
{
"kind": "RETURN",
"branches": [],
"properties": {
"value": {
"type": "http:BadRequest"
}
},
"location": {
...

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.