diff --git a/packages/react-core/src/components/ClipboardCopy/ClipboardCopy.tsx b/packages/react-core/src/components/ClipboardCopy/ClipboardCopy.tsx index bb70d7af704..b4338b36ce7 100644 --- a/packages/react-core/src/components/ClipboardCopy/ClipboardCopy.tsx +++ b/packages/react-core/src/components/ClipboardCopy/ClipboardCopy.tsx @@ -75,7 +75,7 @@ export interface ClipboardCopyProps extends Omit onChange?: (event: React.FormEvent, text?: string | number) => void; /** The text which is copied. */ children: React.ReactNode; - /** Additional actions for inline clipboard copy. Should be wrapped with ClipboardCopyAction. */ + /** Additional actions for inline-compact clipboard copy. Should be wrapped with ClipboardCopyAction. */ additionalActions?: React.ReactNode; /** Value to overwrite the randomly generated data-ouia-component-id.*/ ouiaId?: number | string; diff --git a/packages/react-core/src/components/ClipboardCopy/ClipboardCopyButton.tsx b/packages/react-core/src/components/ClipboardCopy/ClipboardCopyButton.tsx index e0add211d15..ad55776ca61 100644 --- a/packages/react-core/src/components/ClipboardCopy/ClipboardCopyButton.tsx +++ b/packages/react-core/src/components/ClipboardCopy/ClipboardCopyButton.tsx @@ -57,6 +57,7 @@ export const ClipboardCopyButton: React.FunctionComponent {}, + className, ...props }: ClipboardCopyButtonProps) => { const triggerRef = React.createRef(); @@ -79,6 +80,7 @@ export const ClipboardCopyButton: React.FunctionComponent diff --git a/packages/react-core/src/components/ClipboardCopy/__tests__/ClipboardCopy.test.tsx b/packages/react-core/src/components/ClipboardCopy/__tests__/ClipboardCopy.test.tsx new file mode 100644 index 00000000000..4d2b38cb5a6 --- /dev/null +++ b/packages/react-core/src/components/ClipboardCopy/__tests__/ClipboardCopy.test.tsx @@ -0,0 +1,344 @@ +import React from 'react'; +import { screen, render } from '@testing-library/react'; +import { ClipboardCopy } from '../ClipboardCopy'; +import styles from '@patternfly/react-styles/css/components/ClipboardCopy/clipboard-copy'; +import userEvent from '@testing-library/user-event'; + +jest.mock('../ClipboardCopyButton', () => ({ + ClipboardCopyButton: ({ 'aria-label': ariaLabel, children, entryDelay, exitDelay, maxWidth, position, onClick }) => ( +
+

{`exitDelay: ${exitDelay}`}

+

{`entryDelay: ${entryDelay}`}

+

{`maxWidth: ${maxWidth}`}

+

{`position: ${position}`}

+

{`button-ariaLabel: ${ariaLabel}`}

+
{`children: ${children}`}
+ +
+ ) +})); + +jest.mock('../ClipboardCopyToggle', () => ({ + ClipboardCopyToggle: ({ 'aria-label': ariaLabel }) => ( +
+

{`toggle-ariaLabel: ${ariaLabel}`}

+
+ ) +})); + +const children = 'Copyable text'; +const testId = 'clipboard-copy'; + +test(`Renders with class ${styles.clipboardCopy} by default`, () => { + render({children}); + + expect(screen.getByTestId(testId)).toHaveClass(styles.clipboardCopy, { exact: true }); +}); + +test(`Renders with custom class when className is passed`, () => { + render( + + {children} + + ); + + expect(screen.getByTestId(testId)).toHaveClass('test-class'); +}); + +test(`Does not render with class ${styles.modifiers.inline} by default`, () => { + render({children}); + + expect(screen.getByTestId(testId)).not.toHaveClass(styles.modifiers.inline); +}); + +test(`Does not render with class ${styles.modifiers.inline} if variant is not inline-compact`, () => { + render( + + {children} + + ); + + expect(screen.getByTestId(testId)).not.toHaveClass(styles.modifiers.inline); +}); + +test(`Renders with class ${styles.modifiers.inline} when variant is inline-compact`, () => { + render( + + {children} + + ); + + expect(screen.getByTestId(testId)).toHaveClass(styles.modifiers.inline); +}); + +test(`Does not render with class ${styles.modifiers.expanded} by default`, () => { + render({children}); + + expect(screen.getByTestId(testId)).not.toHaveClass(styles.modifiers.expanded); +}); + +test(`Renders with class ${styles.modifiers.expanded} when isExpanded is passed`, () => { + render( + + {children} + + ); + + expect(screen.getByTestId(testId)).toHaveClass(styles.modifiers.expanded); +}); + +test(`Does not render with class ${styles.modifiers.block} by default`, () => { + render({children}); + + expect(screen.getByTestId(testId)).not.toHaveClass(styles.modifiers.block); +}); + +test(`Renders with class ${styles.modifiers.block} when isBlock is passed`, () => { + render( + + {children} + + ); + + expect(screen.getByTestId(testId)).toHaveClass(styles.modifiers.block); +}); + +test('Spreads additional props to container div', () => { + render( + + {children} + + ); + + expect(screen.getByTestId(testId)).toHaveAttribute('role', 'group'); +}); + +test(`Renders children without class ${styles.modifiers.code} when variant is inline-compact and isCode is not passed`, () => { + render( + + {children} + + ); + + expect(screen.getByText(children)).not.toHaveClass(styles.modifiers.code); +}); + +test(`Renders children with class ${styles.modifiers.code} when variant is inline-compact and isCode is passed`, () => { + render( + + {children} + + ); + + expect(screen.getByText(children)).toHaveClass(styles.modifiers.code); +}); + +test('Does not render content passed to additionalActions by default', () => { + render({children}); + + expect(screen.queryByText('Additional action')).toBeNull(); +}); + +test('Does not render content passed to additionalActions when variant is not inline-compact', () => { + render( + + {children} + + ); + + expect(screen.queryByText('Additional action')).toBeNull(); +}); + +test('Renders content passed to additionalActions when variant is inline-compact', () => { + render( + + {children} + + ); + + expect(screen.getByText('Additional action')).toBeVisible(); +}); + +test('Passes hoverTip to ClipboardCopyButton by default', () => { + render({children}); + + expect(screen.getByText('button-ariaLabel: hover tip')).toBeVisible(); + expect(screen.getByText('children: hover tip')).toBeVisible(); +}); + +test('Passes hoverTip to ClipboardCopyButton when variant is inline-compact', () => { + render( + + {children} + + ); + + expect(screen.getByText('button-ariaLabel: hover tip')).toBeVisible(); + expect(screen.getByText('children: hover tip')).toBeVisible(); +}); + +test('Passes clickTip when ClipboardCopyButton clicked', async () => { + const user = userEvent.setup(); + render({children}); + + await user.click(screen.getByRole('button', { name: 'Test CCB clicker' })); + + expect(screen.getByText('children: click tip')).toBeVisible(); +}); + +test('Passes entryDelay to ClipboardCopyButton by default', () => { + render({children}); + + expect(screen.getByText('entryDelay: 100')).toBeVisible(); +}); + +test('Passes entryDelay to ClipboardCopyButton when variant is inline-compact', () => { + render( + + {children} + + ); + + expect(screen.getByText('entryDelay: 100')).toBeVisible(); +}); + +test('Passes exitDelay to ClipboardCopyButton by default', () => { + render({children}); + + expect(screen.getByText('exitDelay: 100')).toBeVisible(); +}); + +test('Passes exitDelay to ClipboardCopyButton when variant is inline-compact', () => { + render( + + {children} + + ); + + expect(screen.getByText('exitDelay: 100')).toBeVisible(); +}); + +test('Passes maxWidth to ClipboardCopyButton by default', () => { + render({children}); + + expect(screen.getByText('maxWidth: 100')).toBeVisible(); +}); + +test('Passes maxWidth to ClipboardCopyButton when variant is inline-compact', () => { + render( + + {children} + + ); + + expect(screen.getByText('maxWidth: 100')).toBeVisible(); +}); + +test('Passes position to ClipboardCopyButton by default', () => { + render({children}); + + expect(screen.getByText('position: bottom')).toBeVisible(); +}); + +test('Passes position to ClipboardCopyButton when variant is inline-compact', () => { + render( + + {children} + + ); + + expect(screen.getByText('position: bottom')).toBeVisible(); +}); + +test('Passes toggleAriaLabel to ClipboardCopyToggle when variant is expansion', () => { + render( + + {children} + + ); + + expect(screen.getByText('toggle-ariaLabel: toggle label')).toBeVisible(); +}); + +test('Does not set textinput to readonly when isReadOnly is not passed', () => { + render({children}); + + expect(screen.getByRole('textbox')).not.toHaveAttribute('readonly'); +}); + +test('Passes isReadOnly to TextInput', () => { + render({children}); + + expect(screen.getByRole('textbox')).toHaveAttribute('readonly'); +}); + +test('Passes textAriaLabel to TextInput', () => { + render({children}); + + expect(screen.getByRole('textbox')).toHaveAccessibleName('text label'); +}); + +test('Calls onChange when ClipboardCopy textinput is typed in', async () => { + const onChangeMock = jest.fn(); + const user = userEvent.setup(); + const typedText = 'stuff'; + + render({children}); + + await user.type(screen.getByRole('textbox'), typedText); + + expect(onChangeMock).toHaveBeenCalledTimes(typedText.length); +}); + +test('Does not call onChange when ClipboardCopy textinput is not typed in', async () => { + const onChangeMock = jest.fn(); + const user = userEvent.setup(); + const typedText = 'stuff'; + + render( + <> + {children} + + + ); + + await user.type(screen.getByRole('textbox', { name: 'native input' }), typedText); + + expect(onChangeMock).not.toHaveBeenCalled(); +}); + +test('Calls onCopy when ClipboardCopyButton is clicked', async () => { + const onCopyMock = jest.fn(); + const user = userEvent.setup(); + + render({children}); + + await user.click(screen.getByRole('button', { name: 'Test CCB clicker' })); + + expect(onCopyMock).toHaveBeenCalledTimes(1); +}); + +test('Does not call onCopy when ClipboardCopyButton is not clicked', async () => { + const onCopyMock = jest.fn(); + const user = userEvent.setup(); + + render( + <> + {children} + + + ); + + await user.click(screen.getByRole('button', { name: 'Test native clicker' })); + + expect(onCopyMock).not.toHaveBeenCalled(); +}); + +test('Matches snapshot', () => { + const { asFragment } = render( + + {children} + + ); + expect(asFragment()).toMatchSnapshot(); +}); diff --git a/packages/react-core/src/components/ClipboardCopy/__tests__/ClipboardCopyAction.test.tsx b/packages/react-core/src/components/ClipboardCopy/__tests__/ClipboardCopyAction.test.tsx new file mode 100644 index 00000000000..0419477b26b --- /dev/null +++ b/packages/react-core/src/components/ClipboardCopy/__tests__/ClipboardCopyAction.test.tsx @@ -0,0 +1,37 @@ +import React from 'react'; +import { screen, render } from '@testing-library/react'; +import { ClipboardCopyAction } from '../ClipboardCopyAction'; +import styles from '@patternfly/react-styles/css/components/ClipboardCopy/clipboard-copy'; + +test('Renders without children', () => { + render( +
+ +
+ ); + + expect(screen.getByTestId('container').firstChild).toBeVisible(); +}); + +test(`Renders with class ${styles.clipboardCopyActionsItem} by default`, () => { + render(Action text); + + expect(screen.getByText('Action text')).toHaveClass(styles.clipboardCopyActionsItem, { exact: true }); +}); + +test(`Renders with custom class when className is passed`, () => { + render(Action text); + + expect(screen.getByText('Action text')).toHaveClass('custom-class'); +}); + +test(`Spreads additional props`, () => { + render(Action text); + + expect(screen.getByText('Action text')).toHaveAttribute('id', 'test-id'); +}); + +test('Matches snapshot', () => { + const { asFragment } = render(Action text); + expect(asFragment()).toMatchSnapshot(); +}); diff --git a/packages/react-core/src/components/ClipboardCopy/__tests__/ClipboardCopyButton.test.tsx b/packages/react-core/src/components/ClipboardCopy/__tests__/ClipboardCopyButton.test.tsx index c87ccb90f51..34f027dd1c8 100644 --- a/packages/react-core/src/components/ClipboardCopy/__tests__/ClipboardCopyButton.test.tsx +++ b/packages/react-core/src/components/ClipboardCopy/__tests__/ClipboardCopyButton.test.tsx @@ -2,36 +2,153 @@ import React from 'react'; import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; - import { ClipboardCopyButton } from '../ClipboardCopyButton'; +import buttonStyles from '@patternfly/react-styles/css/components/Button/button'; + +jest.mock('../../Tooltip', () => ({ + Tooltip: ({ content, children, exitDelay, entryDelay, maxWidth, position, onTooltipHidden }) => ( +
+
{content}
+

{`exitDelay: ${exitDelay}`}

+

{`entryDelay: ${entryDelay}`}

+

{`maxWidth: ${maxWidth}`}

+

{`position: ${position}`}

+ onTooltipHidden clicker + {children} +
+ ) +})); -const props = { - id: 'my-id', - textId: 'my-text-id', - className: 'fancy-copy-button', +const requiredProps = { onClick: jest.fn(), - exitDelay: 1000, - entryDelay: 2000, - maxWidth: '500px', - position: 'right' as 'right', - 'aria-label': 'click this button to copy text' + children: 'Button content', + id: 'button-id', + textId: 'text-id' }; -test('copy button render', () => { - const { asFragment } = render(Copy Me); +// Must be kept as first test to avoid Button's ouiaId updating in snapshots +test('Matches snapshot', () => { + const { asFragment } = render(); expect(asFragment()).toMatchSnapshot(); }); -test('copy button onClick', async () => { - const onclick = jest.fn(); - const user = userEvent.setup(); +test('Renders with passed id prop', () => { + render(); + + expect(screen.getByRole('button')).toHaveAttribute('id', 'button-id'); +}); + +test('Renders with aria-labelledby with passed id and textId prop values', () => { + render( + <> +
Copyable text
+ + + ); + + expect(screen.getByRole('button')).toHaveAccessibleName('Copyable input Copyable text'); +}); + +test('Renders with concatenated aria-label by default', () => { + render( + <> +
Copyable text
+ + + ); + + expect(screen.getByRole('button')).toHaveAccessibleName('Copyable input Copyable text'); +}); +test('Renders with concatenated aria-label when custom aria-label is passed', () => { render( - - Copy to Clipboard - + <> +
Copyable text
+ + ); + expect(screen.getByRole('button')).toHaveAccessibleName('Custom label Copyable text'); +}); + +test('Passes className to Button', () => { + render(); + + expect(screen.getByRole('button')).toHaveClass('test-class'); +}); + +test('Passes variant to Button by default', () => { + render(); + + expect(screen.getByRole('button')).toHaveClass(buttonStyles.modifiers.control); +}); + +test('Passes variant to Button when variant is passed', () => { + render(); + + expect(screen.getByRole('button')).toHaveClass(buttonStyles.modifiers.plain); +}); + +test('Calls onClick when ClipboardCopyButton is clicked', async () => { + const user = userEvent.setup(); + + render(); + await user.click(screen.getByRole('button')); - expect(onclick).toHaveBeenCalled(); + expect(requiredProps.onClick).toHaveBeenCalledTimes(1); +}); + +test('Does not call onClick when ClipboardCopyButton is not clicked', async () => { + const user = userEvent.setup(); + + render( + <> + + + + ); + + await user.click(screen.getByRole('button', { name: 'Test clicker' })); + expect(requiredProps.onClick).not.toHaveBeenCalled(); +}); + +test('Passes children to Tooltip content', () => { + render(); + + expect(screen.getByText('Button content')).toBeVisible(); +}); + +test('Passes exitDelay to Tooltip', () => { + render(); + + expect(screen.getByText('exitDelay: 200')).toBeVisible(); +}); + +test('Passes entryDelay to Tooltip', () => { + render(); + + expect(screen.getByText('entryDelay: 200')).toBeVisible(); +}); + +test('Passes maxWidth to Tooltip', () => { + render(); + + expect(screen.getByText('maxWidth: 200px')).toBeVisible(); +}); + +test('Passes position to Tooltip', () => { + render(); + + expect(screen.getByText('position: bottom')).toBeVisible(); +}); + +test('Passes onTooltipHidden to Tooltip', async () => { + const user = userEvent.setup(); + const onTooltipHiddenMock = jest.fn(); + + render(); + + await user.click(screen.getByText('onTooltipHidden clicker')); + + expect(onTooltipHiddenMock).toHaveBeenCalled(); }); diff --git a/packages/react-core/src/components/ClipboardCopy/__tests__/ClipboardCopyExpanded.test.tsx b/packages/react-core/src/components/ClipboardCopy/__tests__/ClipboardCopyExpanded.test.tsx index 0a9c8b32174..d91426d6e17 100644 --- a/packages/react-core/src/components/ClipboardCopy/__tests__/ClipboardCopyExpanded.test.tsx +++ b/packages/react-core/src/components/ClipboardCopy/__tests__/ClipboardCopyExpanded.test.tsx @@ -1,23 +1,80 @@ import React from 'react'; -import { render } from '@testing-library/react'; +import { screen, render } from '@testing-library/react'; import { ClipboardCopyExpanded } from '../ClipboardCopyExpanded'; +import styles from '@patternfly/react-styles/css/components/ClipboardCopy/clipboard-copy'; +import userEvent from '@testing-library/user-event'; -const props = { - className: 'class-1', - id: 'id-1' -}; +test(`Renders with classname ${styles.clipboardCopyExpandableContent} by default`, () => { + render(Expanded content); -test('expanded content render', () => { - const { asFragment } = render(This is my text); - expect(asFragment()).toMatchSnapshot(); + expect(screen.getByText('Expanded content')).toHaveClass(styles.clipboardCopyExpandableContent, { exact: true }); +}); + +test(`Renders with custom class when className is passed`, () => { + render(Expanded content); + + expect(screen.getByText('Expanded content')).toHaveClass('test-class'); +}); + +test('Does not render with
 tag by default', () => {
+  render(Expanded content);
+
+  expect(screen.getByText('Expanded content').tagName).not.toBe('PRE');
+});
+
+test('Renders with 
 tag when isCode is true', () => {
+  render(Expanded content);
+
+  expect(screen.getByText('Expanded content').tagName).toBe('PRE');
+});
+
+test('Renders with contenteditable attribute of true by default', () => {
+  render(Expanded content);
+
+  expect(screen.getByText('Expanded content')).toHaveAttribute('contenteditable', 'true');
+});
+
+test('Renders with contenteditable attribute of false when isReadOnly is passed', () => {
+  render(Expanded content);
+
+  expect(screen.getByText('Expanded content')).toHaveAttribute('contenteditable', 'false');
+});
+
+test('Calls onChange when expanded content is typed in', async () => {
+  const user = userEvent.setup();
+  const onChangeMock = jest.fn();
+
+  render(Expanded content);
+
+  await user.type(screen.getByText('Expanded content'), 's');
+
+  expect(onChangeMock).toHaveBeenCalledTimes(1);
 });
 
-test('expanded code content render', () => {
-  const { asFragment } = render(
-    {`{
-    "name": "@patternfly/react-core",
-    "version": "1.33.2"
-  }`}
+test('Does not call onChange when expanded content is not typed in', async () => {
+  const user = userEvent.setup();
+  const onChangeMock = jest.fn();
+
+  render(
+    <>
+      Expanded content
+      
+    
   );
+
+  await user.type(screen.getByRole('textbox'), 'A');
+
+  expect(onChangeMock).not.toHaveBeenCalled();
+});
+
+test('Spreads additional props to container', () => {
+  render(Expanded content);
+
+  expect(screen.getByText('Expanded content')).toHaveAttribute('data-prop', 'test');
+});
+
+test('Matches snapshot', () => {
+  const { asFragment } = render(Expanded content);
+
   expect(asFragment()).toMatchSnapshot();
 });
diff --git a/packages/react-core/src/components/ClipboardCopy/__tests__/ClipboardCopyToggle.test.tsx b/packages/react-core/src/components/ClipboardCopy/__tests__/ClipboardCopyToggle.test.tsx
index b3885e985ab..bb6a297c470 100644
--- a/packages/react-core/src/components/ClipboardCopy/__tests__/ClipboardCopyToggle.test.tsx
+++ b/packages/react-core/src/components/ClipboardCopy/__tests__/ClipboardCopyToggle.test.tsx
@@ -1,48 +1,92 @@
 import React from 'react';
-
-import { render, screen } from '@testing-library/react';
+import { screen, render } from '@testing-library/react';
+import { ClipboardCopyToggle } from '../ClipboardCopyToggle';
+import styles from '@patternfly/react-styles/css/components/ClipboardCopy/clipboard-copy';
 import userEvent from '@testing-library/user-event';
 
-import { ClipboardCopyToggle, ClipboardCopyToggleProps } from '../ClipboardCopyToggle';
-
-const props: ClipboardCopyToggleProps = {
-  id: 'my-id',
-  textId: 'my-text-id',
-  contentId: 'my-content-id',
-  isExpanded: false,
-  className: 'myclassName',
-  onClick: jest.fn()
+const onClickMock = jest.fn();
+const requiredProps = {
+  id: 'main-id',
+  textId: 'text-id',
+  contentId: 'content-id',
+  onClick: onClickMock
 };
 
-describe('ClipboardCopyToggle', () => {
-  test('toggle button render', () => {
-    const desc = 'toggle content';
-    const { asFragment } = render();
+// Must be kept as first test to avoid Button's ouiaId updating in snapshots
+test('Matches snapshot', () => {
+  const { asFragment } = render();
+
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Renders without children', () => {
+  render(
+    
+ +
+ ); + + expect(screen.getByTestId('container').firstChild).toBeVisible(); +}); + +test('Renders with id prop', () => { + render(); + + expect(screen.getByRole('button')).toHaveAttribute('id', requiredProps.id); +}); + +test('Renders with aria-labelledby concatenated from id and textId props', () => { + render( + <> + + Test content + + ); - expect(asFragment()).toMatchSnapshot(); - }); + expect(screen.getByRole('button')).toHaveAccessibleName('Toggle content Test content'); +}); + +test('Renders with aria-controls with passed in contentId prop', () => { + render(); + + expect(screen.getByRole('button')).toHaveAttribute('aria-controls', requiredProps.contentId); +}); - test('toggle button onClick', async () => { - const onclick = jest.fn(); - const user = userEvent.setup(); +test('Renders with aria-expanded of false by default', () => { + render(); - render(); + expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'false'); +}); - await user.click(screen.getByRole('button')); - expect(onclick).toHaveBeenCalled(); - }); +test('Renders with aria-expanded based on isExpanded prop', () => { + render(); - test('has aria-expanded set to true when isExpanded is true', () => { - render(); + expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'true'); +}); - const toggleButton = screen.getByRole('button'); - expect(toggleButton).toHaveAttribute('aria-expanded', 'true'); - }); +test('Calls onClick when clipboard toggle is clicked', async () => { + const user = userEvent.setup(); + render(); + + await user.click(screen.getByRole('button')); + expect(onClickMock).toHaveBeenCalledTimes(1); +}); + +test('Does not call onClick when clipboard toggle is not clicked', async () => { + const user = userEvent.setup(); + render( + <> + + + + ); + + await user.click(screen.getByRole('button', { name: 'Test clicker' })); + expect(onClickMock).not.toHaveBeenCalled(); +}); - test('has aria-expanded set to false when isExpanded is false', () => { - render(); +test('Spreads additional props to container', () => { + render(); - const toggleButton = screen.getByRole('button'); - expect(toggleButton).toHaveAttribute('aria-expanded', 'false'); - }); + expect(screen.getByRole('button')).toHaveAttribute('data-prop', 'test'); }); diff --git a/packages/react-core/src/components/ClipboardCopy/__tests__/Generated/ClipboardCopy.test.tsx b/packages/react-core/src/components/ClipboardCopy/__tests__/Generated/ClipboardCopy.test.tsx deleted file mode 100644 index 612abfd0e14..00000000000 --- a/packages/react-core/src/components/ClipboardCopy/__tests__/Generated/ClipboardCopy.test.tsx +++ /dev/null @@ -1,40 +0,0 @@ -/** - * This test was generated - */ -import * as React from 'react'; -import { render } from '@testing-library/react'; -import { ClipboardCopy } from '../../ClipboardCopy'; -// any missing imports can usually be resolved by adding them here -import {} from '../..'; - -it('ClipboardCopy should match snapshot (auto-generated)', () => { - const { asFragment } = render( - , text?: React.ReactNode) => { - const clipboard = event.currentTarget.parentElement; - const el = document.createElement('input'); - el.value = text.toString(); - clipboard.appendChild(el); - el.select(); - document.execCommand('copy'); - clipboard.removeChild(el); - }} - onChange={(): any => undefined} - children={
ReactNode
} - /> - ); - expect(asFragment()).toMatchSnapshot(); -}); diff --git a/packages/react-core/src/components/ClipboardCopy/__tests__/Generated/__snapshots__/ClipboardCopy.test.tsx.snap b/packages/react-core/src/components/ClipboardCopy/__tests__/Generated/__snapshots__/ClipboardCopy.test.tsx.snap deleted file mode 100644 index 9b881779f24..00000000000 --- a/packages/react-core/src/components/ClipboardCopy/__tests__/Generated/__snapshots__/ClipboardCopy.test.tsx.snap +++ /dev/null @@ -1,55 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ClipboardCopy should match snapshot (auto-generated) 1`] = ` - -
-
- - - - -
-
-
-`; diff --git a/packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopy.test.tsx.snap b/packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopy.test.tsx.snap new file mode 100644 index 00000000000..832f82d2ba4 --- /dev/null +++ b/packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopy.test.tsx.snap @@ -0,0 +1,57 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Matches snapshot 1`] = ` + +
+
+ + + +
+

+ exitDelay: 1500 +

+

+ entryDelay: 300 +

+

+ maxWidth: 150px +

+

+ position: top +

+

+ button-ariaLabel: Copy to clipboard +

+
+ children: Copy to clipboard +
+ +
+
+
+
+`; diff --git a/packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyAction.test.tsx.snap b/packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyAction.test.tsx.snap new file mode 100644 index 00000000000..0b7ff942012 --- /dev/null +++ b/packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyAction.test.tsx.snap @@ -0,0 +1,11 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Matches snapshot 1`] = ` + + + Action text + + +`; diff --git a/packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyButton.test.tsx.snap b/packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyButton.test.tsx.snap index 8ba62b22f84..0ca5758ef2c 100644 --- a/packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyButton.test.tsx.snap +++ b/packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyButton.test.tsx.snap @@ -1,31 +1,57 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`copy button render 1`] = ` +exports[`Matches snapshot 1`] = ` - +
+ Button content +
+ +

+ exitDelay: 0 +

+

+ entryDelay: 300 +

+

+ maxWidth: 100px +

+

+ position: top +

+ + onTooltipHidden clicker + + +
`; diff --git a/packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyExpanded.test.tsx.snap b/packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyExpanded.test.tsx.snap index 01bc2ca3bce..3204f2ba149 100644 --- a/packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyExpanded.test.tsx.snap +++ b/packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyExpanded.test.tsx.snap @@ -1,32 +1,12 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`expanded code content render 1`] = ` +exports[`Matches snapshot 1`] = `
-
-      {
-    "name": "@patternfly/react-core",
-    "version": "1.33.2"
-  }
-    
-
-
-`; - -exports[`expanded content render 1`] = ` - -
- This is my text + Expanded content
`; diff --git a/packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyToggle.test.tsx.snap b/packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyToggle.test.tsx.snap index ea395c521de..cd43bec9fc7 100644 --- a/packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyToggle.test.tsx.snap +++ b/packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyToggle.test.tsx.snap @@ -1,18 +1,17 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`ClipboardCopyToggle toggle button render 1`] = ` +exports[`Matches snapshot 1`] = `