test(cypress): add e2e test for if-fragment layout (#234)

* test(cypress): add e2e test for if-fragment layout - Create new HTML file for testing if-fragment layout - Add Cypress e2e test to verify correct rendering of if-fragment - Check participants, messages, and fragment details in the test - Include snapshot testing for visual verification * Add expected image for if fragment test.
mermaid-js · Dec 23, 2024 · 120b6f6 · 120b6f6
1 parent dfbc0cb
commit 120b6f6
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 0 deletions.
diff --git a/cy/if-fragment.html b/cy/if-fragment.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <title>vue-sequence smoke 1</title>
+    <style>
+      body {
+        margin: 0; /* mostly for demo on mobile */
+      }
+    </style>
+  </head>
+  <body>
+    <div id="diagram" class="diagram">
+      <pre class="zenuml" style="margin: 0">
+        title Issue 232 - wrong layout for if-fragment
+        Client -> Server:SendRequest
+
+if(true){
+  Server -> Server: processRequest
+}</pre
+      >
+    </div>
+    <!-- built files will be auto injected -->
+    <script type="module" src="/src/main-cy.ts"></script>
+  </body>
+</html>
diff --git a/..._image_snapshots__/If Fragment Test should render if fragment correctly #0.png b/..._image_snapshots__/If Fragment Test should render if fragment correctly #0.png
diff --git a/cypress/e2e/if-fragment.spec.js b/cypress/e2e/if-fragment.spec.js
@@ -0,0 +1,32 @@
+/* eslint-disable no-undef */
+import "cypress-plugin-snapshots/commands";
+
+describe("If Fragment Test", function () {
+  it("should render if fragment correctly", function () {
+    cy.visit("http://127.0.0.1:8080/cy/if-fragment.html");
+    // Wait for the privacy icon to be loaded
+    cy.get(".privacy>span>svg", { timeout: 5000 }).should("be.visible");
+
+    // Verify the participants are rendered
+    cy.get(".participant").should("have.length", 2);
+    cy.get(".participant").eq(0).should("contain", "Client");
+    cy.get(".participant").eq(1).should("contain", "Server");
+
+    // Verify the initial message
+    cy.get(".message").first().should("contain", "SendRequest");
+
+    // Verify the if fragment
+    cy.get(".fragment").should("exist");
+    cy.get(".fragment .header").should("contain", "Alt");
+    cy.get(".fragment .condition").should("contain", "true");
+
+    // Verify the self message inside if block
+    cy.get(".fragment .message").should("contain", "processRequest");
+
+    // Take a snapshot of the rendered diagram
+    cy.document().toMatchImageSnapshot({
+      imageConfig: { threshold: 0.01 },
+      capture: "viewport",
+    });
+  });
+});