@patternfly/react-core 4.224.11 → 4.224.14

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

@@ -0,0 +1,164 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+
+import { AccordionToggle } from '../AccordionToggle';
+import { AccordionContext } from '../AccordionContext';
+
+jest.mock('@patternfly/react-icons/dist/esm/icons/angle-right-icon', () => () => 'Icon mock');
+
+test('Renders without children', () => {
+  render(
+    <AccordionContext.Provider value={{ ToggleContainer: 'h3' }}>
+      <AccordionToggle id="accordion-toggle" data-testid="accordion-toggle-test-id" />
+    </AccordionContext.Provider>
+  );
+
+  expect(screen.getByTestId('accordion-toggle-test-id')).toBeVisible();
+});
+
+test('Renders children', () => {
+  render(
+    <AccordionContext.Provider value={{ ToggleContainer: 'h3' }}>
+      <AccordionToggle id="accordion-toggle">Test</AccordionToggle>
+    </AccordionContext.Provider>
+  );
+
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test('Renders with inherited element props spread to the component', () => {
+  render(
+    <>
+      <AccordionContext.Provider value={{ ToggleContainer: 'h3' }}>
+        <AccordionToggle id="accordion-toggle" aria-labelledby="labelling-id">
+          Test
+        </AccordionToggle>
+        <p id="labelling-id">Label</p>
+      </AccordionContext.Provider>
+    </>
+  );
+
+  expect(screen.getByRole('button')).toHaveAccessibleName('Label');
+});
+
+test('Renders the accordion toggle with class pf-c-accordion__toggle', () => {
+  render(
+    <AccordionContext.Provider value={{ ToggleContainer: 'h3' }}>
+      <AccordionToggle id="accordion-toggle" aria-label="Accordion test">
+        Test
+      </AccordionToggle>
+    </AccordionContext.Provider>
+  );
+
+  expect(screen.getByRole('button')).toHaveClass('pf-c-accordion__toggle');
+});
+
+test('Renders the accordion toggle with custom class names provided via prop', () => {
+  render(
+    <AccordionContext.Provider value={{ ToggleContainer: 'h3' }}>
+      <AccordionToggle id="accordion-toggle" aria-label="Accordion test" className="test-class">
+        Test
+      </AccordionToggle>
+    </AccordionContext.Provider>
+  );
+
+  expect(screen.getByRole('button')).toHaveClass('test-class');
+});
+
+test('Renders with children inside class pf-c-accordion__toggle-text', () => {
+  render(
+    <AccordionContext.Provider value={{ ToggleContainer: 'h3' }}>
+      <AccordionToggle id="accordion-toggle" aria-label="Accordion test">
+        Test
+      </AccordionToggle>
+    </AccordionContext.Provider>
+  );
+
+  expect(screen.getByText('Test')).toHaveClass('pf-c-accordion__toggle-text');
+});
+
+test('Renders with the toggle icon inside class pf-c-accordion__toggle-icon', () => {
+  render(
+    <AccordionContext.Provider value={{ ToggleContainer: 'h3' }}>
+      <AccordionToggle id="accordion-toggle" aria-label="Accordion test">
+        Test
+      </AccordionToggle>
+    </AccordionContext.Provider>
+  );
+
+  expect(screen.getByText('Icon mock')).toHaveClass('pf-c-accordion__toggle-icon');
+});
+
+test('Renders with the id prop passed to the toggle', () => {
+  render(
+    <AccordionContext.Provider value={{ ToggleContainer: 'h3' }}>
+      <AccordionToggle id="accordion-toggle" aria-label="Accordion test">
+        Test
+      </AccordionToggle>
+    </AccordionContext.Provider>
+  );
+
+  expect(screen.getByRole('button')).toHaveProperty('id', 'accordion-toggle');
+});
+
+test('Renders the container as the element provided in ToggleContainer from a context by default', () => {
+  render(
+    <AccordionContext.Provider value={{ ToggleContainer: 'h3' }}>
+      <AccordionToggle id="accordion-toggle">Test</AccordionToggle>
+    </AccordionContext.Provider>
+  );
+
+  expect(screen.queryByRole('heading', { level: 1 })).not.toBeInTheDocument();
+  expect(screen.getByRole('heading', { level: 3 })).toBeVisible();
+});
+
+test('Renders the container as the element provided via the component prop when one is provided', () => {
+  render(
+    <AccordionContext.Provider value={{ ToggleContainer: 'h3' }}>
+      <AccordionToggle id="accordion-toggle" component="h1">
+        Test
+      </AccordionToggle>
+    </AccordionContext.Provider>
+  );
+
+  expect(screen.queryByRole('heading', { level: 3 })).not.toBeInTheDocument();
+  expect(screen.getByRole('heading', { level: 1 })).toBeVisible();
+});
+
+test('Renders the toggle without pf-m-expanded and aria-expanded=false by default', () => {
+  render(
+    <AccordionContext.Provider value={{ ToggleContainer: 'h3' }}>
+      <AccordionToggle id="accordion-toggle">Test</AccordionToggle>
+    </AccordionContext.Provider>
+  );
+
+  const toggle = screen.getByRole('button');
+
+  expect(toggle).not.toHaveClass('pf-m-expanded');
+  expect(toggle).toHaveAttribute('aria-expanded', 'false');
+});
+
+test('Renders the toggle with pf-m-expanded and aria-expanded=true when isExpanded=true', () => {
+  render(
+    <AccordionContext.Provider value={{ ToggleContainer: 'h3' }}>
+      <AccordionToggle id="accordion-toggle" isExpanded>
+        Test
+      </AccordionToggle>
+    </AccordionContext.Provider>
+  );
+
+  const toggle = screen.getByRole('button');
+
+  expect(toggle).toHaveClass('pf-m-expanded');
+  expect(toggle).toHaveAttribute('aria-expanded', 'true');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(
+    <AccordionContext.Provider value={{ ToggleContainer: 'h3' }}>
+      <AccordionToggle id="accordion-toggle">Test</AccordionToggle>
+    </AccordionContext.Provider>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});

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

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

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