Skip to content

Commit

Permalink
Updated mock and tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@thatblindgeye
thatblindgeye committed Jun 22, 2023
1 parent 453029e commit f2022b5
Show file tree
Hide file tree
Showing 5 changed files with 147 additions and 32 deletions.
8 changes: 6 additions & 2 deletions packages/react-core/src/components/Dropdown/__tests__/Dropdown.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,11 @@ test('renders dropdown', () => {
});

test('passes children', () => {
render(<Dropdown toggle={(toggleRef) => toggle(toggleRef)}>{dropdownChildren}</Dropdown>);
render(
<Dropdown isOpen toggle={(toggleRef) => toggle(toggleRef)}>
{dropdownChildren}
</Dropdown>
);

expect(screen.getByText('Dropdown children')).toBeVisible();
});
Expand Down Expand Up @@ -134,7 +138,7 @@ test('passes onSelect callback', async () => {

const onSelect = jest.fn();
render(
<Dropdown onSelect={onSelect} toggle={(toggleRef) => toggle(toggleRef)}>
<Dropdown isOpen onSelect={onSelect} toggle={(toggleRef) => toggle(toggleRef)}>
{dropdownChildren}
</Dropdown>
);
Expand Down
26 changes: 24 additions & 2 deletions packages/react-core/src/components/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,9 @@

exports[`match snapshot 1`] = `
<DocumentFragment>
<div>
<div
data-testid="popper"
>
<div
class="customClass"
data-ouia-component-id="dropdown"
Expand Down Expand Up @@ -35,7 +37,27 @@ exports[`match snapshot 1`] = `
<p>
isOpen: true
</p>
<div>
<p>
enableFlip: undefined
</p>
<p>
placement: undefined
</p>
<p>
appendTo: undefined
</p>
<p>
distance: undefined
</p>
<p>
flipBehavior: undefined
</p>
<p>
minWidth: undefined
</p>
<div
data-testid="trigger"
>
<button>
Dropdown
</button>
Expand Down
100 changes: 75 additions & 25 deletions packages/react-core/src/components/Tooltip/__tests__/Tooltip.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,68 +1,118 @@
import React from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Tooltip } from '../Tooltip';

jest.mock('../../../helpers/Popper/Popper');

test('Does not render by default', () => {
render(<Tooltip content="Test content" />);

expect(screen.queryByText('Test content')).not.toBeInTheDocument();
expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
});

// Need to pass isVisible and make test callbacks async in order to render tooltip

test('Renders with content', async () => {
test('Renders when isVisible is true', async () => {
render(<Tooltip isVisible content="Test content" />);

const tooltip = await screen.findByText('Test content');
expect(tooltip.parentElement).toBeVisible();
const tooltip = await screen.findByRole('tooltip');
expect(tooltip).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');
const tooltip = await screen.findByRole('tooltip');
expect(tooltip).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');
const tooltip = await screen.findByRole('tooltip');
expect(tooltip).toHaveClass('test-class');
});

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');
const tooltip = await screen.findByRole('tooltip');
expect(tooltip).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');
const tooltip = await screen.findByRole('tooltip');
expect(tooltip).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');
const tooltip = await screen.findByRole('tooltip');
expect(tooltip).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');
const tooltip = await screen.findByRole('tooltip');
expect(tooltip).toHaveAttribute('id', 'custom-id');
});

test('Passes zIndex to Popper', async () => {
render(<Tooltip zIndex={10} content="Test content" />);

const contentPassedToPopper = await screen.findByText('zIndex: 10');
expect(contentPassedToPopper).toBeVisible();
});

test('Passes enableFlip to Popper', async () => {
render(<Tooltip enableFlip content="Test content" />);

const contentPassedToPopper = await screen.findByText('enableFlip: true');
expect(contentPassedToPopper).toBeVisible();
});

test('Passes position as placement to Popper', async () => {
render(<Tooltip position="left-start" content="Test content" />);

const contentPassedToPopper = await screen.findByText('placement: left-start');
expect(contentPassedToPopper).toBeVisible();
});

test('Passes appendTo to Popper', async () => {
render(<Tooltip appendTo={() => document.body} content="Test content" />);

const contentPassedToPopper = await screen.findByText('appendTo: () => document.body');
expect(contentPassedToPopper).toBeVisible();
});

test('Passes distance to Popper', async () => {
render(<Tooltip distance={5} content="Test content" />);

const contentPassedToPopper = await screen.findByText('distance: 5');
expect(contentPassedToPopper).toBeVisible();
});

test('Passes flipBehavior to Popper', async () => {
render(<Tooltip flipBehavior="flip" content="Test content" />);

const contentPassedToPopper = await screen.findByText('flipBehavior: flip');
expect(contentPassedToPopper).toBeVisible();
});

test('Passes minWidth to Popper', async () => {
render(<Tooltip minWidth="100px" content="Test content" />);

const contentPassedToPopper = await screen.findByText('minWidth: 100px');
expect(contentPassedToPopper).toBeVisible();
});

test('Matches snapshot', async () => {
render(<Tooltip id="custom-id" isVisible content="Test content" />);

const tooltip = await screen.findByRole('tooltip');
expect(tooltip).toMatchSnapshot();
});
20 changes: 20 additions & 0 deletions packages/react-core/src/components/Tooltip/__tests__/__snapshots__/Tooltip.test.tsx.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Matches snapshot 1`] = `
<div
aria-live="off"
class="pf-v5-c-tooltip"
id="custom-id"
role="tooltip"
style="opacity: 1;"
>
<div
class="pf-v5-c-tooltip__arrow"
/>
<div
class="pf-v5-c-tooltip__content"
>
Test content
</div>
</div>
`;
25 changes: 22 additions & 3 deletions packages/react-core/src/helpers/Popper/__mocks__/Popper.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,30 @@
import React from 'react';
import { PopperProps } from '../Popper';

export const Popper = ({ popper, zIndex, isVisible, trigger }: PopperProps) => (
export const Popper = ({
popper,
zIndex,
placement,
trigger,
enableFlip,
appendTo,
distance,
flipBehavior,
isVisible,
minWidth
}: PopperProps) => (
<>
<div>{popper}</div>
<div data-testid="popper">{isVisible && popper}</div>
<p>{`zIndex: ${zIndex}`}</p>
<p>{`isOpen: ${isVisible}`}</p>
<div>{trigger}</div>
<p>{`enableFlip: ${enableFlip}`}</p>
<p>{`placement: ${placement}`}</p>
<p>{`appendTo: ${appendTo}`}</p>
<p>{`distance: ${distance}`}</p>
<p>{`flipBehavior: ${flipBehavior}`}</p>
<p>{`minWidth: ${minWidth}`}</p>
<div data-testid="trigger">{trigger}</div>
</>
);

export const getOpacityTransition = () => {};

0 comments on commit f2022b5

Please sign in to comment.