@patternfly/react-core 4.199.1 → 4.199.4

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 4.199.4 (2022-03-19)
+
+**Note:** Version bump only for package @patternfly/react-core
+
+
+
+
+
+## 4.199.3 (2022-03-17)
+
+**Note:** Version bump only for package @patternfly/react-core
+
+
+
+
+
+## 4.199.2 (2022-03-17)
+
+**Note:** Version bump only for package @patternfly/react-core
+
+
+
+
+
 ## 4.199.1 (2022-03-16)
 
 **Note:** Version bump only for package @patternfly/react-core

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.199.1",
+  "version": "4.199.4",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -34,9 +34,9 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.50.1",
-    "@patternfly/react-styles": "^4.49.1",
-    "@patternfly/react-tokens": "^4.51.1",
+    "@patternfly/react-icons": "^4.50.4",
+    "@patternfly/react-styles": "^4.49.4",
+    "@patternfly/react-tokens": "^4.51.4",
     "focus-trap": "6.2.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "1cd7ab585c501674c2a1d741f460f73be08ad861"
+  "gitHead": "e6697ee34e57a0c8c5051937c5e5ed2dcddce3e2"
 }

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

@@ -1,72 +1,53 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-import { shallow } from 'enzyme';
-import { AboutModal } from '../AboutModal';
-import { KEY_CODES } from '../../../helpers/constants';
 
-const mockListener = jest.spyOn(ReactDOM, 'createPortal');
-jest.spyOn(document, 'createElement');
-jest.spyOn(document.body, 'addEventListener');
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
-mockListener.mockImplementation(node => node as React.ReactPortal);
+import { AboutModal, AboutModalProps } from '../AboutModal';
 
-const props = {
+const props: AboutModalProps = {
   onClose: jest.fn(),
   children: 'modal content',
   productName: 'Product Name',
   trademark: 'Trademark and copyright information here',
   brandImageSrc: 'brandImg...',
-  brandImageAlt: 'Brand Image',
-  logoImageSrc: 'logoImg...',
-  logoImageAlt: 'AboutModal Logo'
+  brandImageAlt: 'Brand Image'
 };
 
-test('AboutModal creates a container element once for div', () => {
-  const view = shallow(<AboutModal {...props}> Test About Modal </AboutModal>);
-  view.update();
-  expect(document.createElement).toBeCalledWith('div');
-  expect(document.createElement).toHaveBeenCalledTimes(1);
-});
-
-test('About Modal closes with escape', () => {
-  shallow(
-    <AboutModal {...props} isOpen>
-      Test About Modal
-    </AboutModal>
-  );
-  const [event, handler] = (document.body.addEventListener as any).mock.calls[0];
-  expect(event).toBe('keydown');
-  handler({ keyCode: KEY_CODES.ESCAPE_KEY });
-  expect(props.onClose).toBeCalled();
-});
-
-test('modal does not call onClose for esc key if it is not open', () => {
-  shallow(<AboutModal {...props} />);
-  const [event, handler] = (document.body.addEventListener as any).mock.calls[0];
-  expect(event).toBe('keydown');
-  handler({ keyCode: KEY_CODES.ESCAPE_KEY });
-  expect(props.onClose).not.toBeCalled();
-});
-
-test('Each modal is given new aria-describedby and aria-labelledby', () => {
-  const first = new AboutModal(props);
-  const second = new AboutModal(props);
-  expect(first.ariaLabelledBy).not.toBe(second.ariaLabelledBy);
-  expect(first.ariaDescribedBy).not.toBe(second.ariaDescribedBy);
-});
-
-test('Console error is generated when the logoImageSrc is provided without logoImageAlt', () => {
-  const noImgAltrops = {
-    onClose: jest.fn(),
-    children: 'modal content',
-    productName: 'Product Name',
-    trademark: 'Trademark and copyright information here',
-    brandImageSrc: 'brandImg...',
-    logoImageSrc: 'logoImg...'
-  };
-  const myMock = jest.fn() as any;
-  global.console = { error: myMock } as any;
-  const JSAboutModal = AboutModal as any;
-  shallow(<JSAboutModal {...noImgAltrops}> Test About Modal </JSAboutModal>);
-  expect(myMock).toBeCalled();
+describe('AboutModal', () => {
+  test('closes with escape', () => {
+    render(<AboutModal {...props} isOpen />);
+
+    userEvent.type(screen.getByRole('dialog'), '{esc}');
+    expect(props.onClose).toBeCalled();
+  });
+
+  test('does not render the modal when isOpen is not specified', () => {
+    render(<AboutModal {...props} />);
+    expect(screen.queryByRole('dialog')).toBeNull();
+  });
+
+  test('Each modal is given new aria-describedby and aria-labelledby', () => {
+    const first = new AboutModal(props);
+    const second = new AboutModal(props);
+
+    expect(first.ariaLabelledBy).not.toBe(second.ariaLabelledBy);
+    expect(first.ariaDescribedBy).not.toBe(second.ariaDescribedBy);
+  });
+
+  test('Console error is generated when the logoImageSrc is provided without logoImageAlt', () => {
+    const noImgAltrops = {
+      onClose: jest.fn(),
+      children: 'modal content',
+      productName: 'Product Name',
+      trademark: 'Trademark and copyright information here',
+      brandImageSrc: 'brandImg...',
+      logoImageSrc: 'logoImg...'
+    } as any;
+    const myMock = jest.fn() as any;
+    global.console = { error: myMock } as any;
+
+    render(<AboutModal {...noImgAltrops}>Test About Modal</AboutModal>);
+    expect(myMock).toBeCalled();
+  });
 });

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