@patternfly/react-core 4.224.10 → 4.224.13

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

@@ -1,115 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Accordion Accordion bordered 1`] = `
-<DocumentFragment>
-  <dl
-    aria-label=""
-    class="pf-c-accordion pf-m-bordered"
-  >
-    <dt>
-      <button
-        aria-expanded="false"
-        class="pf-c-accordion__toggle"
-        id="item-1"
-        type="button"
-      >
-        <span
-          class="pf-c-accordion__toggle-text"
-        >
-          Item One
-        </span>
-        <span
-          class="pf-c-accordion__toggle-icon"
-        >
-          <svg
-            aria-hidden="true"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            style="vertical-align: -0.125em;"
-            viewBox="0 0 256 512"
-            width="1em"
-          >
-            <path
-              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-            />
-          </svg>
-        </span>
-      </button>
-    </dt>
-    <dd
-      aria-label=""
-      class="pf-c-accordion__expanded-content pf-m-expanded"
-      id=""
-    >
-      <div
-        class="pf-c-accordion__expanded-content-body"
-      >
-        Item One Content
-      </div>
-    </dd>
-  </dl>
-</DocumentFragment>
-`;
-
-exports[`Accordion Accordion custom content 1`] = `
-<DocumentFragment>
-  <dl
-    aria-label=""
-    class="pf-c-accordion"
-  >
-    <dt>
-      <button
-        aria-expanded="false"
-        class="pf-c-accordion__toggle"
-        id="item-1"
-        type="button"
-      >
-        <span
-          class="pf-c-accordion__toggle-text"
-        >
-          Item One
-        </span>
-        <span
-          class="pf-c-accordion__toggle-icon"
-        >
-          <svg
-            aria-hidden="true"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            style="vertical-align: -0.125em;"
-            viewBox="0 0 256 512"
-            width="1em"
-          >
-            <path
-              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-            />
-          </svg>
-        </span>
-      </button>
-    </dt>
-    <dd
-      aria-label=""
-      class="pf-c-accordion__expanded-content pf-m-expanded"
-      id=""
-    >
-      <div
-        class="pf-c-accordion__expanded-content-body"
-      >
-        Item one content body 1
-      </div>
-      <div
-        class="pf-c-accordion__expanded-content-body"
-      >
-        Item one Content body 2
-      </div>
-    </dd>
-  </dl>
-</DocumentFragment>
-`;
-
-exports[`Accordion Accordion default 1`] = `
+exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <dl
     aria-label="this is a simple accordion"
@@ -117,107 +8,3 @@ exports[`Accordion Accordion default 1`] = `
   />
 </DocumentFragment>
 `;
-
-exports[`Accordion Accordion display large 1`] = `
-<DocumentFragment>
-  <dl
-    aria-label=""
-    class="pf-c-accordion pf-m-display-lg"
-  >
-    <dt>
-      <button
-        aria-expanded="false"
-        class="pf-c-accordion__toggle"
-        id="item-1"
-        type="button"
-      >
-        <span
-          class="pf-c-accordion__toggle-text"
-        >
-          Item One
-        </span>
-        <span
-          class="pf-c-accordion__toggle-icon"
-        >
-          <svg
-            aria-hidden="true"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            style="vertical-align: -0.125em;"
-            viewBox="0 0 256 512"
-            width="1em"
-          >
-            <path
-              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-            />
-          </svg>
-        </span>
-      </button>
-    </dt>
-    <dd
-      aria-label=""
-      class="pf-c-accordion__expanded-content pf-m-expanded"
-      id=""
-    >
-      <div
-        class="pf-c-accordion__expanded-content-body"
-      >
-        Item One Content
-      </div>
-    </dd>
-  </dl>
-</DocumentFragment>
-`;
-
-exports[`Accordion Accordion with non-default headingLevel 1`] = `
-<DocumentFragment>
-  <div
-    aria-label=""
-    class="pf-c-accordion"
-  >
-    <h2>
-      <button
-        aria-expanded="false"
-        class="pf-c-accordion__toggle"
-        id="item-1"
-        type="button"
-      >
-        <span
-          class="pf-c-accordion__toggle-text"
-        >
-          Item One
-        </span>
-        <span
-          class="pf-c-accordion__toggle-icon"
-        >
-          <svg
-            aria-hidden="true"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            style="vertical-align: -0.125em;"
-            viewBox="0 0 256 512"
-            width="1em"
-          >
-            <path
-              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-            />
-          </svg>
-        </span>
-      </button>
-    </h2>
-    <div
-      aria-label=""
-      class="pf-c-accordion__expanded-content pf-m-expanded"
-      id=""
-    >
-      <div
-        class="pf-c-accordion__expanded-content-body"
-      >
-        Item One Content
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;

package/src/components/Accordion/__tests__/__snapshots__/AccordionContent.test.tsx.snap

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <h3
+    aria-label="this is a simple accordion"
+    class="pf-c-accordion__expanded-content pf-m-expanded"
+    id=""
+  >
+    <div
+      aria-label="Expanded content body mock"
+    >
+      Test
+    </div>
+  </h3>
+</DocumentFragment>
+`;

package/src/components/Accordion/__tests__/__snapshots__/AccordionExpandedContentBody.test.tsx.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-accordion__expanded-content-body"
+  >
+    Test
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Renders without children 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-accordion__expanded-content-body"
+  />
+</DocumentFragment>
+`;

package/src/components/Accordion/__tests__/__snapshots__/AccordionItem.test.tsx.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  Test
+</DocumentFragment>
+`;

package/src/components/Accordion/__tests__/__snapshots__/AccordionToggle.test.tsx.snap

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <h3>
+    <button
+      aria-expanded="false"
+      class="pf-c-accordion__toggle"
+      id="accordion-toggle"
+      type="button"
+    >
+      <span
+        class="pf-c-accordion__toggle-text"
+      >
+        Test
+      </span>
+      <span
+        class="pf-c-accordion__toggle-icon"
+      >
+        Icon mock
+      </span>
+    </button>
+  </h3>
+</DocumentFragment>
+`;

package/src/components/ActionList/__tests__/ActionList.test.tsx

@@ -1,14 +1,49 @@
-import * as React from 'react';
-import { render } from '@testing-library/react';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
 import { ActionList } from '../ActionList';
 
-describe('action list', () => {
-  test('renders successfully', () => {
-    const { asFragment } = render(<ActionList>test</ActionList>);
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('isIconList flag adds modifier', () => {
-    const { asFragment } = render(<ActionList isIconList>test</ActionList>);
-    expect(asFragment()).toMatchSnapshot();
-  });
+test('Renders without children', () => {
+  render(<ActionList data-testid="action-list" />);
+  expect(screen.getByTestId('action-list')).toBeVisible();
+});
+
+test('Renders children', () => {
+  render(<ActionList>Test</ActionList>);
+
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test('Renders with class pf-c-action-list', () => {
+  render(<ActionList>Test</ActionList>);
+
+  expect(screen.getByText('Test')).toHaveClass('pf-c-action-list');
+});
+
+test('Renders with custom class names provided via prop', () => {
+  render(<ActionList className="custom-class">Test</ActionList>);
+
+  expect(screen.getByText('Test')).toHaveClass('custom-class');
+});
+
+test('Does not render with class pf-m-icons by default', () => {
+  render(<ActionList>Test</ActionList>);
+
+  expect(screen.getByText('Test')).not.toHaveClass('pf-m-icons');
+});
+
+test('Renders with class pf-m-icons when isIconList is true', () => {
+  render(<ActionList isIconList={true}>Test</ActionList>);
+
+  expect(screen.getByText('Test')).toHaveClass('pf-m-icons');
+});
+
+test('Renders with inherited element props spread to the component', () => {
+  render(<ActionList aria-label="Test label">Test</ActionList>);
+
+  expect(screen.getByText('Test')).toHaveAccessibleName('Test label');
+})
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<ActionList>test</ActionList>);
+  expect(asFragment()).toMatchSnapshot();
 });

package/src/components/ActionList/__tests__/ActionListGroup.test.tsx

@@ -1,10 +1,37 @@
-import * as React from 'react';
-import { render } from '@testing-library/react';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
 import { ActionListGroup } from '../ActionListGroup';
 
-describe('action list group', () => {
-  test('renders successfully', () => {
-    const { asFragment } = render(<ActionListGroup>test</ActionListGroup>);
-    expect(asFragment()).toMatchSnapshot();
-  });
+test('Renders without children', () => {
+  render(<ActionListGroup data-testid="action-list-group" />);
+  expect(screen.getByTestId('action-list-group')).toBeVisible();
+});
+
+test('Renders children', () => {
+  render(<ActionListGroup>Test</ActionListGroup>);
+
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test('Renders with class pf-c-action-list__group', () => {
+  render(<ActionListGroup>Test</ActionListGroup>);
+
+  expect(screen.getByText('Test')).toHaveClass('pf-c-action-list__group');
+});
+
+test('Renders with custom class names provided via prop', () => {
+  render(<ActionListGroup className="custom-class">Test</ActionListGroup>);
+
+  expect(screen.getByText('Test')).toHaveClass('custom-class');
+});
+
+test('Renders with inherited element props spread to the component', () => {
+  render(<ActionListGroup aria-label="Test label">Test</ActionListGroup>);
+
+  expect(screen.getByText('Test')).toHaveAccessibleName('Test label');
+})
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<ActionListGroup>test</ActionListGroup>);
+  expect(asFragment()).toMatchSnapshot();
 });

package/src/components/ActionList/__tests__/ActionListItem.test.tsx

@@ -1,10 +1,37 @@
-import * as React from 'react';
-import { render } from '@testing-library/react';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
 import { ActionListItem } from '../ActionListItem';
 
-describe('action list item', () => {
-  test('renders successfully', () => {
-    const { asFragment } = render(<ActionListItem>test</ActionListItem>);
-    expect(asFragment()).toMatchSnapshot();
-  });
+test('Renders without children', () => {
+  render(<ActionListItem data-testid="action-list-item" />);
+  expect(screen.getByTestId('action-list-item')).toBeVisible();
+});
+
+test('Renders children', () => {
+  render(<ActionListItem>Test</ActionListItem>);
+
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test('Renders with class pf-c-action-list__item', () => {
+  render(<ActionListItem>Test</ActionListItem>);
+
+  expect(screen.getByText('Test')).toHaveClass('pf-c-action-list__item');
+});
+
+test('Renders with custom class names provided via prop', () => {
+  render(<ActionListItem className="custom-class">Test</ActionListItem>);
+
+  expect(screen.getByText('Test')).toHaveClass('custom-class');
+});
+
+test('Renders with inherited element props spread to the component', () => {
+  render(<ActionListItem aria-label="Test label">Test</ActionListItem>);
+
+  expect(screen.getByText('Test')).toHaveAccessibleName('Test label');
+})
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<ActionListItem>test</ActionListItem>);
+  expect(asFragment()).toMatchSnapshot();
 });

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

@@ -1,16 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`action list isIconList flag adds modifier 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-c-action-list pf-m-icons"
-  >
-    test
-  </div>
-</DocumentFragment>
-`;
-
-exports[`action list renders successfully 1`] = `
+exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <div
     class="pf-c-action-list"

package/src/components/ActionList/__tests__/__snapshots__/ActionListGroup.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`action list group renders successfully 1`] = `
+exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <div
     class="pf-c-action-list__group"

package/src/components/ActionList/__tests__/__snapshots__/ActionListItem.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`action list item renders successfully 1`] = `
+exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <div
     class="pf-c-action-list__item"

package/src/components/DragDrop/DragDrop.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-interface DraggableItemPosition {
+export interface DraggableItemPosition {
   /** Parent droppableId */
   droppableId: string;
   /** Index of item in parent Droppable */

package/src/components/Hint/__tests__/Hint.test.tsx

@@ -1,17 +1,70 @@
 import * as React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { Hint } from '../Hint';
-import { HintBody } from '../HintBody';
-import { HintTitle } from '../HintTitle';
-import { HintFooter } from '../HintFooter';
 
-test('simple hint', () => {
+test('renders without children', () => {
+  render(<Hint data-testid='Hint' />);
+
+  expect(screen.getByTestId('Hint')).toBeVisible();
+});
+
+test('renders children', () => {
+  render(<Hint>Test</Hint>);
+
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test('renders with class pf-c-hint', () => {
+  render(<Hint>Test</Hint>);
+
+  const hint = screen.getByText('Test');
+
+  expect(hint).toHaveClass('pf-c-hint');
+});
+
+test('renders with custom class names provided via prop', () => {
+  render(<Hint className='custom-classname'>Test</Hint>);
+
+  const hint = screen.getByText('Test');
+
+  expect(hint).toHaveClass('custom-classname');
+});
+
+test('does not render actions options when not passed', () => {
+  render(<Hint>Test</Hint>);
+
+  const actions = screen.queryByText('actions');
+
+  expect(actions).not.toBeInTheDocument();
+});
+
+test('renders actions options', () => {
+  render(<Hint actions="actions">Test</Hint>);
+
+  const actions = screen.getByText("actions");
+
+  expect(actions).toBeVisible();
+});
+
+test('renders with class pf-c-hint__actions if there is an action prop', () => {
+  render(<Hint actions="actions">Test</Hint>);
+
+  const hint = screen.getByText('actions');
+
+  expect(hint).toHaveClass('pf-c-hint__actions');
+});
+
+test('renders with inherited element props spread to the component', () => {
+  render(
+    <Hint aria-label="labelling-id">Test</Hint>
+  );
+
+  expect(screen.getByText('Test')).toHaveAccessibleName('labelling-id');
+});
+
+test('matches hint snapshot', () => {
   const { asFragment } = render(
-    <Hint>
-      <HintTitle>Title</HintTitle>
-      <HintBody>Body</HintBody>
-      <HintFooter>Footer</HintFooter>
-    </Hint>
+    <Hint />
   );
   expect(asFragment()).toMatchSnapshot();
 });

package/src/components/Hint/__tests__/HintBody.test.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import { HintBody } from "../HintBody";
+
+test('renders without children', () => {
+  render(<HintBody data-testid="HintBody"></HintBody>);
+  
+  expect(screen.getByTestId('HintBody')).toBeVisible();
+});
+
+test('renders children', () => {
+  render(<HintBody>{<button>Test Me</button>}</HintBody>);
+
+  expect(screen.getByRole('button', { name: 'Test Me' })).toBeVisible();
+});
+
+test('renders with class pf-c-hint__body', () => {
+  render(<HintBody>Hint Body Test</HintBody>);
+
+  const body = screen.getByText('Hint Body Test');
+
+  expect(body).toHaveClass('pf-c-hint__body');
+});
+
+test('renders with custom class names provided via prop', () => {
+  render(<HintBody className="custom-classname">Hint Body Test</HintBody>);
+
+  const body = screen.getByText('Hint Body Test');
+
+  expect(body).toHaveClass('custom-classname');
+});
+
+test('renders with inherited element props spread to the component', () => {
+  render(
+    <HintBody aria-label="labelling-id">Test</HintBody>
+  );
+
+  expect(screen.getByText('Test')).toHaveAccessibleName('labelling-id');
+});
+
+test('matches snapshot', () => {
+  const { asFragment } = render(<HintBody>{<button>Test</button>}</HintBody>);
+
+  expect(asFragment()).toMatchSnapshot();
+});

package/src/components/Hint/__tests__/HintFooter.test.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import { HintFooter } from "../HintFooter";
+
+test('renders without children', () => {
+  render(<HintFooter data-testid="HintFooter"></HintFooter>);
+  
+  expect(screen.getByTestId('HintFooter')).toBeVisible();
+});
+
+test('renders children', () => {
+  render(<HintFooter>{<button>Test Me</button>}</HintFooter>);
+
+  expect(screen.getByRole('button', { name: 'Test Me' })).toBeVisible();
+});
+
+test('renders with class pf-c-hint__footer', () => {
+  render(<HintFooter>Hint Body Test</HintFooter>);
+
+  const body = screen.getByText('Hint Body Test');
+
+  expect(body).toHaveClass('pf-c-hint__footer');
+});
+
+test('renders with custom class names provided via prop', () => {
+  render(<HintFooter className="custom-classname">Hint Body Test</HintFooter>);
+
+  const body = screen.getByText('Hint Body Test');
+
+  expect(body).toHaveClass('custom-classname');
+});
+
+test('renders with inherited element props spread to the component', () => {
+  render(
+    <HintFooter aria-label="labelling-id">Test</HintFooter>
+  );
+
+  expect(screen.getByText('Test')).toHaveAccessibleName('labelling-id');
+});
+
+test('matches snapshot', () => {
+  const { asFragment } = render(<HintFooter>{<button>Test</button>}</HintFooter>);
+
+  expect(asFragment()).toMatchSnapshot();
+});