From 38daf0cba60b69ffc287d8fcfdcc8c8beca6a9fa Mon Sep 17 00:00:00 2001 From: kay delaney <45561153+kaydelaney@users.noreply.github.com> Date: Tue, 16 Feb 2021 13:11:37 +0000 Subject: [PATCH] UI/Card: Fix handling of 'onClick' callback (#31225) --- .../grafana-ui/src/components/Card/Card.test.tsx | 12 ++++++++++++ packages/grafana-ui/src/components/Card/Card.tsx | 2 +- 2 files changed, 13 insertions(+), 1 deletion(-) create mode 100644 packages/grafana-ui/src/components/Card/Card.test.tsx diff --git a/packages/grafana-ui/src/components/Card/Card.test.tsx b/packages/grafana-ui/src/components/Card/Card.test.tsx new file mode 100644 index 00000000000..16325de6c28 --- /dev/null +++ b/packages/grafana-ui/src/components/Card/Card.test.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import { render, screen, fireEvent } from '@testing-library/react'; +import { Card } from './Card'; + +describe('Card', () => { + it('should execute callback when clicked', () => { + const callback = jest.fn(); + render(); + fireEvent.click(screen.getByText('Test Heading')); + expect(callback).toBeCalledTimes(1); + }); +}); diff --git a/packages/grafana-ui/src/components/Card/Card.tsx b/packages/grafana-ui/src/components/Card/Card.tsx index e6d77824451..5c87d935295 100644 --- a/packages/grafana-ui/src/components/Card/Card.tsx +++ b/packages/grafana-ui/src/components/Card/Card.tsx @@ -101,7 +101,7 @@ export const Card: CardInterface = ({ const disableEvents = disabled && !actions; const containerStyles = getContainerStyles(theme, disableEvents, disableHover); - const onCardClick = useCallback(() => (disableHover ? () => {} : onClick), [disableHover, onClick]); + const onCardClick = useCallback(() => (disableHover ? () => {} : onClick?.()), [disableHover, onClick]); return (