Merge branch 'main' into fix/47-empty-title

cypress/e2e/creation.spec.js

@@ -3,7 +3,8 @@ import 'cypress-plugin-snapshots/commands';
 describe('Smoke test', function () {
   it('creation', function () {
     cy.visit('http://127.0.0.1:8080/cy/smoke-creation.html');
-    cy.wait(1500);
+    // This line is to make sure the privacy icon is loaded
+    cy.get('.privacy>span>svg', { timeout: 5000 }).should('be.visible');
     cy.document().toMatchImageSnapshot({
       imageConfig: { threshold: 0.01 },
       capture: 'viewport',

cypress/e2e/defect-406.spec.js

@@ -10,6 +10,8 @@ describe('Defect 406', function () {
   it('Fragments under Creation', function () {
     cy.visit('http://127.0.0.1:8080/cy/defect-406-alt-under-creation.html');
     cy.get('[data-signature="m6"]', { timeout: 5000 }).should('be.visible');
+    // This line is to make sure the privacy icon is loaded
+    cy.get('.privacy>span>svg', { timeout: 5000 }).should('be.visible');
     cy.document().toMatchImageSnapshot({
       imageConfig: { threshold: 0.01 },
       capture: 'viewport',

cypress/e2e/fragment.spec.js

@@ -3,7 +3,8 @@ import 'cypress-plugin-snapshots/commands';
 describe('Smoke test', function () {
   it('fragmentIssue', function () {
     cy.visit('http://127.0.0.1:8080/cy/smoke-fragment-issue.html');
-    cy.wait(1500);
+    // This line is to make sure the privacy icon is loaded
+    cy.get('.privacy>span>svg', { timeout: 5000 }).should('be.visible');
     cy.document().toMatchImageSnapshot({
       imageConfig: { threshold: 0.01 },
       capture: 'viewport',
@@ -12,7 +13,8 @@ describe('Smoke test', function () {
 
   it('fragment', function () {
     cy.visit('http://127.0.0.1:8080/cy/smoke-fragment.html');
-    cy.wait(1500);
+    // This line is to make sure the privacy icon is loaded
+    cy.get('.privacy>span>svg', { timeout: 5000 }).should('be.visible');
     cy.document().toMatchImageSnapshot({
       imageConfig: { threshold: 0.02 },
       capture: 'viewport',

cypress/e2e/interaction.spec.js

@@ -3,7 +3,8 @@ import 'cypress-plugin-snapshots/commands';
 describe('Smoke test', function () {
   it('interaction', function () {
     cy.visit('http://127.0.0.1:8080/cy/smoke-interaction.html');
-    cy.wait(1500);
+    // This line is to make sure the privacy icon is loaded
+    cy.get('.privacy>span>svg', { timeout: 5000 }).should('be.visible');
     cy.document().toMatchImageSnapshot({
       imageConfig: { threshold: 0.01 },
       capture: 'viewport',

cypress/e2e/return.spec.js

@@ -3,7 +3,8 @@ import 'cypress-plugin-snapshots/commands';
 describe('Smoke test', function () {
   it('return', function () {
     cy.visit('http://127.0.0.1:8080/cy/smoke-return.html');
-    cy.wait(1500);
+    // This line is to make sure the privacy icon is loaded
+    cy.get('.privacy>span>svg', { timeout: 5000 }).should('be.visible');
     cy.document().toMatchImageSnapshot({
       imageConfig: { threshold: 0.01 },
       capture: 'viewport',

cypress/e2e/smoke.spec.js

@@ -4,6 +4,8 @@ describe('Smoke test', function () {
   it('should load the home page', function () {
     cy.visit('http://127.0.0.1:8080/cy/smoke.html');
     cy.get('[data-signature="append(line)"]', { timeout: 5000 }).should('be.visible');
+    // This line is to make sure the privacy icon is loaded
+    cy.get('.privacy>span>svg', { timeout: 5000 }).should('be.visible');
     cy.document().toMatchImageSnapshot({
       imageConfig: { threshold: 0.012 },
       capture: 'viewport',

package.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/mermaid-js/zenuml-core"
   },
   "scripts": {
-    "dev": "vite dev --port 8080",
+    "dev": "vite dev --port 8080 --host 127.0.0.1",
     "build:site": "vite build",
     "build": "vite build -c vite.config.lib.js",
     "test": "vitest",

src/components/DiagramFrame/Privacy/Privacy.vue

@@ -1,9 +1,7 @@
 <template>
   <div>
-    <div
-      class="tooltip bottom whitespace-normal flex items-center"
-      data-tooltip="We (the vendor) do not have access to your data. The diagram is generated in this browser."
-    >
+    <div class="privacy tooltip bottom whitespace-normal flex items-center"
+      data-tooltip="We (the vendor) do not have access to your data. The diagram is generated in this browser.">
       <Icon name="privacy" icon-class="fill-current h-6 w-6 m-auto" />
     </div>
   </div>