@patternfly/react-core 6.0.0-alpha.1 → 6.0.0-alpha.2

package/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 }) => (
+    <div data-testid="clipboardCopyButton-mock">
+      <p>{`exitDelay: ${exitDelay}`}</p>
+      <p>{`entryDelay: ${entryDelay}`}</p>
+      <p>{`maxWidth: ${maxWidth}`}</p>
+      <p>{`position: ${position}`}</p>
+      <p>{`button-ariaLabel: ${ariaLabel}`}</p>
+      <div>{`children: ${children}`}</div>
+      <button onClick={onClick}>Test CCB clicker</button>
+    </div>
+  )
+}));
+
+jest.mock('../ClipboardCopyToggle', () => ({
+  ClipboardCopyToggle: ({ 'aria-label': ariaLabel }) => (
+    <div data-testid="clipboardCopyToggle-mock">
+      <p>{`toggle-ariaLabel: ${ariaLabel}`}</p>
+    </div>
+  )
+}));
+
+const children = 'Copyable text';
+const testId = 'clipboard-copy';
+
+test(`Renders with class ${styles.clipboardCopy} by default`, () => {
+  render(<ClipboardCopy data-testid={testId}>{children}</ClipboardCopy>);
+
+  expect(screen.getByTestId(testId)).toHaveClass(styles.clipboardCopy, { exact: true });
+});
+
+test(`Renders with custom class when className is passed`, () => {
+  render(
+    <ClipboardCopy className="test-class" data-testid={testId}>
+      {children}
+    </ClipboardCopy>
+  );
+
+  expect(screen.getByTestId(testId)).toHaveClass('test-class');
+});
+
+test(`Does not render with class ${styles.modifiers.inline} by default`, () => {
+  render(<ClipboardCopy data-testid={testId}>{children}</ClipboardCopy>);
+
+  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(
+    <ClipboardCopy variant="expansion" data-testid={testId}>
+      {children}
+    </ClipboardCopy>
+  );
+
+  expect(screen.getByTestId(testId)).not.toHaveClass(styles.modifiers.inline);
+});
+
+test(`Renders with class ${styles.modifiers.inline} when variant is inline-compact`, () => {
+  render(
+    <ClipboardCopy variant="inline-compact" data-testid={testId}>
+      {children}
+    </ClipboardCopy>
+  );
+
+  expect(screen.getByTestId(testId)).toHaveClass(styles.modifiers.inline);
+});
+
+test(`Does not render with class ${styles.modifiers.expanded} by default`, () => {
+  render(<ClipboardCopy data-testid={testId}>{children}</ClipboardCopy>);
+
+  expect(screen.getByTestId(testId)).not.toHaveClass(styles.modifiers.expanded);
+});
+
+test(`Renders with class ${styles.modifiers.expanded} when isExpanded is passed`, () => {
+  render(
+    <ClipboardCopy isExpanded data-testid={testId}>
+      {children}
+    </ClipboardCopy>
+  );
+
+  expect(screen.getByTestId(testId)).toHaveClass(styles.modifiers.expanded);
+});
+
+test(`Does not render with class ${styles.modifiers.block} by default`, () => {
+  render(<ClipboardCopy data-testid={testId}>{children}</ClipboardCopy>);
+
+  expect(screen.getByTestId(testId)).not.toHaveClass(styles.modifiers.block);
+});
+
+test(`Renders with class ${styles.modifiers.block} when isBlock is passed`, () => {
+  render(
+    <ClipboardCopy isBlock data-testid={testId}>
+      {children}
+    </ClipboardCopy>
+  );
+
+  expect(screen.getByTestId(testId)).toHaveClass(styles.modifiers.block);
+});
+
+test('Spreads additional props to container div', () => {
+  render(
+    <ClipboardCopy data-testid={testId} role="group">
+      {children}
+    </ClipboardCopy>
+  );
+
+  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(
+    <ClipboardCopy variant="inline-compact" data-testid={testId}>
+      {children}
+    </ClipboardCopy>
+  );
+
+  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(
+    <ClipboardCopy isCode variant="inline-compact" data-testid={testId}>
+      {children}
+    </ClipboardCopy>
+  );
+
+  expect(screen.getByText(children)).toHaveClass(styles.modifiers.code);
+});
+
+test('Does not render content passed to additionalActions by default', () => {
+  render(<ClipboardCopy additionalActions="Additional action">{children}</ClipboardCopy>);
+
+  expect(screen.queryByText('Additional action')).toBeNull();
+});
+
+test('Does not render content passed to additionalActions when variant is not inline-compact', () => {
+  render(
+    <ClipboardCopy variant="expansion" additionalActions="Additional action">
+      {children}
+    </ClipboardCopy>
+  );
+
+  expect(screen.queryByText('Additional action')).toBeNull();
+});
+
+test('Renders content passed to additionalActions when variant is inline-compact', () => {
+  render(
+    <ClipboardCopy variant="inline-compact" additionalActions="Additional action">
+      {children}
+    </ClipboardCopy>
+  );
+
+  expect(screen.getByText('Additional action')).toBeVisible();
+});
+
+test('Passes hoverTip to ClipboardCopyButton by default', () => {
+  render(<ClipboardCopy hoverTip="hover tip">{children}</ClipboardCopy>);
+
+  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(
+    <ClipboardCopy variant="inline-compact" hoverTip="hover tip">
+      {children}
+    </ClipboardCopy>
+  );
+
+  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(<ClipboardCopy clickTip="click tip">{children}</ClipboardCopy>);
+
+  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(<ClipboardCopy entryDelay={100}>{children}</ClipboardCopy>);
+
+  expect(screen.getByText('entryDelay: 100')).toBeVisible();
+});
+
+test('Passes entryDelay to ClipboardCopyButton when variant is inline-compact', () => {
+  render(
+    <ClipboardCopy variant="inline-compact" entryDelay={100}>
+      {children}
+    </ClipboardCopy>
+  );
+
+  expect(screen.getByText('entryDelay: 100')).toBeVisible();
+});
+
+test('Passes exitDelay to ClipboardCopyButton by default', () => {
+  render(<ClipboardCopy exitDelay={100}>{children}</ClipboardCopy>);
+
+  expect(screen.getByText('exitDelay: 100')).toBeVisible();
+});
+
+test('Passes exitDelay to ClipboardCopyButton when variant is inline-compact', () => {
+  render(
+    <ClipboardCopy variant="inline-compact" exitDelay={100}>
+      {children}
+    </ClipboardCopy>
+  );
+
+  expect(screen.getByText('exitDelay: 100')).toBeVisible();
+});
+
+test('Passes maxWidth to ClipboardCopyButton by default', () => {
+  render(<ClipboardCopy maxWidth="100">{children}</ClipboardCopy>);
+
+  expect(screen.getByText('maxWidth: 100')).toBeVisible();
+});
+
+test('Passes maxWidth to ClipboardCopyButton when variant is inline-compact', () => {
+  render(
+    <ClipboardCopy variant="inline-compact" maxWidth="100">
+      {children}
+    </ClipboardCopy>
+  );
+
+  expect(screen.getByText('maxWidth: 100')).toBeVisible();
+});
+
+test('Passes position to ClipboardCopyButton by default', () => {
+  render(<ClipboardCopy position="bottom">{children}</ClipboardCopy>);
+
+  expect(screen.getByText('position: bottom')).toBeVisible();
+});
+
+test('Passes position to ClipboardCopyButton when variant is inline-compact', () => {
+  render(
+    <ClipboardCopy variant="inline-compact" position="bottom">
+      {children}
+    </ClipboardCopy>
+  );
+
+  expect(screen.getByText('position: bottom')).toBeVisible();
+});
+
+test('Passes toggleAriaLabel to ClipboardCopyToggle when variant is expansion', () => {
+  render(
+    <ClipboardCopy variant="expansion" toggleAriaLabel="toggle label">
+      {children}
+    </ClipboardCopy>
+  );
+
+  expect(screen.getByText('toggle-ariaLabel: toggle label')).toBeVisible();
+});
+
+test('Does not set textinput to readonly when isReadOnly is not passed', () => {
+  render(<ClipboardCopy>{children}</ClipboardCopy>);
+
+  expect(screen.getByRole('textbox')).not.toHaveAttribute('readonly');
+});
+
+test('Passes isReadOnly to TextInput', () => {
+  render(<ClipboardCopy isReadOnly>{children}</ClipboardCopy>);
+
+  expect(screen.getByRole('textbox')).toHaveAttribute('readonly');
+});
+
+test('Passes textAriaLabel to TextInput', () => {
+  render(<ClipboardCopy textAriaLabel="text label">{children}</ClipboardCopy>);
+
+  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(<ClipboardCopy onChange={onChangeMock}>{children}</ClipboardCopy>);
+
+  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(
+    <>
+      <ClipboardCopy onChange={onChangeMock}>{children}</ClipboardCopy>
+      <input aria-label="native input" />
+    </>
+  );
+
+  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(<ClipboardCopy onCopy={onCopyMock}>{children}</ClipboardCopy>);
+
+  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(
+    <>
+      <ClipboardCopy onCopy={onCopyMock}>{children}</ClipboardCopy>
+      <button>Test native clicker</button>
+    </>
+  );
+
+  await user.click(screen.getByRole('button', { name: 'Test native clicker' }));
+
+  expect(onCopyMock).not.toHaveBeenCalled();
+});
+
+test('Matches snapshot', () => {
+  const { asFragment } = render(
+    <ClipboardCopy id="snapshot" ouiaId="snapshot">
+      {children}
+    </ClipboardCopy>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});

package/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(
+    <div data-testid="container">
+      <ClipboardCopyAction />
+    </div>
+  );
+
+  expect(screen.getByTestId('container').firstChild).toBeVisible();
+});
+
+test(`Renders with class ${styles.clipboardCopyActionsItem} by default`, () => {
+  render(<ClipboardCopyAction>Action text</ClipboardCopyAction>);
+
+  expect(screen.getByText('Action text')).toHaveClass(styles.clipboardCopyActionsItem, { exact: true });
+});
+
+test(`Renders with custom class when className is passed`, () => {
+  render(<ClipboardCopyAction className="custom-class">Action text</ClipboardCopyAction>);
+
+  expect(screen.getByText('Action text')).toHaveClass('custom-class');
+});
+
+test(`Spreads additional props`, () => {
+  render(<ClipboardCopyAction id="test-id">Action text</ClipboardCopyAction>);
+
+  expect(screen.getByText('Action text')).toHaveAttribute('id', 'test-id');
+});
+
+test('Matches snapshot', () => {
+  const { asFragment } = render(<ClipboardCopyAction>Action text</ClipboardCopyAction>);
+  expect(asFragment()).toMatchSnapshot();
+});

package/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 }) => (
+    <div data-testid="tooltip-mock">
+      <div data-testid="tooltip-mock-content">{content}</div>
+      <p>{`exitDelay: ${exitDelay}`}</p>
+      <p>{`entryDelay: ${entryDelay}`}</p>
+      <p>{`maxWidth: ${maxWidth}`}</p>
+      <p>{`position: ${position}`}</p>
+      <a onClick={onTooltipHidden}>onTooltipHidden clicker</a>
+      {children}
+    </div>
+  )
+}));
 
-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(<ClipboardCopyButton {...props}>Copy Me</ClipboardCopyButton>);
+// Must be kept as first test to avoid Button's ouiaId updating in snapshots
+test('Matches snapshot', () => {
+  const { asFragment } = render(<ClipboardCopyButton {...requiredProps} />);
   expect(asFragment()).toMatchSnapshot();
 });
 
-test('copy button onClick', async () => {
-  const onclick = jest.fn();
-  const user = userEvent.setup();
+test('Renders with passed id prop', () => {
+  render(<ClipboardCopyButton {...requiredProps} />);
+
+  expect(screen.getByRole('button')).toHaveAttribute('id', 'button-id');
+});
+
+test('Renders with aria-labelledby with passed id and textId prop values', () => {
+  render(
+    <>
+      <div id="text-id">Copyable text</div>
+      <ClipboardCopyButton {...requiredProps} />
+    </>
+  );
+
+  expect(screen.getByRole('button')).toHaveAccessibleName('Copyable input Copyable text');
+});
+
+test('Renders with concatenated aria-label by default', () => {
+  render(
+    <>
+      <div id="text-id">Copyable text</div>
+      <ClipboardCopyButton {...requiredProps} />
+    </>
+  );
+
+  expect(screen.getByRole('button')).toHaveAccessibleName('Copyable input Copyable text');
+});
 
+test('Renders with concatenated aria-label when custom aria-label is passed', () => {
   render(
-    <ClipboardCopyButton {...props} onClick={onclick}>
-      Copy to Clipboard
-    </ClipboardCopyButton>
+    <>
+      <div id="text-id">Copyable text</div>
+      <ClipboardCopyButton aria-label="Custom label" {...requiredProps} />
+    </>
   );
 
+  expect(screen.getByRole('button')).toHaveAccessibleName('Custom label Copyable text');
+});
+
+test('Passes className to Button', () => {
+  render(<ClipboardCopyButton className="test-class" {...requiredProps} />);
+
+  expect(screen.getByRole('button')).toHaveClass('test-class');
+});
+
+test('Passes variant to Button by default', () => {
+  render(<ClipboardCopyButton {...requiredProps} />);
+
+  expect(screen.getByRole('button')).toHaveClass(buttonStyles.modifiers.control);
+});
+
+test('Passes variant to Button when variant is passed', () => {
+  render(<ClipboardCopyButton variant="plain" {...requiredProps} />);
+
+  expect(screen.getByRole('button')).toHaveClass(buttonStyles.modifiers.plain);
+});
+
+test('Calls onClick when ClipboardCopyButton is clicked', async () => {
+  const user = userEvent.setup();
+
+  render(<ClipboardCopyButton {...requiredProps} />);
+
   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(
+    <>
+      <ClipboardCopyButton {...requiredProps} />
+      <button>Test clicker</button>
+    </>
+  );
+
+  await user.click(screen.getByRole('button', { name: 'Test clicker' }));
+  expect(requiredProps.onClick).not.toHaveBeenCalled();
+});
+
+test('Passes children to Tooltip content', () => {
+  render(<ClipboardCopyButton {...requiredProps} />);
+
+  expect(screen.getByText('Button content')).toBeVisible();
+});
+
+test('Passes exitDelay to Tooltip', () => {
+  render(<ClipboardCopyButton exitDelay={200} {...requiredProps} />);
+
+  expect(screen.getByText('exitDelay: 200')).toBeVisible();
+});
+
+test('Passes entryDelay to Tooltip', () => {
+  render(<ClipboardCopyButton entryDelay={200} {...requiredProps} />);
+
+  expect(screen.getByText('entryDelay: 200')).toBeVisible();
+});
+
+test('Passes maxWidth to Tooltip', () => {
+  render(<ClipboardCopyButton maxWidth="200px" {...requiredProps} />);
+
+  expect(screen.getByText('maxWidth: 200px')).toBeVisible();
+});
+
+test('Passes position to Tooltip', () => {
+  render(<ClipboardCopyButton position="bottom" {...requiredProps} />);
+
+  expect(screen.getByText('position: bottom')).toBeVisible();
+});
+
+test('Passes onTooltipHidden to Tooltip', async () => {
+  const user = userEvent.setup();
+  const onTooltipHiddenMock = jest.fn();
+
+  render(<ClipboardCopyButton onTooltipHidden={onTooltipHiddenMock} {...requiredProps} />);
+
+  await user.click(screen.getByText('onTooltipHidden clicker'));
+
+  expect(onTooltipHiddenMock).toHaveBeenCalled();
 });

package/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(<ClipboardCopyExpanded>Expanded content</ClipboardCopyExpanded>);
 
-test('expanded content render', () => {
-  const { asFragment } = render(<ClipboardCopyExpanded {...props}>This is my text</ClipboardCopyExpanded>);
-  expect(asFragment()).toMatchSnapshot();
+  expect(screen.getByText('Expanded content')).toHaveClass(styles.clipboardCopyExpandableContent, { exact: true });
+});
+
+test(`Renders with custom class when className is passed`, () => {
+  render(<ClipboardCopyExpanded className="test-class">Expanded content</ClipboardCopyExpanded>);
+
+  expect(screen.getByText('Expanded content')).toHaveClass('test-class');
+});
+
+test('Does not render with <pre> tag by default', () => {
+  render(<ClipboardCopyExpanded>Expanded content</ClipboardCopyExpanded>);
+
+  expect(screen.getByText('Expanded content').tagName).not.toBe('PRE');
+});
+
+test('Renders with <pre> tag when isCode is true', () => {
+  render(<ClipboardCopyExpanded isCode>Expanded content</ClipboardCopyExpanded>);
+
+  expect(screen.getByText('Expanded content').tagName).toBe('PRE');
+});
+
+test('Renders with contenteditable attribute of true by default', () => {
+  render(<ClipboardCopyExpanded>Expanded content</ClipboardCopyExpanded>);
+
+  expect(screen.getByText('Expanded content')).toHaveAttribute('contenteditable', 'true');
+});
+
+test('Renders with contenteditable attribute of false when isReadOnly is passed', () => {
+  render(<ClipboardCopyExpanded isReadOnly>Expanded content</ClipboardCopyExpanded>);
+
+  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(<ClipboardCopyExpanded onChange={onChangeMock}>Expanded content</ClipboardCopyExpanded>);
+
+  await user.type(screen.getByText('Expanded content'), 's');
+
+  expect(onChangeMock).toHaveBeenCalledTimes(1);
 });
 
-test('expanded code content render', () => {
-  const { asFragment } = render(
-    <ClipboardCopyExpanded isCode {...props}>{`{
-    "name": "@patternfly/react-core",
-    "version": "1.33.2"
-  }`}</ClipboardCopyExpanded>
+test('Does not call onChange when expanded content is not typed in', async () => {
+  const user = userEvent.setup();
+  const onChangeMock = jest.fn();
+
+  render(
+    <>
+      <ClipboardCopyExpanded onChange={onChangeMock}>Expanded content</ClipboardCopyExpanded>
+      <input />
+    </>
   );
+
+  await user.type(screen.getByRole('textbox'), 'A');
+
+  expect(onChangeMock).not.toHaveBeenCalled();
+});
+
+test('Spreads additional props to container', () => {
+  render(<ClipboardCopyExpanded data-prop="test">Expanded content</ClipboardCopyExpanded>);
+
+  expect(screen.getByText('Expanded content')).toHaveAttribute('data-prop', 'test');
+});
+
+test('Matches snapshot', () => {
+  const { asFragment } = render(<ClipboardCopyExpanded>Expanded content</ClipboardCopyExpanded>);
+
   expect(asFragment()).toMatchSnapshot();
 });