@patternfly/react-core 4.199.1 → 4.199.4

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

@@ -1,105 +1,124 @@
 import React from 'react';
-import { Card } from '../Card';
-import { shallow } from 'enzyme';
-
-test('renders with PatternFly Core styles', () => {
-  const view = shallow(<Card />).dive();
-  expect(view).toMatchSnapshot();
-});
-
-test('className is added to the root element', () => {
-  const view = shallow(<Card className="extra-class" />).dive();
-  expect(view.prop('className')).toMatchSnapshot();
-});
-
-test('extra props are spread to the root element', () => {
-  const testId = 'card';
-  const view = shallow(<Card data-testid={testId} />).dive();
-  expect(view.prop('data-testid')).toBe(testId);
-});
-
-test('allows passing in a string as the component', () => {
-  const component = 'section';
-  const view = shallow(<Card component={component} />).dive();
-  expect(view.type()).toBe(component);
-});
-
-test('allows passing in a React Component as the component', () => {
-  const Component = () => <div>im a div</div>;
-  const view = shallow(<Card component={(Component as unknown) as keyof JSX.IntrinsicElements} />).dive();
-  expect(view.type()).toBe(Component);
-});
-
-test('card with isHoverable applied ', () => {
-  const view = shallow(<Card isHoverable />).dive();
-  expect(view).toMatchSnapshot();
-});
-
-test('card with isCompact applied ', () => {
-  const view = shallow(<Card isCompact />).dive();
-  expect(view).toMatchSnapshot();
-});
-
-test('card with isSelectable applied ', () => {
-  const view = shallow(<Card isSelectable />).dive();
-  expect(view.prop('className')).toMatch(/selectable/);
-  expect(view.prop('tabIndex')).toBe('0');
-});
 
-test('card with isSelectable and isSelected applied ', () => {
-  const view = shallow(<Card isSelectable isSelected />).dive();
-  expect(view.prop('className')).toMatch(/selectable/);
-  expect(view.prop('className')).toMatch(/selected/);
-  expect(view.prop('tabIndex')).toBe('0');
-});
-
-test('card with only isSelected applied - not change', () => {
-  const view = shallow(<Card isSelected />).dive();
-  expect(view.prop('className')).not.toMatch(/selected/);
-  expect(view.prop('tabIndex')).toBe(undefined);
-});
-
-test('card with isDisabledRaised applied', () => {
-  const view = shallow(<Card isDisabledRaised />).dive();
-  expect(view.prop('className')).toMatch(/non-selectable-raised/);
-});
-
-test('card with isSelectableRaised applied - not change', () => {
-  const view = shallow(<Card isSelectableRaised />).dive();
-  expect(view.prop('className')).toMatch(/selectable-raised/);
-  expect(view.prop('tabIndex')).toBe('0');
-});
-
-test('card with isSelectableRaised and isSelected applied ', () => {
-  const view = shallow(<Card isSelected isSelectableRaised />).dive();
-  expect(view.prop('className')).toMatch(/selectable-raised/);
-  expect(view.prop('className')).toMatch(/selected-raised/);
-  expect(view.prop('tabIndex')).toBe('0');
-});
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
 
-test('card with isFlat applied', () => {
-  const view = shallow(<Card isFlat />).dive();
-  expect(view.prop('className')).toMatch(/m-flat/);
-});
-
-test('card with isExpanded applied', () => {
-  const view = shallow(<Card isExpanded />).dive();
-  expect(view.prop('className')).toMatch(/m-expanded/);
-});
-
-test('card with isRounded applied', () => {
-  const view = shallow(<Card isRounded />).dive();
-  expect(view.prop('className')).toMatch(/m-rounded/);
-});
-
-test('card with isLarge applied', () => {
-  const view = shallow(<Card isLarge />).dive();
-  expect(view.prop('className')).toMatch(/m-display-lg/);
-});
+import { Card } from '../Card';
 
-test('card warns when isLarge and isCompact', () => {
-  const consoleWarnMock = jest.fn();
-  global.console = { warn: consoleWarnMock } as any;
-  shallow(<Card isLarge isCompact />);
-  expect(consoleWarnMock).toBeCalled();
+describe('Card', () => {
+  test('renders with PatternFly Core styles', () => {
+    const view = render(<Card />);
+    expect(view.container).toMatchSnapshot();
+  });
+
+  test('className is added to the root element', () => {
+    render(<Card className="extra-class" />);
+    expect(screen.getByRole('article').className).toContain('extra-class');
+  });
+
+  test('extra props are spread to the root element', () => {
+    const testId = 'card';
+
+    render(<Card data-testid={testId} />);
+    expect(screen.getByTestId(testId)).toBeInTheDocument();
+  });
+
+  test('allows passing in a string as the component', () => {
+    const component = 'section';
+
+    render(<Card component={component}>section content</Card>);
+    expect(screen.getByText('section content')).toBeInTheDocument();
+  });
+
+  test('allows passing in a React Component as the component', () => {
+    const Component = () => <div>im a div</div>;
+
+    render(<Card component={(Component as unknown) as keyof JSX.IntrinsicElements} />);
+    expect(screen.getByText('im a div')).toBeInTheDocument();
+  });
+
+  test('card with isHoverable applied ', () => {
+    render(<Card isHoverable />);
+    expect(screen.getByRole('article').outerHTML).toMatchSnapshot();
+  });
+
+  test('card with isCompact applied ', () => {
+    render(<Card isCompact />);
+    expect(screen.getByRole('article').outerHTML).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');
+  });
+
+  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');
+  });
+
+  test('card with only isSelected applied - not change', () => {
+    render(<Card isSelected />);
+
+    const card = screen.getByRole('article');
+    expect(card.className).not.toContain('selected');
+    expect(card.getAttribute('tabindex')).toBeNull();
+  });
+
+  test('card with isDisabledRaised applied', () => {
+    render(<Card isDisabledRaised />);
+    expect(screen.getByRole('article').className).toContain('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');
+  });
+
+  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');
+  });
+
+  test('card with isFlat applied', () => {
+    render(<Card isFlat />);
+    expect(screen.getByRole('article').className).toContain('m-flat');
+  });
+
+  test('card with isExpanded applied', () => {
+    render(<Card isExpanded />);
+    expect(screen.getByRole('article').className).toContain('m-expanded');
+  });
+
+  test('card with isRounded applied', () => {
+    render(<Card isRounded />);
+    expect(screen.getByRole('article').className).toContain('m-rounded');
+  });
+
+  test('card with isLarge applied', () => {
+    render(<Card isLarge />);
+    expect(screen.getByRole('article').className).toContain('m-display-lg');
+  });
+
+  test('card warns when isLarge and isCompact', () => {
+    const consoleWarnMock = jest.fn();
+    global.console = { warn: consoleWarnMock } as any;
+
+    render(<Card isLarge isCompact />);
+    expect(consoleWarnMock).toBeCalled();
+  });
 });

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

@@ -1,37 +1,44 @@
 import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
 import { CardBody } from '../CardBody';
-import { render } from '@testing-library/react';
-import { shallow } from 'enzyme';
 
-test('renders with PatternFly Core styles', () => {
-  const view = render(<CardBody />);
-  expect(view.container).toMatchSnapshot();
-});
+describe('CardBody', () => {
+  test('renders with PatternFly Core styles', () => {
+    const view = render(<CardBody />);
+    expect(view.container).toMatchSnapshot();
+  });
 
-test('className is added to the root element', () => {
-  const view = shallow(<CardBody className="extra-class" />);
-  expect(view.prop('className')).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');
+  });
 
-test('extra props are spread to the root element', () => {
-  const testId = 'card-body';
-  const view = shallow(<CardBody data-testid={testId} />);
-  expect(view.prop('data-testid')).toBe(testId);
-});
+  test('extra props are spread to the root element', () => {
+    const testId = 'card-body';
 
-test('allows passing in a string as the component', () => {
-  const component = 'section';
-  const view = shallow(<CardBody component={component} />);
-  expect(view.type()).toBe(component);
-});
+    render(<CardBody data-testid={testId} />);
+    expect(screen.getByTestId(testId)).toBeInTheDocument();
+  });
 
-test('allows passing in a React Component as the component', () => {
-  const Component = () => <div>im a div</div>;
-  const view = shallow(<CardBody component={(Component as unknown) as keyof JSX.IntrinsicElements} />);
-  expect(view.type()).toBe(Component);
-});
+  test('allows passing in a string as the component', () => {
+    const component = 'section';
+
+    render(<CardBody component={component}>section content</CardBody>);
+    expect(screen.getByText('section content')).toBeInTheDocument();
+  });
+
+  test('allows passing in a React Component as the component', () => {
+    const Component = () => <div>im a div</div>;
+
+    render(<CardBody component={(Component as unknown) as keyof JSX.IntrinsicElements} />);
+    expect(screen.getByText('im a div')).toBeInTheDocument();
+  });
 
-test('body with no-fill applied ', () => {
-  const view = render(<CardBody isFilled={false} />);
-  expect(view.container).toMatchSnapshot();
+  test('body with no-fill applied', () => {
+    const view = render(<CardBody isFilled={false} />);
+    expect(view.container).toMatchSnapshot();
+  });
 });

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

@@ -1,32 +1,36 @@
 import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
 import { CardFooter } from '../CardFooter';
-import { render } from '@testing-library/react';
-import { shallow } from 'enzyme';
 
-test('renders with PatternFly Core styles', () => {
-  const view = render(<CardFooter />);
-  expect(view.container).toMatchSnapshot();
-});
+describe('CardFooter', () => {
+  test('renders with PatternFly Core styles', () => {
+    const view = render(<CardFooter />);
+    expect(view.container).toMatchSnapshot();
+  });
 
-test('className is added to the root element', () => {
-  const view = shallow(<CardFooter className="extra-class" />);
-  expect(view.prop('className')).toMatchSnapshot();
-});
+  test('className is added to the root element', () => {
+    render(<CardFooter className="extra-class">text</CardFooter>);
+    expect(screen.getByText('text').className).toContain('extra-class');
+  });
 
-test('extra props are spread to the root element', () => {
-  const testId = 'card-footer';
-  const view = shallow(<CardFooter data-testid={testId} />);
-  expect(view.prop('data-testid')).toBe(testId);
-});
+  test('extra props are spread to the root element', () => {
+    const testId = 'card-footer';
 
-test('allows passing in a string as the component', () => {
-  const component = 'div';
-  const view = shallow(<CardFooter component={component} />);
-  expect(view.type()).toBe(component);
-});
+    render(<CardFooter data-testid={testId} />);
+    expect(screen.getByTestId(testId)).toBeInTheDocument();
+  });
+
+  test('allows passing in a string as the component', () => {
+    render(<CardFooter component={'div'}>div content</CardFooter>);
+    expect(screen.getByText('div content')).toBeInTheDocument();
+  });
 
-test('allows passing in a React Component as the component', () => {
-  const Component = () => <div>im a div</div>;
-  const view = shallow(<CardFooter component={(Component as unknown) as keyof JSX.IntrinsicElements} />);
-  expect(view.type()).toBe(Component);
+  test('allows passing in a React Component as the component', () => {
+    const Component = () => <div>im a div</div>;
+    render(<CardFooter component={(Component as unknown) as keyof JSX.IntrinsicElements} />);
+    expect(screen.getByText('im a div')).toBeInTheDocument();
+  });
 });

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

@@ -1,20 +1,25 @@
 import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
 import { CardHeadMain } from '../CardHeadMain';
-import { render } from '@testing-library/react';
-import { shallow } from 'enzyme';
 
-test('renders with PatternFly Core styles', () => {
-  const view = render(<CardHeadMain>text</CardHeadMain>);
-  expect(view.container).toMatchSnapshot();
-});
+describe('CardHeadMain', () => {
+  test('renders with PatternFly Core styles', () => {
+    render(<CardHeadMain>text</CardHeadMain>);
+    expect(screen.getByText('text').outerHTML).toMatchSnapshot();
+  });
 
-test('className is added to the root element', () => {
-  const view = shallow(<CardHeadMain className="extra-class">text</CardHeadMain>);
-  expect(view.prop('className')).toMatchSnapshot();
-});
+  test('className is added to the root element', () => {
+    render(<CardHeadMain className="extra-class">text</CardHeadMain>);
+    expect(screen.getByText('text').className).toContain('extra-class');
+  });
+
+  test('extra props are spread to the root element', () => {
+    const testId = 'card-head-main';
 
-test('extra props are spread to the root element', () => {
-  const testId = 'card-head-main';
-  const view = shallow(<CardHeadMain data-testid={testId} />);
-  expect(view.prop('data-testid')).toBe(testId);
+    render(<CardHeadMain data-testid={testId} />);
+    expect(screen.getByTestId(testId)).toBeInTheDocument();
+  });
 });

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

@@ -1,26 +1,10 @@
 import React from 'react';
-import { CardTitle } from '../CardTitle';
-import { CardHeader } from '../CardHeader';
 import { render } from '@testing-library/react';
-import { shallow } from 'enzyme';
-
-test('renders with PatternFly Core styles', () => {
-  const view = render(<CardTitle />);
-  expect(view.container).toMatchSnapshot();
-});
-
-test('className is added to the root element', () => {
-  const view = shallow(<CardTitle className="extra-class" />);
-  expect(view.prop('className')).toMatchSnapshot();
-});
-
-test('extra props are spread to the root element', () => {
-  const testId = 'card-header';
-  const view = shallow(<CardTitle data-testid={testId} />);
-  expect(view.prop('data-testid')).toBe(testId);
-});
+import { CardHeader } from '../CardHeader';
 
-test('onExpand adds the toggle button', () => {
-  const view = render(<CardHeader onExpand={jest.fn()} />);
-  expect(view.container).toMatchSnapshot();
+describe('CardHeader', () => {
+  test('onExpand adds the toggle button', () => {
+    const view = render(<CardHeader onExpand={jest.fn()} />);
+    expect(view.container).toMatchSnapshot();
+  });
 });

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

@@ -1,20 +1,25 @@
 import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
 import { CardHeaderMain } from '../CardHeaderMain';
-import { render } from '@testing-library/react';
-import { shallow } from 'enzyme';
 
-test('renders with PatternFly Core styles', () => {
-  const view = render(<CardHeaderMain>text</CardHeaderMain>);
-  expect(view.container).toMatchSnapshot();
-});
+describe('CardHeaderMain', () => {
+  test('renders with PatternFly Core styles', () => {
+    render(<CardHeaderMain>text</CardHeaderMain>);
+    expect(screen.getByText('text').outerHTML).toMatchSnapshot();
+  });
 
-test('className is added to the root element', () => {
-  const view = shallow(<CardHeaderMain className="extra-class">text</CardHeaderMain>);
-  expect(view.prop('className')).toMatchSnapshot();
-});
+  test('className is added to the root element', () => {
+    render(<CardHeaderMain className="extra-class">text</CardHeaderMain>);
+    expect(screen.getByText('text').className).toContain('extra-class');
+  });
+
+  test('extra props are spread to the root element', () => {
+    const testId = 'card-head-main';
 
-test('extra props are spread to the root element', () => {
-  const testId = 'card-head-main';
-  const view = shallow(<CardHeaderMain data-testid={testId} />);
-  expect(view.prop('data-testid')).toBe(testId);
+    render(<CardHeaderMain data-testid={testId} />);
+    expect(screen.getByTestId(testId)).toBeInTheDocument();
+  });
 });

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

@@ -0,0 +1,25 @@
+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();
+  });
+
+  test('className is added to the root element', () => {
+    render(<CardTitle className="extra-class">text</CardTitle>);
+    expect(screen.getByText('text').className).toContain('extra-class');
+  });
+
+  test('extra props are spread to the root element', () => {
+    const testId = 'card-header';
+
+    render(<CardTitle data-testid={testId} />);
+    expect(screen.getByTestId(testId)).toBeInTheDocument();
+  });
+});

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

@@ -1,33 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`card with isCompact applied  1`] = `
-<article
-  className="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=""
-/>
-`;
-
-exports[`card with isHoverable applied  1`] = `
-<article
-  className="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=""
-/>
-`;
+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[`className is added to the root element 1`] = `"pf-c-card extra-class"`;
+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[`renders with PatternFly Core styles 1`] = `
-<article
-  className="pf-c-card"
-  data-ouia-component-id="OUIA-Generated-Card-1"
-  data-ouia-component-type="PF4/Card"
-  data-ouia-safe={true}
-  id=""
-/>
+exports[`Card renders with PatternFly Core styles 1`] = `
+<div>
+  <article
+    class="pf-c-card"
+    data-ouia-component-id="OUIA-Generated-Card-1"
+    data-ouia-component-type="PF4/Card"
+    data-ouia-safe="true"
+    id=""
+  />
+</div>
 `;

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`body with no-fill applied  1`] = `
+exports[`CardBody body with no-fill applied 1`] = `
 <div>
   <div
     class="pf-c-card__body pf-m-no-fill"
@@ -8,9 +8,7 @@ exports[`body with no-fill applied  1`] = `
 </div>
 `;
 
-exports[`className is added to the root element 1`] = `"pf-c-card__body extra-class"`;
-
-exports[`renders with PatternFly Core styles 1`] = `
+exports[`CardBody renders with PatternFly Core styles 1`] = `
 <div>
   <div
     class="pf-c-card__body"

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

@@ -1,8 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`className is added to the root element 1`] = `"pf-c-card__footer extra-class"`;
-
-exports[`renders with PatternFly Core styles 1`] = `
+exports[`CardFooter renders with PatternFly Core styles 1`] = `
 <div>
   <div
     class="pf-c-card__footer"

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

@@ -1,13 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`className is added to the root element 1`] = `"pf-c-card__head-main extra-class"`;
-
-exports[`renders with PatternFly Core styles 1`] = `
-<div>
-  <div
-    class="pf-c-card__head-main"
-  >
-    text
-  </div>
-</div>
-`;
+exports[`CardHeadMain renders with PatternFly Core styles 1`] = `"<div class=\\"pf-c-card__head-main\\">text</div>"`;

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

@@ -1,8 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`className is added to the root element 1`] = `"pf-c-card__title extra-class"`;
-
-exports[`onExpand adds the toggle button 1`] = `
+exports[`CardHeader onExpand adds the toggle button 1`] = `
 <div>
   <div
     class="pf-c-card__header"
@@ -40,11 +38,3 @@ exports[`onExpand adds the toggle button 1`] = `
   </div>
 </div>
 `;
-
-exports[`renders with PatternFly Core styles 1`] = `
-<div>
-  <div
-    class="pf-c-card__title"
-  />
-</div>
-`;

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

@@ -1,13 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`className is added to the root element 1`] = `"extra-class"`;
-
-exports[`renders with PatternFly Core styles 1`] = `
-<div>
-  <div
-    class=""
-  >
-    text
-  </div>
-</div>
-`;
+exports[`CardHeaderMain renders with PatternFly Core styles 1`] = `"<div class=\\"\\">text</div>"`;

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

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CardTitle renders with PatternFly Core styles 1`] = `"<div class=\\"pf-c-card__title\\">text</div>"`;