From 435d34cdbd740f5d28bf51728a7b8141657f3c16 Mon Sep 17 00:00:00 2001 From: Andy Vo Date: Mon, 25 Jul 2022 13:49:42 -0400 Subject: [PATCH 1/3] chore(Tooltip): test revamp --- .../Tooltip/__tests__/Tooltip.test.tsx | 322 +++++++++++++++++- .../__snapshots__/Tooltip.test.tsx.snap | 20 ++ 2 files changed, 341 insertions(+), 1 deletion(-) diff --git a/packages/react-core/src/components/Tooltip/__tests__/Tooltip.test.tsx b/packages/react-core/src/components/Tooltip/__tests__/Tooltip.test.tsx index ea1e31910aa..1c788e7d60d 100644 --- a/packages/react-core/src/components/Tooltip/__tests__/Tooltip.test.tsx +++ b/packages/react-core/src/components/Tooltip/__tests__/Tooltip.test.tsx @@ -1,6 +1,158 @@ import * as React from 'react'; -import { render } from '@testing-library/react'; +import { render, screen } from '@testing-library/react'; import { Tooltip } from '../Tooltip'; +import { TooltipArrow } from "../TooltipArrow"; +import { TooltipContent } from "../TooltipContent"; +import userEvent from '@testing-library/user-event'; + +/** Testing tooltip content */ + +test('tooltip content renders', () => { + const { asFragment } = render( + Test + } + /> + ); + + expect(asFragment()).toMatchSnapshot(); +}); + +test('renders pf-c-tooltip__content class', () => { + render( + Test + } + /> + ); + + const tooltip = screen.getByLabelText('test-label'); + + expect(tooltip).toHaveClass('pf-c-tooltip__content'); +}); + +test('renders custom class', () => { + render( + Test + } + /> + ); + + const tooltip = screen.getByLabelText('test-label'); + + expect(tooltip).toHaveClass('custom-classname'); +}); + +test('renders with children', () => { + render( + Test + } + /> + ); + + expect(screen.getByText('Test')).toBeVisible(); +}); + +test('renders tooltip content with default alignment', () => { + render( + Test + } + /> + ); + + expect(screen.getByLabelText('test-label')).not.toHaveClass('pf-m-text-align-left'); +}); + +test('renders tooltip content with left alignment', () => { + render( + Test + } + /> + ); + + expect(screen.getByLabelText('test-label')).toHaveClass('pf-m-text-align-left'); +}); + +test('renders with inherited element props spread to the component', () => { + render( + + Test + + ); + + const tooltip = screen.getByText('Test'); + + expect(tooltip).toHaveAccessibleName('test-label'); +}); + +/** Testing tooltip arrow */ + +test('tooltip arrow renders', () => { + const { asFragment } = render( + + ); + + expect(asFragment()).toMatchSnapshot(); +}); + +test('renders pf-c-tooltip__arrow class', () => { + render( + + ); + + const tooltip = screen.getByLabelText('test-label'); + + expect(tooltip).toHaveClass('pf-c-tooltip__arrow'); +}); + +test('renders custom class', () => { + render( + + ); + + const tooltip = screen.getByLabelText('test-label'); + + expect(tooltip).toHaveClass('custom-classname'); +}); + +test('renders with inherited element props spread to the component', () => { + render( + + Test + + ); + + const tooltip = screen.getByText('Test'); + + expect(tooltip).toHaveAccessibleName('test-label'); +}); + +/** Testing remaining tooltip props */ test('tooltip renders', () => { const { asFragment } = render( @@ -17,3 +169,171 @@ test('tooltip renders', () => { ); expect(asFragment()).toMatchSnapshot(); }); + +test('renders tooltip content', async () => { + render( + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis. + + } + > +
Toggle tooltip
+ + ); + + const user = screen.getByText("Toggle tooltip"); + userEvent.hover(user); + + const tooltip = await screen.findByText("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis."); + + expect(tooltip).toBeVisible(); +}); + +test('renders tooltip position', async () => { + render( + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis. + + } + > +
Toggle tooltip
+ + ); + + const user = screen.getByText("Toggle tooltip"); + userEvent.hover(user); + + const tooltip = await screen.findByLabelText("test-label"); + expect(tooltip).toHaveClass("pf-m-top"); +}); + +test('renders tooltip on DOM without userEvent when isVisible prop passed', async () => { + render( + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis. + + } + > +
Toggle tooltip
+ + ); + + const tooltip = await screen.findByLabelText("test-label"); + expect(tooltip).toHaveClass("pf-c-tooltip"); +}); + +test('renders default classname pf-c-tooltip', async () => { + render( + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis. + + } + > +
Toggle tooltip
+ + ); + + const user = screen.getByText("Toggle tooltip"); + userEvent.hover(user); + + const tooltip = await screen.findByLabelText("test-label"); + expect(tooltip).toHaveClass("pf-c-tooltip"); +}); + +test('renders custom classname', async () => { + render( + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis. + + } + > +
Toggle tooltip
+ + ); + + const user = screen.getByText("Toggle tooltip"); + userEvent.hover(user); + + const tooltip = await screen.findByLabelText("test-label"); + expect(tooltip).toHaveClass("custom-class"); +}); + +test('renders zIndex styling', async () => { + render( + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis. + + } + > +
Toggle tooltip
+ + ); + + const user = screen.getByText("Toggle tooltip"); + userEvent.hover(user); + + const tooltip = await screen.findByLabelText("test-label"); + const style = window.getComputedStyle(tooltip); + expect(style.zIndex).toBe("9999"); +}); + +test('renders children', async () => { + render( + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis. + + } + > +
Toggle tooltip
+ + ); + + const user = screen.getByText("Toggle tooltip"); + expect(user).toBeVisible(); +}); + +test('renders animationDuration styling', async () => { + render( + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis. + + } + > +
Toggle tooltip
+ + ); + + const user = screen.getByText("Toggle tooltip"); + userEvent.hover(user); + + const tooltip = await screen.findByLabelText("test-label"); + const style = window.getComputedStyle(tooltip); + expect(style.transition).toBe("opacity 300ms cubic-bezier(.54, 1.5, .38, 1.11)"); +}); diff --git a/packages/react-core/src/components/Tooltip/__tests__/__snapshots__/Tooltip.test.tsx.snap b/packages/react-core/src/components/Tooltip/__tests__/__snapshots__/Tooltip.test.tsx.snap index 210e96b48ce..483f6784d28 100644 --- a/packages/react-core/src/components/Tooltip/__tests__/__snapshots__/Tooltip.test.tsx.snap +++ b/packages/react-core/src/components/Tooltip/__tests__/__snapshots__/Tooltip.test.tsx.snap @@ -1,5 +1,25 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`tooltip arrow renders 1`] = ` + +
+ +`; + +exports[`tooltip content renders 1`] = ` + +
+
+ Test +
+
+ +`; + exports[`tooltip renders 1`] = `
From 470996da9b5a55f29f758afa7782f3094b2acb7c Mon Sep 17 00:00:00 2001 From: Andy Vo Date: Tue, 16 Aug 2022 08:24:46 -0700 Subject: [PATCH 2/3] chore(Tooltip): mocking Popper props --- .../Tooltip/__tests__/Tooltip.test.tsx | 63 +++++++++++++++++-- 1 file changed, 59 insertions(+), 4 deletions(-) diff --git a/packages/react-core/src/components/Tooltip/__tests__/Tooltip.test.tsx b/packages/react-core/src/components/Tooltip/__tests__/Tooltip.test.tsx index 1c788e7d60d..7b90ea06408 100644 --- a/packages/react-core/src/components/Tooltip/__tests__/Tooltip.test.tsx +++ b/packages/react-core/src/components/Tooltip/__tests__/Tooltip.test.tsx @@ -5,18 +5,31 @@ import { TooltipArrow } from "../TooltipArrow"; import { TooltipContent } from "../TooltipContent"; import userEvent from '@testing-library/user-event'; +jest.mock('../../../helpers', () => ({ + Popper: ({ enableFlip, appendTo, distance, flipBehavior, ...props }) => ( +
+
{enableFlip}
+
{distance}
+
{flipBehavior}
+

{`enableFlip: ${enableFlip}`}

+

Append to class name: {appendTo && `${appendTo.className}`}

+
+ ) +})); + /** Testing tooltip content */ test('tooltip content renders', () => { - const { asFragment } = render( + render( Test
+
Test
} + data-testid='Tooltip' /> ); - expect(asFragment()).toMatchSnapshot(); + expect(screen.getByTestId('Tooltip')).toBeVisible(); }); test('renders pf-c-tooltip__content class', () => { @@ -157,7 +170,6 @@ test('renders with inherited element props spread to the component', () => { test('tooltip renders', () => { const { asFragment } = render( Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis. @@ -233,6 +245,30 @@ test('renders tooltip on DOM without userEvent when isVisible prop passed', asyn expect(tooltip).toHaveClass("pf-c-tooltip"); }); +test('passes Popper enableFlip set to true', async () => { + render( + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis. +
+ } + > +
Toggle tooltip
+ + ); + + const user = screen.getByText("Toggle tooltip"); + userEvent.hover(user); + + // const scr = screen.getByTestId('enableFlip'); + const input = await screen.findByText('enableFlip: true'); + + // expect(scr).toBeVisible(); + expect(input).toBeVisible(); +}); + test('renders default classname pf-c-tooltip', async () => { render( { const style = window.getComputedStyle(tooltip); expect(style.transition).toBe("opacity 300ms cubic-bezier(.54, 1.5, .38, 1.11)"); }); + +// enable flip: mock out popper - test against props that popper is receiving and what it should receive like in truncate +// just like when tooltip for truncate, you can set up popper mock to get the enableFlip + +// appendTo is passed straight to popper -- same with distance + +// aria - has assertions against what the accessible name is +// test against trigger prop for popper!!! +// maybe just have popper render trigger with custom data test id and have assertions based on that and the accessible name + +// flipBehavior is straight to popper + +// id - same thing w aria prop AND make sure it's getting passed to the proper place +// not rly a good rtl to test for IDs -> have it render what trigger returns and make assertions based on accessible name -> test aria prop and id prop +// select using data test-id bc content is a div + +// reference is straight to popper +// but also note: aria-live uses reference -> might have to use toHave attribute + From 2936274c332d318c9594803e5bd77dff2431aa7c Mon Sep 17 00:00:00 2001 From: Andy Vo Date: Tue, 23 Aug 2022 08:13:58 -0700 Subject: [PATCH 3/3] chore(Tooltip): new tests using mock and isVisible still WIP --- .../Tooltip/__tests__/Tooltip.test.tsx | 144 ++++++++++++------ .../__snapshots__/Tooltip.test.tsx.snap | 55 +++++-- 2 files changed, 137 insertions(+), 62 deletions(-) diff --git a/packages/react-core/src/components/Tooltip/__tests__/Tooltip.test.tsx b/packages/react-core/src/components/Tooltip/__tests__/Tooltip.test.tsx index 7b90ea06408..197bca2f41c 100644 --- a/packages/react-core/src/components/Tooltip/__tests__/Tooltip.test.tsx +++ b/packages/react-core/src/components/Tooltip/__tests__/Tooltip.test.tsx @@ -5,16 +5,22 @@ import { TooltipArrow } from "../TooltipArrow"; import { TooltipContent } from "../TooltipContent"; import userEvent from '@testing-library/user-event'; -jest.mock('../../../helpers', () => ({ - Popper: ({ enableFlip, appendTo, distance, flipBehavior, ...props }) => ( -
+jest.mock('../../../helpers/Popper/Popper', () => ({ + Popper: ({ trigger, enableFlip, appendTo, distance, flipBehavior, isVisible, placement, popper, zIndex, ...props }) => ( +
+
{trigger}
+
{isVisible && popper}
+
{placement}
{enableFlip}
{distance}
{flipBehavior}
+
{appendTo}
+
{zIndex}

{`enableFlip: ${enableFlip}`}

Append to class name: {appendTo && `${appendTo.className}`}

- ) + ), + getOpacityTransition: () => {} })); /** Testing tooltip content */ @@ -182,10 +188,11 @@ test('tooltip renders', () => { expect(asFragment()).toMatchSnapshot(); }); -test('renders tooltip content', async () => { +test('renders tooltip content when isVisible', async () => { render( Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis. @@ -196,18 +203,14 @@ test('renders tooltip content', async () => { ); - const user = screen.getByText("Toggle tooltip"); - userEvent.hover(user); - const tooltip = await screen.findByText("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis."); expect(tooltip).toBeVisible(); }); -test('renders tooltip position', async () => { +test('does not render tooltip content by default', () => { render( @@ -219,16 +222,15 @@ test('renders tooltip position', async () => { ); - const user = screen.getByText("Toggle tooltip"); - userEvent.hover(user); + const tooltip = screen.queryByText("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis."); - const tooltip = await screen.findByLabelText("test-label"); - expect(tooltip).toHaveClass("pf-m-top"); + expect(tooltip).not.toBeInTheDocument(); }); -test('renders tooltip on DOM without userEvent when isVisible prop passed', async () => { +test('renders tooltip position when isVisible', () => { render( ); - const tooltip = await screen.findByLabelText("test-label"); - expect(tooltip).toHaveClass("pf-c-tooltip"); + const tooltip = screen.getByTestId("placement"); + expect(tooltip).toHaveTextContent("top"); }); test('passes Popper enableFlip set to true', async () => { @@ -259,20 +261,16 @@ test('passes Popper enableFlip set to true', async () => { ); - const user = screen.getByText("Toggle tooltip"); - userEvent.hover(user); - - // const scr = screen.getByTestId('enableFlip'); const input = await screen.findByText('enableFlip: true'); - // expect(scr).toBeVisible(); expect(input).toBeVisible(); }); -test('renders default classname pf-c-tooltip', async () => { +test('renders default classname pf-c-tooltip when isVisible', async () => { render( Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis. @@ -283,18 +281,16 @@ test('renders default classname pf-c-tooltip', async () => { ); - const user = screen.getByText("Toggle tooltip"); - userEvent.hover(user); - const tooltip = await screen.findByLabelText("test-label"); expect(tooltip).toHaveClass("pf-c-tooltip"); }); -test('renders custom classname', async () => { +test('renders custom classname when isVisible', async () => { render( Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis. @@ -305,17 +301,22 @@ test('renders custom classname', async () => { ); - const user = screen.getByText("Toggle tooltip"); - userEvent.hover(user); - const tooltip = await screen.findByLabelText("test-label"); expect(tooltip).toHaveClass("custom-class"); }); -test('renders zIndex styling', async () => { +// entrydelay test + +// exitdelay test + +// appendto test + + +test('renders zIndex styling when isVisible', () => { render( Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis. @@ -326,18 +327,18 @@ test('renders zIndex styling', async () => { ); - const user = screen.getByText("Toggle tooltip"); - userEvent.hover(user); + const input = screen.getByTestId('zIndex'); - const tooltip = await screen.findByLabelText("test-label"); - const style = window.getComputedStyle(tooltip); - expect(style.zIndex).toBe("9999"); + expect(input).toHaveTextContent('9999'); }); -test('renders children', async () => { +// maxwidth + +test('renders default distance when isVisible', () => { render( Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis. @@ -348,14 +349,18 @@ test('renders children', async () => { ); - const user = screen.getByText("Toggle tooltip"); - expect(user).toBeVisible(); + const input = screen.getByTestId('distance'); + + expect(input).toHaveTextContent('15'); }); -test('renders animationDuration styling', async () => { +// aria + +test('renders default flipBehavior when isVisible', () => { render( Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis. @@ -366,25 +371,64 @@ test('renders animationDuration styling', async () => { ); - const user = screen.getByText("Toggle tooltip"); - userEvent.hover(user); + const input = screen.getByTestId('flipBehavior'); - const tooltip = await screen.findByLabelText("test-label"); - const style = window.getComputedStyle(tooltip); - expect(style.transition).toBe("opacity 300ms cubic-bezier(.54, 1.5, .38, 1.11)"); + expect(input).toHaveTextContent('toprightbottomlefttoprightbottom'); }); -// enable flip: mock out popper - test against props that popper is receiving and what it should receive like in truncate -// just like when tooltip for truncate, you can set up popper mock to get the enableFlip +// id -// appendTo is passed straight to popper -- same with distance +test('renders children', async () => { + render( + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis. +
+ } + > +
Toggle tooltip
+ + ); + + const user = screen.getByText("Toggle tooltip"); + expect(user).toBeVisible(); +}); + +// test('renders animationDuration styling', async () => { +// render( +// +// Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis. +// +// } +// > +//
Toggle tooltip
+// +// ); + +// const user = screen.getByText("Toggle tooltip"); +// userEvent.hover(user); + +// const tooltip = await screen.findByLabelText("test-label"); +// const style = window.getComputedStyle(tooltip); +// expect(style.transition).toBe("opacity 300ms cubic-bezier(.54, 1.5, .38, 1.11)"); +// }); + +// reference + +// aria-live + + +// appendTo is passed straight to popper // aria - has assertions against what the accessible name is // test against trigger prop for popper!!! // maybe just have popper render trigger with custom data test id and have assertions based on that and the accessible name -// flipBehavior is straight to popper - // id - same thing w aria prop AND make sure it's getting passed to the proper place // not rly a good rtl to test for IDs -> have it render what trigger returns and make assertions based on accessible name -> test aria prop and id prop // select using data test-id bc content is a div diff --git a/packages/react-core/src/components/Tooltip/__tests__/__snapshots__/Tooltip.test.tsx.snap b/packages/react-core/src/components/Tooltip/__tests__/__snapshots__/Tooltip.test.tsx.snap index 483f6784d28..0e557df1dc8 100644 --- a/packages/react-core/src/components/Tooltip/__tests__/__snapshots__/Tooltip.test.tsx.snap +++ b/packages/react-core/src/components/Tooltip/__tests__/__snapshots__/Tooltip.test.tsx.snap @@ -8,22 +8,53 @@ exports[`tooltip arrow renders 1`] = ` `; -exports[`tooltip content renders 1`] = ` +exports[`tooltip renders 1`] = `
-
- Test +
+
+ Toggle tooltip +
-
- -`; - -exports[`tooltip renders 1`] = ` - -
- Toggle tooltip +
+
+ top +
+
+
+ 15 +
+
+ toprightbottomlefttoprightbottom +
+
+
+ 9999 +
+

+ enableFlip: true +

+

+ Append to class name: undefined +

`;