From 7e844064a4c216d7468fbbdf122c05a7d97ffbc0 Mon Sep 17 00:00:00 2001
From: Gilles De Mey <gilles.de.mey@gmail.com>
Date: Fri, 8 Apr 2022 17:15:19 +0200
Subject: [PATCH] Alerting: fix collapsable toggle text regression (#47517)

---
 .../components/CollapseToggle.test.tsx        | 29 +++++++++++++++++++
 .../unified/components/CollapseToggle.tsx     |  4 ++-
 2 files changed, 32 insertions(+), 1 deletion(-)
 create mode 100644 public/app/features/alerting/unified/components/CollapseToggle.test.tsx

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(<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();
+  });
+});
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<Props> = ({
       icon={isCollapsed ? 'angle-right' : 'angle-down'}
       onClick={() => onToggle(!isCollapsed)}
       {...restOfProps}
-    />
+    >
+      {text}
+    </Button>
   );
 };