chore(Text): update tests to new react testing library standards

packages/react-core/src/components/Text/TextList.tsx

@@ -25,7 +25,7 @@ export const TextList: React.FunctionComponent<TextListProps> = ({
   const Component: any = component;
 
   return (
-    <Component {...props} data-pf-content className={css(className)}>
+    <Component {...props} className={css(className)}>
       {children}
     </Component>
   );

packages/react-core/src/components/Text/TextListItem.tsx

@@ -25,7 +25,7 @@ export const TextListItem: React.FunctionComponent<TextListItemProps> = ({
   const Component: any = component;
 
   return (
-    <Component {...props} data-pf-content className={css(className)}>
+    <Component {...props} className={css(className)}>
       {children}
     </Component>
   );

packages/react-core/src/components/Text/__tests__/Generated/__snapshots__/TextList.test.tsx.snap

@@ -4,7 +4,6 @@ exports[`TextList should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <ul
     class="''"
-    data-pf-content="true"
   >
     ReactNode
   </ul>

packages/react-core/src/components/Text/__tests__/Generated/__snapshots__/TextListItem.test.tsx.snap

@@ -4,7 +4,6 @@ exports[`TextListItem should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <li
     class="''"
-    data-pf-content="true"
   >
     ReactNode
   </li>

packages/react-core/src/components/Text/__tests__/Text.test.tsx

@@ -1,112 +1,101 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { TextContent } from '../TextContent';
-import { Text, TextVariants } from '../Text';
-import { TextList, TextListVariants } from '../TextList';
-import { TextListItem, TextListItemVariants } from '../TextListItem';
-
-test('Text example should match snapshot', () => {
-  const { asFragment } = render(
-    <TextContent>
-      <Text component={TextVariants.h1}>Hello World</Text>
-      <Text component={TextVariants.p}>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla
-        nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel
-        erat vel, interdum mattis neque. Sub works as well!
-      </Text>
-      <Text component={TextVariants.h2}>Second level</Text>
-      <Text component={TextVariants.p}>
-        Curabitur accumsan turpis pharetra <strong>augue tincidunt</strong> blandit. Quisque condimentum maximus mi, sit
-        amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem
-        rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.
-      </Text>
-      <TextList>
-        <TextListItem>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</TextListItem>
-        <TextListItem>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</TextListItem>
-        <TextListItem>
-          Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
-          <TextList>
-            <TextListItem>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</TextListItem>
-            <TextListItem>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</TextListItem>
-          </TextList>
-        </TextListItem>
-        <TextListItem>Ut non enim metus.</TextListItem>
-      </TextList>
-      <Text component={TextVariants.h3}>Third level</Text>
-      <Text component={TextVariants.p}>
-        Quisque ante lacus, malesuada ac auctor vitae, congue{' '}
-        <Text component={TextVariants.a} href="#">
-          non ante
-        </Text>
-        . Phasellus lacus ex, semper ac tortor nec, fringilla condimentum orci. Fusce eu rutrum tellus.
-      </Text>
-      <TextList component={TextListVariants.ol}>
-        <TextListItem>Donec blandit a lorem id convallis.</TextListItem>
-        <TextListItem>Cras gravida arcu at diam gravida gravida.</TextListItem>
-        <TextListItem>Integer in volutpat libero.</TextListItem>
-        <TextListItem>Donec a diam tellus.</TextListItem>
-        <TextListItem>Aenean nec tortor orci.</TextListItem>
-        <TextListItem>Quisque aliquam cursus urna, non bibendum massa viverra eget.</TextListItem>
-        <TextListItem>Vivamus maximus ultricies pulvinar.</TextListItem>
-      </TextList>
-      <Text component={TextVariants.blockquote}>
-        Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit est tellus sit
-        amet turpis.
-      </Text>
-      <Text component={TextVariants.p}>
-        Quisque at semper enim, eu hendrerit odio. Etiam auctor nisl et <em>justo sodales</em> elementum. Maecenas
-        ultrices lacus quis neque consectetur, et lobortis nisi molestie.
-      </Text>
-      <Text component={TextVariants.p}>
-        Sed sagittis enim ac tortor maximus rutrum. Nulla facilisi. Donec mattis vulputate risus in luctus. Maecenas
-        vestibulum interdum commodo.
-      </Text>
-      <TextList component={TextListVariants.dl}>
-        <TextListItem component={TextListItemVariants.dt}>Web</TextListItem>
-        <TextListItem component={TextListItemVariants.dd}>
-          The part of the Internet that contains websites and web pages
-        </TextListItem>
-        <TextListItem component={TextListItemVariants.dt}>HTML</TextListItem>
-        <TextListItem component={TextListItemVariants.dd}>A markup language for creating web pages</TextListItem>
-        <TextListItem component={TextListItemVariants.dt}>CSS</TextListItem>
-        <TextListItem component={TextListItemVariants.dd}>A technology to make HTML look better</TextListItem>
-      </TextList>
-      <Text component={TextVariants.p}>
-        Suspendisse egestas sapien non felis placerat elementum. Morbi tortor nisl, suscipit sed mi sit amet, mollis
-        malesuada nulla. Nulla facilisi. Nullam ac erat ante.
-      </Text>
-      <Text component={TextVariants.h4}>Fourth level</Text>
-      <Text component={TextVariants.p}>
-        Nulla efficitur eleifend nisi, sit amet bibendum sapien fringilla ac. Mauris euismod metus a tellus laoreet, at
-        elementum ex efficitur.
-      </Text>
-      <Text component={TextVariants.p}>
-        Maecenas eleifend sollicitudin dui, faucibus sollicitudin augue cursus non. Ut finibus eleifend arcu ut
-        vehicula. Mauris eu est maximus est porta condimentum in eu justo. Nulla id iaculis sapien.
-      </Text>
-      <Text component={TextVariants.small}>Sometimes you need small text to display things like date created</Text>
-      <Text component={TextVariants.p}>
-        Phasellus porttitor enim id metus volutpat ultricies. Ut nisi nunc, blandit sed dapibus at, vestibulum in felis.
-        Etiam iaculis lorem ac nibh bibendum rhoncus. Nam interdum efficitur ligula sit amet ullamcorper. Etiam
-        tristique, leo vitae porta faucibus, mi lacus laoreet metus, at cursus leo est vel tellus. Sed ac posuere est.
-        Nunc ultricies nunc neque, vitae ultricies ex sodales quis. Aliquam eu nibh in libero accumsan pulvinar. Nullam
-        nec nisl placerat, pretium metus vel, euismod ipsum. Proin tempor cursus nisl vel condimentum. Nam pharetra
-        varius metus non pellentesque.
-      </Text>
-      <Text component={TextVariants.h5}>Fifth level</Text>
-      <Text component={TextVariants.p}>
-        Aliquam sagittis rhoncus vulputate. Cras non luctus sem, sed tincidunt ligula. Vestibulum at nunc elit. Praesent
-        aliquet ligula mi, in luctus elit volutpat porta. Phasellus molestie diam vel nisi sodales, a eleifend augue
-        laoreet. Sed nec eleifend justo. Nam et sollicitudin odio.
-      </Text>
-      <Text component={TextVariants.h6}>Sixth level</Text>
-      <Text component={TextVariants.p}>
-        Cras in nibh lacinia, venenatis nisi et, auctor urna. Donec pulvinar lacus sed diam dignissim, ut eleifend eros
-        accumsan. Phasellus non tortor eros. Ut sed rutrum lacus. Etiam purus nunc, scelerisque quis enim vitae,
-        malesuada ultrices turpis. Nunc vitae maximus purus, nec consectetur dui. Suspendisse euismod, elit vel rutrum
-        commodo, ipsum tortor maximus dui, sed varius sapien odio vitae est. Etiam at cursus metus.
-      </Text>
-    </TextContent>
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Text } from '../Text';
+
+test('Renders without children', () => {
+  render(
+    <div data-testid="test-content">
+      <Text />
+    </div>
+  );
+  expect(screen.getByTestId('test-content').firstChild).toBeVisible();
+});
+
+test('Renders children', () => {
+  render(<Text>Test</Text>);
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test('Renders without class name by default', () => {
+  render(<Text>Test</Text>);
+  expect(screen.getByText('Test')).not.toHaveClass();
+});
+
+test('Renders with custom class name when className prop is provided', () => {
+  render(<Text className="custom-class">Test</Text>);
+  expect(screen.getByText('Test')).toHaveClass('custom-class');
+});
+
+test('Renders as "p" element by default', () => {
+  render(<Text>Test</Text>);
+  expect(screen.getByText('Test')).toHaveProperty('nodeName', 'P');
+});
+
+test('Renders as "h1" element when component="h1"', () => {
+  render(<Text component="h1">Test</Text>);
+  expect(screen.getByRole('heading', { level: 1 })).toBeVisible();
+});
+
+test('Renders as "h2" element when component="h2"', () => {
+  render(<Text component="h2">Test</Text>);
+  expect(screen.getByRole('heading', { level: 2 })).toBeVisible();
+});
+
+test('Renders as "h3" element when component="h3"', () => {
+  render(<Text component="h3">Test</Text>);
+  expect(screen.getByRole('heading', { level: 3 })).toBeVisible();
+});
+
+test('Renders as "h4" element when component="h4"', () => {
+  render(<Text component="h4">Test</Text>);
+  expect(screen.getByRole('heading', { level: 4 })).toBeVisible();
+});
+
+test('Renders as "h5" element when component="h5"', () => {
+  render(<Text component="h5">Test</Text>);
+  expect(screen.getByRole('heading', { level: 5 })).toBeVisible();
+});
+
+test('Renders as "h6" element when component="h6"', () => {
+  render(<Text component="h6">Test</Text>);
+  expect(screen.getByRole('heading', { level: 6 })).toBeVisible();
+});
+
+test('Renders as "a" element when component="a"', () => {
+  render(<Text component="a">Test</Text>);
+  expect(screen.getByText('Test')).toHaveProperty('nodeName', 'A');
+});
+
+test('Renders as "blockquote" element when component="blockquote"', () => {
+  render(<Text component="blockquote">Test</Text>);
+  expect(screen.getByText('Test')).toHaveProperty('nodeName', 'BLOCKQUOTE');
+});
+
+test('Renders as "pre" element when component="pre"', () => {
+  render(<Text component="pre">Test</Text>);
+  expect(screen.getByText('Test')).toHaveProperty('nodeName', 'PRE');
+});
+
+test('Renders without class name pf-m-visited by default', () => {
+  render(<Text>Test</Text>);
+  expect(screen.getByText('Test')).not.toHaveClass('pf-m-visited');
+});
+
+test('Renders with class name pf-m-visited when isVisited=true and component="a"', () => {
+  render(
+    <Text isVisitedLink={true} component="a">
+      Test
+    </Text>
   );
+  expect(screen.getByText('Test')).toHaveClass('pf-m-visited');
+});
+
+test('Renders with inherited element props spread to the component', () => {
+  render(<Text aria-label="Test label">Test</Text>);
+  expect(screen.getByText('Test')).toHaveAccessibleName('Test label');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<Text ouiaId="ouia-id">Test</Text>);
   expect(asFragment()).toMatchSnapshot();
 });

packages/react-core/src/components/Text/__tests__/TextContent.text.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import { TextContent } from '../TextContent';
+
+test('Renders without children', () => {
+  render(
+    <div data-testid="test-content">
+      <TextContent />
+    </div>
+  );
+  expect(screen.getByTestId('test-content').firstChild).toBeVisible();
+});
+
+test('Renders children', () => {
+  render(<TextContent>Test</TextContent>);
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test('Renders with class name pf-c-content', () => {
+  render(<TextContent>Test</TextContent>);
+  expect(screen.getByText('Test')).toHaveClass('pf-c-content', { exact: true });
+});
+
+test('Renders with custom class name when className prop is provided', () => {
+  render(<TextContent className="custom-class">Test</TextContent>);
+  expect(screen.getByText('Test')).toHaveClass('custom-class');
+});
+
+test('Renders without class name pf-m-visited by default', () => {
+  render(<TextContent>Test</TextContent>);
+  expect(screen.getByText('Test')).not.toHaveClass('pf-m-visited');
+});
+
+test('Renders with class name pf-m-visited when isVisited=true', () => {
+  render(<TextContent isVisited={true}>Test</TextContent>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-visited');
+});
+
+test('Renders with inherited element props spread to the component', () => {
+  render(<TextContent aria-label="Test label">Test</TextContent>);
+  expect(screen.getByText('Test')).toHaveAccessibleName('Test label');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<TextContent>Test</TextContent>);
+  expect(asFragment()).toMatchSnapshot();
+});

packages/react-core/src/components/Text/__tests__/TextList.test.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import { TextList } from '../TextList';
+
+test('Renders without children', () => {
+  render(
+    <div data-testid="test-list">
+      <TextList />
+    </div>
+  );
+  expect(screen.getByTestId('test-list').firstChild).toBeVisible();
+});
+
+test('Renders children', () => {
+  render(<TextList>Test</TextList>);
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test('Renders without class name by default', () => {
+  render(<TextList>Test</TextList>);
+  expect(screen.getByText('Test')).not.toHaveClass();
+});
+
+test('Renders with custom class name when className prop is provided', () => {
+  render(<TextList className="custom-class">Test</TextList>);
+  expect(screen.getByText('Test')).toHaveClass('custom-class');
+});
+
+test('Renders as "ul" element by default', () => {
+  render(<TextList>Test</TextList>);
+  expect(screen.getByText('Test')).toHaveProperty('nodeName', 'UL');
+});
+
+test('Renders as "ol" element when component="ol"', () => {
+  render(<TextList component="ol">Test</TextList>);
+  expect(screen.getByText('Test')).toHaveProperty('nodeName', 'OL');
+});
+
+test('Renders as "dl" element when component="dl"', () => {
+  render(<TextList component="dl">Test</TextList>);
+  expect(screen.getByText('Test')).toHaveProperty('nodeName', 'DL');
+});
+
+test('Renders with inherited element props spread to the component', () => {
+  render(<TextList aria-label="Test label">Test</TextList>);
+  expect(screen.getByText('Test')).toHaveAccessibleName('Test label');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<TextList>Test</TextList>);
+  expect(asFragment()).toMatchSnapshot();
+});

packages/react-core/src/components/Text/__tests__/TextListItem.test.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import { TextListItem } from '../TextListItem';
+
+test('Renders without children', () => {
+  render(
+    <div data-testid="test-list-item">
+      <TextListItem />
+    </div>
+  );
+  expect(screen.getByTestId('test-list-item').firstChild).toBeVisible();
+});
+
+test('Renders children', () => {
+  render(<TextListItem>Test</TextListItem>);
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test('Renders without class name by default', () => {
+  render(<TextListItem>Test</TextListItem>);
+  expect(screen.getByText('Test')).not.toHaveClass();
+});
+
+test('Renders with custom class name when className prop is provided', () => {
+  render(<TextListItem className="custom-class">Test</TextListItem>);
+  expect(screen.getByText('Test')).toHaveClass('custom-class');
+});
+
+test('Renders as "li" element by default', () => {
+  render(<TextListItem>Test</TextListItem>);
+  expect(screen.getByText('Test')).toHaveProperty('nodeName', 'LI');
+});
+
+test('Renders as "dt" element when component="dt"', () => {
+  render(<TextListItem component="dt">Test</TextListItem>);
+  expect(screen.getByText('Test')).toHaveProperty('nodeName', 'DT');
+});
+
+test('Renders as "dd" element when component="dd"', () => {
+  render(<TextListItem component="dd">Test</TextListItem>);
+  expect(screen.getByText('Test')).toHaveProperty('nodeName', 'DD');
+});
+
+test('Renders with inherited element props spread to the component', () => {
+  render(<TextListItem aria-label="Test label">Test</TextListItem>);
+  expect(screen.getByText('Test')).toHaveAccessibleName('Test label');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<TextListItem>Test</TextListItem>);
+  expect(asFragment()).toMatchSnapshot();
+});