@patternfly/react-core 4.202.28 → 4.202.31

package/src/components/ProgressStepper/ProgressStep.tsx

@@ -26,6 +26,9 @@ export interface ProgressStepProps
   popover?: React.ReactNode;
   /** @hide Forwarded reference to title container */
   innerRef?: React.Ref<any>;
+  /** Accessible label for the progress step. Should communicate all information being communicated by the progress
+   * step's icon, including the variant and the completed status. */
+  'aria-label'?: string;
 }
 
 const variantIcons = {
@@ -56,6 +59,7 @@ const ProgressStepBase: React.FunctionComponent<ProgressStepProps> = ({
   titleId,
   popover,
   innerRef,
+  'aria-label': ariaLabel,
   ...props
 }: ProgressStepProps) => {
   const _icon = icon !== undefined ? icon : variantIcons[variant];
@@ -76,6 +80,8 @@ const ProgressStepBase: React.FunctionComponent<ProgressStepProps> = ({
         isCurrent && styles.modifiers.current,
         className
       )}
+      aria-label={ariaLabel}
+      {...(isCurrent && { 'aria-current': 'step' })}
       {...props}
     >
       <div className={css(styles.progressStepperStepConnector)}>

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

@@ -28,6 +28,7 @@ exports[`ProgressStep renders content 1`] = `
 exports[`ProgressStep renders current 1`] = `
 <div>
   <li
+    aria-current="step"
     class="pf-c-progress-stepper__step pf-m-current"
   >
     <div

package/src/components/ProgressStepper/examples/ProgressStepper.md

@@ -33,7 +33,7 @@ import { ProgressStepper, ProgressStep } from '@patternfly/react-core';
     isCurrent
     id="basic-step2"
     titleId="basic-step2-title"
-    aria-label="current step, step with info"
+    aria-label="step with info"
   >
     Second step
   </ProgressStep>
@@ -65,7 +65,7 @@ import { ProgressStepper, ProgressStep } from '@patternfly/react-core';
     description="This is the second thing to happen"
     id="basic-desc-step2"
     titleId="basic-desc-step2-title"
-    aria-label="current step, step with info"
+    aria-label="step with info"
   >
     Second step
   </ProgressStep>
@@ -103,7 +103,7 @@ import { ProgressStepper, ProgressStep } from '@patternfly/react-core';
     description="This is the second thing to happen"
     id="center-desc-step2"
     titleId="center-desc-step2-title"
-    aria-label="current step, step with info"
+    aria-label="step with info"
   >
     Second step
   </ProgressStep>
@@ -141,7 +141,7 @@ import { ProgressStepper, ProgressStep } from '@patternfly/react-core';
     description="This is the second thing to happen"
     id="vertical-desc-step2"
     titleId="vertical-desc-step2-title"
-    aria-label="current step, step with info"
+    aria-label="step with info"
   >
     Second step
   </ProgressStep>
@@ -179,7 +179,7 @@ import { ProgressStepper, ProgressStep } from '@patternfly/react-core';
     isCurrent
     id="compact-step2"
     titleId="compact-step2-title"
-    aria-label="current step, step with info"
+    aria-label="step with info"
   >
     Second step
   </ProgressStep>
@@ -225,7 +225,7 @@ import { ProgressStepper, ProgressStep } from '@patternfly/react-core';
     isCurrent
     id="basic-with-issue-step4"
     titleId="basic-with-issue-step4-title"
-    aria-label="current step, step with info"
+    aria-label="step with info"
   >
     Fourth step
   </ProgressStep>
@@ -276,7 +276,7 @@ import { ProgressStepper, ProgressStep } from '@patternfly/react-core';
     isCurrent
     id="basic-with-failure-step4"
     titleId="basic-with-failure-step4-title"
-    aria-label="current step, step with danger"
+    aria-label="step with danger"
   >
     Fourth step
   </ProgressStep>
@@ -313,7 +313,7 @@ import PendingIcon from '@patternfly/react-icons/dist/esm/icons/pending-icon';
     icon={<InProgressIcon />}
     id="custom-step2"
     titleId="custom-step2-title"
-    aria-label="current step"
+    aria-label="in progress"
   >
     In process
   </ProgressStep>
@@ -384,7 +384,7 @@ PopoverProgressStep = () => {
         variant="info"
         id="popover-step3"
         titleId="popover-step3-title"
-        aria-label="current step with popover"
+        aria-label="step with popover"
         popover={
           <Popover
             aria-label="Third step help"

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

@@ -1,96 +1,90 @@
-import * as React from 'react';
-import { render } from '@testing-library/react';
-import { shallow } from 'enzyme';
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+
 import { Radio } from '../Radio';
 
 const props = {
   onChange: jest.fn()
 };
 
-describe('Radio check component', () => {
+describe('Radio', () => {
   test('controlled', () => {
-    const view = render(<Radio isChecked id="check" aria-label="check" name="check" />);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<Radio isChecked id="check" aria-label="check" name="check" />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('uncontrolled', () => {
-    const view = render(<Radio id="check" aria-label="check" name="check" />);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<Radio id="check" aria-label="check" name="check" />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('isDisabled', () => {
-    const view = render(<Radio id="check" isDisabled aria-label="check" name="check" />);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<Radio id="check" isDisabled aria-label="check" name="check" />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('isLabelBeforeButton', () => {
-    const view = render(<Radio id="check" isLabelBeforeButton label="Radio label" aria-label="check" name="check" />);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<Radio id="check" isLabelBeforeButton label="Radio label" aria-label="check" name="check" />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('isLabelWrapped', () => {
-    const view = render(<Radio id="check" isLabelWrapped label="Radio label" aria-label="check" name="check" />);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<Radio id="check" isLabelWrapped label="Radio label" aria-label="check" name="check" />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('label is string', () => {
-    const view = render(<Radio label="Label" id="check" isChecked aria-label="check" name="check" />);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<Radio label="Label" id="check" isChecked aria-label="check" name="check" />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('label is function', () => {
     const functionLabel = () => <h1>Header</h1>;
-    const view = render(<Radio label={functionLabel()} id="check" isChecked aria-label="check" name="check" />);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<Radio label={functionLabel()} id="check" isChecked aria-label="check" name="check" />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('label is node', () => {
-    const view = render(<Radio label={<h1>Header</h1>} id="check" isChecked aria-label="check" name="check" />);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<Radio label={<h1>Header</h1>} id="check" isChecked aria-label="check" name="check" />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('passing class', () => {
-    const view = render(
-      <Radio label="label" className="class-123" id="check" isChecked aria-label="check" name="check" />
-    );
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<Radio label="label" className="class-123" id="check" isChecked aria-label="check" name="check" />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('passing HTML attribute', () => {
-    const view = render(
-      <Radio label="label" aria-labelledby="labelId" id="check" isChecked aria-label="check" name="check" />
-    );
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<Radio label="label" aria-labelledby="labelId" id="check" isChecked aria-label="check" name="check" />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('Radio passes value and event to onChange handler', () => {
-    const newValue = true;
-    const event = {
-      currentTarget: { checked: newValue }
-    };
-    const view = shallow(<Radio id="check" {...props} aria-label="check" name="check" />);
-    view.find('input').simulate('change', event);
-    expect(props.onChange).toBeCalledWith(newValue, event);
+    render(<Radio id="check" {...props} aria-label="check" name="check" />);
+
+    userEvent.click(screen.getByRole('radio'));
+    expect(props.onChange).toHaveBeenCalledWith(true, expect.any(Object));
   });
 
   test('Radio description', () => {
-    const view = shallow(<Radio id="check" name="check" aria-label="check" description="Text description..." />);
-    const descriptionEl = view.find('span[className="pf-c-radio__description"]');
-    expect(descriptionEl.length).toBe(1);
-    expect(descriptionEl.text()).toBe('Text description...');
+    render(<Radio id="check" name="check" aria-label="check" description="Text description..." />);
+    expect(screen.getByText('Text description...')).toBeInTheDocument();
   });
 
   test('Radio body', () => {
-    const view = shallow(<Radio id="check" name="check" aria-label="check" body="Text body..." />);
-    const bodyEl = view.find('span[className="pf-c-radio__body"]');
-    expect(bodyEl.length).toBe(1);
-    expect(bodyEl.text()).toBe('Text body...');
+    render(<Radio id="check" name="check" aria-label="check" body="Text body..." />);
+    expect(screen.getByText('Text body...')).toBeInTheDocument();
   });
 
   test('should throw console error when no id is given', () => {
     const myMock = jest.fn();
     global.console = { ...global.console, error: myMock };
-    shallow(<Radio name="check" aria-label="check" description="Text description..." />);
+
+    render(<Radio id={undefined} name="check" aria-label="check" description="Text description..." />);
+
     expect(myMock).toBeCalled();
   });
 });

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Radio check component controlled 1`] = `
-<div>
+exports[`Radio controlled 1`] = `
+<DocumentFragment>
   <div
     class="pf-c-radio pf-m-standalone"
   >
@@ -18,11 +18,11 @@ exports[`Radio check component controlled 1`] = `
       type="radio"
     />
   </div>
-</div>
+</DocumentFragment>
 `;
 
-exports[`Radio check component isDisabled 1`] = `
-<div>
+exports[`Radio isDisabled 1`] = `
+<DocumentFragment>
   <div
     class="pf-c-radio pf-m-standalone"
   >
@@ -39,11 +39,11 @@ exports[`Radio check component isDisabled 1`] = `
       type="radio"
     />
   </div>
-</div>
+</DocumentFragment>
 `;
 
-exports[`Radio check component isLabelBeforeButton 1`] = `
-<div>
+exports[`Radio isLabelBeforeButton 1`] = `
+<DocumentFragment>
   <div
     class="pf-c-radio"
   >
@@ -64,11 +64,11 @@ exports[`Radio check component isLabelBeforeButton 1`] = `
       type="radio"
     />
   </div>
-</div>
+</DocumentFragment>
 `;
 
-exports[`Radio check component isLabelWrapped 1`] = `
-<div>
+exports[`Radio isLabelWrapped 1`] = `
+<DocumentFragment>
   <label
     class="pf-c-radio"
     for="check"
@@ -89,11 +89,11 @@ exports[`Radio check component isLabelWrapped 1`] = `
       Radio label
     </span>
   </label>
-</div>
+</DocumentFragment>
 `;
 
-exports[`Radio check component label is function 1`] = `
-<div>
+exports[`Radio label is function 1`] = `
+<DocumentFragment>
   <div
     class="pf-c-radio"
   >
@@ -117,11 +117,11 @@ exports[`Radio check component label is function 1`] = `
       </h1>
     </label>
   </div>
-</div>
+</DocumentFragment>
 `;
 
-exports[`Radio check component label is node 1`] = `
-<div>
+exports[`Radio label is node 1`] = `
+<DocumentFragment>
   <div
     class="pf-c-radio"
   >
@@ -145,11 +145,11 @@ exports[`Radio check component label is node 1`] = `
       </h1>
     </label>
   </div>
-</div>
+</DocumentFragment>
 `;
 
-exports[`Radio check component label is string 1`] = `
-<div>
+exports[`Radio label is string 1`] = `
+<DocumentFragment>
   <div
     class="pf-c-radio"
   >
@@ -171,11 +171,11 @@ exports[`Radio check component label is string 1`] = `
       Label
     </label>
   </div>
-</div>
+</DocumentFragment>
 `;
 
-exports[`Radio check component passing HTML attribute 1`] = `
-<div>
+exports[`Radio passing HTML attribute 1`] = `
+<DocumentFragment>
   <div
     class="pf-c-radio"
   >
@@ -198,11 +198,11 @@ exports[`Radio check component passing HTML attribute 1`] = `
       label
     </label>
   </div>
-</div>
+</DocumentFragment>
 `;
 
-exports[`Radio check component passing class 1`] = `
-<div>
+exports[`Radio passing class 1`] = `
+<DocumentFragment>
   <div
     class="pf-c-radio class-123"
   >
@@ -224,11 +224,11 @@ exports[`Radio check component passing class 1`] = `
       label
     </label>
   </div>
-</div>
+</DocumentFragment>
 `;
 
-exports[`Radio check component uncontrolled 1`] = `
-<div>
+exports[`Radio uncontrolled 1`] = `
+<DocumentFragment>
   <div
     class="pf-c-radio pf-m-standalone"
   >
@@ -244,5 +244,5 @@ exports[`Radio check component uncontrolled 1`] = `
       type="radio"
     />
   </div>
-</div>
+</DocumentFragment>
 `;

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

@@ -1,6 +1,9 @@
 import 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 '@testing-library/jest-dom';
+
 import { SearchInput } from '../SearchInput';
 import { FormGroup } from '../../Form';
 import { Button } from '../../Button';
@@ -15,76 +18,92 @@ const props = {
   onSearch: jest.fn()
 };
 
-test('simple search input', () => {
-  const view = render(<SearchInput {...props} aria-label="simple text input" />);
-  expect(view.container).toMatchSnapshot();
-});
+describe('SearchInput', () => {
+  test('simple search input', () => {
+    const { asFragment } = render(<SearchInput {...props} aria-label="simple text input" />);
+    expect(asFragment()).toMatchSnapshot();
+  });
 
-test('search input with hint', () => {
-  const view = render(<SearchInput {...props} hint="test hint" aria-label="simple text input" />);
-  expect(view.container).toMatchSnapshot();
-});
+  test('search input with hint', () => {
+    const { asFragment } = render(<SearchInput {...props} hint="test hint" aria-label="simple text input" />);
+    expect(asFragment()).toMatchSnapshot();
+  });
 
-test('result count', () => {
-  const view = mount(<SearchInput {...props} resultsCount={3} aria-label="simple text input" />);
-  expect(view.find('.pf-c-badge')).toMatchSnapshot();
-});
+  test('result count', () => {
+    render(<SearchInput {...props} resultsCount={3} aria-label="simple text input" data-testid="test-id" />);
+    expect(screen.getByTestId('test-id').querySelector('.pf-c-badge')).toBeInTheDocument();
+  });
 
-test('navigable search results', () => {
-  const view = mount(
-    <SearchInput
-      {...props}
-      resultsCount='3 / 7'
-      aria-label="simple text input"
-    />);
-  expect(view.find('.pf-c-search-input__nav')).toMatchSnapshot();
-  expect(view.find('.pf-c-badge')).toMatchSnapshot();
-
-  view.find('.pf-c-button').at(0).simulate('click', {});
-  expect(props.onPreviousClick).toBeCalled();
-  view.find('.pf-c-button').at(1).simulate('click', {});
-  expect(props.onNextClick).toBeCalled();
-  view.find('.pf-c-button').at(2).simulate('click', {});
-  expect(props.onClear).toBeCalled();
-});
+  test('navigable search results', () => {
+    render(<SearchInput {...props} resultsCount="3 / 7" aria-label="simple text input" data-testid="test-id" />);
 
-test('hide clear button', () => {
-  const { onClear, ...testProps } = props;
-  const view = mount(
-    <SearchInput {...testProps} resultsCount='3' aria-label="simple text input without on clear" />
-  );
-  expect(view.find('.pf-c-search-input__clear').length).toBe(0);
-});
+    const input = screen.getByTestId('test-id');
+    expect(input.querySelector('.pf-c-search-input__nav')).toBeInTheDocument();
+    expect(input.querySelector('.pf-c-badge')).toBeInTheDocument();
 
-test('advanced search', () => {
-  const view = mount(
-    <SearchInput
-      attributes={[{attr:"username", display:"Username"}, {attr: "firstname", display: "First name"}]}
-      advancedSearchDelimiter=":"
-      value='username:player firstname:john'
-      onChange={props.onChange}
-      onSearch={props.onSearch}
-      onClear={props.onClear}
-    />
-  );
-  view.find('.pf-c-button').at(2).simulate('click', {});
-  expect(props.onSearch).toBeCalled();
-  expect(view.find('input')).toMatchSnapshot();
-});
+    userEvent.click(screen.getByRole('button', { name: 'Previous' }));
+    expect(props.onPreviousClick).toBeCalled();
+
+    userEvent.click(screen.getByRole('button', { name: 'Next' }));
+    expect(props.onNextClick).toBeCalled();
+
+    userEvent.click(screen.getByRole('button', { name: 'Reset' }));
+    expect(props.onClear).toBeCalled();
+  });
+
+  test('hide clear button', () => {
+    const { onClear, ...testProps } = props;
+
+    render(<SearchInput {...testProps} resultsCount="3" aria-label="simple text input without on clear" />);
+    expect(screen.queryByRole('button', { name: 'Reset' })).not.toBeInTheDocument();
+  });
+
+  test('advanced search', () => {
+    const { asFragment } = render(
+      <SearchInput
+        attributes={[
+          { attr: 'username', display: 'Username' },
+          { attr: 'firstname', display: 'First name' }
+        ]}
+        advancedSearchDelimiter=":"
+        value="username:player firstname:john"
+        onChange={props.onChange}
+        onSearch={props.onSearch}
+        onClear={props.onClear}
+      />
+    );
+
+    userEvent.click(screen.getByRole('button', { name: 'Search' }));
+
+    expect(props.onSearch).toBeCalled();
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('advanced search with custom attributes', () => {
+    const { asFragment } = render(
+      <SearchInput
+        attributes={[
+          { attr: 'username', display: 'Username' },
+          { attr: 'firstname', display: 'First name' }
+        ]}
+        advancedSearchDelimiter=":"
+        formAdditionalItems={
+          <FormGroup fieldId="test-form-group">
+            <Button variant="link" isInline icon={<ExternalLinkSquareAltIcon />} iconPosition="right">
+              Link
+            </Button>
+          </FormGroup>
+        }
+        value="username:player firstname:john"
+        onChange={props.onChange}
+        onSearch={props.onSearch}
+        onClear={props.onClear}
+      />
+    );
+
+    userEvent.click(screen.getByRole('button', { name: 'Search' }));
 
-test('advanced search with custom attributes', () => {
-  const view = mount(
-    <SearchInput
-      attributes={[{attr:"username", display:"Username"}, {attr: "firstname", display: "First name"}]}
-      advancedSearchDelimiter=":"
-      formAdditionalItems={<FormGroup fieldId='test-form-group'><Button variant="link" isInline icon={<ExternalLinkSquareAltIcon />} iconPosition="right">Link</Button></FormGroup>}
-      value='username:player firstname:john'
-      onChange={props.onChange}
-      onSearch={props.onSearch}
-      onClear={props.onClear}
-    />
-  );
-  view.find('.pf-c-button').at(2).simulate('click', {});
-  expect(props.onSearch).toBeCalled();
-  expect(view.find('input')).toMatchSnapshot();
+    expect(props.onSearch).toBeCalled();
+    expect(asFragment()).toMatchSnapshot();
+  });
 });