@patternfly/react-core 4.200.1 → 4.200.2

package/src/components/ContextSelector/__tests__/__snapshots__/ContextSelectorToggle.test.tsx.snap

@@ -1,253 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Renders ContextSelectorToggle 1`] = `
-<div>
-  <button
-    aria-expanded="false"
-    class="pf-c-context-selector__toggle"
-    id="toggle-id"
-    type="button"
-  >
-    <span
-      class="pf-c-context-selector__toggle-text"
-    />
-    <span
-      class="pf-c-context-selector__toggle-icon"
-    >
-      <svg
-        aria-hidden="true"
-        fill="currentColor"
-        height="1em"
-        role="img"
-        style="vertical-align: -0.125em;"
-        viewBox="0 0 320 512"
-        width="1em"
-      >
-        <path
-          d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-        />
-      </svg>
-    </span>
-  </button>
-</div>
-`;
+exports[`ContextSelectorToggle Renders ContextSelectorToggle 1`] = `"<button id=\\"toggle-id\\" class=\\"pf-c-context-selector__toggle\\" type=\\"button\\" aria-expanded=\\"false\\"><span class=\\"pf-c-context-selector__toggle-text\\"></span><span class=\\"pf-c-context-selector__toggle-icon\\"><svg style=\\"vertical-align: -0.125em;\\" fill=\\"currentColor\\" height=\\"1em\\" width=\\"1em\\" viewBox=\\"0 0 320 512\\" aria-hidden=\\"true\\" role=\\"img\\"><path d=\\"M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z\\"></path></svg></span></button>"`;
 
-exports[`Verify ESC press  1`] = `
-<ContextSelectorToggle
-  className=""
-  id="toggle-id"
-  isActive={false}
-  isOpen={true}
-  onEnter={[Function]}
-  onToggle={[Function]}
-  parentRef={null}
-  toggleText=""
->
-  <button
-    aria-expanded={true}
-    className="pf-c-context-selector__toggle"
-    id="toggle-id"
-    onClick={[Function]}
-    onKeyDown={[Function]}
-    type="button"
-  >
-    <span
-      className="pf-c-context-selector__toggle-text"
-    />
-    <span
-      className="pf-c-context-selector__toggle-icon"
-    >
-      <CaretDownIcon
-        aria-hidden={true}
-        color="currentColor"
-        noVerticalAlign={false}
-        size="sm"
-      >
-        <svg
-          aria-hidden={true}
-          aria-labelledby={null}
-          fill="currentColor"
-          height="1em"
-          role="img"
-          style={
-            Object {
-              "verticalAlign": "-0.125em",
-            }
-          }
-          viewBox="0 0 320 512"
-          width="1em"
-        >
-          <path
-            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-          />
-        </svg>
-      </CaretDownIcon>
-    </span>
-  </button>
-</ContextSelectorToggle>
-`;
+exports[`ContextSelectorToggle Verify ESC press 1`] = `"<button id=\\"toggle-id\\" class=\\"pf-c-context-selector__toggle\\" type=\\"button\\" aria-expanded=\\"true\\"><span class=\\"pf-c-context-selector__toggle-text\\"></span><span class=\\"pf-c-context-selector__toggle-icon\\"><svg style=\\"vertical-align: -0.125em;\\" fill=\\"currentColor\\" height=\\"1em\\" width=\\"1em\\" viewBox=\\"0 0 320 512\\" aria-hidden=\\"true\\" role=\\"img\\"><path d=\\"M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z\\"></path></svg></span></button>"`;
 
-exports[`Verify ESC press with not isOpen 1`] = `
-<ContextSelectorToggle
-  className=""
-  id="toggle-id"
-  isActive={false}
-  isOpen={false}
-  onEnter={[Function]}
-  onToggle={[MockFunction]}
-  parentRef={null}
-  toggleText=""
->
-  <button
-    aria-expanded={false}
-    className="pf-c-context-selector__toggle"
-    id="toggle-id"
-    onClick={[Function]}
-    onKeyDown={[Function]}
-    type="button"
-  >
-    <span
-      className="pf-c-context-selector__toggle-text"
-    />
-    <span
-      className="pf-c-context-selector__toggle-icon"
-    >
-      <CaretDownIcon
-        aria-hidden={true}
-        color="currentColor"
-        noVerticalAlign={false}
-        size="sm"
-      >
-        <svg
-          aria-hidden={true}
-          aria-labelledby={null}
-          fill="currentColor"
-          height="1em"
-          role="img"
-          style={
-            Object {
-              "verticalAlign": "-0.125em",
-            }
-          }
-          viewBox="0 0 320 512"
-          width="1em"
-        >
-          <path
-            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-          />
-        </svg>
-      </CaretDownIcon>
-    </span>
-  </button>
-</ContextSelectorToggle>
-`;
+exports[`ContextSelectorToggle Verify ESC press with not isOpen 1`] = `"<button id=\\"toggle-id\\" class=\\"pf-c-context-selector__toggle\\" type=\\"button\\" aria-expanded=\\"false\\"><span class=\\"pf-c-context-selector__toggle-text\\"></span><span class=\\"pf-c-context-selector__toggle-icon\\"><svg style=\\"vertical-align: -0.125em;\\" fill=\\"currentColor\\" height=\\"1em\\" width=\\"1em\\" viewBox=\\"0 0 320 512\\" aria-hidden=\\"true\\" role=\\"img\\"><path d=\\"M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z\\"></path></svg></span></button>"`;
 
-exports[`Verify keydown enter  1`] = `
-<ContextSelectorToggle
-  className=""
-  id="toggle-id"
-  isActive={false}
-  isOpen={false}
-  onEnter={[MockFunction]}
-  onToggle={[MockFunction]}
-  parentRef={null}
-  toggleText=""
->
-  <button
-    aria-expanded={false}
-    className="pf-c-context-selector__toggle"
-    id="toggle-id"
-    onClick={[Function]}
-    onKeyDown={[Function]}
-    type="button"
-  >
-    <span
-      className="pf-c-context-selector__toggle-text"
-    />
-    <span
-      className="pf-c-context-selector__toggle-icon"
-    >
-      <CaretDownIcon
-        aria-hidden={true}
-        color="currentColor"
-        noVerticalAlign={false}
-        size="sm"
-      >
-        <svg
-          aria-hidden={true}
-          aria-labelledby={null}
-          fill="currentColor"
-          height="1em"
-          role="img"
-          style={
-            Object {
-              "verticalAlign": "-0.125em",
-            }
-          }
-          viewBox="0 0 320 512"
-          width="1em"
-        >
-          <path
-            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-          />
-        </svg>
-      </CaretDownIcon>
-    </span>
-  </button>
-</ContextSelectorToggle>
-`;
+exports[`ContextSelectorToggle Verify keydown enter  1`] = `"<button id=\\"toggle-id\\" class=\\"pf-c-context-selector__toggle\\" type=\\"button\\" aria-expanded=\\"false\\"><span class=\\"pf-c-context-selector__toggle-text\\"></span><span class=\\"pf-c-context-selector__toggle-icon\\"><svg style=\\"vertical-align: -0.125em;\\" fill=\\"currentColor\\" height=\\"1em\\" width=\\"1em\\" viewBox=\\"0 0 320 512\\" aria-hidden=\\"true\\" role=\\"img\\"><path d=\\"M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z\\"></path></svg></span></button>"`;
 
-exports[`Verify keydown tab  1`] = `
-<ContextSelectorToggle
-  className=""
-  id="toggle-id"
-  isActive={false}
-  isOpen={true}
-  onEnter={[Function]}
-  onToggle={[Function]}
-  parentRef={null}
-  toggleText=""
->
-  <button
-    aria-expanded={true}
-    className="pf-c-context-selector__toggle"
-    id="toggle-id"
-    onClick={[Function]}
-    onKeyDown={[Function]}
-    type="button"
-  >
-    <span
-      className="pf-c-context-selector__toggle-text"
-    />
-    <span
-      className="pf-c-context-selector__toggle-icon"
-    >
-      <CaretDownIcon
-        aria-hidden={true}
-        color="currentColor"
-        noVerticalAlign={false}
-        size="sm"
-      >
-        <svg
-          aria-hidden={true}
-          aria-labelledby={null}
-          fill="currentColor"
-          height="1em"
-          role="img"
-          style={
-            Object {
-              "verticalAlign": "-0.125em",
-            }
-          }
-          viewBox="0 0 320 512"
-          width="1em"
-        >
-          <path
-            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-          />
-        </svg>
-      </CaretDownIcon>
-    </span>
-  </button>
-</ContextSelectorToggle>
-`;
+exports[`ContextSelectorToggle Verify keydown tab  1`] = `"<button id=\\"toggle-id\\" class=\\"pf-c-context-selector__toggle\\" type=\\"button\\" aria-expanded=\\"true\\"><span class=\\"pf-c-context-selector__toggle-text\\"></span><span class=\\"pf-c-context-selector__toggle-icon\\"><svg style=\\"vertical-align: -0.125em;\\" fill=\\"currentColor\\" height=\\"1em\\" width=\\"1em\\" viewBox=\\"0 0 320 512\\" aria-hidden=\\"true\\" role=\\"img\\"><path d=\\"M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z\\"></path></svg></span></button>"`;

package/src/components/DataList/__tests__/DataList.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 { DataList } from '../DataList';
 import { DataListItem } from '../DataListItem';
 import { DataListAction } from '../DataListAction';
@@ -26,9 +27,7 @@ describe('DataList', () => {
   describe('DataList variants', () => {
     ['none', 'always', 'sm', 'md', 'lg', 'xl', '2xl'].forEach(oneBreakpoint => {
       test(`Breakpoint - ${oneBreakpoint}`, () => {
-        const view = render(
-          <DataList aria-label="this is a simple list" gridBreakpoint={oneBreakpoint as any} />
-        );
+        const view = render(<DataList aria-label="this is a simple list" gridBreakpoint={oneBreakpoint as any} />);
         expect(view.container).toMatchSnapshot();
       });
     });
@@ -45,21 +44,21 @@ describe('DataList', () => {
   });
 
   test('Item default', () => {
-    const view = render(
+    render(
       <DataListItem key="item-id-1" aria-labelledby="item-1">
         test
       </DataListItem>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(screen.getByRole('listitem').outerHTML).toMatchSnapshot();
   });
 
   test('Item expanded', () => {
-    const view = mount(
+    render(
       <DataListItem aria-labelledby="item-1" isExpanded>
         test
       </DataListItem>
     );
-    expect(view.find('li').props().className).toBe('pf-c-data-list__item pf-m-expanded');
+    expect(screen.getByRole('listitem').className).toBe('pf-c-data-list__item pf-m-expanded');
   });
 
   test('Item', () => {
@@ -99,54 +98,62 @@ describe('DataList', () => {
 
   test('Cell with width modifier', () => {
     [
-      { width: 1 as const, class: '' },
-      { width: 2 as const, class: 'pf-m-flex-2' },
-      { width: 3 as const, class: 'pf-m-flex-3' },
-      { width: 4 as const, class: 'pf-m-flex-4' },
-      { width: 5 as const, class: 'pf-m-flex-5' }
-    ].forEach(testCase => {
-      const view = shallow(
-        <DataListCell width={testCase.width} key="list-id-1" id="primary-item">
+      { width: 1, class: '' },
+      { width: 2, class: 'pf-m-flex-2' },
+      { width: 3, class: 'pf-m-flex-3' },
+      { width: 4, class: 'pf-m-flex-4' },
+      { width: 5, class: 'pf-m-flex-5' }
+    ].forEach((testCase, index) => {
+      const testId = `cell-test-id-${index}`;
+
+      render(
+        <DataListCell data-testid={testId} width={testCase.width as any} key={index}>
           Primary Id
         </DataListCell>
       );
+
+      const dataListCell = screen.getByTestId(testId);
+
       testCase.class === ''
-        ? expect(view.props().className).toBe('pf-c-data-list__cell')
-        : expect(view.props().className).toBe(`pf-c-data-list__cell ${testCase.class}`);
+        ? expect(dataListCell.className).toBe('pf-c-data-list__cell')
+        : expect(dataListCell.className).toBe(`pf-c-data-list__cell ${testCase.class}`);
     });
   });
 
   test('Cell with text modifiers', () => {
     [
       { wrapModifier: null as any, class: '' },
-      { wrapModifier: 'breakWord' as const, class: 'pf-m-break-word' },
-      { wrapModifier: 'nowrap' as const, class: 'pf-m-nowrap' },
-      { wrapModifier: 'truncate' as const, class: 'pf-m-truncate' },
-    ].forEach(testCase => {
-      const view = shallow(
-        <DataListCell wrapModifier={testCase.wrapModifier} key="list-id-1" id="primary-item">
+      { wrapModifier: 'breakWord', class: 'pf-m-break-word' },
+      { wrapModifier: 'nowrap', class: 'pf-m-nowrap' },
+      { wrapModifier: 'truncate', class: 'pf-m-truncate' }
+    ].forEach((testCase, index) => {
+      const testId = `cell-test-id-${index}`;
+
+      render(
+        <DataListCell data-testid={testId} wrapModifier={testCase.wrapModifier} key={index}>
           Primary Id
         </DataListCell>
       );
+
+      const dataListCell = screen.getByTestId(testId);
+
       testCase.class === ''
-        ? expect(view.props().className).toBe('pf-c-data-list__cell')
-        : expect(view.props().className).toBe(`pf-c-data-list__cell ${testCase.class}`);
+        ? expect(dataListCell.className).toBe('pf-c-data-list__cell')
+        : expect(dataListCell.className).toBe(`pf-c-data-list__cell ${testCase.class}`);
     });
   });
 
   test('Toggle default with aria label', () => {
-    const view = shallow(<DataListToggle aria-label="Toggle details for" id="ex-toggle2" />);
+    render(<DataListToggle aria-label="Toggle details for" id="ex-toggle2" />);
 
-    expect(view.find(Button).props()['aria-label']).toBe('Toggle details for');
-    expect(view.find(Button).props()['aria-labelledby']).toBe(null);
-    expect(view.find(Button).props()['aria-expanded']).toBe(false);
-    expect(view.find(Button).props().id).toBe('ex-toggle2');
-    expect(view.find(Button).props().id).toBe('ex-toggle2');
+    expect(screen.getByRole('button').getAttribute('aria-labelledby')).toEqual(null);
+    expect(screen.getByRole('button').getAttribute('aria-label')).toEqual('Toggle details for');
+    expect(screen.getByRole('button').getAttribute('aria-expanded')).toEqual('false');
   });
 
   test('Toggle expanded', () => {
-    const view = shallow(<DataListToggle aria-label="Toggle details for" id="ex-toggle2" isExpanded />);
-    expect(view.find(Button).props()['aria-expanded']).toBe(true);
+    render(<DataListToggle aria-label="Toggle details for" id="ex-toggle2" isExpanded />);
+    expect(screen.getByRole('button').getAttribute('aria-expanded')).toEqual('true');
   });
 
   test('DataListAction dropdown', () => {
@@ -180,7 +187,7 @@ describe('DataList', () => {
   });
 
   test('DataListAction visibility - show button when lg', () => {
-    const view = shallow(
+    render(
       <DataListAction
         visibility={{ default: 'hidden', lg: 'visible' }}
         aria-labelledby="check-action-item2 check-action-action2"
@@ -190,12 +197,13 @@ describe('DataList', () => {
         <Button variant="primary">Primary</Button>
       </DataListAction>
     );
-    expect(view.find('div').props().className).toContain('pf-m-hidden');
-    expect(view.find('div').props().className).toContain('pf-m-visible-on-lg');
+
+    expect(screen.getByRole('button').parentElement.className).toContain('pf-m-hidden');
+    expect(screen.getByRole('button').parentElement.className).toContain('pf-m-visible-on-lg');
   });
 
   test('DataListAction visibility - hide button on 2xl', () => {
-    const view = shallow(
+    render(
       <DataListAction
         visibility={{ '2xl': 'hidden' }}
         aria-labelledby="check-action-item2 check-action-action2"
@@ -205,7 +213,8 @@ describe('DataList', () => {
         <Button variant="primary">Primary</Button>
       </DataListAction>
     );
-    expect(view.find('div').props().className).toContain('pf-m-hidden-on-2xl');
+
+    expect(screen.getByRole('button').parentElement.className).toContain('pf-m-hidden-on-2xl');
   });
 
   test('DataListContent', () => {

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

@@ -199,15 +199,7 @@ exports[`DataList Item 1`] = `
 </div>
 `;
 
-exports[`DataList Item default 1`] = `
-<div>
-  <li
-    aria-labelledby="item-1"
-    class="pf-c-data-list__item"
-    id=""
-  />
-</div>
-`;
+exports[`DataList Item default 1`] = `"<li id=\\"\\" class=\\"pf-c-data-list__item\\" aria-labelledby=\\"item-1\\"></li>"`;
 
 exports[`DataList List 1`] = `
 <div>