Fix tests and prevent class="" in DOM (#4805)

primefaces · Aug 21, 2023 · a5f2cda · a5f2cda
1 parent 3a00801
commit a5f2cda
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 17 deletions.
diff --git a/components/lib/carousel/Carousel.js b/components/lib/carousel/Carousel.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PrimeReact, { PrimeReactContext, ariaLabel } from '../api/Api';
 import { useHandleStyle } from '../componentbase/ComponentBase';
-import { useMountEffect, usePrevious, useResizeListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
+import { useMountEffect, usePrevious, useResizeListener, useUpdateEffect } from '../hooks/Hooks';
 import { ChevronDownIcon } from '../icons/chevrondown';
 import { ChevronLeftIcon } from '../icons/chevronleft';
 import { ChevronRightIcon } from '../icons/chevronright';
@@ -326,9 +326,11 @@ export const Carousel = React.memo(
                 elementRef.current.setAttribute(attributeSelector.current, '');
             }
 
-            calculatePosition();
-            changePosition(totalShiftedItemsState);
-            bindWindowResizeListener();
+            if (!carouselStyle.current) {
+                calculatePosition();
+                changePosition(totalShiftedItemsState);
+                bindWindowResizeListener();
+            }
         });
 
         useUpdateEffect(() => {

diff --git a/components/lib/componentbase/ComponentBase.js b/components/lib/componentbase/ComponentBase.js
@@ -520,7 +520,9 @@ export const ComponentBase = {
                 ...ObjectUtils.getMergedProps(self, globalPT)
             };
 
-            const mergedClassName = [globalPT.className, self.className].filter(Boolean).join(' ').trim();
+            let mergedClassName = [globalPT.className, self.className].filter(Boolean).join(' ').trim();
+
+            mergedClassName = ObjectUtils.isEmpty(mergedClassName) ? undefined : mergedClassName;
 
             if (Object.keys(datasetProps).length) {
                 merged = {

diff --git a/components/lib/progressbar/__snapshots__/ProgressBar.spec.js.snap b/components/lib/progressbar/__snapshots__/ProgressBar.spec.js.snap
@@ -13,7 +13,7 @@ exports[`ProgressBar default 1`] = `
     <div
       class="p-progressbar-value p-progressbar-value-animate"
       data-pc-section="value"
-      style="width: 2%; display: flex; background-color: transparent;"
+      style="display: flex;"
     />
   </div>
 </div>
@@ -77,7 +77,7 @@ exports[`ProgressBar mode indeterminate 1`] = `
   >
     <div
       class="p-progressbar-indeterminate-container"
-      data-pc-section="indeterminatecontainer"
+      data-pc-section="container"
     >
       <div
         class="p-progressbar-value p-progressbar-value-animate"

diff --git a/components/lib/skeleton/__snapshots__/Skeleton.spec.js.snap b/components/lib/skeleton/__snapshots__/Skeleton.spec.js.snap
@@ -6,7 +6,7 @@ exports[`Skeleton animation none 1`] = `
     class="p-skeleton p-component p-skeleton-none"
     data-pc-name="skeleton"
     data-pc-section="root"
-    style="width: 100%; height: 1rem;"
+    style="width: 100%; height: 1rem; position: relative;"
   />
 </div>
 `;
@@ -17,7 +17,7 @@ exports[`Skeleton animation wave 1`] = `
     class="p-skeleton p-component"
     data-pc-name="skeleton"
     data-pc-section="root"
-    style="width: 100%; height: 1rem;"
+    style="width: 100%; height: 1rem; position: relative;"
   />
 </div>
 `;
@@ -28,7 +28,7 @@ exports[`Skeleton border radius 1`] = `
     class="p-skeleton p-component"
     data-pc-name="skeleton"
     data-pc-section="root"
-    style="width: 100%; height: 1rem; border-radius: 16px;"
+    style="width: 100%; height: 1rem; border-radius: 16px; position: relative;"
   />
 </div>
 `;
@@ -39,7 +39,7 @@ exports[`Skeleton border radius 2`] = `
     class="p-skeleton p-component"
     data-pc-name="skeleton"
     data-pc-section="root"
-    style="width: 100%; height: 1rem; border-radius: 16px;"
+    style="width: 100%; height: 1rem; border-radius: 16px; position: relative;"
   />
 </div>
 `;
@@ -50,7 +50,7 @@ exports[`Skeleton default 1`] = `
     class="p-skeleton p-component"
     data-pc-name="skeleton"
     data-pc-section="root"
-    style="width: 100%; height: 1rem;"
+    style="width: 100%; height: 1rem; position: relative;"
   />
 </div>
 `;
@@ -61,7 +61,7 @@ exports[`Skeleton shape circle 1`] = `
     class="p-skeleton p-component p-skeleton-circle"
     data-pc-name="skeleton"
     data-pc-section="root"
-    style="width: 100%; height: 1rem;"
+    style="width: 100%; height: 1rem; position: relative;"
   />
 </div>
 `;
@@ -72,7 +72,7 @@ exports[`Skeleton shape rectangle 1`] = `
     class="p-skeleton p-component"
     data-pc-name="skeleton"
     data-pc-section="root"
-    style="width: 100%; height: 1rem;"
+    style="width: 100%; height: 1rem; position: relative;"
   />
 </div>
 `;
@@ -83,7 +83,7 @@ exports[`Skeleton size in pixels 1`] = `
     class="p-skeleton p-component"
     data-pc-name="skeleton"
     data-pc-section="root"
-    style="width: 50px; height: 50px;"
+    style="width: 50px; height: 50px; position: relative;"
   />
 </div>
 `;
@@ -94,7 +94,7 @@ exports[`Skeleton size width and height 1`] = `
     class="p-skeleton p-component"
     data-pc-name="skeleton"
     data-pc-section="root"
-    style="width: 100%; height: 2rem;"
+    style="width: 100%; height: 2rem; position: relative;"
   />
 </div>
 `;
diff --git a/components/lib/utils/MergeProps.js b/components/lib/utils/MergeProps.js
@@ -9,7 +9,10 @@ export function mergeProps(...props) {
                 if (key === 'style') {
                     merged['style'] = { ...merged['style'], ...ps['style'] };
                 } else if (key === 'className') {
-                    merged['className'] = [merged['className'], ps['className']].join(' ').trim();
+                    let newClassname = [merged['className'], ps['className']].join(' ').trim();
+                    const isEmpty = newClassname === null || newClassname === undefined || newClassname === '';
+
+                    merged['className'] = isEmpty ? undefined : newClassname;
                 } else if (isFn(value)) {
                     const fn = merged[key];