Add tests to cover long title case

mermaid-js · Jul 5, 2024 · 27410f1 · 27410f1
1 parent 010a93a
commit 27410f1
Showing 1 changed file with 56 additions and 2 deletions.
diff --git a/cypress/integration/rendering/pie.spec.ts b/cypress/integration/rendering/pie.spec.ts
@@ -20,6 +20,60 @@ describe('pie chart', () => {
     );
   });
 
+  it('should render a simple pie diagram with long title', () => {
+    renderGraph(
+      `pie title Sports in Sweden that are my favorite to watch
+        "Bandy": 40
+        "Ice-Hockey": 80
+        "Football": 90
+      `
+    );
+    cy.get('svg').should((svg) => {
+      expect(svg).to.have.attr('width', '100%');
+      const style = svg.attr('style');
+      expect(style).to.match(/^max-width: [\d.]+px;$/);
+      const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
+      expect(maxWidthValue).to.be.within(730, 750); // depends on installed fonts
+    });
+  });
+
+  it('should render a simple pie diagram with long title and long labels', () => {
+    renderGraph(
+      `pie title Time usage on NETFLIX the last few movie nights
+        "Time spent looking for movie": 90
+        "Time spent watching it": 10
+      `
+    );
+    cy.get('svg').should((svg) => {
+      expect(svg).to.have.attr('width', '100%');
+      const style = svg.attr('style');
+      expect(style).to.match(/^max-width: [\d.]+px;$/);
+      const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
+      expect(maxWidthValue).to.be.within(900, 920); // depends on installed fonts
+    });
+  });
+
+  it('should render a simple pie diagram that is centered with long title', () => {
+    renderGraph(
+      `pie title Sports in Sweden that are my favorite to watch
+        "Bandy": 40
+        "Ice-Hockey": 80
+        "Football": 90
+      `
+    );
+    cy.get('g')
+      .eq(1)
+      .should((g) => {
+        const transform = g.attr('transform');
+        expect(transform).to.match(/translate\(\d+(\.\d+)?,\d+(\.\d+)?\)/);
+
+        const translateValues = transform.match(/translate\((\d+(\.\d+)?),(\d+(\.\d+)?)\)/);
+        const translateX = parseFloat(translateValues[1]);
+
+        expect(translateX).to.be.within(280, 300);
+      });
+  });
+
   it('should render a simple pie diagram with capital letters for labels', () => {
     imgSnapshotTest(
       `pie title What Voldemort doesn't have?
@@ -44,7 +98,7 @@ describe('pie chart', () => {
       const style = svg.attr('style');
       expect(style).to.match(/^max-width: [\d.]+px;$/);
       const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
-      expect(maxWidthValue).to.be.within(590, 600); // depends on installed fonts: 596.2 on my PC, 597.5 on CI
+      expect(maxWidthValue).to.be.within(590, 610); // depends on installed fonts: 596.2 on my PC, 597.5 on CI
     });
   });
 
@@ -59,7 +113,7 @@ describe('pie chart', () => {
     );
     cy.get('svg').should((svg) => {
       const width = parseFloat(svg.attr('width'));
-      expect(width).to.be.within(590, 600); // depends on installed fonts: 596.2 on my PC, 597.5 on CI
+      expect(width).to.be.within(590, 610); // depends on installed fonts: 596.2 on my PC, 597.5 on CI
       expect(svg).to.not.have.attr('style');
     });
   });