From 65b3794ce5d352bfeac931d9996a65b96df1801d Mon Sep 17 00:00:00 2001
From: Melloware <mellowaredev@gmail.com>
Date: Fri, 12 Jan 2024 11:52:21 -0500
Subject: [PATCH] Fix tests (#5759)

* Fix #5757: Accordion error reading disabled

* Fixed tests
---
 components/lib/chip/Chip.js                   |   2 +-
 components/lib/chip/Chip.spec.js              |   6 +-
 .../lib/chip/__snapshots__/Chip.spec.js.snap  |  53 +----
 components/lib/fieldset/Fieldset.spec.js      |   4 +-
 .../__snapshots__/Fieldset.spec.js.snap       | 207 ++++++++++++++++++
 5 files changed, 218 insertions(+), 54 deletions(-)

diff --git a/components/lib/chip/Chip.js b/components/lib/chip/Chip.js
index 6a0f347438..0e3b9af89f 100644
--- a/components/lib/chip/Chip.js
+++ b/components/lib/chip/Chip.js
@@ -20,7 +20,7 @@ export const Chip = React.memo(
         useHandleStyle(ChipBase.css.styles, isUnstyled, { name: 'chip' });
 
         const onKeyDown = (event) => {
-            if (event.key === 'Enter' || event.key === 'Backspace') {
+            if (event.code === 'Enter' || event.code === 'Backspace') {
                 close(event);
             }
         };
diff --git a/components/lib/chip/Chip.spec.js b/components/lib/chip/Chip.spec.js
index 35846b39e8..5bc8725d69 100644
--- a/components/lib/chip/Chip.spec.js
+++ b/components/lib/chip/Chip.spec.js
@@ -10,7 +10,7 @@ describe('Chip', () => {
     snapshot(<Chip image="http://google.com/my.png" imageAlt="jest" />, 'image and alt');
     snapshot(<Chip icon="pi pi-check" />, 'icon');
     snapshot(<Chip label="jest" />, 'label');
-    test('when removable is true it returns with remove icon', () => {
+    test('when removable is true the chip is removed when ENTER is pressed', () => {
         // Arrange
         const removeOn = jest.fn();
         const { container } = render(<Chip removable onRemove={removeOn} />);
@@ -19,13 +19,13 @@ describe('Chip', () => {
         const chipRemoveIcon = container.getElementsByClassName('p-chip-remove-icon')[0];
 
         // Act
-        fireEvent.keyDown(chipRemoveIcon, { key: 'enter', keyCode: 13 });
+        fireEvent.keyDown(chipRemoveIcon, { key: 'Enter', code: 'Enter' });
 
         // Assert
         expect(container).toMatchSnapshot('after remove');
         expect(removeOn).toHaveBeenCalledTimes(1);
     });
-    test('when removable is true the chip is removed when ENTER is pressed', () => {
+    test('when removable is true it returns with remove icon', () => {
         // Arrange
         const removeOn = jest.fn();
         const { container } = render(<Chip removable onRemove={removeOn} />);
diff --git a/components/lib/chip/__snapshots__/Chip.spec.js.snap b/components/lib/chip/__snapshots__/Chip.spec.js.snap
index b3f9745027..8f48a63436 100644
--- a/components/lib/chip/__snapshots__/Chip.spec.js.snap
+++ b/components/lib/chip/__snapshots__/Chip.spec.js.snap
@@ -75,50 +75,7 @@ exports[`Chip label 1`] = `
 </div>
 `;
 
-exports[`Chip when removable is true it returns with remove icon: after remove 1`] = `
-<div>
-  <div
-    class="p-chip p-component"
-    data-pc-name="chip"
-    data-pc-section="root"
-  >
-    <svg
-      aria-hidden="true"
-      class="p-icon p-chip-remove-icon"
-      data-pc-section="removeicon"
-      fill="none"
-      height="14"
-      role="button"
-      tabindex="0"
-      viewBox="0 0 14 14"
-      width="14"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <g
-        clip-path="url(#pr_icon_clip_1)"
-      >
-        <path
-          clip-rule="evenodd"
-          d="M7 14C5.61553 14 4.26215 13.5895 3.11101 12.8203C1.95987 12.0511 1.06266 10.9579 0.532846 9.67879C0.00303296 8.3997 -0.13559 6.99224 0.134506 5.63437C0.404603 4.2765 1.07129 3.02922 2.05026 2.05026C3.02922 1.07129 4.2765 0.404603 5.63437 0.134506C6.99224 -0.13559 8.3997 0.00303296 9.67879 0.532846C10.9579 1.06266 12.0511 1.95987 12.8203 3.11101C13.5895 4.26215 14 5.61553 14 7C14 8.85652 13.2625 10.637 11.9497 11.9497C10.637 13.2625 8.85652 14 7 14ZM7 1.16667C5.84628 1.16667 4.71846 1.50879 3.75918 2.14976C2.79989 2.79074 2.05222 3.70178 1.61071 4.76768C1.16919 5.83358 1.05367 7.00647 1.27876 8.13803C1.50384 9.26958 2.05941 10.309 2.87521 11.1248C3.69102 11.9406 4.73042 12.4962 5.86198 12.7212C6.99353 12.9463 8.16642 12.8308 9.23232 12.3893C10.2982 11.9478 11.2093 11.2001 11.8502 10.2408C12.4912 9.28154 12.8333 8.15373 12.8333 7C12.8333 5.45291 12.2188 3.96918 11.1248 2.87521C10.0308 1.78125 8.5471 1.16667 7 1.16667ZM4.66662 9.91668C4.58998 9.91704 4.51404 9.90209 4.44325 9.87271C4.37246 9.84333 4.30826 9.8001 4.2544 9.74557C4.14516 9.6362 4.0838 9.48793 4.0838 9.33335C4.0838 9.17876 4.14516 9.0305 4.2544 8.92113L6.17553 7L4.25443 5.07891C4.15139 4.96832 4.09529 4.82207 4.09796 4.67094C4.10063 4.51982 4.16185 4.37563 4.26872 4.26876C4.3756 4.16188 4.51979 4.10066 4.67091 4.09799C4.82204 4.09532 4.96829 4.15142 5.07887 4.25446L6.99997 6.17556L8.92106 4.25446C9.03164 4.15142 9.1779 4.09532 9.32903 4.09799C9.48015 4.10066 9.62434 4.16188 9.73121 4.26876C9.83809 4.37563 9.89931 4.51982 9.90198 4.67094C9.90464 4.82207 9.84855 4.96832 9.74551 5.07891L7.82441 7L9.74554 8.92113C9.85478 9.0305 9.91614 9.17876 9.91614 9.33335C9.91614 9.48793 9.85478 9.6362 9.74554 9.74557C9.69168 9.8001 9.62748 9.84333 9.55669 9.87271C9.4859 9.90209 9.40996 9.91704 9.33332 9.91668C9.25668 9.91704 9.18073 9.90209 9.10995 9.87271C9.03916 9.84333 8.97495 9.8001 8.9211 9.74557L6.99997 7.82444L5.07884 9.74557C5.02499 9.8001 4.96078 9.84333 4.88999 9.87271C4.81921 9.90209 4.74326 9.91704 4.66662 9.91668Z"
-          fill="currentColor"
-          fill-rule="evenodd"
-        />
-      </g>
-      <defs>
-        <clippath
-          id="pr_icon_clip_1"
-        >
-          <rect
-            fill="white"
-            height="14"
-            width="14"
-          />
-        </clippath>
-      </defs>
-    </svg>
-  </div>
-</div>
-`;
+exports[`Chip when removable is true it returns with remove icon: after remove 1`] = `<div />`;
 
 exports[`Chip when removable is true it returns with remove icon: before remove 1`] = `
 <div>
@@ -140,7 +97,7 @@ exports[`Chip when removable is true it returns with remove icon: before remove
       xmlns="http://www.w3.org/2000/svg"
     >
       <g
-        clip-path="url(#pr_icon_clip_1)"
+        clip-path="url(#pr_icon_clip_2)"
       >
         <path
           clip-rule="evenodd"
@@ -151,7 +108,7 @@ exports[`Chip when removable is true it returns with remove icon: before remove
       </g>
       <defs>
         <clippath
-          id="pr_icon_clip_1"
+          id="pr_icon_clip_2"
         >
           <rect
             fill="white"
@@ -187,7 +144,7 @@ exports[`Chip when removable is true the chip is removed when ENTER is pressed:
       xmlns="http://www.w3.org/2000/svg"
     >
       <g
-        clip-path="url(#pr_icon_clip_2)"
+        clip-path="url(#pr_icon_clip_1)"
       >
         <path
           clip-rule="evenodd"
@@ -198,7 +155,7 @@ exports[`Chip when removable is true the chip is removed when ENTER is pressed:
       </g>
       <defs>
         <clippath
-          id="pr_icon_clip_2"
+          id="pr_icon_clip_1"
         >
           <rect
             fill="white"
diff --git a/components/lib/fieldset/Fieldset.spec.js b/components/lib/fieldset/Fieldset.spec.js
index 26af15d0e1..8bbf497f4c 100644
--- a/components/lib/fieldset/Fieldset.spec.js
+++ b/components/lib/fieldset/Fieldset.spec.js
@@ -30,7 +30,7 @@ describe('Fieldset', () => {
                 </Fieldset>
             </PrimeReactProvider>
         );
-        const legend = container.getElementsByClassName('p-fieldset-legend')[0];
+        const legend = container.querySelectorAll('[data-pc-section="toggler"]')[0];
 
         expect(container).toMatchSnapshot('toggleable-open');
 
@@ -54,7 +54,7 @@ describe('Fieldset', () => {
                 </Fieldset>
             </PrimeReactProvider>
         );
-        const legend = container.getElementsByClassName('p-fieldset-legend')[0];
+        const legend = container.querySelectorAll('[data-pc-section="toggler"]')[0];
 
         expect(container).toMatchSnapshot('expandable-open');
 
diff --git a/components/lib/fieldset/__snapshots__/Fieldset.spec.js.snap b/components/lib/fieldset/__snapshots__/Fieldset.spec.js.snap
index 7be0efdfee..3cef37d66a 100644
--- a/components/lib/fieldset/__snapshots__/Fieldset.spec.js.snap
+++ b/components/lib/fieldset/__snapshots__/Fieldset.spec.js.snap
@@ -62,6 +62,85 @@ exports[`Fieldset legend 1`] = `
 </div>
 `;
 
+exports[`Fieldset when Fieldset is toggleable it must expand and collapse: expandable-closed 1`] = `
+<div>
+  <fieldset
+    class="p-fieldset p-component p-fieldset-toggleable"
+    data-pc-name="fieldset"
+    data-pc-section="root"
+    id="pr_id_3"
+  >
+    <legend
+      class="p-fieldset-legend p-unselectable-text"
+      data-pc-section="legend"
+    >
+      <a
+        aria-controls="pr_id_3_content"
+        aria-expanded="false"
+        aria-label="Expand/Collapse"
+        data-pc-section="toggler"
+        id="pr_id_3_header"
+        role="button"
+        tabindex="0"
+      >
+        <svg
+          aria-hidden="true"
+          class="p-icon p-fieldset-toggler"
+          data-pc-section="togglericon"
+          fill="none"
+          height="14"
+          viewBox="0 0 14 14"
+          width="14"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <g
+            clip-path="url(#pr_icon_clip_4)"
+          >
+            <path
+              d="M7.67742 6.32258V0.677419C7.67742 0.497757 7.60605 0.325452 7.47901 0.198411C7.35197 0.0713707 7.17966 0 7 0C6.82034 0 6.64803 0.0713707 6.52099 0.198411C6.39395 0.325452 6.32258 0.497757 6.32258 0.677419V6.32258H0.677419C0.497757 6.32258 0.325452 6.39395 0.198411 6.52099C0.0713707 6.64803 0 6.82034 0 7C0 7.17966 0.0713707 7.35197 0.198411 7.47901C0.325452 7.60605 0.497757 7.67742 0.677419 7.67742H6.32258V13.3226C6.32492 13.5015 6.39704 13.6725 6.52358 13.799C6.65012 13.9255 6.82106 13.9977 7 14C7.17966 14 7.35197 13.9286 7.47901 13.8016C7.60605 13.6745 7.67742 13.5022 7.67742 13.3226V7.67742H13.3226C13.5022 7.67742 13.6745 7.60605 13.8016 7.47901C13.9286 7.35197 14 7.17966 14 7C13.9977 6.82106 13.9255 6.65012 13.799 6.52358C13.6725 6.39704 13.5015 6.32492 13.3226 6.32258H7.67742Z"
+              fill="currentColor"
+            />
+          </g>
+          <defs>
+            <clippath
+              id="pr_icon_clip_4"
+            >
+              <rect
+                fill="white"
+                height="14"
+                width="14"
+              />
+            </clippath>
+          </defs>
+        </svg>
+        <span
+          class="p-fieldset-legend-text"
+          data-pc-section="legendtitle"
+        >
+          Expand/Collapse
+        </span>
+      </a>
+    </legend>
+    <div
+      aria-labelledby="pr_id_3_header"
+      class="p-toggleable-content p-toggleable-content-exit p-toggleable-content-exit-active"
+      data-pc-section="toggleablecontent"
+      id="pr_id_3_content"
+      role="region"
+    >
+      <div
+        class="p-fieldset-content"
+        data-pc-section="content"
+      >
+        <p>
+          Lorem ipsum dolor sit amet
+        </p>
+      </div>
+    </div>
+  </fieldset>
+</div>
+`;
+
 exports[`Fieldset when Fieldset is toggleable it must expand and collapse: expandable-open 1`] = `
 <div>
   <fieldset
@@ -126,6 +205,134 @@ exports[`Fieldset when Fieldset is toggleable it must expand and collapse: expan
 </div>
 `;
 
+exports[`Fieldset when Fieldset is toggleable it must expand and collapse: expandable-open 2`] = `
+<div>
+  <fieldset
+    class="p-fieldset p-component p-fieldset-toggleable"
+    data-pc-name="fieldset"
+    data-pc-section="root"
+    id="pr_id_3"
+  >
+    <legend
+      class="p-fieldset-legend p-unselectable-text"
+      data-pc-section="legend"
+    >
+      <a
+        aria-controls="pr_id_3_content"
+        aria-expanded="true"
+        aria-label="Expand/Collapse"
+        data-pc-section="toggler"
+        id="pr_id_3_header"
+        role="button"
+        tabindex="0"
+      >
+        <svg
+          aria-hidden="true"
+          class="p-icon p-fieldset-toggler"
+          data-pc-section="togglericon"
+          fill="none"
+          height="14"
+          viewBox="0 0 14 14"
+          width="14"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M13.2222 7.77778H0.777778C0.571498 7.77778 0.373667 7.69584 0.227806 7.54998C0.0819442 7.40412 0 7.20629 0 7.00001C0 6.79373 0.0819442 6.5959 0.227806 6.45003C0.373667 6.30417 0.571498 6.22223 0.777778 6.22223H13.2222C13.4285 6.22223 13.6263 6.30417 13.7722 6.45003C13.9181 6.5959 14 6.79373 14 7.00001C14 7.20629 13.9181 7.40412 13.7722 7.54998C13.6263 7.69584 13.4285 7.77778 13.2222 7.77778Z"
+            fill="currentColor"
+          />
+        </svg>
+        <span
+          class="p-fieldset-legend-text"
+          data-pc-section="legendtitle"
+        >
+          Expand/Collapse
+        </span>
+      </a>
+    </legend>
+    <div
+      aria-labelledby="pr_id_3_header"
+      class="p-toggleable-content p-toggleable-content-enter p-toggleable-content-enter-active"
+      data-pc-section="toggleablecontent"
+      id="pr_id_3_content"
+      role="region"
+    >
+      <div
+        class="p-fieldset-content"
+        data-pc-section="content"
+      >
+        <p>
+          Lorem ipsum dolor sit amet
+        </p>
+      </div>
+    </div>
+  </fieldset>
+</div>
+`;
+
+exports[`Fieldset when Fieldset is toggleable it will toggle when clicked: toggleable-closed 1`] = `
+<div>
+  <fieldset
+    class="p-fieldset p-component p-fieldset-toggleable"
+    data-pc-name="fieldset"
+    data-pc-section="root"
+    id="pr_id_2"
+  >
+    <legend
+      class="p-fieldset-legend p-unselectable-text"
+      data-pc-section="legend"
+    >
+      <a
+        aria-controls="pr_id_2_content"
+        aria-expanded="true"
+        aria-label="Toggleable"
+        data-pc-section="toggler"
+        id="pr_id_2_header"
+        role="button"
+        tabindex="0"
+      >
+        <svg
+          aria-hidden="true"
+          class="p-icon p-fieldset-toggler"
+          data-pc-section="togglericon"
+          fill="none"
+          height="14"
+          viewBox="0 0 14 14"
+          width="14"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M13.2222 7.77778H0.777778C0.571498 7.77778 0.373667 7.69584 0.227806 7.54998C0.0819442 7.40412 0 7.20629 0 7.00001C0 6.79373 0.0819442 6.5959 0.227806 6.45003C0.373667 6.30417 0.571498 6.22223 0.777778 6.22223H13.2222C13.4285 6.22223 13.6263 6.30417 13.7722 6.45003C13.9181 6.5959 14 6.79373 14 7.00001C14 7.20629 13.9181 7.40412 13.7722 7.54998C13.6263 7.69584 13.4285 7.77778 13.2222 7.77778Z"
+            fill="currentColor"
+          />
+        </svg>
+        <span
+          class="p-fieldset-legend-text"
+          data-pc-section="legendtitle"
+        >
+          Toggleable
+        </span>
+      </a>
+    </legend>
+    <div
+      aria-labelledby="pr_id_2_header"
+      class="p-toggleable-content"
+      data-pc-section="toggleablecontent"
+      id="pr_id_2_content"
+      role="region"
+    >
+      <div
+        class="p-fieldset-content"
+        data-pc-section="content"
+      >
+        <p>
+          Lorem ipsum dolor sit amet
+        </p>
+      </div>
+    </div>
+  </fieldset>
+</div>
+`;
+
 exports[`Fieldset when Fieldset is toggleable it will toggle when clicked: toggleable-open 1`] = `
 <div>
   <fieldset