@patternfly/react-core 5.2.0-prerelease.18 → 5.2.0-prerelease.19

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();
 });

package/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(<ClipboardCopyToggle {...props} aria-label={desc} />);
+// Must be kept as first test to avoid Button's ouiaId updating in snapshots
+test('Matches snapshot', () => {
+  const { asFragment } = render(<ClipboardCopyToggle {...requiredProps} />);
+
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Renders without children', () => {
+  render(
+    <div data-testid="container">
+      <ClipboardCopyToggle {...requiredProps} />
+    </div>
+  );
+
+  expect(screen.getByTestId('container').firstChild).toBeVisible();
+});
+
+test('Renders with id prop', () => {
+  render(<ClipboardCopyToggle {...requiredProps} />);
+
+  expect(screen.getByRole('button')).toHaveAttribute('id', requiredProps.id);
+});
+
+test('Renders with aria-labelledby concatenated from id and textId props', () => {
+  render(
+    <>
+      <ClipboardCopyToggle aria-label="Toggle content" {...requiredProps} />
+      <span id={requiredProps.textId}>Test content</span>
+    </>
+  );
 
-    expect(asFragment()).toMatchSnapshot();
-  });
+  expect(screen.getByRole('button')).toHaveAccessibleName('Toggle content Test content');
+});
+
+test('Renders with aria-controls with passed in contentId prop', () => {
+  render(<ClipboardCopyToggle {...requiredProps} />);
+
+  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(<ClipboardCopyToggle {...requiredProps} />);
 
-    render(<ClipboardCopyToggle {...props} onClick={onclick} />);
+  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(<ClipboardCopyToggle isExpanded={true} {...requiredProps} />);
 
-  test('has aria-expanded set to true when isExpanded is true', () => {
-    render(<ClipboardCopyToggle {...props} isExpanded />);
+  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(<ClipboardCopyToggle {...requiredProps} />);
+
+  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(
+    <>
+      <ClipboardCopyToggle {...requiredProps} />
+      <button>Test clicker</button>
+    </>
+  );
+
+  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(<ClipboardCopyToggle {...props} />);
+test('Spreads additional props to container', () => {
+  render(<ClipboardCopyToggle data-prop="test" {...requiredProps} />);
 
-    const toggleButton = screen.getByRole('button');
-    expect(toggleButton).toHaveAttribute('aria-expanded', 'false');
-  });
+  expect(screen.getByRole('button')).toHaveAttribute('data-prop', 'test');
 });

package/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopy.test.tsx.snap

@@ -0,0 +1,57 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v5-c-clipboard-copy"
+    data-ouia-component-id="snapshot"
+    data-ouia-component-type="PF5/ClipboardCopy"
+    data-ouia-safe="true"
+    id="snapshot"
+  >
+    <div
+      class="pf-v5-c-clipboard-copy__group"
+    >
+      <span
+        class="pf-v5-c-form-control"
+      >
+        <input
+          aria-invalid="false"
+          aria-label="Copyable input"
+          data-ouia-component-id="OUIA-Generated-TextInputBase-26"
+          data-ouia-component-type="PF5/TextInput"
+          data-ouia-safe="true"
+          id="text-input-34"
+          type="text"
+          value="Copyable text"
+        />
+      </span>
+      <div
+        data-testid="clipboardCopyButton-mock"
+      >
+        <p>
+          exitDelay: 1500
+        </p>
+        <p>
+          entryDelay: 300
+        </p>
+        <p>
+          maxWidth: 150px
+        </p>
+        <p>
+          position: top
+        </p>
+        <p>
+          button-ariaLabel: Copy to clipboard
+        </p>
+        <div>
+          children: Copy to clipboard
+        </div>
+        <button>
+          Test CCB clicker
+        </button>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyAction.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches snapshot 1`] = `
+<DocumentFragment>
+  <span
+    class="pf-v5-c-clipboard-copy__actions-item"
+  >
+    Action text
+  </span>
+</DocumentFragment>
+`;

package/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`] = `
 <DocumentFragment>
-  <button
-    aria-disabled="false"
-    aria-label="click this button to copy text"
-    aria-labelledby="my-id my-text-id"
-    class="pf-v5-c-button pf-m-control fancy-copy-button"
-    data-ouia-component-id="OUIA-Generated-Button-control-1"
-    data-ouia-component-type="PF5/Button"
-    data-ouia-safe="true"
-    id="my-id"
-    type="button"
+  <div
+    data-testid="tooltip-mock"
   >
-    <svg
-      aria-hidden="true"
-      class="pf-v5-svg"
-      fill="currentColor"
-      height="1em"
-      role="img"
-      viewBox="0 0 448 512"
-      width="1em"
+    <div
+      data-testid="tooltip-mock-content"
     >
-      <path
-        d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
-      />
-    </svg>
-  </button>
+      <div>
+        Button content
+      </div>
+    </div>
+    <p>
+      exitDelay: 0
+    </p>
+    <p>
+      entryDelay: 300
+    </p>
+    <p>
+      maxWidth: 100px
+    </p>
+    <p>
+      position: top
+    </p>
+    <a>
+      onTooltipHidden clicker
+    </a>
+    <button
+      aria-disabled="false"
+      aria-label="Copyable input"
+      aria-labelledby="button-id text-id"
+      class="pf-v5-c-button pf-m-control"
+      data-ouia-component-id="OUIA-Generated-Button-control-1"
+      data-ouia-component-type="PF5/Button"
+      data-ouia-safe="true"
+      id="button-id"
+      type="button"
+    >
+      <svg
+        aria-hidden="true"
+        class="pf-v5-svg"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        viewBox="0 0 448 512"
+        width="1em"
+      >
+        <path
+          d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
+        />
+      </svg>
+    </button>
+  </div>
 </DocumentFragment>
 `;

package/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`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-clipboard-copy__expandable-content class-1"
+    class="pf-v5-c-clipboard-copy__expandable-content"
     contenteditable="true"
-    id="id-1"
   >
-    <pre
-      dir="ltr"
-    >
-      {
-    "name": "@patternfly/react-core",
-    "version": "1.33.2"
-  }
-    </pre>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`expanded content render 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-clipboard-copy__expandable-content class-1"
-    contenteditable="true"
-    id="id-1"
-  >
-    This is my text
+    Expanded content
   </div>
 </DocumentFragment>
 `;

package/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`] = `
 <DocumentFragment>
   <button
-    aria-controls="my-id my-content-id"
+    aria-controls="content-id"
     aria-disabled="false"
     aria-expanded="false"
-    aria-label="toggle content"
-    aria-labelledby="my-id my-text-id"
-    class="pf-v5-c-button pf-m-control myclassName"
+    aria-labelledby="main-id text-id"
+    class="pf-v5-c-button pf-m-control"
     data-ouia-component-id="OUIA-Generated-Button-control-1"
     data-ouia-component-type="PF5/Button"
     data-ouia-safe="true"
-    id="my-id"
+    id="main-id"
     type="button"
   >
     <div

package/src/components/ClipboardCopy/__tests__/Generated/ClipboardCopy.test.tsx

@@ -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(
-    <ClipboardCopy
-      className={'string'}
-      hoverTip={"'Copy to clipboard'"}
-      clickTip={"'Successfully copied to clipboard!'"}
-      textAriaLabel={"'Copyable input'"}
-      toggleAriaLabel={"'Show content'"}
-      isReadOnly={false}
-      isExpanded={false}
-      isCode={false}
-      variant={'inline'}
-      position={'auto'}
-      maxWidth={"'150px'"}
-      exitDelay={1600}
-      entryDelay={100}
-      onCopy={(event: React.ClipboardEvent<HTMLDivElement>, 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={<div>ReactNode</div>}
-    />
-  );
-  expect(asFragment()).toMatchSnapshot();
-});

package/src/components/ClipboardCopy/__tests__/Generated/__snapshots__/ClipboardCopy.test.tsx.snap

@@ -1,55 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ClipboardCopy should match snapshot (auto-generated) 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-clipboard-copy string"
-    data-ouia-component-type="PF5/ClipboardCopy"
-    data-ouia-safe="true"
-  >
-    <div
-      class="pf-v5-c-clipboard-copy__group"
-    >
-      <span
-        class="pf-v5-c-form-control"
-      >
-        <input
-          aria-invalid="false"
-          aria-label="'Copyable input'"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-1"
-          data-ouia-component-type="PF5/TextInput"
-          data-ouia-safe="true"
-          id="text-input-0"
-          type="text"
-          value="[object Object]"
-        />
-      </span>
-      <button
-        aria-disabled="false"
-        aria-label="'Copy to clipboard'"
-        aria-labelledby="copy-button-0 text-input-0"
-        class="pf-v5-c-button pf-m-control"
-        data-ouia-component-id="OUIA-Generated-Button-control-1"
-        data-ouia-component-type="PF5/Button"
-        data-ouia-safe="true"
-        id="copy-button-0"
-        type="button"
-      >
-        <svg
-          aria-hidden="true"
-          class="pf-v5-svg"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          viewBox="0 0 448 512"
-          width="1em"
-        >
-          <path
-            d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
-          />
-        </svg>
-      </button>
-    </div>
-  </div>
-</DocumentFragment>
-`;