Component tests for DetailElement

frontend/src/components/ThemedButtons/DetailElement.css

@@ -23,10 +23,6 @@
 	background-color: var(--main-scrollbar-hover-colour);
 }
 
-.details-button[aria-expanded='false'] ~ .details-content {
-	display: none;
-}
-
 .details-button .button-arrow-icon {
 	display: inline-block;
 	width: 1.5rem;

frontend/src/components/ThemedButtons/DetailElement.test.tsx

@@ -0,0 +1,49 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ReactNode } from 'react';
+import { describe, expect, test } from 'vitest';
+
+import DetailElement from './DetailElement';
+
+const renderComponent = (content: ReactNode, buttonText?: string) => {
+	const user = userEvent.setup();
+	render(
+		<DetailElement useIcon={true} buttonText={buttonText}>
+			{content}
+		</DetailElement>
+	);
+
+	return { user };
+};
+
+const detailButton = (name: string = 'Details') => screen.getByRole('button', { name });
+
+describe('DetailElement component tests', () => {
+	test('Renders collapsed initially with Details button by default', () => {
+		const textContent = 'Well hello there';
+		renderComponent(<>{textContent}</>);
+
+		const button = detailButton();
+		expect(button).toBeInTheDocument();
+		expect(button).toHaveAttribute('aria-expanded', 'false');
+		expect(screen.getByText(textContent)).not.toBeVisible();
+	});
+
+	test('Expands on clicking Details button', async () => {
+		const textContent = 'Well hello there';
+		const { user } = renderComponent(<>{textContent}</>);
+
+		const button = detailButton();
+		await user.click(button);
+
+		expect(button).toHaveAttribute('aria-expanded', 'true');
+		expect(screen.getByText(textContent)).toBeVisible();
+	});
+
+	test('Button can have a custom name', () => {
+		const buttonText = 'This is my button, there are many others like it but this one is mine';
+		renderComponent(<>without my button i am nothing</>, buttonText);
+
+		expect(detailButton(buttonText)).toBeInTheDocument();
+	});
+});

frontend/src/components/ThemedButtons/DetailElement.tsx

@@ -34,7 +34,9 @@ function DetailElement({
 				)}
 				{buttonText}
 			</button>
-			<div className="details-content">{children}</div>
+			<div className="details-content" style={{ display: isExpanded ? 'block' : 'none'}}>
+				{children}
+			</div>
 		</>
 	);
 }