test: Refactor FloatingActionButton component and add unit tests

Amsterdam-Music-Lab · Dec 28, 2023 · 9f6f7bb · 9f6f7bb
1 parent 964914d
commit 9f6f7bb
Show file tree

Hide file tree

Showing 2 changed files with 98 additions and 13 deletions.
diff --git a/frontend/src/components/FloatingActionButton/FloatingActionButton.js b/frontend/src/components/FloatingActionButton/FloatingActionButton.js
@@ -21,27 +21,39 @@ const FloatingActionButton = ({
     }
 
     return (<>
-        <div className={
-            classNames("floating-action-button",
-                getPositionClassNames(position),
-                expanded && 'floating-action-button--expanded',
-                className
-            )}>
+        <div
+            data-testid="floating-action-button"
+            className={
+                classNames("floating-action-button",
+                    getPositionClassNames(position),
+                    expanded && 'floating-action-button--expanded',
+                    className
+                )}
+        >
             <button
+                data-testid="floating-action-button__toggle-button"
                 className='floating-action-button__toggle-button'
                 onClick={() => setExpanded(!expanded)}
             >
-                {expanded ? <i className={`floating-action-button__icon fa fa-times`}></i> : <i className={`floating-action-button__icon fa ${icon}`}></i>}
+                <i
+                    data-testid="floating-action-button__icon"
+                    className={`floating-action-button__icon fa ${expanded ? 'fa-times' : icon}`}
+                />
             </button>
-            <div className='floating-action-button__content'>
+            <div
+                data-testid="floating-action-button__content"
+                className='floating-action-button__content'
+            >
                 {children}
             </div>
         </div>
-        <div className={
-            classNames(
-                'floating-action-button__overlay',
-                expanded && 'floating-action-button__overlay--expanded'
-            )}
+        <div
+            data-testid="floating-action-button__overlay"
+            className={
+                classNames(
+                    'floating-action-button__overlay',
+                    expanded && 'floating-action-button__overlay--expanded'
+                )}
             onClick={() => setExpanded(false)}
             aria-hidden={expanded ? 'false' : 'true'}
             role="presentation"

diff --git a/frontend/src/components/FloatingActionButton/FloatingActionButton.test.js b/frontend/src/components/FloatingActionButton/FloatingActionButton.test.js
@@ -0,0 +1,73 @@
+import React from 'react';
+import { render, fireEvent, screen } from '@testing-library/react';
+import FloatingActionButton from './FloatingActionButton';
+
+describe('FloatingActionButton', () => {
+    it('renders the button with the initial icon', () => {
+        render(<FloatingActionButton icon="fa-comment" />);
+        const icon = screen.getByTestId('floating-action-button__icon');
+        expect(icon).toBeInTheDocument();
+        expect(icon).toHaveClass('fa-comment');
+    });
+
+    it('toggles the content on click', () => {
+        const { getByTestId } = render(<FloatingActionButton icon="fa-comment"><div>Test Content</div></FloatingActionButton>);
+
+        const toggleButton = getByTestId('floating-action-button__toggle-button');
+        fireEvent.click(toggleButton);
+
+        const content = getByTestId('floating-action-button');
+        expect(content).toHaveClass('floating-action-button--expanded');
+
+        fireEvent.click(toggleButton);
+        expect(content).not.toHaveClass('floating-action-button--expanded');
+    });
+
+    it('displays the correct icon when expanded', () => {
+        const { getByTestId } = render(<FloatingActionButton icon="fa-comment" />);
+
+        const toggleButton = getByTestId('floating-action-button__toggle-button');
+        fireEvent.click(toggleButton);
+
+        const icon = getByTestId('floating-action-button__icon');
+        expect(icon).toBeInTheDocument();
+        expect(icon).toHaveClass('fa-times');
+    });
+
+    it('closes the expanded content when the overlay is clicked', () => {
+        const { getByTestId } = render(<FloatingActionButton icon="fa-comment"><div>Test Content</div></FloatingActionButton>);
+
+        const toggleButton = getByTestId('floating-action-button__toggle-button');
+        fireEvent.click(toggleButton);
+
+        const overlay = getByTestId('floating-action-button__overlay');
+        fireEvent.click(overlay);
+
+        const content = getByTestId('floating-action-button__content');
+        expect(content).not.toHaveClass('floating-action-button--expanded');
+    });
+
+    it('initially renders in a collapsed state', () => {
+        render(<FloatingActionButton icon="fa-comment" />);
+        expect(screen.getByTestId('floating-action-button')).not.toHaveClass('floating-action-button--expanded');
+    });
+
+    it('correctly applies position classes', () => {
+        render(<FloatingActionButton position="bottom-left" />);
+        expect(screen.getByTestId('floating-action-button')).toHaveClass('floating-action-button--bottom');
+        expect(screen.getByTestId('floating-action-button')).toHaveClass('floating-action-button--left');
+    });
+
+    it('applies custom class name', () => {
+        render(<FloatingActionButton className="custom-class" />);
+        expect(screen.getByTestId('floating-action-button')).toHaveClass('custom-class');
+    });
+
+    it('updates aria-hidden attribute of overlay correctly', () => {
+        render(<FloatingActionButton />);
+        const overlay = screen.getByTestId('floating-action-button__overlay');
+        expect(overlay).toHaveAttribute('aria-hidden', 'true');
+        fireEvent.click(screen.getByTestId('floating-action-button__toggle-button'));
+        expect(overlay).toHaveAttribute('aria-hidden', 'false');
+    });
+});