@patternfly/react-core 4.200.0 → 4.201.0

package/src/components/Select/__tests__/SelectOption.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import { render } from '@testing-library/react';
-import { shallow, mount } from 'enzyme';
+
+import { render, screen } from '@testing-library/react';
+
 import { SelectOption, SelectOptionObject } from '../SelectOption';
 import { SelectProvider } from '../selectConstants';
 
@@ -18,43 +19,48 @@ class User implements SelectOptionObject {
   toString = (): string => `${this.title}: ${this.firstName} ${this.lastName}`;
 }
 
-describe('select options', () => {
+describe('SelectOption', () => {
   test('renders with value parameter successfully', () => {
-    const view = mount(
+    render(
       <SelectProvider
         value={{ onSelect: () => {}, onFavorite: () => {}, onClose: () => {}, variant: 'single', inputIdPrefix: '' }}
       >
-        <SelectOption id="option-1" value="test" sendRef={jest.fn()} />
+        <SelectOption id="option-1" value="test" sendRef={jest.fn()} data-testid="test-id" />
       </SelectProvider>
     );
-    expect(view.instance().props).toHaveProperty('value', 'test');
-    expect(view).toMatchSnapshot();
+    expect(screen.getByTestId('test-id').outerHTML).toMatchSnapshot();
   });
 
   test('renders with description successfully', () => {
-    const view = render(
+    render(
       <SelectProvider
         value={{ onSelect: () => {}, onFavorite: () => {}, onClose: () => {}, variant: 'single', inputIdPrefix: '' }}
       >
-        <SelectOption id="option-1" value="test" description="This is a description" sendRef={jest.fn()} />
+        <SelectOption
+          id="option-1"
+          value="test"
+          description="This is a description"
+          sendRef={jest.fn()}
+          data-testid="test-id"
+        />
       </SelectProvider>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(screen.getByTestId('test-id').outerHTML).toMatchSnapshot();
   });
 
   test('renders with item count successfully', () => {
-    const view = render(
+    render(
       <SelectProvider
         value={{ onSelect: () => {}, onFavorite: () => {}, onClose: () => {}, variant: 'single', inputIdPrefix: '' }}
       >
-        <SelectOption id="option-1" value="test" itemCount={3} sendRef={jest.fn()} />
+        <SelectOption id="option-1" value="test" itemCount={3} sendRef={jest.fn()} data-testid="test-id" />
       </SelectProvider>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(screen.getByTestId('test-id').outerHTML).toMatchSnapshot();
   });
 
   test('renders with custom display successfully', () => {
-    const view = render(
+    render(
       <SelectProvider
         value={{ onSelect: () => {}, onFavorite: () => {}, onClose: () => {}, variant: 'single', inputIdPrefix: '' }}
       >
@@ -63,22 +69,22 @@ describe('select options', () => {
         </SelectOption>
       </SelectProvider>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(screen.getByText('test display').outerHTML).toMatchSnapshot();
   });
 
   test('renders with custom user object successfully', () => {
-    const view = render(
+    render(
       <SelectProvider
         value={{ onSelect: () => {}, onFavorite: () => {}, onClose: () => {}, variant: 'single', inputIdPrefix: '' }}
       >
-        <SelectOption id="option-1" value={new User('Mr.', 'Test', 'User')} sendRef={jest.fn()} />
+        <SelectOption id="option-1" value={new User('Mr.', 'Test', 'User')} sendRef={jest.fn()} data-testid="test-id" />
       </SelectProvider>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(screen.getByTestId('test-id').outerHTML).toMatchSnapshot();
   });
 
   test('renders with custom display and custom user object successfully', () => {
-    const view = render(
+    render(
       <SelectProvider
         value={{ onSelect: () => {}, onFavorite: () => {}, onClose: () => {}, variant: 'single', inputIdPrefix: '' }}
       >
@@ -87,11 +93,11 @@ describe('select options', () => {
         </SelectOption>
       </SelectProvider>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(screen.getByText('test display').outerHTML).toMatchSnapshot();
   });
 
   test('renders custom component', () => {
-    const view = render(
+    render(
       <SelectProvider
         value={{ onSelect: () => {}, onFavorite: () => {}, onClose: () => {}, variant: 'single', inputIdPrefix: '' }}
       >
@@ -100,34 +106,47 @@ describe('select options', () => {
         </SelectOption>
       </SelectProvider>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(screen.getByText('test display').outerHTML).toMatchSnapshot();
   });
 
   describe('disabled', () => {
     test('renders disabled successfully', () => {
-      const view = mount(
+      render(
         <SelectProvider
           value={{ onSelect: () => {}, onFavorite: () => {}, onClose: () => {}, variant: 'single', inputIdPrefix: '' }}
         >
-          <SelectOption id="option-1" isDisabled value="test" sendRef={jest.fn()} />
+          <SelectOption id="option-1" isDisabled value="test" sendRef={jest.fn()} data-testid="test-id" />
         </SelectProvider>
       );
-      expect(view.find('button').hasClass('pf-m-disabled')).toBe(true);
-      expect(view).toMatchSnapshot();
+
+      expect(screen.getByText('test').className).toContain('pf-m-disabled');
+      expect(screen.getByTestId('test-id').outerHTML).toMatchSnapshot();
     });
   });
 
   describe('is selected', () => {
     test('renders selected successfully', () => {
-      const view = shallow(<SelectOption id="option-1" isSelected value="test" sendRef={jest.fn()} />);
-      expect(view).toMatchSnapshot();
+      render(
+        <SelectProvider
+          value={{ onSelect: () => {}, onFavorite: () => {}, onClose: () => {}, variant: 'single', inputIdPrefix: '' }}
+        >
+          <SelectOption id="option-1" isSelected value="test" sendRef={jest.fn()} data-testid="test-id" />
+        </SelectProvider>
+      );
+      expect(screen.getByTestId('test-id').outerHTML).toMatchSnapshot();
     });
   });
 
   describe('checked', () => {
     test('renders with checked successfully', () => {
-      const view = shallow(<SelectOption id="option-1" isChecked value="test" sendRef={jest.fn()} />);
-      expect(view).toMatchSnapshot();
+      render(
+        <SelectProvider
+          value={{ onSelect: () => {}, onFavorite: () => {}, onClose: () => {}, variant: 'single', inputIdPrefix: '' }}
+        >
+          <SelectOption id="option-1" isChecked value="test" sendRef={jest.fn()} data-testid="test-id" />
+        </SelectProvider>
+      );
+      expect(screen.getByTestId('test-id').outerHTML).toMatchSnapshot();
     });
   });
 
@@ -135,6 +154,7 @@ describe('select options', () => {
     test('generates warning when id is undefined and isFavorites is set', () => {
       const myMock = jest.fn() as any;
       global.console = { error: myMock } as any;
+
       render(
         <SelectProvider
           value={{ onSelect: () => {}, onFavorite: () => {}, onClose: () => {}, variant: 'single', inputIdPrefix: '' }}
@@ -142,6 +162,7 @@ describe('select options', () => {
           <SelectOption isFavorite value="test" sendRef={jest.fn()} />
         </SelectProvider>
       );
+
       expect(myMock).toBeCalled();
     });
   });

package/src/components/Select/__tests__/__snapshots__/SelectGroup.test.tsx.snap

@@ -1,7 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`select group renders with children successfully 1`] = `
-<ContextConsumer>
-  <Component />
-</ContextConsumer>
-`;
+exports[`SelectGroup renders with children successfully 1`] = `"<div data-testid=\\"test-id\\" class=\\"pf-c-select__menu-group\\"><div class=\\"pf-c-select__menu-group-title\\" id=\\"\\" aria-hidden=\\"true\\">test</div><ul role=\\"listbox\\"><div>child</div></ul></div>"`;

package/src/components/Select/__tests__/__snapshots__/SelectOption.test.tsx.snap

@@ -1,283 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`select options checked renders with checked successfully 1`] = `
-<ContextConsumer>
-  <Component />
-</ContextConsumer>
-`;
+exports[`SelectOption checked renders with checked successfully 1`] = `"<button data-testid=\\"test-id\\" class=\\"pf-c-select__menu-item\\" role=\\"option\\" type=\\"button\\">test</button>"`;
 
-exports[`select options disabled renders disabled successfully 1`] = `
-<SelectOption
-  className=""
-  component="button"
-  id="option-1"
-  index={0}
-  inputId=""
-  isChecked={false}
-  isDisabled={true}
-  isFavorite={null}
-  isLastOptionBeforeFooter={[Function]}
-  isLoad={false}
-  isLoading={false}
-  isNoResultsOption={false}
-  isPlaceholder={false}
-  isSelected={false}
-  keyHandler={[Function]}
-  onClick={[Function]}
-  sendRef={
-    [MockFunction] {
-      "calls": Array [
-        Array [
-          null,
-          null,
-          null,
-          0,
-        ],
-      ],
-      "results": Array [
-        Object {
-          "type": "return",
-          "value": undefined,
-        },
-      ],
-    }
-  }
-  setViewMoreNextIndex={[Function]}
-  value="test"
->
-  <li
-    className="pf-c-select__menu-wrapper"
-    id="option-1"
-    role="presentation"
-  >
-    <button
-      aria-selected={null}
-      className="pf-c-select__menu-item pf-m-disabled"
-      onClick={[Function]}
-      onKeyDown={[Function]}
-      role="option"
-      type="button"
-    >
-      test
-    </button>
-  </li>
-</SelectOption>
-`;
+exports[`SelectOption disabled renders disabled successfully 1`] = `"<button data-testid=\\"test-id\\" class=\\"pf-c-select__menu-item pf-m-disabled\\" role=\\"option\\" type=\\"button\\">test</button>"`;
 
-exports[`select options is selected renders selected successfully 1`] = `
-<ContextConsumer>
-  <Component />
-</ContextConsumer>
-`;
+exports[`SelectOption is selected renders selected successfully 1`] = `"<button data-testid=\\"test-id\\" class=\\"pf-c-select__menu-item pf-m-selected\\" role=\\"option\\" aria-selected=\\"true\\" type=\\"button\\">test<span class=\\"pf-c-select__menu-item-icon\\"><svg style=\\"vertical-align: -0.125em;\\" fill=\\"currentColor\\" height=\\"1em\\" width=\\"1em\\" viewBox=\\"0 0 512 512\\" aria-hidden=\\"true\\" role=\\"img\\"><path d=\\"M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z\\"></path></svg></span></button>"`;
 
-exports[`select options renders custom component 1`] = `
-<div>
-  <li
-    class="pf-c-select__menu-wrapper"
-    id="option-1"
-    role="presentation"
-  >
-    <div
-      class="pf-c-select__menu-item"
-      role="option"
-      type="button"
-    >
-      <div>
-        test display
-      </div>
-    </div>
-  </li>
-</div>
-`;
+exports[`SelectOption renders custom component 1`] = `"<div>test display</div>"`;
 
-exports[`select options renders with custom display and custom user object successfully 1`] = `
-<div>
-  <li
-    class="pf-c-select__menu-wrapper"
-    id="option-1"
-    role="presentation"
-  >
-    <button
-      class="pf-c-select__menu-item"
-      role="option"
-      type="button"
-    >
-      <div>
-        test display
-      </div>
-    </button>
-  </li>
-</div>
-`;
+exports[`SelectOption renders with custom display and custom user object successfully 1`] = `"<div>test display</div>"`;
 
-exports[`select options renders with custom display successfully 1`] = `
-<div>
-  <li
-    class="pf-c-select__menu-wrapper"
-    id="option-1"
-    role="presentation"
-  >
-    <button
-      class="pf-c-select__menu-item"
-      role="option"
-      type="button"
-    >
-      <div>
-        test display
-      </div>
-    </button>
-  </li>
-</div>
-`;
+exports[`SelectOption renders with custom display successfully 1`] = `"<div>test display</div>"`;
 
-exports[`select options renders with custom user object successfully 1`] = `
-<div>
-  <li
-    class="pf-c-select__menu-wrapper"
-    id="option-1"
-    role="presentation"
-  >
-    <button
-      class="pf-c-select__menu-item"
-      role="option"
-      type="button"
-    >
-      Mr.: Test User
-    </button>
-  </li>
-</div>
-`;
+exports[`SelectOption renders with custom user object successfully 1`] = `"<button data-testid=\\"test-id\\" class=\\"pf-c-select__menu-item\\" role=\\"option\\" type=\\"button\\">Mr.: Test User</button>"`;
 
-exports[`select options renders with description successfully 1`] = `
-<div>
-  <li
-    class="pf-c-select__menu-wrapper"
-    id="option-1"
-    role="presentation"
-  >
-    <button
-      class="pf-c-select__menu-item pf-m-description"
-      role="option"
-      type="button"
-    >
-      <span
-        class="pf-c-select__menu-item-main"
-      >
-        test
-      </span>
-      <span
-        class="pf-c-select__menu-item-description"
-      >
-        This is a description
-      </span>
-    </button>
-  </li>
-</div>
-`;
+exports[`SelectOption renders with description successfully 1`] = `"<button data-testid=\\"test-id\\" class=\\"pf-c-select__menu-item pf-m-description\\" role=\\"option\\" type=\\"button\\"><span class=\\"pf-c-select__menu-item-main\\">test</span><span class=\\"pf-c-select__menu-item-description\\">This is a description</span></button>"`;
 
-exports[`select options renders with item count successfully 1`] = `
-<div>
-  <li
-    class="pf-c-select__menu-wrapper"
-    id="option-1"
-    role="presentation"
-  >
-    <button
-      class="pf-c-select__menu-item"
-      role="option"
-      type="button"
-    >
-      <span
-        class="pf-c-select__menu-item-row"
-      >
-        <span
-          class="pf-c-select__menu-item-text"
-        >
-          test
-        </span>
-        <span
-          class="pf-c-select__menu-item-count"
-        >
-          3
-        </span>
-      </span>
-    </button>
-  </li>
-</div>
-`;
+exports[`SelectOption renders with item count successfully 1`] = `"<button data-testid=\\"test-id\\" class=\\"pf-c-select__menu-item\\" role=\\"option\\" type=\\"button\\"><span class=\\"pf-c-select__menu-item-row\\"><span class=\\"pf-c-select__menu-item-text\\">test</span><span class=\\"pf-c-select__menu-item-count\\">3</span></span></button>"`;
 
-exports[`select options renders with value parameter successfully 1`] = `
-<SelectOption
-  className=""
-  component="button"
-  id="option-1"
-  index={0}
-  inputId=""
-  isChecked={false}
-  isDisabled={false}
-  isFavorite={null}
-  isLastOptionBeforeFooter={[Function]}
-  isLoad={false}
-  isLoading={false}
-  isNoResultsOption={false}
-  isPlaceholder={false}
-  isSelected={false}
-  keyHandler={[Function]}
-  onClick={[Function]}
-  sendRef={
-    [MockFunction] {
-      "calls": Array [
-        Array [
-          <button
-            class="pf-c-select__menu-item"
-            role="option"
-            type="button"
-          >
-            test
-          </button>,
-          null,
-          <li
-            class="pf-c-select__menu-wrapper"
-            id="option-1"
-            role="presentation"
-          >
-            <button
-              class="pf-c-select__menu-item"
-              role="option"
-              type="button"
-            >
-              test
-            </button>
-          </li>,
-          0,
-        ],
-      ],
-      "results": Array [
-        Object {
-          "type": "return",
-          "value": undefined,
-        },
-      ],
-    }
-  }
-  setViewMoreNextIndex={[Function]}
-  value="test"
->
-  <li
-    className="pf-c-select__menu-wrapper"
-    id="option-1"
-    role="presentation"
-  >
-    <button
-      aria-selected={null}
-      className="pf-c-select__menu-item"
-      onClick={[Function]}
-      onKeyDown={[Function]}
-      role="option"
-      type="button"
-    >
-      test
-    </button>
-  </li>
-</SelectOption>
-`;
+exports[`SelectOption renders with value parameter successfully 1`] = `"<button data-testid=\\"test-id\\" class=\\"pf-c-select__menu-item\\" role=\\"option\\" type=\\"button\\">test</button>"`;

package/src/components/Toolbar/__tests__/Generated/ToolbarToggleGroup.test.tsx

@@ -1,13 +1,27 @@
-/**
- * This test was generated
- */
-import * as React from 'react';
-import { shallow } from 'enzyme';
-import { ToolbarToggleGroup } from '../../ToolbarToggleGroup';
-// any missing imports can usually be resolved by adding them here
-import {} from '../..';
+import React from 'react';
 
-it('ToolbarToggleGroup should match snapshot (auto-generated)', () => {
-  const view = shallow(<ToolbarToggleGroup breakpoint="xl" toggleIcon={<div>ReactNode</div>} />);
-  expect(view).toMatchSnapshot();
+import { render } from '@testing-library/react';
+
+import { ToolbarContentContext, ToolbarToggleGroup } from '../..';
+import { PageContext } from '../../../Page/Page';
+
+describe('ToolbarToggleGroup', () => {
+  it('should match snapshot', () => {
+    const view = render(
+      <PageContext.Provider
+        value={{ isManagedSidebar: false, onNavToggle: jest.fn(), isNavOpen: true, width: 1, getBreakpoint: jest.fn() }}
+      >
+        <ToolbarContentContext.Provider
+          value={{
+            expandableContentId: 'test',
+            expandableContentRef: { current: ((<></>) as unknown) as HTMLDivElement },
+            chipContainerRef: { current: ((<></>) as unknown) as HTMLDivElement }
+          }}
+        >
+          <ToolbarToggleGroup breakpoint="xl" toggleIcon={<div>ReactNode</div>} />
+        </ToolbarContentContext.Provider>
+      </PageContext.Provider>
+    );
+    expect(view.container).toMatchSnapshot();
+  });
 });

package/src/components/Toolbar/__tests__/Generated/__snapshots__/ToolbarToggleGroup.test.tsx.snap

@@ -1,7 +1,29 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ToolbarToggleGroup should match snapshot (auto-generated) 1`] = `
-<ContextConsumer>
-  <Component />
-</ContextConsumer>
+exports[`ToolbarToggleGroup should match snapshot 1`] = `
+<div>
+  <div
+    class="pf-c-toolbar__group pf-m-toggle-group pf-m-show-on-xl"
+  >
+    <div
+      class="pf-c-toolbar__toggle"
+    >
+      <button
+        aria-controls="test"
+        aria-disabled="false"
+        aria-haspopup="false"
+        aria-label="Show Filters"
+        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"
+      >
+        <div>
+          ReactNode
+        </div>
+      </button>
+    </div>
+  </div>
+</div>
 `;