Added tests

Author: Eric Olkowski

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

@@ -19,6 +19,24 @@ global.ResizeObserver = jest.fn().mockImplementation(() => ({
   disconnect: jest.fn()
 }));
 
+test('Renders with span wrapper by default', () => {
+  render(<Truncate content={''} data-testid="test-id" />);
+
+  expect(screen.getByTestId('test-id').tagName).toBe('SPAN');
+});
+
+test('Renders with anchor wrapper when href prop is passed', () => {
+  render(<Truncate content={'Link content'} href="#" />);
+
+  expect(screen.getByRole('link')).toHaveTextContent('Link content');
+});
+
+test('Passes href to anchor when href prop is passed', () => {
+  render(<Truncate content={'Link content'} href="#home" />);
+
+  expect(screen.getByRole('link')).toHaveAttribute('href', '#home');
+});
+
 test(`renders with class ${styles.truncate}`, () => {
   render(<Truncate content={''} aria-label="test-id" />);
 
@@ -145,6 +163,12 @@ test('renders tooltip content', () => {
   expect(input).toBeVisible();
 });
 
+test('Renders with additional tooltip props spread', () => {
+  render(<Truncate content={''} tooltipProps={{ distance: 32 }} />);
+
+  expect(screen.getByTestId('Tooltip-mock')).toHaveAttribute('distance', '32');
+});
+
 test('renders with inherited element props spread to the component', () => {
   render(<Truncate content={'Test'} data-testid="test-id" aria-label="labelling-id" />);
 

packages/react-core/src/components/Truncate/examples/Truncate.md

@@ -5,7 +5,6 @@ cssPrefix: pf-v6-c-truncate
 propComponents: [Truncate]
 ---
 
-import { useRef } from 'react';
 import './TruncateExamples.css';
 
 ## Examples
@@ -56,6 +55,8 @@ Truncating based on a maximum amount of characters will truncate the content at
 
 ### With links
 
+To truncate link text, you can pass the `href` property in.
+
 ```ts file="./TruncateLinks.tsx"
 
 ```

packages/react-core/src/components/Truncate/examples/TruncateLinks.tsx

@@ -1,20 +1,12 @@
-import { useRef } from 'react';
-import { Truncate, Button } from '@patternfly/react-core';
+import { Truncate } from '@patternfly/react-core';
 
 export const TruncateLinks: React.FunctionComponent = () => {
-  const anchorRef = useRef(null);
-  const btnRef = useRef(null);
   const content = 'A very lengthy anchor text content to trigger truncation';
   return (
     <>
       <div>With default width-observing truncation:</div>
       <div className="truncate-example-resize">
-        <a ref={anchorRef} href="#">
-          <Truncate tooltipProps={{ triggerRef: anchorRef }} content={content} />
-        </a>
-        <Button variant="control" ref={btnRef}>
-          <Truncate tooltipProps={{ triggerRef: btnRef }} content={content} />
-        </Button>
+        <Truncate href="#" content={content} />
         <Truncate position="start" href="#" content={content} />
         <Truncate position="middle" href="#" content={content} />
       </div>