chore(Truncate): component unit test revamp

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

@@ -1,15 +1,91 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { Truncate } from '../Truncate';
 
+jest.mock('../../Tooltip', () => ({
+  Tooltip: ({ content, position, children, ...props }) => (
+    <div data-testid="Tooltip-mock" {...props}>
+      <div data-testid="Tooltip-mock-content-container">Test {content}</div>
+      <p>{`position: ${position}`}</p>
+      {children}
+    </div>
+  )
+}));
+
+test('renders with class pf-c-truncate', () => {
+  render(
+    <Truncate
+      content={''}
+      aria-label='test-id'
+    />
+  );
+
+  const test = screen.getByLabelText('test-id');
+
+  expect(test).toHaveClass('pf-c-truncate');
+});
+
+test('renders with custom class name passed via prop', () => {
+  render(
+    <Truncate
+      content={''}
+      aria-label='test-id'
+      className='custom-classname'
+    />
+  );
+
+  const test = screen.getByLabelText('test-id');
+
+  expect(test).toHaveClass('custom-classname');
+});
+
+test('renders truncate with empty content', () => {
+  render(
+    <Truncate
+      content={''}
+      aria-label='test-id'
+    />
+  );
+
+  const test = screen.getByLabelText('test-id');
+
+  expect(test).toHaveTextContent('');
+});
+
+test('renders truncate with content', () => {
+  render(
+    <Truncate
+      content={'Test'}
+      aria-label='test-id'
+    />
+  );
+
+  const test = screen.getByLabelText('test-id');
+
+  expect(test).toHaveTextContent('Test');
+});
+
+test('only renders pf-c-truncate__start with default position', () => {
+  render(
+    <Truncate
+      content={'Testing truncate content'}
+    />
+  );
+
+  const start = screen.getByText('Testing truncate content');
+
+  expect(start).toHaveClass('pf-c-truncate__start');
+  expect(start).not.toHaveClass('pf-c-truncate__end');
+});
+
 test('renders default truncation', () => {
   const { asFragment } = render(
     <Truncate content={'Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.'} />
   );
   expect(asFragment()).toMatchSnapshot();
 });
 
-test('renders start truncation', () => {
+test('renders start truncation with &lrm; at end', () => {
   const { asFragment } = render(
     <Truncate
       content={'Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.'}
@@ -20,11 +96,74 @@ test('renders start truncation', () => {
 });
 
 test('renders middle truncation', () => {
-  const { asFragment } = render(
+  render(
     <Truncate
       content={'Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.'}
       position={'middle'}
     />
   );
-  expect(asFragment()).toMatchSnapshot();
+
+  const start = screen.getByText('Vestibulum interdum risus et enim faucibus, sit amet molestie est ac');
+
+  expect(start).toHaveClass('pf-c-truncate__start');
+
+  const end = screen.getByText('cumsan.');
+
+  expect(end).toHaveClass('pf-c-truncate__end');
+});
+
+test('renders different content when trailingNumChars is passed with middle truncate', () => {
+  render(
+    <Truncate
+      content={'Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.'}
+      trailingNumChars={3}
+      position='middle'
+    />
+  );
+
+  const start = screen.getByText('Vestibulum interdum risus et enim faucibus, sit amet molestie est accums');
+
+  expect(start).toHaveClass('pf-c-truncate__start');
+
+  const end = screen.getByText('an.');
+
+  expect(end).toHaveClass('pf-c-truncate__end');
+});
+
+test('renders tooltip position', () => {
+  render(
+    <Truncate
+      content={''}
+      tooltipPosition='top'
+    />
+  );
+
+  const input = screen.getByText('position: top');
+
+  expect(input).toBeVisible();
+});
+
+test('renders tooltip content', () => {
+  render(
+    <Truncate
+      content={'Another Tooltip'}
+      tooltipPosition='top'
+    />
+  );
+
+  const input = screen.getByText('Test Another Tooltip');
+
+  expect(input).toBeVisible();
+});
+
+test('renders with inherited element props spread to the component', () => {
+  render(
+    <Truncate
+      content={'Test'}
+      data-testid="test-id"
+      aria-label="labelling-id"
+    />
+  );
+
+  expect(screen.getByTestId('test-id')).toHaveAccessibleName('labelling-id');
 });

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

@@ -2,47 +2,52 @@
 
 exports[`renders default truncation 1`] = `
 <DocumentFragment>
-  <span
-    class="pf-c-truncate"
+  <div
+    data-testid="Tooltip-mock"
   >
-    <span
-      class="pf-c-truncate__start"
+    <div
+      data-testid="Tooltip-mock-content-container"
     >
-      Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.
-    </span>
-  </span>
-</DocumentFragment>
-`;
-
-exports[`renders middle truncation 1`] = `
-<DocumentFragment>
-  <span
-    class="pf-c-truncate"
-  >
+      Test Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.
+    </div>
+    <p>
+      position: top
+    </p>
     <span
-      class="pf-c-truncate__start"
+      class="pf-c-truncate"
     >
-      Vestibulum interdum risus et enim faucibus, sit amet molestie est ac
+      <span
+        class="pf-c-truncate__start"
+      >
+        Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.
+      </span>
     </span>
-    <span
-      class="pf-c-truncate__end"
-    >
-      cumsan.
-    </span>
-  </span>
+  </div>
 </DocumentFragment>
 `;
 
-exports[`renders start truncation 1`] = `
+exports[`renders start truncation with &lrm; at end 1`] = `
 <DocumentFragment>
-  <span
-    class="pf-c-truncate"
+  <div
+    data-testid="Tooltip-mock"
   >
+    <div
+      data-testid="Tooltip-mock-content-container"
+    >
+      Test Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.
+    </div>
+    <p>
+      position: top
+    </p>
     <span
-      class="pf-c-truncate__end"
+      class="pf-c-truncate"
     >
-      Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.‎
+      <span
+        class="pf-c-truncate__end"
+      >
+        Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.‎
+      </span>
     </span>
-  </span>
+  </div>
 </DocumentFragment>
 `;