fix: unit test

Author: gjulivan

package.json

@@ -81,7 +81,8 @@
             "react-dom": ">=18.0.0 <19.0.0",
             "rollup": "catalog:",
             "ts-node": "10.9.2",
-            "typescript": ">5.8.0"
+            "typescript": ">5.8.0",
+            "flatted": ">=3.4.2"
         },
         "patchedDependencies": {
             "mime-types": "patches/mime-types.patch",

packages/pluggableWidgets/barcode-generator-web/src/__tests__/BarcodeGenerator.spec.tsx

@@ -2,15 +2,17 @@ import "@testing-library/jest-dom";
 import { fireEvent, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { EditableValueBuilder } from "@mendix/widget-plugin-test-utils";
+import { forwardRef } from "react";
 
 // Mock JsBarcode
 const mockJsBarcode = jest.fn();
 jest.mock("jsbarcode", () => mockJsBarcode);
 
 // Mock the QRCodeSVG component
 jest.mock("qrcode.react", () => ({
-    QRCodeSVG: ({ value, size, level, marginSize, title, imageSettings }: any) => (
+    QRCodeSVG: forwardRef<SVGSVGElement, any>(({ value, size, level, marginSize, title, imageSettings }, ref) => (
         <div
+            ref={ref as any}
             data-testid="qr-code"
             data-value={value}
             data-size={size}
@@ -21,7 +23,7 @@ jest.mock("qrcode.react", () => ({
         >
             QR Code: {value}
         </div>
-    )
+    ))
 }));
 
 // Mock download functionality
@@ -66,6 +68,7 @@ const createBarcodeProps = (overrides: any = {}): any => ({
     qrMargin: 2,
     qrTitle: "",
     qrLevel: "L" as any,
+    showTitle: false,
     qrImage: false,
     qrImageSrc: createMockWebImage(),
     qrImageCenter: true,
@@ -358,7 +361,8 @@ describe("BarcodeGenerator", () => {
 
         it("renders QR code with title", () => {
             const props = createBarcodeProps({
-                qrTitle: "QR Code Title",
+                qrTitle: { value: "QR Code Title", status: "available" } as any,
+                showTitle: true,
                 codeValue: { value: "test", status: "available" } as any
             });
 
@@ -881,7 +885,8 @@ describe("BarcodeGenerator", () => {
     describe("accessibility", () => {
         it("renders QR code title as semantic element when provided", () => {
             const props = createBarcodeProps({
-                qrTitle: "Invoice QR Code",
+                qrTitle: { value: "Invoice QR Code", status: "available" } as any,
+                showTitle: true,
                 codeValue: { value: "test", status: "available" } as any
             });
 
@@ -894,7 +899,8 @@ describe("BarcodeGenerator", () => {
 
         it("does not render title when qrTitle is empty", () => {
             const props = createBarcodeProps({
-                qrTitle: "",
+                qrTitle: { value: "", status: "available" } as any,
+                showTitle: false,
                 codeValue: { value: "test", status: "available" } as any
             });
 
@@ -973,7 +979,8 @@ describe("BarcodeGenerator", () => {
         it("renders QR code with download, title, and image overlay", () => {
             const props = createBarcodeProps({
                 allowDownload: true,
-                qrTitle: "Secure QR",
+                qrTitle: { value: "Secure QR", status: "available" } as any,
+                showTitle: true,
                 qrImage: true,
                 qrImageSrc: createMockWebImage("available"),
                 downloadButtonCaption: { status: "available" as const, value: "Save QR" } as any,

packages/pluggableWidgets/barcode-generator-web/src/components/QRCode.tsx

@@ -1,12 +1,35 @@
 import { QRCodeSVG } from "qrcode.react";
-import { ReactElement, useRef } from "react";
+import { forwardRef, ReactElement, useRef } from "react";
+import { QRCodeTypeConfig } from "../config/Barcode.config";
 import { downloadCode } from "../utils/download-code";
 import { DownloadButton } from "./DownloadButton";
-import { QRCodeTypeConfig } from "../config/Barcode.config";
 
 interface QRCodeRendererProps {
     config: QRCodeTypeConfig;
 }
+interface QRCodeSVGWrapperProps {
+    value: string;
+    size?: number;
+    level?: string;
+    marginSize?: number;
+    title?: string;
+    imageSettings?: any;
+}
+
+const QRCodeSVGWrapper = forwardRef<SVGSVGElement, QRCodeSVGWrapperProps>(
+    ({ value, size, level, marginSize, title, imageSettings }, ref) => (
+        <QRCodeSVG
+            ref={ref as any}
+            value={value}
+            size={size}
+            level={level as any}
+            marginSize={marginSize}
+            title={title}
+            imageSettings={imageSettings}
+        />
+    )
+);
+QRCodeSVGWrapper.displayName = "QRCodeSVGWrapper";
 
 export function QRCodeRenderer({ config }: QRCodeRendererProps): ReactElement {
     const ref = useRef<SVGSVGElement>(null);
@@ -26,7 +49,7 @@ export function QRCodeRenderer({ config }: QRCodeRendererProps): ReactElement {
         <div className="qrcode-renderer">
             {config.showTitle && <h3 className="qrcode-renderer-title">{title}</h3>}
             {buttonPosition === "top" && button}
-            <QRCodeSVG
+            <QRCodeSVGWrapper
                 ref={ref}
                 value={codeValue}
                 size={size}

packages/pluggableWidgets/barcode-generator-web/src/config/Barcode.config.ts

@@ -72,19 +72,20 @@ export function barcodeConfig(props: BarcodeGeneratorContainerProps): BarcodeCon
         : undefined;
 
     const baseConfig: CodeBaseTypeConfig = {
-        type: format === "QRCode" ? "qrcode" : "barcode",
+        type: "barcode",
         codeValue,
         margin: props.codeMargin ?? 2,
         logLevel: props.logLevel,
         downloadButton: downloadButtonConfig
     };
 
     if (format === "QRCode") {
-        return {
+        const qrConfig: QRCodeTypeConfig = {
             ...baseConfig,
+            margin: props.qrMargin ?? 2,
             type: "qrcode",
             size: props.qrSize ?? 128,
-            showTitle: props.showTitle,
+            showTitle: props.showTitle ?? false,
             title: props.qrTitle.status === "available" ? props.qrTitle.value : "QR Code",
             level: props.qrLevel ?? "L",
             overlay:
@@ -100,9 +101,10 @@ export function barcodeConfig(props: BarcodeGeneratorContainerProps): BarcodeCon
                       }
                     : undefined
         };
+        return qrConfig;
     }
 
-    return {
+    const barcodeConfig: BarcodeTypeConfig = {
         ...baseConfig,
         type: "barcode",
         width: props.codeWidth ?? 128,
@@ -119,6 +121,8 @@ export function barcodeConfig(props: BarcodeGeneratorContainerProps): BarcodeCon
         addonFormat: props.addonFormat,
         addonSpacing: props.addonSpacing ?? 20
     };
+
+    return barcodeConfig;
 }
 
 function generateFileName(customFileName: string | undefined, format: string, codeValue: string): string {