diff --git a/src/web/entities/Row.jsx b/src/web/entities/Row.jsx index 9514d165b7..163c8d594d 100644 --- a/src/web/entities/Row.jsx +++ b/src/web/entities/Row.jsx @@ -3,11 +3,12 @@ * SPDX-License-Identifier: AGPL-3.0-or-later */ +import PropTypes from 'prop-types'; import styled from 'styled-components'; -import withClickHandler from 'web/components/form/withClickHandler'; +import useClickHandler from 'web/components/form/useClickHandler'; import Theme from 'web/utils/Theme'; -export const RowDetailsToggle = withClickHandler()(styled.span` +const StyledSpan = styled.span` cursor: pointer; text-decoration: none; color: ${Theme.blue}; @@ -18,4 +19,24 @@ export const RowDetailsToggle = withClickHandler()(styled.span` @media print { color: ${Theme.black}; } -`); +`; + +export const RowDetailsToggle = ({name, onClick, ...props}) => { + const handleClick = useClickHandler({ + onClick, + name, + nameFunc: (event, props) => props.name, + }); + return ( + + ); +}; + +RowDetailsToggle.propTypes = {name: PropTypes.string, onClick: PropTypes.func}; + +export default RowDetailsToggle; diff --git a/src/web/entities/__tests__/RowDetailsToggle.test.jsx b/src/web/entities/__tests__/RowDetailsToggle.test.jsx new file mode 100644 index 0000000000..1e81a4290a --- /dev/null +++ b/src/web/entities/__tests__/RowDetailsToggle.test.jsx @@ -0,0 +1,29 @@ +/* SPDX-FileCopyrightText: 2025 Greenbone AG + * + * SPDX-License-Identifier: AGPL-3.0-or-later + */ + +import {describe, test, testing} from '@gsa/testing'; +import RowDetailsToggle from 'web/entities/Row'; +import {fireEvent, rendererWith, screen, wait} from 'web/utils/Testing'; + +describe('RowDetailsToggle tests', () => { + test('renders without crashing', () => { + const {render} = rendererWith(); + + render(); + + expect(screen.getByTestId('row-details-toggle')).toBeInTheDocument(); + }); + + test('calls onClick handler when row is clicked', async () => { + const handleClick = testing.fn(); + const {render} = rendererWith(); + + render(); + + const row = screen.getByTestId('row-details-toggle'); + fireEvent.click(row); + expect(handleClick).toHaveBeenCalledWith(undefined, 'test'); + }); +});