Fix tests (#5759)

* Fix #5757: Accordion error reading disabled * Fixed tests
primefaces · Jan 12, 2024 · 65b3794 · 65b3794
1 parent 9b51ab2
commit 65b3794
Show file tree

Hide file tree

Showing 5 changed files with 218 additions and 54 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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