diff --git a/public/app/features/alerting/unified/components/CollapseToggle.test.tsx b/public/app/features/alerting/unified/components/CollapseToggle.test.tsx
new file mode 100644
index 00000000000..384da5879fd
--- /dev/null
+++ b/public/app/features/alerting/unified/components/CollapseToggle.test.tsx
@@ -0,0 +1,29 @@
+import { render, screen } from '@testing-library/react';
+import { noop } from 'lodash';
+import React from 'react';
+import { CollapseToggle } from './CollapseToggle';
+
+describe('TestToggle', () => {
+ it('should render text', () => {
+ render();
+ expect(screen.getByRole('button')).toHaveTextContent('Hello, world');
+ });
+
+ it('should respect isCollapsed', () => {
+ const { rerender } = render();
+ expect(screen.getByRole('button', { expanded: true })).toBeInTheDocument();
+
+ rerender();
+ expect(screen.getByRole('button', { expanded: false })).toBeInTheDocument();
+ });
+
+ it('should call onToggle', () => {
+ const onToggle = jest.fn();
+ render();
+ screen.getByRole('button').click();
+
+ expect(onToggle).toHaveBeenCalledWith(false);
+ // it should also not have any impact on the actual expanded state since the component does not track its own state
+ expect(screen.getByRole('button', { expanded: false })).toBeInTheDocument();
+ });
+});
diff --git a/public/app/features/alerting/unified/components/CollapseToggle.tsx b/public/app/features/alerting/unified/components/CollapseToggle.tsx
index c63256e077f..3e670a396be 100644
--- a/public/app/features/alerting/unified/components/CollapseToggle.tsx
+++ b/public/app/features/alerting/unified/components/CollapseToggle.tsx
@@ -34,7 +34,9 @@ export const CollapseToggle: FC = ({
icon={isCollapsed ? 'angle-right' : 'angle-down'}
onClick={() => onToggle(!isCollapsed)}
{...restOfProps}
- />
+ >
+ {text}
+
);
};