fix: folding component functionality (#4256)

* fix: folding component functionality

* add test and improve code readability

src/web/components/folding/__tests__/folding.jsx

@@ -0,0 +1,48 @@
+/* SPDX-FileCopyrightText: 2024 Greenbone AG
+ *
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import {describe, test, expect} from '@gsa/testing';
+import {render, screen, fireEvent} from 'web/utils/testing';
+
+import {withFolding, FoldState, withFoldToggle} from '../folding';
+
+describe('withFolding', () => {
+  const DummyComponent = props => <div {...props}>Dummy Component</div>;
+  const FoldableComponent = withFolding(DummyComponent);
+
+  test('hides content when foldState is Folded', () => {
+    const {rerender} = render(
+      <FoldableComponent foldState={FoldState.FOLDED} />,
+    );
+    expect(screen.getByText('Dummy Component')).not.toBeVisible();
+
+    rerender(<FoldableComponent foldState={FoldState.UNFOLDED} />);
+    expect(screen.getByText('Dummy Component')).toBeVisible();
+  });
+});
+
+describe('withFoldToggle', () => {
+  test('toggles foldState when onFolded isCalled', () => {
+    const DummyComponent = ({foldState, onFoldToggle}) => (
+      <div>
+        <span data-testid="foldState">{foldState}</span>
+        <button onClick={onFoldToggle}>Toggle</button>
+      </div>
+    );
+
+    const FoldToggleComponent = withFoldToggle(DummyComponent);
+
+    render(<FoldToggleComponent />);
+
+    expect(screen.getByTestId('foldState')).toHaveTextContent(
+      FoldState.UNFOLDED,
+    );
+
+    fireEvent.click(screen.getByText('Toggle'));
+    expect(screen.getByTestId('foldState')).toHaveTextContent(
+      FoldState.FOLDING_START,
+    );
+  });
+});

src/web/components/folding/folding.jsx

@@ -20,36 +20,34 @@ export const FoldState = {
 };
 
 const foldDelay = keyframes`
-  0%: {
+  0% {
     min-width: 0px;
   }
-  100%: {
+  100% {
     min-width: 1px;
   }
 `;
 
-const Div = styled.div`
+const FoldableDiv = styled.div`
   overflow: hidden;
-  transition: 0.4s;
+  transition: height 0.4s;
 
   display: ${({$foldState}) =>
-    $foldState === FoldState.FOLDED ? 'none' : undefined};
+    $foldState === FoldState.FOLDED ? 'none' : 'block'};
 
   height: ${({$foldState}) => {
-    if ($foldState === FoldState.FOLDED || $foldState === FoldState.FOLDING) {
-      return 0;
+    switch ($foldState) {
+      case FoldState.FOLDED:
+      case FoldState.FOLDING:
+        return '0px';
+      case FoldState.FOLDING_START:
+      case FoldState.UNFOLDING:
+        return `${Math.ceil(window.innerHeight * 1.2)}px`;
+      case FoldState.UNFOLDING_START:
+        return '1px';
+      default:
+        return 'auto';
     }
-    if (
-      $foldState === FoldState.FOLDING_START ||
-      $foldState === FoldState.UNFOLDING
-    ) {
-      const windowHeight = Math.ceil(window.innerHeight * 1.2) + 'px';
-      return windowHeight;
-    }
-    if ($foldState === FoldState.UNFOLDING_START) {
-      return '1px';
-    }
-    return undefined;
   }};
 
   animation: ${({$foldState}) =>
@@ -58,7 +56,7 @@ const Div = styled.div`
       ? css`
           ${foldDelay} 0.01s
         `
-      : undefined};
+      : 'none'};
 `;
 
 const FoldStatePropType = PropTypes.oneOf([
@@ -81,13 +79,13 @@ export const withFolding = Component => {
     onFoldToggle,
     ...props
   }) => (
-    <Div
+    <FoldableDiv
       $foldState={foldState}
       onAnimationEnd={onFoldStepEnd}
       onTransitionEnd={onFoldStepEnd}
     >
       <Component {...props} />
-    </Div>
+    </FoldableDiv>
   );
 
   FoldingWrapper.propTypes = {
@@ -185,7 +183,7 @@ export const withFoldToggle = Component => {
 
       return (
         <Component
-          $foldState={foldState}
+          foldState={foldState}
           onFoldStepEnd={this.handleFoldStepEnd}
           onFoldToggle={this.handleFoldToggle}
           {...other}