Alerting: fix collapsable toggle text regression (#47517)

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(<CollapseToggle isCollapsed={true} text="Hello, world" onToggle={noop} />);
+    expect(screen.getByRole('button')).toHaveTextContent('Hello, world');
+  });
+
+  it('should respect isCollapsed', () => {
+    const { rerender } = render(<CollapseToggle isCollapsed={false} text="Hello, world" onToggle={noop} />);
+    expect(screen.getByRole('button', { expanded: true })).toBeInTheDocument();
+
+    rerender(<CollapseToggle isCollapsed={true} text="Hello, world" onToggle={noop} />);
+    expect(screen.getByRole('button', { expanded: false })).toBeInTheDocument();
+  });
+
+  it('should call onToggle', () => {
+    const onToggle = jest.fn();
+    render(<CollapseToggle isCollapsed={true} text="Hello, world" onToggle={onToggle} />);
+    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();
+  });
+});

public/app/features/alerting/unified/components/CollapseToggle.tsx

@@ -34,7 +34,9 @@ export const CollapseToggle: FC<Props> = ({
       icon={isCollapsed ? 'angle-right' : 'angle-down'}
       onClick={() => onToggle(!isCollapsed)}
       {...restOfProps}
-    />
+    >
+      {text}
+    </Button>
   );
 };