From 9a0f313c812d5167ef66e84f54ce7ac118cda597 Mon Sep 17 00:00:00 2001 From: Jakub007d Date: Fri, 6 Feb 2026 13:02:09 +0100 Subject: [PATCH 1/2] feat: adding customization parameter --- packages/module/src/WidgetLayout/GridTile.tsx | 5 +++-- packages/module/src/WidgetLayout/types.ts | 3 +++ 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/module/src/WidgetLayout/GridTile.tsx b/packages/module/src/WidgetLayout/GridTile.tsx index 3e2d3b2..54866c1 100644 --- a/packages/module/src/WidgetLayout/GridTile.tsx +++ b/packages/module/src/WidgetLayout/GridTile.tsx @@ -178,8 +178,9 @@ const GridTile = ({ return ( @@ -222,7 +223,7 @@ const GridTile = ({ - {children} + {children} ); }; diff --git a/packages/module/src/WidgetLayout/types.ts b/packages/module/src/WidgetLayout/types.ts index 741741b..0e01e84 100644 --- a/packages/module/src/WidgetLayout/types.ts +++ b/packages/module/src/WidgetLayout/types.ts @@ -1,4 +1,5 @@ import { Layout } from 'react-grid-layout'; +import { CardProps, CardBodyProps } from '@patternfly/react-core'; export const widgetIdSeparator = '#'; @@ -43,6 +44,8 @@ export interface WidgetConfiguration { icon?: React.ReactNode; headerLink?: WidgetHeaderLink; title?: string; + wrapperProps?: Omit; + cardBodyProps?: Omit; } /** From bb1a9bf273fb6aaf4314afdeef11e5865397b0e8 Mon Sep 17 00:00:00 2001 From: Jakub007d Date: Wed, 11 Feb 2026 13:28:35 +0100 Subject: [PATCH 2/2] tests: adding new tests for the wrapperProps and cardBodyProps --- .../module/src/WidgetLayout/GridLayout.tsx | 2 +- .../WidgetLayout/__tests__/GridTile.test.tsx | 155 ++++++++++++++++++ 2 files changed, 156 insertions(+), 1 deletion(-) create mode 100644 packages/module/src/WidgetLayout/__tests__/GridTile.test.tsx diff --git a/packages/module/src/WidgetLayout/GridLayout.tsx b/packages/module/src/WidgetLayout/GridLayout.tsx index 23c6c8f..d8991b4 100644 --- a/packages/module/src/WidgetLayout/GridLayout.tsx +++ b/packages/module/src/WidgetLayout/GridLayout.tsx @@ -20,7 +20,7 @@ import { columns, breakpoints, droppingElemId, getWidgetIdentifier, extendLayout export const defaultBreakpoints = breakpoints; const createSerializableConfig = (config?: WidgetConfiguration) => { - if (!config) return undefined; + if (!config) {return undefined;} return { ...(config.title && { title: config.title }), ...(config.headerLink && { headerLink: config.headerLink }) diff --git a/packages/module/src/WidgetLayout/__tests__/GridTile.test.tsx b/packages/module/src/WidgetLayout/__tests__/GridTile.test.tsx new file mode 100644 index 0000000..0308b28 --- /dev/null +++ b/packages/module/src/WidgetLayout/__tests__/GridTile.test.tsx @@ -0,0 +1,155 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import '@testing-library/jest-dom'; +import GridTile, { GridTileProps } from '../GridTile'; + +const defaultProps: GridTileProps = { + widgetType: 'test-widget', + isDragging: false, + setIsDragging: jest.fn(), + setWidgetAttribute: jest.fn(), + widgetConfig: { + i: 'test-widget-1', + x: 0, + y: 0, + w: 2, + h: 3, + colWidth: 100, + }, + removeWidget: jest.fn(), + children:
Widget Content
, + isLoaded: true, +}; + +describe('GridTile - wrapperProps and cardBodyProps', () => { + describe('wrapperProps', () => { + it('should pass wrapperProps to the Card wrapper component', () => { + const wrapperProps = { + 'data-testid': 'custom-card-wrapper', + 'aria-label': 'Custom card label', + }; + + render( + + ); + + const cardWrapper = screen.getByTestId('custom-card-wrapper'); + expect(cardWrapper).toBeInTheDocument(); + expect(cardWrapper).toHaveAttribute('aria-label', 'Custom card label'); + }); + + it('should merge custom className with default className in wrapperProps', () => { + const wrapperProps = { + className: 'custom-wrapper-class', + 'data-testid': 'card-with-custom-class', + }; + + render( + + ); + + const cardWrapper = screen.getByTestId('card-with-custom-class'); + expect(cardWrapper).toHaveClass('grid-tile'); + expect(cardWrapper).toHaveClass('custom-wrapper-class'); + }); + }); + + describe('cardBodyProps', () => { + it('should pass cardBodyProps to the CardBody component', () => { + const cardBodyProps = { + 'data-testid': 'custom-card-body', + 'aria-label': 'Custom card body label', + }; + + render( + + ); + + const cardBody = screen.getByTestId('custom-card-body'); + expect(cardBody).toBeInTheDocument(); + expect(cardBody).toHaveAttribute('aria-label', 'Custom card body label'); + }); + + it('should merge custom className with default className in cardBodyProps', () => { + const cardBodyProps = { + className: 'custom-body-class', + 'data-testid': 'body-with-custom-class', + }; + + render( + + ); + + const cardBody = screen.getByTestId('body-with-custom-class'); + expect(cardBody).toHaveClass('pf-v6-u-p-0'); + expect(cardBody).toHaveClass('custom-body-class'); + }); + }); + + describe('both props together', () => { + it('should correctly apply both wrapperProps and cardBodyProps simultaneously', () => { + const wrapperProps = { + className: 'custom-wrapper', + 'data-testid': 'combined-wrapper', + }; + + const cardBodyProps = { + className: 'custom-body', + 'data-testid': 'combined-body', + }; + + render( + + ); + + const cardWrapper = screen.getByTestId('combined-wrapper'); + expect(cardWrapper).toHaveClass('grid-tile'); + expect(cardWrapper).toHaveClass('custom-wrapper'); + + const cardBody = screen.getByTestId('combined-body'); + expect(cardBody).toHaveClass('pf-v6-u-p-0'); + expect(cardBody).toHaveClass('custom-body'); + }); + }); +});