fix: #405 , and both new and corrected tests for JsonGenerator (#406)

* build: add @testing-library/dom to dependancies

needed to run current tests

* refactor: remove unnecessary named export in JsonGenerator

side effect: improves code coverage

* test: correct test case in CardForm tests

* test: add test to cover final branch in CardForm

* test: add tests to validate output of JsonPreview

introduces a test which fails as it correctly identifies an issue with the current code

* fix: compare schema value types in isDataCached to invalidate cache correctly

Modified isDataCached to compare both keys and value types in the schema to ensure cache invalidation when field types change. This resolves the issue where changing a field type (e.g., from int to firstName) did not update the preview as expected.

* test: add test case to validate preview update after adding a field and setting its type in CardForm

Author: TobyDS

package-lock.json

@@ -72,6 +72,7 @@
     "uuid": "^10.0.0"
   },
   "devDependencies": {
+    "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
     "eslint": "^8",

package.json

@@ -8,6 +8,20 @@ import { ActionButtons } from "./ActionButtons";
 import { PreviewSection } from "./PreviewSection";
 import { initialFields } from "./Init";
 
+export const exportJsonData = (data) => {
+  const blob = new Blob(
+    [
+      JSON.stringify(
+        data,
+        (_, value) => (typeof value === "bigint" ? value.toString() : value),
+        2,
+      ),
+    ],
+    { type: "application/json" },
+  );
+  saveAs(blob, "WebDevTools.json");
+};
+
 export default function CardForm({ isDarkMode }) {
   const [fields, setFields] = useState(initialFields());
   const [numRows, setNumRows] = useState(5);
@@ -46,20 +60,6 @@ export default function CardForm({ isDarkMode }) {
     }).filter((item) => Object.keys(item).length > 0);
   };
 
-  const exportJsonData = (data) => {
-    const blob = new Blob(
-      [
-        JSON.stringify(
-          data,
-          (_, value) => (typeof value === "bigint" ? value.toString() : value),
-          2,
-        ),
-      ],
-      { type: "application/json" },
-    );
-    saveAs(blob, "WebDevTools.json");
-  };
-
   const resetClicks = () => {
     setIsLoading(false);
     setPreviewClicked(false);

src/app/customizer/JsonGenerator/components/CardForm.jsx

@@ -1,5 +1,8 @@
 export const JsonPreview = ({ data }) => (
-  <pre className="p-3 overflow-auto break-words whitespace-pre-wrap">
+  <pre
+    className="p-3 overflow-auto break-words whitespace-pre-wrap"
+    data-testid="preview-json"
+  >
     {JSON.stringify(
       data,
       (_, value) => (typeof value === "bigint" ? value.toString() : value),

src/app/customizer/JsonGenerator/components/JsonPreview.jsx

@@ -5,7 +5,7 @@ import CardForm from "./components/CardForm";
 import Heroish from "./components/Heroish";
 import { Nav } from "@/components/nav";
 
-export function JsonGeneratorMain() {
+function JsonGeneratorMain() {
   const [isDarkMode, setIsDarkMode] = useState(false);
 
   const toggleTheme = () => {