fix truncate mock for snapshot, add basic integration test for tabindex

Author: kmcfaul

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

@@ -4,7 +4,7 @@ import styles from '@patternfly/react-styles/css/components/Truncate/truncate';
 import '@testing-library/jest-dom';
 
 jest.mock('../../Tooltip', () => ({
-  Tooltip: ({ content, position, children, ...props }) => (
+  Tooltip: ({ content, position, children, triggerRef, ...props }) => (
     <div data-testid="Tooltip-mock" {...props}>
       <div data-testid="Tooltip-mock-content-container">Test {content}</div>
       <p>{`position: ${position}`}</p>

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

@@ -41,7 +41,6 @@ exports[`renders default truncation 1`] = `
 <DocumentFragment>
   <div
     data-testid="Tooltip-mock"
-    triggerref="[object Object]"
   >
     <div
       data-testid="Tooltip-mock-content-container"
@@ -69,7 +68,6 @@ exports[`renders start truncation with &lrm; at end 1`] = `
 <DocumentFragment>
   <div
     data-testid="Tooltip-mock"
-    triggerref="[object Object]"
   >
     <div
       data-testid="Tooltip-mock-content-container"

packages/react-integration/cypress/integration/truncate.spec.ts

@@ -0,0 +1,23 @@
+describe('Truncate Demo Test', () => {
+  it('Navigate to demo section', () => {
+    cy.visit('http://localhost:3000/truncate-demo-nav-link');
+  });
+
+  it('Verify no tooltip renders by default', () => {
+    cy.get('.pf-v6-c-tooltip').should('not.exist');
+  });
+
+  it('Verify non-truncated content in wide container does not have tabindex', () => {
+    cy.get('#no-truncate').should('not.have.attr', 'tabindex');
+  });
+
+  it('Verify truncated content in small container does have tabindex', () => {
+    cy.get('#basic-truncate').should('have.attr', 'tabindex');
+  });
+
+  it('Verify tooltip renders when truncate is focused', () => {
+    cy.get('#basic-truncate').should('have.attr', 'tabindex');
+    cy.get('#basic-truncate').focus();
+    cy.get('.pf-v6-c-tooltip').should('exist');
+  });
+});

packages/react-integration/demo-app-ts/src/Demos.ts

@@ -462,6 +462,11 @@ export const Demos: DemoInterface[] = [
     name: 'Tree View Demo',
     componentType: Examples.TreeViewDemo
   },
+  {
+    id: 'truncate-demo',
+    name: 'Truncate Demo',
+    componentType: Examples.TruncateDemo
+  },
   {
     id: 'wizard-demo',
     name: 'Wizard Demo',

packages/react-integration/demo-app-ts/src/components/demos/TruncateDemo/TruncateDemo.tsx

@@ -0,0 +1,13 @@
+import { Truncate } from '@patternfly/react-core';
+
+export const TruncateDemo: React.FunctionComponent = () => (
+  <>
+    <div style={{ width: '100px' }}>
+      <Truncate id="basic-truncate" content={'basic truncated content'} />
+    </div>
+    <div style={{ width: '800px' }}>
+      <Truncate id="no-truncate" content={'no truncation in wide container'} />
+    </div>
+  </>
+);
+TruncateDemo.displayName = 'TruncateDemo';

packages/react-integration/demo-app-ts/src/components/demos/index.ts

@@ -88,5 +88,6 @@ export * from './ToolbarDemo/ToolbarDemo';
 export * from './ToolbarDemo/ToolbarVisibilityDemo';
 export * from './TooltipDemo/TooltipDemo';
 export * from './TreeViewDemo/TreeViewDemo';
+export * from './TruncateDemo/TruncateDemo';
 export * from './WizardDemo/WizardDemo';
 export * from './WizardDeprecatedDemo/WizardDeprecatedDemo';