@patternfly/react-core 4.202.11 → 4.202.14

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

@@ -1,40 +1,41 @@
 import React from 'react';
-import { render } from '@testing-library/react';
-import { shallow, mount } from 'enzyme';
+
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
 import { Label } from '../../Label';
 import { LabelGroup } from '../index';
 
 describe('LabelGroup', () => {
   test('label group default', () => {
-    const view = render(
+    const { asFragment } = render(
       <LabelGroup>
         <Label>1.1</Label>
       </LabelGroup>
     );
-
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('label group with category', () => {
-    const view = render(
+    const { asFragment } = render(
       <LabelGroup categoryName="category">
         <Label>1.1</Label>
       </LabelGroup>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('label group with closable category', () => {
-    const view = render(
+    const { asFragment } = render(
       <LabelGroup categoryName="category" isClosable>
         <Label>1.1</Label>
       </LabelGroup>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('label group expanded', () => {
-    const view = mount(
+    render(
       <LabelGroup>
         <Label>1</Label>
         <Label>2</Label>
@@ -42,28 +43,31 @@ describe('LabelGroup', () => {
         <Label>4</Label>
       </LabelGroup>
     );
-    const overflowButton = view.find('.pf-m-overflow .pf-c-label__content');
-    expect(overflowButton.text()).toBe('1 more');
-    overflowButton.simulate('click');
-    expect(overflowButton.text()).toBe('Show Less');
+    const showMoreButton = screen.getByRole('button');
+
+    expect(showMoreButton.textContent).toBe('1 more');
+
+    userEvent.click(showMoreButton);
+    expect(showMoreButton.textContent).toBe('Show Less');
   });
 
   test('label group will not render if no children passed', () => {
-    const view = shallow(<LabelGroup />);
-    expect(view.html()).toBeNull();
+    render(<LabelGroup data-testid="label-group-test-id" />);
+    expect(screen.queryByTestId('label-group-test-id')).toBeNull();
   });
 
+  // TODO, fix test - no tooltip shows up with this categoryName.zzw
   test('label group with category and tooltip', () => {
-    const view = render(
+    const { asFragment } = render(
       <LabelGroup categoryName="A very long category name">
         <Label>1.1</Label>
       </LabelGroup>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('label group compact', () => {
-    const view = render(
+    const { asFragment } = render(
       <LabelGroup isCompact>
         <Label isCompact>1</Label>
         <Label isCompact>2</Label>
@@ -71,6 +75,6 @@ describe('LabelGroup', () => {
         <Label isCompact>4</Label>
       </LabelGroup>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 });

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

@@ -1,14 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`LabelGroup label group compact 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-label-group"
   >
     <div
       class="pf-c-label-group__main"
     >
-      
       <ul
         aria-label="Label group category"
         class="pf-c-label-group__list"
@@ -69,18 +68,17 @@ exports[`LabelGroup label group compact 1`] = `
       </ul>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`LabelGroup label group default 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-label-group"
   >
     <div
       class="pf-c-label-group__main"
     >
-      
       <ul
         aria-label="Label group category"
         class="pf-c-label-group__list"
@@ -102,11 +100,11 @@ exports[`LabelGroup label group default 1`] = `
       </ul>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`LabelGroup label group with category 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-label-group pf-m-category"
   >
@@ -141,11 +139,11 @@ exports[`LabelGroup label group with category 1`] = `
       </ul>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`LabelGroup label group with category and tooltip 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-label-group pf-m-category"
   >
@@ -180,11 +178,11 @@ exports[`LabelGroup label group with category and tooltip 1`] = `
       </ul>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`LabelGroup label group with closable category 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-label-group pf-m-category"
   >
@@ -248,5 +246,5 @@ exports[`LabelGroup label group with closable category 1`] = `
       </button>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;

package/src/components/LoginPage/LoginFooterItem.tsx

@@ -12,8 +12,6 @@ export interface LoginFooterItemProps extends React.HTMLProps<HTMLAnchorElement>
 }
 
 export const LoginFooterItem: React.FunctionComponent<LoginFooterItemProps> = ({
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  className = '',
   children = null,
   href = '#',
   target = '_blank',

package/src/components/LoginPage/__tests__/LoginFooterItem.test.tsx

@@ -1,31 +1,30 @@
-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 "@testing-library/jest-dom";
 
 import { LoginFooterItem } from '../LoginFooterItem';
 
-test('renders with PatternFly Core styles', () => {
-  const view = render(<LoginFooterItem target="_self" href="#" />);
-  expect(view.container).toMatchSnapshot();
-});
+describe('LoginFooterItem', () => {
+  test('renders with PatternFly Core styles', () => {
+    const { asFragment } = render(<LoginFooterItem target="_self" href="#" />);
+    expect(asFragment()).toMatchSnapshot();
+  });
 
-test('className is added to the root element', () => {
-  const view = shallow(<LoginFooterItem className="extra-class" />);
-  expect(view.prop('className')).toMatchSnapshot();
-});
+  test('className is added to the root element', () => {
+    render(<LoginFooterItem className="extra-class" />);
+    expect(screen.getByRole('link')).toHaveClass('extra-class');
+  });
 
-test('extra props are spread to the root element', () => {
-  const testId = 'login-body';
-  const view = shallow(<LoginFooterItem data-testid={testId} />);
-  expect(view.prop('data-testid')).toBe(testId);
-});
+  test('with custom node', () => {
+    const CustomNode = () => <div>My custom node</div>;
+
+    render(
+      <LoginFooterItem>
+        <CustomNode />
+      </LoginFooterItem>
+    );
 
-test('LoginFooterItem  with custom node', () => {
-  const CustomNode = () => <div>My custom node</div>;
-  const view = render(
-    <LoginFooterItem>
-      <CustomNode />
-    </LoginFooterItem>
-  );
-  expect(view.container).toMatchSnapshot();
+    expect(screen.getByText('My custom node')).toBeInTheDocument();
+  });
 });

package/src/components/LoginPage/__tests__/LoginForm.test.tsx

@@ -1,41 +1,48 @@
-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 { LoginForm } from '../LoginForm';
+import userEvent from '@testing-library/user-event';
 
-test('should render Login form', () => {
-  const view = render(<LoginForm />);
-  expect(view.container).toMatchSnapshot();
-});
+describe('LoginForm', () => {
+  test('should render Login form', () => {
+    render(<LoginForm data-testid="form-test-id" />);
+    expect(screen.getByTestId('form-test-id').outerHTML).toMatchSnapshot();
+  });
 
-test('should call onChangeUsername callback', () => {
-  const mockFn = jest.fn();
-  const view = shallow(<LoginForm onChangeUsername={mockFn} rememberMeLabel="Login Form" />);
-  view.find('#pf-login-username-id').simulate('change');
-  expect(mockFn).toHaveBeenCalled();
-});
+  test('should call onChangeUsername callback', () => {
+    const mockFn = jest.fn();
 
-test('should call onChangePassword callback', () => {
-  const mockFn = jest.fn();
-  const view = shallow(<LoginForm onChangePassword={mockFn} rememberMeLabel="Login Form" />);
-  view.find('#pf-login-password-id').simulate('change');
-  expect(mockFn).toHaveBeenCalled();
-});
+    render(<LoginForm onChangeUsername={mockFn} rememberMeLabel="Remember me" />);
 
-test('should call onChangeRememberMe callback', () => {
-  const mockFn = jest.fn();
-  const view = shallow(<LoginForm onChangeRememberMe={mockFn} rememberMeLabel="Login Form" />);
-  view.find('#pf-login-remember-me-id').simulate('change');
-  expect(mockFn).toHaveBeenCalled();
-});
+    userEvent.type(screen.getByText('Username'), 'updatedUserName');
+    expect(mockFn).toHaveBeenCalled();
+  });
 
-test('LoginForm with rememberMeLabel', () => {
-  const view = render(<LoginForm rememberMeLabel="remember me" />);
-  expect(view.container).toMatchSnapshot();
-});
+  test('should call onChangePassword callback', () => {
+    const mockFn = jest.fn();
+
+    render(<LoginForm onChangePassword={mockFn} rememberMeLabel="Remember me" />);
+
+    userEvent.type(screen.getByText('Password'), 'updatedPassword');
+    expect(mockFn).toHaveBeenCalled();
+  });
+
+  test('should call onChangeRememberMe callback', () => {
+    const mockFn = jest.fn();
+
+    render(<LoginForm onChangeRememberMe={mockFn} rememberMeLabel="Remember me" />);
+
+    userEvent.click(screen.getByLabelText('Remember me'));
+    expect(mockFn).toHaveBeenCalled();
+  });
+
+  test('LoginForm with rememberMeLabel', () => {
+    render(<LoginForm rememberMeLabel="Remember me" data-testid="form-test-id" />);
+    expect(screen.getByTestId('form-test-id').outerHTML).toMatchSnapshot();
+  });
 
-test('LoginForm with show password', () => {
-  const view = render(<LoginForm isShowPasswordEnabled />);
-  expect(view.container).toMatchSnapshot();
+  test('LoginForm with show password', () => {
+    render(<LoginForm isShowPasswordEnabled data-testid="form-test-id" />);
+    expect(screen.getByTestId('form-test-id').outerHTML).toMatchSnapshot();
+  });
 });

package/src/components/LoginPage/__tests__/LoginMainBody.test.tsx

@@ -1,21 +1,15 @@
 import * as React from 'react';
-import { render } from '@testing-library/react';
-import { shallow } from 'enzyme';
-
+import { render, screen } from '@testing-library/react';
 import { LoginMainBody } from '../LoginMainBody';
 
-test('renders with PatternFly Core styles', () => {
-  const view = render(<LoginMainBody />);
-  expect(view.container).toMatchSnapshot();
-});
-
-test('className is added to the root element', () => {
-  const view = shallow(<LoginMainBody className="extra-class" />);
-  expect(view.prop('className')).toMatchSnapshot();
-});
+describe('LoginMainBody', () => {
+  test('renders with PatternFly Core styles', () => {
+    render(<LoginMainBody data-testid="test-id" />);
+    expect(screen.getByTestId('test-id').outerHTML).toMatchSnapshot();
+  });
 
-test('extra props are spread to the root element', () => {
-  const testId = 'login-body';
-  const view = shallow(<LoginMainBody data-testid={testId} />);
-  expect(view.prop('data-testid')).toBe(testId);
+  test('className is added to the root element', () => {
+    render(<LoginMainBody className="extra-class" data-testid="test-id" />);
+    expect(screen.getByTestId('test-id').outerHTML).toMatchSnapshot();
+  });
 });

package/src/components/LoginPage/__tests__/LoginMainFooter.test.tsx

@@ -1,21 +1,15 @@
-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 { LoginMainFooter } from '../LoginMainFooter';
 
-test('renders with PatternFly Core styles', () => {
-  const view = render(<LoginMainFooter />);
-  expect(view.container).toMatchSnapshot();
-});
-
-test('className is added to the root element', () => {
-  const view = shallow(<LoginMainFooter className="extra-class" />);
-  expect(view.prop('className')).toMatchSnapshot();
-});
+describe('LoginMainFooter', () => {
+  test('renders with PatternFly Core styles', () => {
+    render(<LoginMainFooter data-testid="test-id" />);
+    expect(screen.getByTestId('test-id').outerHTML).toMatchSnapshot();
+  });
 
-test('extra props are spread to the root element', () => {
-  const testId = 'login-body';
-  const view = shallow(<LoginMainFooter data-testid={testId} />);
-  expect(view.prop('data-testid')).toBe(testId);
+  test('className is added to the root element', () => {
+    render(<LoginMainFooter className="extra-class" data-testid="test-id" />);
+    expect(screen.getByTestId('test-id').outerHTML).toMatchSnapshot();
+  });
 });

package/src/components/LoginPage/__tests__/LoginMainFooterBandItem.test.tsx

@@ -1,31 +1,30 @@
-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 "@testing-library/jest-dom";
 
 import { LoginMainFooterBandItem } from '../LoginMainFooterBandItem';
 
-test('renders with PatternFly Core styles', () => {
-  const view = render(<LoginMainFooterBandItem />);
-  expect(view.container).toMatchSnapshot();
-});
+describe('LoginMainFooterBandItem', () => {
+  test('renders with PatternFly Core styles', () => {
+    const { asFragment } = render(<LoginMainFooterBandItem />);
+    expect(asFragment()).toMatchSnapshot();
+  });
 
-test('className is added to the root element', () => {
-  const view = shallow(<LoginMainFooterBandItem className="extra-class" />);
-  expect(view.prop('className')).toMatchSnapshot();
-});
+  test('className is added to the root element', () => {
+    render(<LoginMainFooterBandItem className="extra-class">test</LoginMainFooterBandItem>);
+    expect(screen.getByText('test')).toHaveClass('extra-class');
+  });
 
-test('extra props are spread to the root element', () => {
-  const testId = 'login-body';
-  const view = shallow(<LoginMainFooterBandItem data-testid={testId} />);
-  expect(view.prop('data-testid')).toBe(testId);
-});
+  test('with custom node', () => {
+    const CustomNode = () => <div>My custom node</div>;
+
+    render(
+      <LoginMainFooterBandItem>
+        <CustomNode />
+      </LoginMainFooterBandItem>
+    );
 
-test('LoginFooterItem  with custom node', () => {
-  const CustomNode = () => <div>My custom node</div>;
-  const view = render(
-    <LoginMainFooterBandItem>
-      <CustomNode />
-    </LoginMainFooterBandItem>
-  );
-  expect(view.container).toMatchSnapshot();
+    expect(screen.getByText('My custom node')).toBeInTheDocument();
+  });
 });

package/src/components/LoginPage/__tests__/LoginMainFooterLinksItem.test.tsx

@@ -1,31 +1,27 @@
 import * as React from 'react';
-import { render } from '@testing-library/react';
-import { shallow } from 'enzyme';
-
+import { render, screen } from '@testing-library/react';
 import { LoginMainFooterLinksItem } from '../LoginMainFooterLinksItem';
 
-test('renders with PatternFly Core styles', () => {
-  const view = render(<LoginMainFooterLinksItem href="#" target="" />);
-  expect(view.container).toMatchSnapshot();
-});
+describe('LoginMainFooterLinksItem', () => {
+  test('renders with PatternFly Core styles', () => {
+    render(<LoginMainFooterLinksItem href="#" target="" />);
+    expect(screen.getByRole('listitem').outerHTML).toMatchSnapshot();
+  });
 
-test('className is added to the root element', () => {
-  const view = shallow(<LoginMainFooterLinksItem className="extra-class" />);
-  expect(view.prop('className')).toMatchSnapshot();
-});
+  test('className is added to the root element', () => {
+    render(<LoginMainFooterLinksItem className="extra-class" />);
+    expect(screen.getByRole('listitem').outerHTML).toMatchSnapshot();
+  });
 
-test('extra props are spread to the root element', () => {
-  const testId = 'login-body';
-  const view = shallow(<LoginMainFooterLinksItem data-testid={testId} />);
-  expect(view.prop('data-testid')).toBe(testId);
-});
+  test('with custom node', () => {
+    const CustomNode = () => <div>My custom node</div>;
+
+    render(
+      <LoginMainFooterLinksItem>
+        <CustomNode />
+      </LoginMainFooterLinksItem>
+    );
 
-test('LoginFooterItem  with custom node', () => {
-  const CustomNode = () => <div>My custom node</div>;
-  const view = render(
-    <LoginMainFooterLinksItem>
-      <CustomNode />
-    </LoginMainFooterLinksItem>
-  );
-  expect(view.container).toMatchSnapshot();
+    expect(screen.getByRole('listitem').outerHTML).toMatchSnapshot();
+  });
 });

package/src/components/LoginPage/__tests__/LoginMainHeader.test.tsx

@@ -1,26 +1,20 @@
 import * as React from 'react';
-import { render } from '@testing-library/react';
-import { shallow } from 'enzyme';
-
+import { render, screen } from '@testing-library/react';
 import { LoginMainHeader } from '../LoginMainHeader';
 
-test('renders with PatternFly Core styles', () => {
-  const view = render(<LoginMainHeader />);
-  expect(view.container).toMatchSnapshot();
-});
+describe('LoginMainHeader', () => {
+  test('renders with PatternFly Core styles', () => {
+    render(<LoginMainHeader data-testid="test-id" />);
+    expect(screen.getByTestId('test-id').outerHTML).toMatchSnapshot();
+  });
 
-test('className is added to the root element', () => {
-  const view = shallow(<LoginMainHeader className="extra-class" />);
-  expect(view.prop('className')).toMatchSnapshot();
-});
-
-test('extra props are spread to the root element', () => {
-  const testId = 'login-header';
-  const view = shallow(<LoginMainHeader data-testid={testId} />);
-  expect(view.prop('data-testid')).toBe(testId);
-});
+  test('className is added to the root element', () => {
+    render(<LoginMainHeader className="extra-class" data-testid="test-id" />);
+    expect(screen.getByTestId('test-id').outerHTML).toMatchSnapshot();
+  });
 
-test('title and subtitle are rendered correctly', () => {
-  const view = shallow(<LoginMainHeader title="Log in to your account" subtitle="Use LDAP credentials" />);
-  expect(view.prop('className')).toMatchSnapshot();
+  test('title and subtitle are rendered correctly', () => {
+    render(<LoginMainHeader title="Log in to your account" subtitle="Use LDAP credentials" data-testid="test-id" />);
+    expect(screen.getByTestId('test-id').outerHTML).toMatchSnapshot();
+  });
 });

package/src/components/LoginPage/__tests__/__snapshots__/LoginFooterItem.test.tsx.snap

@@ -1,20 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`LoginFooterItem  with custom node 1`] = `
-<div>
-  <div>
-    My custom node
-  </div>
-</div>
-`;
-
-exports[`className is added to the root element 1`] = `undefined`;
-
-exports[`renders with PatternFly Core styles 1`] = `
-<div>
+exports[`LoginFooterItem renders with PatternFly Core styles 1`] = `
+<DocumentFragment>
   <a
     href="#"
     target="_self"
   />
-</div>
+</DocumentFragment>
 `;