@patternfly/react-core 4.199.2 → 4.199.5

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

@@ -1,6 +1,8 @@
 import React from 'react';
-import { render } from '@testing-library/react';
-import { mount } from 'enzyme';
+
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
 import { Accordion } from '../Accordion';
 import { AccordionToggle } from '../AccordionToggle';
 import { AccordionContent } from '../AccordionContent';
@@ -26,31 +28,34 @@ describe('Accordion', () => {
   });
 
   test('It should pass optional aria props', () => {
-    const view = mount(
+    render(
       <Accordion asDefinitionList>
         <AccordionToggle aria-label="Toggle details for" aria-labelledby="ex-toggle2 ex-item2" id="ex-toggle2" />
       </Accordion>
     );
-    const button = view.find('button[id="ex-toggle2"]').getElement();
-    expect(button.props['aria-label']).toBe('Toggle details for');
-    expect(button.props['aria-labelledby']).toBe('ex-toggle2 ex-item2');
-    expect(button.props['aria-expanded']).toBe(false);
+    const button = screen.getByRole('button');
+
+    expect(button.getAttribute('aria-label')).toEqual('Toggle details for');
+    expect(button.getAttribute('aria-labelledby')).toEqual('ex-toggle2 ex-item2');
+    expect(button.getAttribute('aria-expanded')).toEqual('false');
   });
 
   test('Toggle expanded', () => {
-    const view = mount(
+    render(
       <Accordion asDefinitionList>
         <AccordionToggle aria-label="Toggle details for" id="ex-toggle2" isExpanded />
       </Accordion>
     );
-    const button = view.find('button[id="ex-toggle2"]').getElement();
-    expect(button.props['aria-expanded']).toBe(true);
-    expect(button.props.className).toContain('pf-m-expanded');
+    const button = screen.getByRole('button');
+
+    expect(button.getAttribute('aria-expanded')).toEqual('true');
+    expect(button.className).toContain('pf-m-expanded');
   });
 
-  test('Custom containers', () => {
+  test('renders content with custom Toggle and Content containers', () => {
     const container = 'a';
-    const view = mount(
+
+    const view = render(
       <Accordion headingLevel="h2">
         <AccordionItem>
           <AccordionToggle id="item-1" component={container}>
@@ -60,8 +65,9 @@ describe('Accordion', () => {
         </AccordionItem>
       </Accordion>
     );
-    expect(view.find(AccordionToggle).getDOMNode().tagName).toBe(container.toLocaleUpperCase());
-    expect(view.find(AccordionContent).getDOMNode().tagName).toBe(container.toLocaleUpperCase());
+
+    expect(screen.getByText('Item One')).toBeInTheDocument();
+    expect(screen.getByText('Item One Content')).toBeInTheDocument();
   });
 
   test('Accordion bordered', () => {
@@ -78,7 +84,7 @@ describe('Accordion', () => {
 
   test('Accordion display large', () => {
     const view = render(
-      <Accordion displaySize='large'>
+      <Accordion displaySize="large">
         <AccordionItem>
           <AccordionToggle id="item-1">Item One</AccordionToggle>
           <AccordionContent>Item One Content</AccordionContent>
@@ -96,7 +102,7 @@ describe('Accordion', () => {
           <AccordionContent isCustomContent>
             <AccordionExpandedContentBody>Item one content body 1</AccordionExpandedContentBody>
             <AccordionExpandedContentBody>Item one Content body 2</AccordionExpandedContentBody>
-            </AccordionContent>
+          </AccordionContent>
         </AccordionItem>
       </Accordion>
     );

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

@@ -1,197 +1,208 @@
 import * as React from 'react';
-import { render } from '@testing-library/react';
-import { mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 import { Alert, AlertVariant } from '../Alert';
 import { AlertActionLink } from '../AlertActionLink';
 import { AlertActionCloseButton } from '../AlertActionCloseButton';
 import { UsersIcon } from '@patternfly/react-icons';
 
-test('default Alert variant is default', () => {
-  const view = mount(<Alert title="this is a test">Alert testing</Alert>);
-  expect(
-    view
-      .find('Alert')
-      .childAt(0)
-      .prop('className')
-  ).toContain('pf-c-alert');
-});
-
-Object.values(AlertVariant).forEach(variant => {
-  describe(`Alert - ${variant}`, () => {
-    test('Description', () => {
-      const view = render(
-        <Alert variant={variant} title="">
-          Some alert
-        </Alert>
-      );
-      expect(view.container).toMatchSnapshot();
-    });
-
-    test('Title', () => {
-      const view = render(
-        <Alert variant={variant} title="Some title">
-          Some alert
-        </Alert>
-      );
-      expect(view.container).toMatchSnapshot();
-    });
-
-    test('Heading level', () => {
-      const view = render(
-        <Alert variant={variant} title="Some title" titleHeadingLevel="h1">
-          Some alert
-        </Alert>
-      );
-      expect(view.container).toMatchSnapshot();
-    });
-
-    test('Action Link', () => {
-      const view = render(
-        <Alert variant={variant} actionLinks={[<AlertActionLink key={'action-1'}>test</AlertActionLink>]} title="">
-          Some alert
-        </Alert>
-      );
-      expect(view.container).toMatchSnapshot();
-    });
-
-    test('Action Close Button', () => {
-      const onClose = jest.fn();
-      const view = mount(
-        <Alert
-          variant={variant}
-          actionClose={<AlertActionCloseButton aria-label="Close" onClose={onClose} />}
-          title={`Sample ${variant} alert`}
-        >
-          Some alert
-        </Alert>
-      );
-      expect(view).toMatchSnapshot();
-      view.find('button[aria-label="Close"]').simulate('click');
-      expect(onClose).toHaveBeenCalled();
-    });
-
-    test('Action and Title', () => {
-      const view = render(
-        <Alert variant={variant} actionLinks={[<AlertActionLink key={'action-1'}>test</AlertActionLink>]} title="Some title">
-          Some alert
-        </Alert>
-      );
-      expect(view.container).toMatchSnapshot();
-    });
-
-    test('Custom aria label', () => {
-      const view = render(
-        <Alert
-          variant={variant}
-          aria-label={`Custom aria label for ${variant}`}
-          actionLinks={[<AlertActionLink key={'action-1'}>test</AlertActionLink>]}
-          title="Some title"
-        >
-          Some alert
-        </Alert>
-      );
-      expect(view.container).toMatchSnapshot();
-    });
-
-    test('inline variation', () => {
-      const view = render(
-        <Alert variant={variant} isInline title="Some title">
-          Some alert
-        </Alert>
-      );
-      expect(view.container).toMatchSnapshot();
-    });
-
-    test('expandable variation', () => {
-      const view = render(
-        <Alert variant={variant} title="Some title" isExpandable>
-          <p>Success alert description. This should tell the user more information about the alert.</p>
-        </Alert>
-      )
-      expect(view.container).toMatchSnapshot();
-    })
-
-    test('expandable variation description hidden', () => {
-      const wrapper = mount(
-        <Alert variant={variant} title="Some title" isExpandable>
-          <p>Success alert description. This should tell the user more information about the alert.</p>
-        </Alert>
-      )
-      const descriptionExists = wrapper.find('.pf-c-alert__description').exists();
-      expect(descriptionExists).toBeFalsy();
-    })
-
-    test('Toast alerts match snapsnot', () => {
-      const view = render(
-        <Alert isLiveRegion={true} variant={variant} aria-label={`${variant} toast alert`} title="Some title">
-          Some toast alert
-        </Alert>
-      );
-      expect(view.container).toMatchSnapshot();
-    });
-
-    test('Toast alerts contain default live region', () => {
-      const wrapper = mount(
-        <Alert isLiveRegion={true} variant={variant} aria-label={`${variant} toast alert`} title="Some title">
-          Some toast alert
-        </Alert>
-      );
-      const liveRegion = wrapper.find({ 'aria-live': 'polite' }).length;
-      expect(liveRegion).toBe(1);
-    });
-
-    test('Toast alert live regions are not atomic', () => {
-      const wrapper = mount(
-        <Alert isLiveRegion={true} variant={variant} aria-label={`${variant} toast alert`} title="Some title">
-          Some toast alert
-        </Alert>
-      );
-      expect(wrapper.find('.pf-c-alert').prop('aria-atomic')).toBe('false');
-    });
-
-    test('Non-toast alerts can have custom live region settings', () => {
-      const wrapper = mount(
-        <Alert
-          aria-live="assertive"
-          aria-relevant="all"
-          aria-atomic="true"
-          variant={variant}
-          aria-label={`${variant} toast alert`}
-          title="Some title"
-        >
-          Some noisy alert
-        </Alert>
-      );
-      const alert = wrapper.find(Alert);
-
-      expect(alert.prop('aria-live')).toBe('assertive');
-      expect(alert.prop('aria-relevant')).toBe('all');
-      expect(alert.prop('aria-atomic')).toBe('true');
-    });
+describe('Alert', () => {
+  test('default Alert variant is default', () => {
+    render(<Alert title="this is a test">Alert testing</Alert>);
+    expect(screen.getByText('this is a test').className).toContain('pf-c-alert');
+  });
 
-    test('Custom icon', () => {
-      const view = render(
-        <Alert
-          customIcon={<UsersIcon />}
-          variant={variant}
-          aria-label={`${variant} custom icon alert`}
-          title="custom icon alert title"
-        >
-          Some noisy alert
-        </Alert>
-      );
-      expect(view.container).toMatchSnapshot();
+  Object.values(AlertVariant).forEach(variant => {
+    describe(`Alert - ${variant}`, () => {
+      test('Description', () => {
+        const view = render(
+          <Alert variant={variant} title="">
+            Some alert
+          </Alert>
+        );
+        expect(view.container).toMatchSnapshot();
+      });
+
+      test('Title', () => {
+        const view = render(
+          <Alert variant={variant} title="Some title">
+            Some alert
+          </Alert>
+        );
+        expect(view.container).toMatchSnapshot();
+      });
+
+      test('Heading level', () => {
+        const view = render(
+          <Alert variant={variant} title="Some title" titleHeadingLevel="h1">
+            Some alert
+          </Alert>
+        );
+        expect(view.container).toMatchSnapshot();
+      });
+
+      test('Action Link', () => {
+        const view = render(
+          <Alert variant={variant} actionLinks={[<AlertActionLink key={'action-1'}>test</AlertActionLink>]} title="">
+            Some alert
+          </Alert>
+        );
+        expect(view.container).toMatchSnapshot();
+      });
+
+      test('Action Close Button', () => {
+        const onClose = jest.fn();
+
+        render(
+          <Alert
+            variant={variant}
+            actionClose={<AlertActionCloseButton aria-label="Close" onClose={onClose} />}
+            title={`Sample ${variant} alert`}
+          >
+            Some alert
+          </Alert>
+        );
+
+        userEvent.click(screen.getByLabelText('Close'));
+        expect(onClose).toHaveBeenCalled();
+      });
+
+      test('Action and Title', () => {
+        const view = render(
+          <Alert
+            variant={variant}
+            actionLinks={[<AlertActionLink key={'action-1'}>test</AlertActionLink>]}
+            title="Some title"
+          >
+            Some alert
+          </Alert>
+        );
+        expect(view.container).toMatchSnapshot();
+      });
+
+      test('Custom aria label', () => {
+        const view = render(
+          <Alert
+            variant={variant}
+            aria-label={`Custom aria label for ${variant}`}
+            actionLinks={[<AlertActionLink key={'action-1'}>test</AlertActionLink>]}
+            title="Some title"
+          >
+            Some alert
+          </Alert>
+        );
+        expect(view.container).toMatchSnapshot();
+      });
+
+      test('inline variation', () => {
+        const view = render(
+          <Alert variant={variant} isInline title="Some title">
+            Some alert
+          </Alert>
+        );
+        expect(view.container).toMatchSnapshot();
+      });
+
+      test('expandable variation', () => {
+        const view = render(
+          <Alert variant={variant} title="Some title" isExpandable>
+            <p>Success alert description. This should tell the user more information about the alert.</p>
+          </Alert>
+        );
+        expect(view.container).toMatchSnapshot();
+      });
+
+      test('expandable variation description hidden', () => {
+        const description = 'Success alert description.';
+
+        render(
+          <Alert variant={variant} title="Some title" isExpandable>
+            <p>{description}</p>
+          </Alert>
+        );
+
+        expect(screen.queryByText(description)).toBeNull();
+      });
+
+      test('Toast alerts match snapsnot', () => {
+        const view = render(
+          <Alert isLiveRegion={true} variant={variant} aria-label={`${variant} toast alert`} title="Some title">
+            Some toast alert
+          </Alert>
+        );
+        expect(view.container).toMatchSnapshot();
+      });
+
+      test('Toast alerts contain default live region', () => {
+        const ariaLabel = `${variant} toast alert`;
+
+        render(
+          <Alert isLiveRegion={true} variant={variant} aria-label={ariaLabel} title="Some title">
+            Some toast alert
+          </Alert>
+        );
+
+        expect(screen.getByLabelText(ariaLabel).getAttribute('aria-live')).toEqual('polite');
+      });
+
+      test('Toast alert live regions are not atomic', () => {
+        const ariaLabel = `${variant} toast alert`;
+
+        render(
+          <Alert isLiveRegion={true} variant={variant} aria-label={ariaLabel} title="Some title">
+            Some toast alert
+          </Alert>
+        );
+
+        expect(screen.getByLabelText(ariaLabel).getAttribute('aria-atomic')).toEqual('false');
+      });
+
+      test('Non-toast alerts can have custom live region settings', () => {
+        const ariaLabel = `${variant} toast alert`;
+
+        render(
+          <Alert
+            aria-live="assertive"
+            aria-relevant="all"
+            aria-atomic="true"
+            variant={variant}
+            aria-label={ariaLabel}
+            title="Some title"
+          >
+            Some noisy alert
+          </Alert>
+        );
+        const alert = screen.getByLabelText(ariaLabel);
+
+        expect(alert.getAttribute('aria-live')).toEqual('assertive');
+        expect(alert.getAttribute('aria-relevant')).toEqual('all');
+        expect(alert.getAttribute('aria-atomic')).toEqual('true');
+      });
+
+      test('Custom icon', () => {
+        const view = render(
+          <Alert
+            customIcon={<UsersIcon />}
+            variant={variant}
+            aria-label={`${variant} custom icon alert`}
+            title="custom icon alert title"
+          >
+            Some noisy alert
+          </Alert>
+        );
+        expect(view.container).toMatchSnapshot();
+      });
     });
   });
-});
 
+  test('Alert truncate title', () => {
+    render(
+      <Alert truncateTitle={1} title="this is a test">
+        Alert testing
+      </Alert>
+    );
 
-test('Alert truncate title', () => {
-  const view = mount(<Alert truncateTitle={1} title="this is a test">Alert testing</Alert>);
-  expect(
-    view
-      .find('h4')
-      .prop('className')
-  ).toContain('pf-m-truncate');
+    expect(screen.getByText('this is a test').className).toContain('pf-m-truncate');
+  });
 });

package/src/components/Alert/__tests__/Generated/AlertActionCloseButton.test.tsx

@@ -1,20 +1,22 @@
-/**
- * This test was generated
- */
-import * as React from 'react';
-import { shallow } from 'enzyme';
+import React from 'react';
+
+import { render } from '@testing-library/react';
+
 import { AlertActionCloseButton } from '../../AlertActionCloseButton';
-// any missing imports can usually be resolved by adding them here
-import {} from '../..';
+import { AlertContext } from '../../AlertContext';
 
-it('AlertActionCloseButton should match snapshot (auto-generated)', () => {
-  const view = shallow(
-    <AlertActionCloseButton
-      className={"''"}
-      onClose={() => undefined as any}
-      aria-label={"''"}
-      variantLabel={'string'}
-    />
-  );
-  expect(view).toMatchSnapshot();
+describe('AlertActionCloseButton', () => {
+  it('should match snapshot', () => {
+    const view = render(
+      <AlertContext.Provider value={{ title: 'test title', variantLabel: 'some label' }}>
+        <AlertActionCloseButton
+          className=""
+          onClose={() => console.log('close clicked')}
+          aria-label=""
+          variantLabel=""
+        />
+      </AlertContext.Provider>
+    );
+    expect(view.container).toMatchSnapshot();
+  });
 });

package/src/components/Alert/__tests__/Generated/__snapshots__/AlertActionCloseButton.test.tsx.snap

@@ -1,7 +1,29 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`AlertActionCloseButton should match snapshot (auto-generated) 1`] = `
-<ContextConsumer>
-  <Component />
-</ContextConsumer>
+exports[`AlertActionCloseButton should match snapshot 1`] = `
+<div>
+  <button
+    aria-disabled="false"
+    aria-label="Close some label alert: test title"
+    class="pf-c-button pf-m-plain"
+    data-ouia-component-id="OUIA-Generated-Button-plain-1"
+    data-ouia-component-type="PF4/Button"
+    data-ouia-safe="true"
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      fill="currentColor"
+      height="1em"
+      role="img"
+      style="vertical-align: -0.125em;"
+      viewBox="0 0 352 512"
+      width="1em"
+    >
+      <path
+        d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+      />
+    </svg>
+  </button>
+</div>
 `;