From 0d684c2c8104bfeaf70690d711e9931a4ac349a6 Mon Sep 17 00:00:00 2001
From: Abhishek-17H <abhishekhegaje1702@gmail.com>
Date: Wed, 15 Jan 2025 14:37:17 +0530
Subject: [PATCH] Fix duplicate id issue in FileWidget and CheckboxWidget tests

---
 .../manage/Widgets/CheckboxWidget.test.jsx    | 10 ++--
 .../manage/Widgets/FileWidget.test.jsx        | 12 ++---
 .../CheckboxWidget.test.jsx.snap              | 20 ++++----
 .../__snapshots__/FileWidget.test.jsx.snap    | 46 +++++++++----------
 4 files changed, 46 insertions(+), 42 deletions(-)

diff --git a/packages/volto/src/components/manage/Widgets/CheckboxWidget.test.jsx b/packages/volto/src/components/manage/Widgets/CheckboxWidget.test.jsx
index bb752a9813..28a722977d 100644
--- a/packages/volto/src/components/manage/Widgets/CheckboxWidget.test.jsx
+++ b/packages/volto/src/components/manage/Widgets/CheckboxWidget.test.jsx
@@ -18,7 +18,11 @@ describe('CheckboxWidget', () => {
 
     const { asFragment } = render(
       <Provider store={store}>
-        <CheckboxWidget id="my-field" title="My field" onChange={() => {}} />
+        <CheckboxWidget
+          id="checkbox-widget"
+          title="Checkbox Widget"
+          onChange={() => {}}
+        />
       </Provider>,
     );
 
@@ -37,8 +41,8 @@ describe('CheckboxWidget', () => {
       <Provider store={store}>
         <CheckboxWidget
           value={true}
-          id="my-field"
-          title="My field"
+          id="checked-checkbox-widget"
+          title="Checked Checkbox Widget"
           onChange={() => {}}
         />
       </Provider>,
diff --git a/packages/volto/src/components/manage/Widgets/FileWidget.test.jsx b/packages/volto/src/components/manage/Widgets/FileWidget.test.jsx
index f003c1b8c7..2797d7ea36 100644
--- a/packages/volto/src/components/manage/Widgets/FileWidget.test.jsx
+++ b/packages/volto/src/components/manage/Widgets/FileWidget.test.jsx
@@ -21,8 +21,8 @@ describe('FileWidget', () => {
     const { container } = render(
       <Provider store={store}>
         <FileWidget
-          id="my-field"
-          title="My field"
+          id="empty-file-widget"
+          title="Empty File Widget"
           fieldSet="default"
           onChange={() => {}}
         />
@@ -43,8 +43,8 @@ describe('FileWidget', () => {
     const { container } = render(
       <Provider store={store}>
         <FileWidget
-          id="my-field"
-          title="My field"
+          id="file-widget-with-value"
+          title="File Widget With Value"
           fieldSet="default"
           onChange={() => {}}
           value={{
@@ -71,8 +71,8 @@ describe('FileWidget', () => {
     const { container } = render(
       <Provider store={store}>
         <FileWidget
-          id="my-field"
-          title="My field"
+          id="file-widget-raw-data"
+          title="File Widget With Raw Data"
           fieldSet="default"
           onChange={() => {}}
           value={{
diff --git a/packages/volto/src/components/manage/Widgets/__snapshots__/CheckboxWidget.test.jsx.snap b/packages/volto/src/components/manage/Widgets/__snapshots__/CheckboxWidget.test.jsx.snap
index a2c0132a86..ab1f1b8be6 100644
--- a/packages/volto/src/components/manage/Widgets/__snapshots__/CheckboxWidget.test.jsx.snap
+++ b/packages/volto/src/components/manage/Widgets/__snapshots__/CheckboxWidget.test.jsx.snap
@@ -3,7 +3,7 @@
 exports[`CheckboxWidget renders a checkbox widget component 1`] = `
 <DocumentFragment>
   <div
-    class="inline field field-wrapper-my-field"
+    class="inline field field-wrapper-checkbox-widget"
   >
     <div
       class="ui grid"
@@ -22,17 +22,17 @@ exports[`CheckboxWidget renders a checkbox widget component 1`] = `
             >
               <input
                 class="hidden"
-                id="field-my-field"
-                name="field-my-field"
+                id="field-checkbox-widget"
+                name="field-checkbox-widget"
                 readonly=""
                 tabindex="0"
                 type="checkbox"
                 value=""
               />
               <label
-                for="field-my-field"
+                for="field-checkbox-widget"
               >
-                My field
+                Checkbox Widget
               </label>
             </div>
           </div>
@@ -46,7 +46,7 @@ exports[`CheckboxWidget renders a checkbox widget component 1`] = `
 exports[`CheckboxWidget renders a checkbox widget component checked 1`] = `
 <DocumentFragment>
   <div
-    class="inline field field-wrapper-my-field"
+    class="inline field field-wrapper-checked-checkbox-widget"
   >
     <div
       class="ui grid"
@@ -66,17 +66,17 @@ exports[`CheckboxWidget renders a checkbox widget component checked 1`] = `
               <input
                 checked=""
                 class="hidden"
-                id="field-my-field"
-                name="field-my-field"
+                id="field-checked-checkbox-widget"
+                name="field-checked-checkbox-widget"
                 readonly=""
                 tabindex="0"
                 type="checkbox"
                 value=""
               />
               <label
-                for="field-my-field"
+                for="field-checked-checkbox-widget"
               >
-                My field
+                Checked Checkbox Widget
               </label>
             </div>
           </div>
diff --git a/packages/volto/src/components/manage/Widgets/__snapshots__/FileWidget.test.jsx.snap b/packages/volto/src/components/manage/Widgets/__snapshots__/FileWidget.test.jsx.snap
index d57063bc63..4cd703dcbf 100644
--- a/packages/volto/src/components/manage/Widgets/__snapshots__/FileWidget.test.jsx.snap
+++ b/packages/volto/src/components/manage/Widgets/__snapshots__/FileWidget.test.jsx.snap
@@ -3,7 +3,7 @@
 exports[`FileWidget renders a file widget component with value 1`] = `
 <div>
   <div
-    class="inline field field-wrapper-my-field"
+    class="inline field field-wrapper-file-widget-with-value"
   >
     <div
       class="ui grid"
@@ -18,10 +18,10 @@ exports[`FileWidget renders a file widget component with value 1`] = `
             class="wrapper"
           >
             <label
-              for="field-my-field"
-              id="fieldset-default-field-label-my-field"
+              for="field-file-widget-with-value"
+              id="fieldset-default-field-label-file-widget-with-value"
             >
-              My field
+              File Widget With Value
             </label>
           </div>
         </div>
@@ -34,20 +34,20 @@ exports[`FileWidget renders a file widget component with value 1`] = `
           >
             <img
               class="ui small image image-preview"
-              id="field-my-field-image"
+              id="field-file-widget-with-value-image"
               src="http://myfile?id=0"
             />
             <label
               class="label-file-widget-input"
-              for="field-my-field"
+              for="field-file-widget-with-value"
             >
               Replace existing file
             </label>
             <input
               autocomplete="off"
-              id="field-my-field"
+              id="field-file-widget-with-value"
               multiple=""
-              name="my-field"
+              name="file-widget-with-value"
               style="display: none;"
               tabindex="-1"
               type="file"
@@ -87,7 +87,7 @@ exports[`FileWidget renders a file widget component with value 1`] = `
 exports[`FileWidget renders a file widget component with value in raw data 1`] = `
 <div>
   <div
-    class="inline field field-wrapper-my-field"
+    class="inline field field-wrapper-file-widget-raw-data"
   >
     <div
       class="ui grid"
@@ -102,10 +102,10 @@ exports[`FileWidget renders a file widget component with value in raw data 1`] =
             class="wrapper"
           >
             <label
-              for="field-my-field"
-              id="fieldset-default-field-label-my-field"
+              for="field-file-widget-raw-data"
+              id="fieldset-default-field-label-file-widget-raw-data"
             >
-              My field
+              File Widget With Raw Data
             </label>
           </div>
         </div>
@@ -118,20 +118,20 @@ exports[`FileWidget renders a file widget component with value in raw data 1`] =
           >
             <img
               class="ui small image image-preview"
-              id="field-my-field-image"
+              id="field-file-widget-raw-data-image"
               src="data:image/png;base64,oiweurtksdgfjaslfqw9523563456"
             />
             <label
               class="label-file-widget-input"
-              for="field-my-field"
+              for="field-file-widget-raw-data"
             >
               Replace existing file
             </label>
             <input
               autocomplete="off"
-              id="field-my-field"
+              id="field-file-widget-raw-data"
               multiple=""
-              name="my-field"
+              name="file-widget-raw-data"
               style="display: none;"
               tabindex="-1"
               type="file"
@@ -170,7 +170,7 @@ exports[`FileWidget renders a file widget component with value in raw data 1`] =
 exports[`FileWidget renders an empty file widget component 1`] = `
 <div>
   <div
-    class="inline field field-wrapper-my-field"
+    class="inline field field-wrapper-empty-file-widget"
   >
     <div
       class="ui grid"
@@ -185,10 +185,10 @@ exports[`FileWidget renders an empty file widget component 1`] = `
             class="wrapper"
           >
             <label
-              for="field-my-field"
-              id="fieldset-default-field-label-my-field"
+              for="field-empty-file-widget"
+              id="fieldset-default-field-label-empty-file-widget"
             >
-              My field
+              Empty File Widget
             </label>
           </div>
         </div>
@@ -210,15 +210,15 @@ exports[`FileWidget renders an empty file widget component 1`] = `
             </div>
             <label
               class="label-file-widget-input"
-              for="field-my-field"
+              for="field-empty-file-widget"
             >
               Choose a file
             </label>
             <input
               autocomplete="off"
-              id="field-my-field"
+              id="field-empty-file-widget"
               multiple=""
-              name="my-field"
+              name="empty-file-widget"
               style="display: none;"
               tabindex="-1"
               type="file"