diff --git a/packages/react-core/src/components/Content/Content.tsx b/packages/react-core/src/components/Content/Content.tsx index 15f1e715a6e..dcb58030156 100644 --- a/packages/react-core/src/components/Content/Content.tsx +++ b/packages/react-core/src/components/Content/Content.tsx @@ -104,7 +104,6 @@ export const Content: React.FunctionComponent = ({ data-pf-content className={css( componentStyles[wrappingComponent], - isList && styles.content, isList && isPlainList && styles.modifiers.plain, isVisitedLink && styles.modifiers.visited, className diff --git a/packages/react-core/src/components/Content/__tests__/Content.test.tsx b/packages/react-core/src/components/Content/__tests__/Content.test.tsx index 7121aceccc5..106db1279e9 100644 --- a/packages/react-core/src/components/Content/__tests__/Content.test.tsx +++ b/packages/react-core/src/components/Content/__tests__/Content.test.tsx @@ -102,25 +102,102 @@ test('Renders as "dd" element when component="dd"', () => { expect(screen.getByText('Test')).toHaveProperty('nodeName', 'DD'); }); +test(`Renders with class name ${styles.contentH1} when component="h1"`, () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass(styles.contentH1); +}); + +test(`Renders with class name ${styles.contentH2} when component="h2"`, () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass(styles.contentH2); +}); + +test(`Renders with class name ${styles.contentH3} when component="h3"`, () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass(styles.contentH3); +}); + +test(`Renders with class name ${styles.contentH4} when component="h4"`, () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass(styles.contentH4); +}); + +test(`Renders with class name ${styles.contentH5} when component="h5"`, () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass(styles.contentH5); +}); + +test(`Renders with class name ${styles.contentH6} when component="h6"`, () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass(styles.contentH6); +}); + +test(`Renders with class name ${styles.contentP} when component="p"`, () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass(styles.contentP); +}); + +test(`Renders with class name ${styles.contentA} when component="a"`, () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass(styles.contentA); +}); + +test(`Renders with class name ${styles.contentSmall} when component="small"`, () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass(styles.contentSmall); +}); + +test(`Renders with class name ${styles.contentBlockquote} when component="blockquote"`, () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass(styles.contentBlockquote); +}); + +test(`Renders with class name ${styles.contentPre} when component="pre"`, () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass(styles.contentPre); +}); + +test(`Renders with class name ${styles.contentHr} when component="hr"`, () => { + render(Test); + expect(screen.getByRole('separator')).toHaveClass(styles.contentHr); +}); + +test(`Renders with class name ${styles.contentUl} when component="ul"`, () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass(styles.contentUl); +}); + +test(`Renders with class name ${styles.contentOl} when component="ol"`, () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass(styles.contentOl); +}); + +test(`Renders with class name ${styles.contentDl} when component="dl"`, () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass(styles.contentDl); +}); + +test(`Renders with class name ${styles.contentLi} when component="li"`, () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass(styles.contentLi); +}); + +test(`Renders with class name ${styles.contentDt} when component="dt"`, () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass(styles.contentDt); +}); + +test(`Renders with class name ${styles.contentDd} when component="dd"`, () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass(styles.contentDd); +}); + test(`Renders with class name ${styles.content} when no component prop is provided`, () => { render(Test); expect(screen.getByText('Test')).toHaveClass(styles.content); }); -test(`Renders with class name ${styles.content} when component is 'ul', 'ol' or 'dl'`, () => { - render( - <> - Test1 - Test2 - Test3 - - ); - expect(screen.getByText('Test1')).toHaveClass(styles.content); - expect(screen.getByText('Test2')).toHaveClass(styles.content); - expect(screen.getByText('Test3')).toHaveClass(styles.content); -}); - -test(`Renders without class name ${styles.content} when component is provided and it is not a list`, () => { +test(`Renders without class name ${styles.content} when component is provided`, () => { render(Test); expect(screen.getByText('Test')).not.toHaveClass(styles.content); });