From 7fed17cf7351464367e6ac0dd0eacbd898dbc8c1 Mon Sep 17 00:00:00 2001
From: Nicolas Polizzo <freezystem@gmail.com>
Date: Fri, 8 Dec 2023 00:32:41 +0100
Subject: [PATCH] add test for getChartLegend method

---
 src/__snapshots__/index.spec.ts.snap | 196 +++++++++++++++++++++++++++
 src/index.spec.ts                    |  48 ++++++-
 2 files changed, 243 insertions(+), 1 deletion(-)

diff --git a/src/__snapshots__/index.spec.ts.snap b/src/__snapshots__/index.spec.ts.snap
index e836394..42fe950 100644
--- a/src/__snapshots__/index.spec.ts.snap
+++ b/src/__snapshots__/index.spec.ts.snap
@@ -1286,6 +1286,202 @@ exports[`mjml-bar-chart getChartLabels should render chart labels with minimum p
 </tr>"
 `;
 
+exports[`mjml-bar-chart getChartLegend should render chart legend with maximum params 1`] = `
+{
+  "children": [
+    {
+      "attributes": {
+        "style": "padding:0;",
+      },
+      "children": [
+        {
+          "attributes": {
+            "style": "border-collapse:collapse;width:100%;",
+          },
+          "children": [
+            {
+              "children": [
+                {
+                  "attributes": {
+                    "style": "padding:0;height:10px;",
+                  },
+                  "tagName": "td",
+                },
+              ],
+              "tagName": "tr",
+            },
+            {
+              "children": [
+                {
+                  "attributes": {
+                    "style": "padding:0;",
+                  },
+                  "children": [
+                    {
+                      "attributes": {
+                        "style": "margin:0;padding:0;max-width:302px;line-height:20px;text-align:center;",
+                      },
+                      "children": [
+                        {
+                          "attributes": {
+                            "style": "padding:0 10px;height:20px;font-size:14px;border-left:20px solid #ffe5ec;",
+                          },
+                          "content": "support",
+                          "tagName": "span",
+                        },
+                        {
+                          "attributes": {
+                            "style": "padding:0 10px;height:20px;font-size:14px;border-left:20px solid #ffb3c6;",
+                          },
+                          "content": "sales",
+                          "tagName": "span",
+                        },
+                        {
+                          "attributes": {
+                            "style": "padding:0 10px;height:20px;font-size:14px;border-left:20px solid #fb6f92;",
+                          },
+                          "content": "tech",
+                          "tagName": "span",
+                        },
+                      ],
+                      "tagName": "p",
+                    },
+                  ],
+                  "tagName": "td",
+                },
+              ],
+              "tagName": "tr",
+            },
+          ],
+          "tagName": "table",
+        },
+      ],
+      "tagName": "td",
+    },
+  ],
+  "tagName": "tr",
+}
+`;
+
+exports[`mjml-bar-chart getChartLegend should render chart legend with maximum params 2`] = `
+"<tr>
+  <td style="padding:0;">
+    <table style="border-collapse:collapse;width:100%;">
+      <tr>
+        <td style="padding:0;height:10px;"></td>
+      </tr>
+      <tr>
+        <td style="padding:0;">
+          <p style="margin:0;padding:0;max-width:302px;line-height:20px;text-align:center;">
+            <span style="padding:0 10px;height:20px;font-size:14px;border-left:20px solid #ffe5ec;">support</span>
+            <span style="padding:0 10px;height:20px;font-size:14px;border-left:20px solid #ffb3c6;">sales</span>
+            <span style="padding:0 10px;height:20px;font-size:14px;border-left:20px solid #fb6f92;">tech</span>
+          </p>
+        </td>
+      </tr>
+    </table>
+  </td>
+</tr>"
+`;
+
+exports[`mjml-bar-chart getChartLegend should render chart legend with minimum params 1`] = `
+{
+  "children": [
+    {
+      "attributes": {
+        "style": "padding:0;",
+      },
+      "children": [
+        {
+          "attributes": {
+            "style": "border-collapse:collapse;width:100%;",
+          },
+          "children": [
+            {
+              "children": [
+                {
+                  "attributes": {
+                    "style": "padding:0;height:10px;",
+                  },
+                  "tagName": "td",
+                },
+              ],
+              "tagName": "tr",
+            },
+            {
+              "children": [
+                {
+                  "attributes": {
+                    "style": "padding:0;",
+                  },
+                  "children": [
+                    {
+                      "attributes": {
+                        "style": "margin:0;padding:0;max-width:392px;line-height:20px;text-align:center;",
+                      },
+                      "children": [
+                        {
+                          "attributes": {
+                            "style": "padding:0 10px;height:20px;font-size:14px;border-left:30px solid #ffe5ec;",
+                          },
+                          "content": "support",
+                          "tagName": "span",
+                        },
+                        {
+                          "attributes": {
+                            "style": "padding:0 10px;height:20px;font-size:14px;border-left:30px solid #ffb3c6;",
+                          },
+                          "content": "sales",
+                          "tagName": "span",
+                        },
+                        {
+                          "attributes": {
+                            "style": "padding:0 10px;height:20px;font-size:14px;border-left:30px solid #fb6f92;",
+                          },
+                          "content": "tech",
+                          "tagName": "span",
+                        },
+                      ],
+                      "tagName": "p",
+                    },
+                  ],
+                  "tagName": "td",
+                },
+              ],
+              "tagName": "tr",
+            },
+          ],
+          "tagName": "table",
+        },
+      ],
+      "tagName": "td",
+    },
+  ],
+  "tagName": "tr",
+}
+`;
+
+exports[`mjml-bar-chart getChartLegend should render chart legend with minimum params 2`] = `
+"<tr>
+  <td style="padding:0;">
+    <table style="border-collapse:collapse;width:100%;">
+      <tr>
+        <td style="padding:0;height:10px;"></td>
+      </tr>
+      <tr>
+        <td style="padding:0;">
+          <p style="margin:0;padding:0;max-width:392px;line-height:20px;text-align:center;">
+            <span style="padding:0 10px;height:20px;font-size:14px;border-left:30px solid #ffe5ec;">support</span>
+            <span style="padding:0 10px;height:20px;font-size:14px;border-left:30px solid #ffb3c6;">sales</span>
+            <span style="padding:0 10px;height:20px;font-size:14px;border-left:30px solid #fb6f92;">tech</span>
+          </p>
+        </td>
+      </tr>
+    </table>
+  </td>
+</tr>"
+`;
+
 exports[`mjml-bar-chart mjml markup should render the bar chart 1`] = `
 "<!doctype html>
 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
diff --git a/src/index.spec.ts b/src/index.spec.ts
index 4f5f28a..07a7db0 100644
--- a/src/index.spec.ts
+++ b/src/index.spec.ts
@@ -252,7 +252,7 @@ describe("mjml-bar-chart", () => {
 	});
 
 	describe("getLegend", () => {
-		it("should render legend", () => {
+		it("should render legend with minimum params", () => {
 			const json = barChart["getLegend"](1);
 			const html = jsonToXML(json);
 
@@ -267,6 +267,52 @@ describe("mjml-bar-chart", () => {
 				'<span style="padding:0 10px;height:20px;font-size:14px;border-left:30px solid #ffb3c6;">sales</span>'
 			);
 		});
+
+		it("should render legend with maximum params", () => {
+			const barChart = new MjBarChart({
+				attributes: {
+					...attributes,
+					"bar-width": "40",
+				},
+			});
+			const json = barChart["getLegend"](2);
+			const html = jsonToXML(json);
+
+			expect(json).toStrictEqual({
+				tagName: "span",
+				attributes: {
+					style: "padding:0 10px;height:20px;font-size:14px;border-left:40px solid #fb6f92;",
+				},
+				content: "tech",
+			});
+			expect(html).toBe(
+				'<span style="padding:0 10px;height:20px;font-size:14px;border-left:40px solid #fb6f92;">tech</span>'
+			);
+		});
+	});
+
+	describe("getChartLegend", () => {
+		it("should render chart legend with minimum params", () => {
+			const json = barChart["getChartLegend"]();
+			const html = jsonToXML(json);
+
+			expect(json).toMatchSnapshot();
+			expect(html).toMatchSnapshot();
+		});
+
+		it("should render chart legend with maximum params", () => {
+			const barChart = new MjBarChart({
+				attributes: {
+					...attributes,
+					"bar-width": "20",
+				},
+			});
+			const json = barChart["getChartLegend"]();
+			const html = jsonToXML(json);
+
+			expect(json).toMatchSnapshot();
+			expect(html).toMatchSnapshot();
+		});
 	});
 
 	describe("renderJSON", () => {