From 94ad6bf462914baee47e20983683f58ac7cb183d Mon Sep 17 00:00:00 2001 From: jenny-s51 Date: Wed, 25 Jan 2023 15:18:44 -0500 Subject: [PATCH 1/2] update component and tests --- .../react-core/src/components/Card/Card.tsx | 2 +- .../components/Card/__tests__/Card.test.tsx | 44 +++++++++---------- .../__snapshots__/Card.test.tsx.snap | 4 +- 3 files changed, 25 insertions(+), 25 deletions(-) diff --git a/packages/react-core/src/components/Card/Card.tsx b/packages/react-core/src/components/Card/Card.tsx index c0203a42a9e..d0db6d6bedf 100644 --- a/packages/react-core/src/components/Card/Card.tsx +++ b/packages/react-core/src/components/Card/Card.tsx @@ -67,7 +67,7 @@ export const Card: React.FunctionComponent = ({ children = null, id = '', className = '', - component = 'article', + component = 'div', isCompact = false, isSelectable = false, isSelectableRaised = false, diff --git a/packages/react-core/src/components/Card/__tests__/Card.test.tsx b/packages/react-core/src/components/Card/__tests__/Card.test.tsx index 70f47666b5e..b5a1eaef6d7 100644 --- a/packages/react-core/src/components/Card/__tests__/Card.test.tsx +++ b/packages/react-core/src/components/Card/__tests__/Card.test.tsx @@ -12,8 +12,8 @@ describe('Card', () => { }); test('className is added to the root element', () => { - render(); - expect(screen.getByRole('article')).toHaveClass('extra-class'); + render(card); + expect(screen.getByText('card')).toHaveClass('extra-class'); }); test('extra props are spread to the root element', () => { @@ -43,70 +43,70 @@ describe('Card', () => { }); test('card with isSelectable applied ', () => { - render(); + render(selectable card); - const card = screen.getByRole('article'); + const card = screen.getByText('selectable card'); expect(card).toHaveClass('pf-m-selectable'); expect(card).toHaveAttribute('tabindex', '0'); }); test('card with isSelectable and isSelected applied ', () => { - render(); + render(selected and selectable card); - const card = screen.getByRole('article'); + const card = screen.getByText('selected and selectable card'); expect(card).toHaveClass('pf-m-selectable'); expect(card).toHaveClass('pf-m-selected'); expect(card).toHaveAttribute('tabindex', '0'); }); test('card with only isSelected applied - not change', () => { - render(); + render(selected card); - const card = screen.getByRole('article'); + const card = screen.getByText('selected card'); expect(card).not.toHaveClass('pf-m-selected'); expect(card.getAttribute('tabindex')).toBeNull(); }); test('card with isDisabledRaised applied', () => { - render(); - expect(screen.getByRole('article')).toHaveClass('pf-m-non-selectable-raised'); + render(disabled raised card); + expect(screen.getByText('disabled raised card')).toHaveClass('pf-m-non-selectable-raised'); }); test('card with isSelectableRaised applied - not change', () => { - render(); + render(raised selectable card); - const card = screen.getByRole('article'); + const card = screen.getByText('raised selectable card'); expect(card).toHaveClass('pf-m-selectable-raised'); expect(card).toHaveAttribute('tabindex', '0'); }); test('card with isSelectableRaised and isSelected applied ', () => { - render(); + render(raised selected card); - const card = screen.getByRole('article'); + const card = screen.getByText('raised selected card'); expect(card).toHaveClass('pf-m-selectable-raised'); expect(card).toHaveClass('pf-m-selected-raised'); expect(card).toHaveAttribute('tabindex', '0'); }); test('card with isFlat applied', () => { - render(); - expect(screen.getByRole('article')).toHaveClass('pf-m-flat'); + render(flat card); + expect(screen.getByText('flat card')).toHaveClass('pf-m-flat'); }); test('card with isExpanded applied', () => { - render(); - expect(screen.getByRole('article')).toHaveClass('pf-m-expanded'); + render(expanded card); + expect(screen.getByText('expanded card')).toHaveClass('pf-m-expanded'); }); test('card with isRounded applied', () => { - render(); - expect(screen.getByRole('article')).toHaveClass('pf-m-rounded'); + render(rounded card); + expect(screen.getByText('rounded card')).toHaveClass('pf-m-rounded'); }); test('card with isLarge applied', () => { - render(); - expect(screen.getByRole('article')).toHaveClass('pf-m-display-lg'); + render(large card); + expect(screen.getByText('large card')).toHaveClass('pf-m-display-lg'); }); test('card warns when isLarge and isCompact', () => { diff --git a/packages/react-core/src/components/Card/__tests__/__snapshots__/Card.test.tsx.snap b/packages/react-core/src/components/Card/__tests__/__snapshots__/Card.test.tsx.snap index 6a3fadbff96..7171b42b657 100644 --- a/packages/react-core/src/components/Card/__tests__/__snapshots__/Card.test.tsx.snap +++ b/packages/react-core/src/components/Card/__tests__/__snapshots__/Card.test.tsx.snap @@ -2,7 +2,7 @@ exports[`Card card with isCompact applied 1`] = ` -
-
Date: Fri, 27 Jan 2023 14:46:58 -0500 Subject: [PATCH 2/2] update prop description --- packages/react-core/src/components/Card/Card.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-core/src/components/Card/Card.tsx b/packages/react-core/src/components/Card/Card.tsx index d0db6d6bedf..a4de69ebdeb 100644 --- a/packages/react-core/src/components/Card/Card.tsx +++ b/packages/react-core/src/components/Card/Card.tsx @@ -10,7 +10,7 @@ export interface CardProps extends React.HTMLProps, OUIAProps { id?: string; /** Additional classes added to the Card */ className?: string; - /** Sets the base component to render. defaults to article */ + /** Sets the base component to render. defaults to div */ component?: keyof JSX.IntrinsicElements; /** Modifies the card to include compact styling. Should not be used with isLarge. */ isCompact?: boolean;