@patternfly/react-core 4.206.4 → 4.207.0

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Button aria-disabled is set to true and tabIndex to -1 if component is not a button and is disabled 1`] = `
-<div>
+<DocumentFragment>
   <a
     aria-disabled="true"
     class="pf-c-button pf-m-primary pf-m-disabled"
@@ -12,11 +12,11 @@ exports[`Button aria-disabled is set to true and tabIndex to -1 if component is
   >
     Disabled Anchor Button
   </a>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Button control button 1`] = `
-<div>
+<DocumentFragment>
   <button
     aria-disabled="false"
     aria-label="control"
@@ -26,14 +26,13 @@ exports[`Button control button 1`] = `
     data-ouia-safe="true"
     type="button"
   >
-    control
-     Button
+    control Button
   </button>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Button danger button 1`] = `
-<div>
+<DocumentFragment>
   <button
     aria-disabled="false"
     aria-label="danger"
@@ -43,14 +42,13 @@ exports[`Button danger button 1`] = `
     data-ouia-safe="true"
     type="button"
   >
-    danger
-     Button
+    danger Button
   </button>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Button isAriaDisabled button 1`] = `
-<div>
+<DocumentFragment>
   <button
     aria-disabled="true"
     class="pf-c-button pf-m-primary pf-m-aria-disabled"
@@ -61,11 +59,11 @@ exports[`Button isAriaDisabled button 1`] = `
   >
     Disabled yet focusable button
   </button>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Button isAriaDisabled link button 1`] = `
-<div>
+<DocumentFragment>
   <a
     aria-disabled="true"
     class="pf-c-button pf-m-primary pf-m-aria-disabled"
@@ -75,11 +73,11 @@ exports[`Button isAriaDisabled link button 1`] = `
   >
     Disabled yet focusable button
   </a>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Button isBlock 1`] = `
-<div>
+<DocumentFragment>
   <button
     aria-disabled="false"
     class="pf-c-button pf-m-primary pf-m-block"
@@ -90,11 +88,11 @@ exports[`Button isBlock 1`] = `
   >
     Block Button
   </button>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Button isDanger link 1`] = `
-<div>
+<DocumentFragment>
   <button
     aria-disabled="false"
     class="pf-c-button pf-m-link pf-m-danger"
@@ -105,11 +103,11 @@ exports[`Button isDanger link 1`] = `
   >
     Disabled Button
   </button>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Button isDanger secondary 1`] = `
-<div>
+<DocumentFragment>
   <button
     aria-disabled="false"
     class="pf-c-button pf-m-secondary pf-m-danger"
@@ -120,11 +118,11 @@ exports[`Button isDanger secondary 1`] = `
   >
     Disabled Button
   </button>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Button isDisabled 1`] = `
-<div>
+<DocumentFragment>
   <button
     aria-disabled="true"
     class="pf-c-button pf-m-primary pf-m-disabled"
@@ -136,11 +134,11 @@ exports[`Button isDisabled 1`] = `
   >
     Disabled Button
   </button>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Button isInline 1`] = `
-<div>
+<DocumentFragment>
   <button
     aria-disabled="false"
     class="pf-c-button pf-m-link pf-m-inline"
@@ -151,11 +149,11 @@ exports[`Button isInline 1`] = `
   >
     Hovered Button
   </button>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Button isLarge 1`] = `
-<div>
+<DocumentFragment>
   <button
     aria-disabled="false"
     class="pf-c-button pf-m-primary pf-m-display-lg"
@@ -166,11 +164,11 @@ exports[`Button isLarge 1`] = `
   >
     Large Button
   </button>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Button isLoading 1`] = `
-<div>
+<DocumentFragment>
   <button
     aria-disabled="false"
     class="pf-c-button pf-m-primary pf-m-progress pf-m-in-progress"
@@ -201,11 +199,11 @@ exports[`Button isLoading 1`] = `
     </span>
     Loading Button
   </button>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Button isLoading icon only 1`] = `
-<div>
+<DocumentFragment>
   <button
     aria-disabled="false"
     aria-label="Upload"
@@ -239,11 +237,11 @@ exports[`Button isLoading icon only 1`] = `
       ICON
     </div>
   </button>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Button isSmall 1`] = `
-<div>
+<DocumentFragment>
   <button
     aria-disabled="false"
     class="pf-c-button pf-m-primary pf-m-small"
@@ -254,11 +252,11 @@ exports[`Button isSmall 1`] = `
   >
     Small Button
   </button>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Button link button 1`] = `
-<div>
+<DocumentFragment>
   <button
     aria-disabled="false"
     aria-label="link"
@@ -268,14 +266,13 @@ exports[`Button link button 1`] = `
     data-ouia-safe="true"
     type="button"
   >
-    link
-     Button
+    link Button
   </button>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Button link with icon 1`] = `
-<div>
+<DocumentFragment>
   <button
     aria-disabled="false"
     class="pf-c-button pf-m-link"
@@ -303,11 +300,11 @@ exports[`Button link with icon 1`] = `
     </span>
     Block Button
   </button>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Button plain button 1`] = `
-<div>
+<DocumentFragment>
   <button
     aria-disabled="false"
     aria-label="plain"
@@ -317,14 +314,13 @@ exports[`Button plain button 1`] = `
     data-ouia-safe="true"
     type="button"
   >
-    plain
-     Button
+    plain Button
   </button>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Button primary button 1`] = `
-<div>
+<DocumentFragment>
   <button
     aria-disabled="false"
     aria-label="primary"
@@ -334,14 +330,13 @@ exports[`Button primary button 1`] = `
     data-ouia-safe="true"
     type="button"
   >
-    primary
-     Button
+    primary Button
   </button>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Button secondary button 1`] = `
-<div>
+<DocumentFragment>
   <button
     aria-disabled="false"
     aria-label="secondary"
@@ -351,14 +346,13 @@ exports[`Button secondary button 1`] = `
     data-ouia-safe="true"
     type="button"
   >
-    secondary
-     Button
+    secondary Button
   </button>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Button tertiary button 1`] = `
-<div>
+<DocumentFragment>
   <button
     aria-disabled="false"
     aria-label="tertiary"
@@ -368,14 +362,13 @@ exports[`Button tertiary button 1`] = `
     data-ouia-safe="true"
     type="button"
   >
-    tertiary
-     Button
+    tertiary Button
   </button>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Button warning button 1`] = `
-<div>
+<DocumentFragment>
   <button
     aria-disabled="false"
     aria-label="warning"
@@ -385,8 +378,7 @@ exports[`Button warning button 1`] = `
     data-ouia-safe="true"
     type="button"
   >
-    warning
-     Button
+    warning Button
   </button>
-</div>
+</DocumentFragment>
 `;

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

@@ -1,19 +1,16 @@
 import React from 'react';
-
 import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom';
-
 import { Card } from '../Card';
 
 describe('Card', () => {
   test('renders with PatternFly Core styles', () => {
-    const view = render(<Card />);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<Card />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('className is added to the root element', () => {
     render(<Card className="extra-class" />);
-    expect(screen.getByRole('article').className).toContain('extra-class');
+    expect(screen.getByRole('article')).toHaveClass('extra-class');
   });
 
   test('extra props are spread to the root element', () => {
@@ -38,80 +35,80 @@ describe('Card', () => {
   });
 
   test('card with isHoverable applied ', () => {
-    render(<Card isHoverable />);
-    expect(screen.getByRole('article').outerHTML).toMatchSnapshot();
+    const { asFragment } = render(<Card isHoverable />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('card with isCompact applied ', () => {
-    render(<Card isCompact />);
-    expect(screen.getByRole('article').outerHTML).toMatchSnapshot();
+    const { asFragment } = render(<Card isCompact />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('card with isSelectable applied ', () => {
     render(<Card isSelectable />);
 
     const card = screen.getByRole('article');
-    expect(card.className).toContain('selectable');
-    expect(card.getAttribute('tabindex')).toEqual('0');
+    expect(card).toHaveClass('pf-m-selectable');
+    expect(card).toHaveAttribute('tabindex', '0');
   });
 
   test('card with isSelectable and isSelected applied ', () => {
     render(<Card isSelectable isSelected />);
 
     const card = screen.getByRole('article');
-    expect(card.className).toContain('selectable');
-    expect(card.className).toContain('selected');
-    expect(card.getAttribute('tabindex')).toEqual('0');
+    expect(card).toHaveClass('pf-m-selectable');
+    expect(card).toHaveClass('pf-m-selected');
+    expect(card).toHaveAttribute('tabindex', '0');
   });
 
   test('card with only isSelected applied - not change', () => {
     render(<Card isSelected />);
 
     const card = screen.getByRole('article');
-    expect(card.className).not.toContain('selected');
+    expect(card).not.toHaveClass('pf-m-selected');
     expect(card.getAttribute('tabindex')).toBeNull();
   });
 
   test('card with isDisabledRaised applied', () => {
     render(<Card isDisabledRaised />);
-    expect(screen.getByRole('article').className).toContain('non-selectable-raised');
+    expect(screen.getByRole('article')).toHaveClass('pf-m-non-selectable-raised');
   });
 
   test('card with isSelectableRaised applied - not change', () => {
     render(<Card isSelectableRaised />);
 
     const card = screen.getByRole('article');
-    expect(card.className).toContain('selectable-raised');
-    expect(card.getAttribute('tabindex')).toEqual('0');
+    expect(card).toHaveClass('pf-m-selectable-raised');
+    expect(card).toHaveAttribute('tabindex', '0');
   });
 
   test('card with isSelectableRaised and isSelected applied ', () => {
     render(<Card isSelected isSelectableRaised />);
 
     const card = screen.getByRole('article');
-    expect(card.className).toContain('selectable-raised');
-    expect(card.className).toContain('selected-raised');
-    expect(card.getAttribute('tabindex')).toEqual('0');
+    expect(card).toHaveClass('pf-m-selectable-raised');
+    expect(card).toHaveClass('pf-m-selected-raised');
+    expect(card).toHaveAttribute('tabindex', '0');
   });
 
   test('card with isFlat applied', () => {
     render(<Card isFlat />);
-    expect(screen.getByRole('article').className).toContain('m-flat');
+    expect(screen.getByRole('article')).toHaveClass('pf-m-flat');
   });
 
   test('card with isExpanded applied', () => {
     render(<Card isExpanded />);
-    expect(screen.getByRole('article').className).toContain('m-expanded');
+    expect(screen.getByRole('article')).toHaveClass('pf-m-expanded');
   });
 
   test('card with isRounded applied', () => {
     render(<Card isRounded />);
-    expect(screen.getByRole('article').className).toContain('m-rounded');
+    expect(screen.getByRole('article')).toHaveClass('pf-m-rounded');
   });
 
   test('card with isLarge applied', () => {
     render(<Card isLarge />);
-    expect(screen.getByRole('article').className).toContain('m-display-lg');
+    expect(screen.getByRole('article')).toHaveClass('pf-m-display-lg');
   });
 
   test('card warns when isLarge and isCompact', () => {
@@ -119,6 +116,6 @@ describe('Card', () => {
     global.console = { warn: consoleWarnMock } as any;
 
     render(<Card isLarge isCompact />);
-    expect(consoleWarnMock).toBeCalled();
+    expect(consoleWarnMock).toHaveBeenCalled();
   });
 });

package/src/components/Card/__tests__/CardBody.test.tsx

@@ -1,19 +1,16 @@
 import React from 'react';
-
 import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom';
-
 import { CardBody } from '../CardBody';
 
 describe('CardBody', () => {
   test('renders with PatternFly Core styles', () => {
-    const view = render(<CardBody />);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<CardBody />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('className is added to the root element', () => {
     render(<CardBody className="extra-class" data-testid="test-id" />);
-    expect(screen.getByTestId('test-id').className).toContain('extra-class');
+    expect(screen.getByTestId('test-id')).toHaveClass('extra-class');
   });
 
   test('extra props are spread to the root element', () => {
@@ -38,7 +35,7 @@ describe('CardBody', () => {
   });
 
   test('body with no-fill applied', () => {
-    const view = render(<CardBody isFilled={false} />);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<CardBody isFilled={false} />);
+    expect(asFragment()).toMatchSnapshot();
   });
 });

package/src/components/Card/__tests__/CardExpandableContent.test.tsx

@@ -4,10 +4,10 @@ import { CardExpandableContent } from '../CardExpandableContent';
 import { render } from '@testing-library/react';
 
 test('renders successfully', () => {
-  const view = render(
+  const { asFragment } = render(
     <CardContext.Provider value={{ isExpanded: true }}>
       <CardExpandableContent />
     </CardContext.Provider>
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });

package/src/components/Card/__tests__/CardFooter.test.tsx

@@ -1,19 +1,16 @@
 import React from 'react';
-
 import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom';
-
 import { CardFooter } from '../CardFooter';
 
 describe('CardFooter', () => {
   test('renders with PatternFly Core styles', () => {
-    const view = render(<CardFooter />);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<CardFooter />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('className is added to the root element', () => {
     render(<CardFooter className="extra-class">text</CardFooter>);
-    expect(screen.getByText('text').className).toContain('extra-class');
+    expect(screen.getByText('text')).toHaveClass('extra-class');
   });
 
   test('extra props are spread to the root element', () => {

package/src/components/Card/__tests__/CardHeadMain.test.tsx

@@ -1,19 +1,16 @@
 import React from 'react';
-
 import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom';
-
 import { CardHeadMain } from '../CardHeadMain';
 
 describe('CardHeadMain', () => {
   test('renders with PatternFly Core styles', () => {
-    render(<CardHeadMain>text</CardHeadMain>);
-    expect(screen.getByText('text').outerHTML).toMatchSnapshot();
+    const { asFragment } = render(<CardHeadMain>text</CardHeadMain>);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('className is added to the root element', () => {
     render(<CardHeadMain className="extra-class">text</CardHeadMain>);
-    expect(screen.getByText('text').className).toContain('extra-class');
+    expect(screen.getByText('text')).toHaveClass('extra-class');
   });
 
   test('extra props are spread to the root element', () => {

package/src/components/Card/__tests__/CardHeader.test.tsx

@@ -4,7 +4,7 @@ import { CardHeader } from '../CardHeader';
 
 describe('CardHeader', () => {
   test('onExpand adds the toggle button', () => {
-    const view = render(<CardHeader onExpand={jest.fn()} />);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<CardHeader onExpand={jest.fn()} />);
+    expect(asFragment()).toMatchSnapshot();
   });
 });

package/src/components/Card/__tests__/CardHeaderMain.test.tsx

@@ -1,19 +1,16 @@
 import React from 'react';
-
 import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom';
-
 import { CardHeaderMain } from '../CardHeaderMain';
 
 describe('CardHeaderMain', () => {
   test('renders with PatternFly Core styles', () => {
-    render(<CardHeaderMain>text</CardHeaderMain>);
-    expect(screen.getByText('text').outerHTML).toMatchSnapshot();
+    const { asFragment } = render(<CardHeaderMain>text</CardHeaderMain>);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('className is added to the root element', () => {
     render(<CardHeaderMain className="extra-class">text</CardHeaderMain>);
-    expect(screen.getByText('text').className).toContain('extra-class');
+    expect(screen.getByText('text')).toHaveClass('extra-class');
   });
 
   test('extra props are spread to the root element', () => {

package/src/components/Card/__tests__/CardTitle.test.tsx

@@ -1,19 +1,16 @@
 import React from 'react';
-
 import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom';
-
 import { CardTitle } from '../CardTitle';
 
 describe('CardTitle', () => {
   test('renders with PatternFly Core styles', () => {
-    render(<CardTitle>text</CardTitle>);
-    expect(screen.getByText('text').outerHTML).toMatchSnapshot();
+    const { asFragment } = render(<CardTitle>text</CardTitle>);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('className is added to the root element', () => {
     render(<CardTitle className="extra-class">text</CardTitle>);
-    expect(screen.getByText('text').className).toContain('extra-class');
+    expect(screen.getByText('text')).toHaveClass('extra-class');
   });
 
   test('extra props are spread to the root element', () => {

package/src/components/Card/__tests__/Generated/CardActions.test.tsx

@@ -8,6 +8,6 @@ import { CardActions } from '../../CardActions';
 import {} from '../..';
 
 it('CardActions should match snapshot (auto-generated)', () => {
-  const view = render(<CardActions children={<>ReactNode</>} className={"''"} />);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(<CardActions children={<>ReactNode</>} className={"''"} />);
+  expect(asFragment()).toMatchSnapshot();
 });

package/src/components/Card/__tests__/Generated/__snapshots__/CardActions.test.tsx.snap

@@ -1,11 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`CardActions should match snapshot (auto-generated) 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-card__actions ''"
   >
     ReactNode
   </div>
-</div>
+</DocumentFragment>
 `;

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

@@ -1,11 +1,31 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Card card with isCompact applied  1`] = `"<article id=\\"\\" class=\\"pf-c-card pf-m-compact\\" data-ouia-component-type=\\"PF4/Card\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Card-7\\"></article>"`;
+exports[`Card card with isCompact applied  1`] = `
+<DocumentFragment>
+  <article
+    class="pf-c-card pf-m-compact"
+    data-ouia-component-id="OUIA-Generated-Card-7"
+    data-ouia-component-type="PF4/Card"
+    data-ouia-safe="true"
+    id=""
+  />
+</DocumentFragment>
+`;
 
-exports[`Card card with isHoverable applied  1`] = `"<article id=\\"\\" class=\\"pf-c-card pf-m-selectable\\" data-ouia-component-type=\\"PF4/Card\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Card-6\\"></article>"`;
+exports[`Card card with isHoverable applied  1`] = `
+<DocumentFragment>
+  <article
+    class="pf-c-card pf-m-selectable"
+    data-ouia-component-id="OUIA-Generated-Card-6"
+    data-ouia-component-type="PF4/Card"
+    data-ouia-safe="true"
+    id=""
+  />
+</DocumentFragment>
+`;
 
 exports[`Card renders with PatternFly Core styles 1`] = `
-<div>
+<DocumentFragment>
   <article
     class="pf-c-card"
     data-ouia-component-id="OUIA-Generated-Card-1"
@@ -13,5 +33,5 @@ exports[`Card renders with PatternFly Core styles 1`] = `
     data-ouia-safe="true"
     id=""
   />
-</div>
+</DocumentFragment>
 `;