mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-09-19 23:39:50 +02:00
fixed broken test in sequence migration to antlr new strucuture
This commit is contained in:
Ashish Jain
312
demos/sequence-antlr-test.html
Normal file
312
demos/sequence-antlr-test.html
Normal file
@@ -0,0 +1,312 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<title>Mermaid Sequence ANTLR Parser Test Page</title>
|
||||
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
margin: 20px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.test-section {
|
||||
background: white;
|
||||
padding: 20px;
|
||||
margin: 20px 0;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.parser-info {
|
||||
background: #e3f2fd;
|
||||
border: 1px solid #2196f3;
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.success {
|
||||
background: #e8f5e8;
|
||||
border: 1px solid #4caf50;
|
||||
}
|
||||
|
||||
.error {
|
||||
background: #ffebee;
|
||||
border: 1px solid #f44336;
|
||||
}
|
||||
|
||||
div.mermaid {
|
||||
font-family: 'Courier New', Courier, monospace !important;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #1976d2;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #424242;
|
||||
border-bottom: 2px solid #e0e0e0;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
#debug-logs {
|
||||
border: 1px solid #ccc;
|
||||
padding: 10px;
|
||||
margin: 10px 0;
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
font-family: monospace;
|
||||
font-size: 12px;
|
||||
background: #f9f9f9;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>🎯 Mermaid Sequence ANTLR Parser Test Page</h1>
|
||||
|
||||
<div class="parser-info">
|
||||
<h3>🔧 Parser Information</h3>
|
||||
<p><strong>Environment Variable:</strong> <code id="env-var">Loading...</code></p>
|
||||
<p><strong>Expected:</strong> <code>USE_ANTLR_PARSER=true</code></p>
|
||||
<p><strong>Status:</strong> <span id="parser-status">Checking...</span></p>
|
||||
</div>
|
||||
|
||||
<div class="test-section">
|
||||
<h2>Test 1: Basic Sequence Diagram</h2>
|
||||
<p>Simple sequence diagram to test basic ANTLR parser functionality:</p>
|
||||
<pre class="mermaid">
|
||||
sequenceDiagram
|
||||
Alice->>Bob: Hello Bob, how are you?
|
||||
Bob-->>Alice: Great!
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<div class="test-section">
|
||||
<h2>Test 2: Participants and Actors</h2>
|
||||
<p>Testing participant and actor declarations:</p>
|
||||
<pre class="mermaid">
|
||||
sequenceDiagram
|
||||
participant A as Alice
|
||||
participant B as Bob
|
||||
actor C as Charlie
|
||||
|
||||
A->>B: Hello Bob
|
||||
B->>C: Hi Charlie
|
||||
C-->>A: Hello Alice
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<div class="test-section">
|
||||
<h2>Test 3: Different Arrow Types</h2>
|
||||
<p>Testing various arrow types and message formats:</p>
|
||||
<pre class="mermaid">
|
||||
sequenceDiagram
|
||||
Alice->>Bob: Solid arrow
|
||||
Bob-->>Alice: Dotted arrow
|
||||
Alice-xBob: Cross ending
|
||||
Bob--xAlice: Dotted cross
|
||||
Alice-)Bob: Open arrow
|
||||
Bob--)Alice: Dotted open
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<div class="test-section">
|
||||
<h2>Test 4: Activation Boxes</h2>
|
||||
<p>Testing activation boxes and lifelines:</p>
|
||||
<pre class="mermaid">
|
||||
sequenceDiagram
|
||||
Alice->>+John: Hello John, how are you?
|
||||
Alice->>+John: John, can you hear me?
|
||||
John-->>-Alice: Hi Alice, I can hear you!
|
||||
John-->>-Alice: I feel great!
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<div class="test-section">
|
||||
<h2>Test 5: Notes and Comments</h2>
|
||||
<p>Testing notes over participants:</p>
|
||||
<pre class="mermaid">
|
||||
sequenceDiagram
|
||||
participant Alice
|
||||
participant Bob
|
||||
|
||||
Alice->>Bob: Hello Bob
|
||||
Note over Alice,Bob: This is a note over both
|
||||
Note right of Bob: This note is on right of Bob
|
||||
Note left of Alice: This note is on left of Alice
|
||||
Bob-->>Alice: Hi Alice
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<div class="test-section">
|
||||
<h2>Test 6: Loops and Alt</h2>
|
||||
<p>Testing control flow structures:</p>
|
||||
<pre class="mermaid">
|
||||
sequenceDiagram
|
||||
Alice->>Bob: Hello Bob
|
||||
|
||||
loop Every minute
|
||||
Bob-->>Alice: Great!
|
||||
end
|
||||
|
||||
alt is sick
|
||||
Bob->>Alice: Not so good :(
|
||||
else is well
|
||||
Bob->>Alice: Feeling fresh like a daisy
|
||||
end
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
import mermaid from './mermaid.esm.mjs';
|
||||
|
||||
// Configure ANTLR parser for browser environment
|
||||
window.MERMAID_CONFIG = {
|
||||
USE_ANTLR_PARSER: 'true',
|
||||
USE_ANTLR_VISITOR: 'true',
|
||||
ANTLR_DEBUG: 'true'
|
||||
};
|
||||
|
||||
console.log('🎯 Sequence ANTLR Configuration:', window.MERMAID_CONFIG);
|
||||
|
||||
// Override console methods to capture logs
|
||||
const originalLog = console.log;
|
||||
const originalError = console.error;
|
||||
|
||||
function createLogDiv() {
|
||||
const logDiv = document.createElement('div');
|
||||
logDiv.id = 'debug-logs';
|
||||
logDiv.innerHTML = '<h3>🔍 Debug Logs:</h3>';
|
||||
document.body.appendChild(logDiv);
|
||||
return logDiv;
|
||||
}
|
||||
|
||||
console.log = function (...args) {
|
||||
originalLog.apply(console, args);
|
||||
// Display important logs on page
|
||||
if (args[0] && typeof args[0] === 'string' && (
|
||||
args[0].includes('ANTLR Parser:') ||
|
||||
args[0].includes('SequenceDB:') ||
|
||||
args[0].includes('SequenceListener:') ||
|
||||
args[0].includes('SequenceVisitor:') ||
|
||||
args[0].includes('SequenceParserCore:') ||
|
||||
args[0].includes('Sequence ANTLR')
|
||||
)) {
|
||||
const logDiv = document.getElementById('debug-logs') || createLogDiv();
|
||||
logDiv.innerHTML += '<div style="color: blue; margin: 2px 0;">' + args.join(' ') + '</div>';
|
||||
}
|
||||
};
|
||||
|
||||
console.error = function (...args) {
|
||||
originalError.apply(console, args);
|
||||
const logDiv = document.getElementById('debug-logs') || createLogDiv();
|
||||
logDiv.innerHTML += '<div style="color: red; margin: 2px 0;">ERROR: ' + args.join(' ') + '</div>';
|
||||
};
|
||||
|
||||
// Initialize mermaid
|
||||
mermaid.initialize({
|
||||
theme: 'default',
|
||||
logLevel: 3,
|
||||
securityLevel: 'loose',
|
||||
sequence: {
|
||||
diagramMarginX: 50,
|
||||
diagramMarginY: 10,
|
||||
actorMargin: 50,
|
||||
width: 150,
|
||||
height: 65,
|
||||
boxMargin: 10,
|
||||
boxTextMargin: 5,
|
||||
noteMargin: 10,
|
||||
messageMargin: 35
|
||||
},
|
||||
});
|
||||
|
||||
// Check environment and parser status
|
||||
let envVar = 'undefined';
|
||||
try {
|
||||
if (typeof process !== 'undefined' && process.env) {
|
||||
envVar = process.env.USE_ANTLR_PARSER || 'undefined';
|
||||
}
|
||||
} catch (e) {
|
||||
envVar = 'browser-default';
|
||||
}
|
||||
|
||||
const envElement = document.getElementById('env-var');
|
||||
const statusElement = document.getElementById('parser-status');
|
||||
|
||||
if (envElement) {
|
||||
envElement.textContent = `USE_ANTLR_PARSER=${envVar || 'undefined'}`;
|
||||
}
|
||||
|
||||
// Check for debug information from parser
|
||||
setTimeout(() => {
|
||||
if (window.MERMAID_PARSER_DEBUG) {
|
||||
console.log('🔍 Found MERMAID_PARSER_DEBUG:', window.MERMAID_PARSER_DEBUG);
|
||||
const debug = window.MERMAID_PARSER_DEBUG;
|
||||
|
||||
if (envElement) {
|
||||
envElement.textContent = `USE_ANTLR_PARSER=${debug.env_value || 'undefined'} (actual: ${debug.USE_ANTLR_PARSER})`;
|
||||
}
|
||||
|
||||
if (statusElement) {
|
||||
if (debug.USE_ANTLR_PARSER) {
|
||||
statusElement.innerHTML = '<span style="color: green;">✅ ANTLR Parser Active</span>';
|
||||
statusElement.parentElement.parentElement.classList.add('success');
|
||||
} else {
|
||||
statusElement.innerHTML = '<span style="color: orange;">⚠️ Jison Parser (Default)</span>';
|
||||
}
|
||||
}
|
||||
}
|
||||
}, 1000);
|
||||
|
||||
if (statusElement) {
|
||||
if (envVar === 'true') {
|
||||
statusElement.innerHTML = '<span style="color: green;">✅ ANTLR Parser Active</span>';
|
||||
statusElement.parentElement.parentElement.classList.add('success');
|
||||
} else {
|
||||
statusElement.innerHTML = '<span style="color: orange;">⚠️ Jison Parser (Default)</span>';
|
||||
}
|
||||
}
|
||||
|
||||
// Add debugging
|
||||
console.log('🎯 Sequence ANTLR Parser Test Page Loaded');
|
||||
console.log('🔧 Environment:', { USE_ANTLR_PARSER: envVar });
|
||||
|
||||
// Test if we can detect which parser is being used
|
||||
setTimeout(() => {
|
||||
const mermaidElements = document.querySelectorAll('.mermaid');
|
||||
console.log(`📊 Found ${mermaidElements.length} sequence diagrams`);
|
||||
|
||||
// Check if diagrams rendered successfully
|
||||
const renderedElements = document.querySelectorAll('.mermaid svg');
|
||||
if (renderedElements.length > 0) {
|
||||
console.log('✅ Sequence diagrams rendered successfully!');
|
||||
console.log(`📈 ${renderedElements.length} SVG elements created`);
|
||||
|
||||
// Update status on page
|
||||
const statusElement = document.getElementById('parser-status');
|
||||
if (statusElement && envVar === 'true') {
|
||||
statusElement.innerHTML = '<span style="color: green;">✅ ANTLR Parser Active & Rendering Successfully!</span>';
|
||||
}
|
||||
} else {
|
||||
console.log('❌ No SVG elements found - check for rendering errors');
|
||||
console.log('🔍 Checking for error messages...');
|
||||
|
||||
// Look for error messages in mermaid elements
|
||||
mermaidElements.forEach((element, index) => {
|
||||
console.log(`📋 Sequence Diagram ${index + 1} content:`, element.textContent.trim());
|
||||
if (element.innerHTML.includes('error') || element.innerHTML.includes('Error')) {
|
||||
console.log(`❌ Error found in sequence diagram ${index + 1}:`, element.innerHTML);
|
||||
}
|
||||
});
|
||||
}
|
||||
}, 3000);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user