chore(Tooltip): updated unit tests

Author: Eric Olkowski

packages/react-core/src/components/Tooltip/__tests__/Generated/TooltipArrow.test.tsx

@@ -1,43 +1,68 @@
-import * as React from 'react';
-import { render } from '@testing-library/react';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
 import { Tooltip } from '../Tooltip';
 
-test('tooltip renders', () => {
-  const ref = React.createRef<HTMLDivElement>();
-  const { asFragment } = render(
-    <Tooltip
-      position="top"
-      triggerRef={ref}
-      content={
-        <div>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.
-        </div>
-      }
-    >
-      <div ref={ref}>Toggle tooltip</div>
-    </Tooltip>
-  );
-  expect(asFragment()).toMatchSnapshot();
-});
-
-test('tooltip renders in strict mode', () => {
-  const consoleError = jest.spyOn(console, 'error');
-  const ref = React.createRef<HTMLDivElement>();
-  const { asFragment } = render(
-    <React.StrictMode>
-      <Tooltip
-        position="top"
-        triggerRef={ref}
-        content={
-          <div>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.
-          </div>
-        }
-      >
-        <div ref={ref}>Toggle tooltip</div>
-      </Tooltip>
-    </React.StrictMode>
-  );
-  expect(consoleError).not.toHaveBeenCalled();
-  expect(asFragment()).toMatchSnapshot();
+test('Does not render by default', () => {
+  render(<Tooltip content="Test content" />);
+
+  expect(screen.queryByText('Test content')).not.toBeInTheDocument();
+});
+
+// Need to pass isVisible and make test callbacks async in order to render tooltip
+
+test('Renders with content', async () => {
+  render(<Tooltip isVisible content="Test content" />);
+
+  const tooltip = await screen.findByText('Test content');
+  expect(tooltip.parentElement).toBeVisible();
+});
+
+test('Renders with class name pf-v5-c-tooltip by default', async () => {
+  render(<Tooltip isVisible content="Test content" />);
+
+  const tooltip = await screen.findByText('Test content');
+  expect(tooltip.parentElement).toHaveClass('pf-v5-c-tooltip');
+});
+
+test('Renders with custom class names provided via prop', async () => {
+  render(<Tooltip isVisible className="test-class" content="Test content" />);
+
+  const tooltip = await screen.findByText('Test content');
+  expect(tooltip.parentElement).toHaveClass('test-class');
+});
+
+test('Renders with role of tooltip', async () => {
+  render(<Tooltip isVisible content="Test content" />);
+
+  const tooltip = await screen.findByText('Test content');
+  expect(tooltip.parentElement).toHaveAttribute('role', 'tooltip');
+});
+
+test('Renders with aria-live of off by default when triggerRef is not passed', async () => {
+  render(<Tooltip isVisible content="Test content" />);
+
+  const tooltip = await screen.findByText('Test content');
+  expect(tooltip.parentElement).toHaveAttribute('aria-live', 'off');
+});
+
+test('Renders with aria-live of polite by default when triggerRef is passed', async () => {
+  const triggerRef = React.createRef();
+  render(<Tooltip triggerRef={triggerRef} isVisible content="Test content" />);
+
+  const tooltip = await screen.findByText('Test content');
+  expect(tooltip.parentElement).toHaveAttribute('aria-live', 'polite');
+});
+
+test('Renders with value passed to aria-live prop', async () => {
+  render(<Tooltip aria-live="polite" isVisible content="Test content" />);
+
+  const tooltip = await screen.findByText('Test content');
+  expect(tooltip.parentElement).toHaveAttribute('aria-live', 'polite');
+});
+
+test('Renders with value passed to id prop', async () => {
+  render(<Tooltip id="custom-id" isVisible content="Test content" />);
+
+  const tooltip = await screen.findByText('Test content');
+  expect(tooltip.parentElement).toHaveAttribute('id', 'custom-id');
 });

packages/react-core/src/components/Tooltip/__tests__/Generated/TooltipContent.test.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+
+import { TooltipArrow } from '../TooltipArrow';
+
+test('Renders without children', () => {
+  render(<TooltipArrow data-testid="tooltipArrow" />);
+
+  expect(screen.getByTestId('tooltipArrow')).toBeVisible();
+});
+
+test('Renders with class name pf-v5-c-tooltip__arrow by default', () => {
+  render(<TooltipArrow data-testid="tooltipArrow" />);
+
+  expect(screen.getByTestId('tooltipArrow')).toHaveClass('pf-v5-c-tooltip__arrow');
+});
+
+test('Renders with custom class names provided via prop', () => {
+  render(<TooltipArrow className="test-class" data-testid="tooltipArrow" />);
+
+  expect(screen.getByTestId('tooltipArrow')).toHaveClass('test-class');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<TooltipArrow data-testid="tooltipArrow" />);
+  expect(asFragment()).toMatchSnapshot();
+});

packages/react-core/src/components/Tooltip/__tests__/Generated/__snapshots__/TooltipArrow.test.tsx.snap

@@ -0,0 +1,40 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+
+import { TooltipContent } from '../TooltipContent';
+
+test('Renders with children', () => {
+  render(<TooltipContent>Test content</TooltipContent>);
+
+  expect(screen.getByText('Test content')).toBeVisible();
+});
+
+test('Renders with class name pf-v5-c-tooltip__content by default', () => {
+  render(<TooltipContent>Test content</TooltipContent>);
+
+  expect(screen.getByText('Test content')).toHaveClass('pf-v5-c-tooltip__content');
+});
+
+test('Renders with custom class names provided via prop', () => {
+  render(<TooltipContent className="test-class">Test content</TooltipContent>);
+
+  expect(screen.getByText('Test content')).toHaveClass('test-class');
+});
+
+test('Does not render with class pf-m-text-align-left when isLeftAligned is not passed', () => {
+  render(<TooltipContent>Test content</TooltipContent>);
+
+  expect(screen.getByText('Test content')).not.toHaveClass('pf-m-text-align-left');
+});
+
+test('Renders with class pf-m-text-align-left when isLeftAligned is passed', () => {
+  render(<TooltipContent isLeftAligned>Test content</TooltipContent>);
+
+  expect(screen.getByText('Test content')).toHaveClass('pf-m-text-align-left');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<TooltipContent>Test content</TooltipContent>);
+  expect(asFragment()).toMatchSnapshot();
+});

packages/react-core/src/components/Tooltip/__tests__/Generated/__snapshots__/TooltipContent.test.tsx.snap

@@ -0,0 +1,10 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v5-c-tooltip__arrow"
+    data-testid="tooltipArrow"
+  />
+</DocumentFragment>
+`;

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

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v5-c-tooltip__content"
+  >
+    Test content
+  </div>
+</DocumentFragment>
+`;