fix(props): update fluid-on-mobile value on pass through

src/utils/mjml-component-utils.ts

@@ -34,7 +34,7 @@ export function convertPropsToMjmlAttributes<P>(props: {
   return mjmlProps;
 }
 
-const booleanToString = ["inline", "full-width", "fluid-on-mobile"];
+const booleanToString = ["inline", "full-width"];
 const numberToPixel = [
   "width",
   "height",
@@ -65,6 +65,9 @@ function convertPropValueToMjml(
   if (typeof value === "boolean" && booleanToString.includes(name)) {
     return name;
   }
+  if (typeof value === "boolean") {
+    return `${value}`;
+  }
   if (typeof value === "object" && value !== null) {
     return value;
   }

test/mjml-props.test.tsx

@@ -37,9 +37,15 @@ describe("mjml components prop values", () => {
     expect(renderToMjml(<mjmlComponents.MjmlStyle inline />)).toBe(
       `<mj-style inline="inline"></mj-style>`
     );
+  });
+
+  it("boolean props convert as expected", () => {
     expect(renderToMjml(<mjmlComponents.MjmlImage fluidOnMobile />)).toBe(
-      `<mj-image fluid-on-mobile="fluid-on-mobile"></mj-image>`
+      `<mj-image fluid-on-mobile="true"></mj-image>`
     );
+    expect(
+      renderToMjml(<mjmlComponents.MjmlImage fluidOnMobile={false} />)
+    ).toBe(`<mj-image fluid-on-mobile="false"></mj-image>`);
   });
 
   it("enum prop type accepts all enum values", () => {

test/render.test.tsx

@@ -1,6 +1,17 @@
 import React from "react";
 
-import { Mjml, MjmlHead, MjmlTitle, MjmlBody, MjmlRaw } from "../src";
+import {
+  Mjml,
+  MjmlHead,
+  MjmlTitle,
+  MjmlBody,
+  MjmlRaw,
+  MjmlSection,
+  MjmlColumn,
+  MjmlText,
+  MjmlButton,
+  MjmlImage,
+} from "../src";
 import { render } from "../src/utils/render";
 
 describe("render()", () => {
@@ -54,4 +65,32 @@ describe("render()", () => {
       "Element div doesn't exist or is not registered"
     );
   });
+
+  it("should handle all prop types (numbers, booleans, strings, objects, etc.) without error", () => {
+    const email = (
+      <Mjml>
+        <MjmlBody>
+          {/* Boolean in booleanToString array -> returns property name */}
+          <MjmlSection fullWidth>
+            {/* Number in numberToPixel array -> returns `${value}px` */}
+            <MjmlColumn width={300}>
+              <MjmlText
+                color="red" // String value -> returns string as-is
+                fontSize={16} // Number in numberToPixel array -> returns `${value}px`
+              >
+                Test text content
+              </MjmlText>
+              <MjmlButton>Click me</MjmlButton>
+              {/* Boolean NOT in booleanToString array -> returns `${value}` (string) */}
+              <MjmlImage fluidOnMobile />
+            </MjmlColumn>
+          </MjmlSection>
+        </MjmlBody>
+      </Mjml>
+    );
+    const { html, errors } = render(email);
+    // Verify no errors when rendering the different prop types
+    expect(errors).toHaveLength(0);
+    expect(html).toBeDefined();
+  });
 });