@patternfly/react-core 4.199.2 → 4.199.3

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

@@ -1,87 +1,82 @@
 import * as React from 'react';
-import { render } from '@testing-library/react';
-import { mount, shallow } from 'enzyme';
+
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+
 import { Alert } from '../../Alert';
 import { AlertGroup } from '../../AlertGroup';
 import { AlertActionCloseButton } from '../../../components/Alert/AlertActionCloseButton';
 
-jest.spyOn(document, 'createElement');
-jest.spyOn(document.body, 'addEventListener');
+describe('AlertGroup', () => {
+  test('Alert Group renders without children', () => {
+    const view = render(<AlertGroup />);
+    expect(view.container).toMatchSnapshot();
+  });
 
-test('Alert Group works with zero children', () => {
-  const view = render(<AlertGroup></AlertGroup>);
-  expect(view).toBeTruthy();
-});
+  test('Alert Group works with n children', () => {
+    const view = render(
+      <AlertGroup>
+        <Alert variant="success" title="alert title" />
+        <Alert variant="warning" title="another alert title" />
+      </AlertGroup>
+    );
+    expect(view).toBeTruthy();
+  });
 
-test('Alert Group should match snapshot', () => {
-  const view = render(<AlertGroup></AlertGroup>);
-  expect(view.container).toMatchSnapshot();
-});
+  test('Alert group overflow shows up', () => {
+    const overflowMessage = 'View 2 more alerts';
+    const onOverflowClick = jest.fn();
 
-test('Alert Group works with n children', () => {
-  const view = render(
-    <AlertGroup>
-      <Alert variant="success" title="alert title" />
-      <Alert variant="warning" title="another alert title" />
-    </AlertGroup>
-  );
-  expect(view).toBeTruthy();
-});
+    render(
+      <AlertGroup overflowMessage={overflowMessage} onOverflowClick={onOverflowClick}>
+        <Alert variant="danger" title="alert title" />
+      </AlertGroup>
+    );
 
-test('Alert group overflow shows up', () => {
-  const overflowMessage = "View 2 more alerts";
-  const onOverflowClick = jest.fn();
-  const wrapper = mount(
-    <AlertGroup overflowMessage={overflowMessage} onOverflowClick={onOverflowClick}>
-      <Alert variant="danger" title="alert title" />
-    </AlertGroup>
-  )
-  expect(wrapper.find('.pf-c-alert-group > li')).toHaveLength(2);
-  expect(wrapper.find('.pf-c-alert-group__overflow-button').text()).toContain(overflowMessage);
-  expect(wrapper).toMatchSnapshot();
-  wrapper.find('.pf-c-alert-group__overflow-button').simulate('click');
-  expect(onOverflowClick).toBeCalled();
-});
+    expect(screen.getAllByRole('listitem')).toHaveLength(2);
 
-test('Standard Alert Group is not a toast alert group', () => {
-  const wrapper = mount(
-    <AlertGroup>
-      <Alert variant="danger" title="alert title" />
-    </AlertGroup>
-  );
-  expect(wrapper.find('.pf-c-alert-group.pf-m-toast')).toHaveLength(0);
-  expect(wrapper).toMatchSnapshot();
-});
+    const overflowButton = screen.getByRole('button', { name: 'View 2 more alerts' });
+    expect(overflowButton).toBeInTheDocument();
 
-test('Toast Alert Group contains expected modifier class', () => {
-  const wrapper = mount(
-    <AlertGroup isToast>
-      <Alert variant="warning" title="alert title" />
-    </AlertGroup>
-  );
-  expect(wrapper.find('.pf-c-alert-group.pf-m-toast')).toHaveLength(1);
-  expect(wrapper).toMatchSnapshot();
-});
+    userEvent.click(overflowButton);
+    expect(onOverflowClick).toBeCalled();
+  });
 
-test('Alert Group creates a container element once for div', () => {
-  const view = shallow(<AlertGroup> Test About Modal </AlertGroup>);
-  view.update();
-  expect(document.createElement).toBeCalledWith('div');
-  expect(document.createElement).toHaveBeenCalledTimes(1);
-});
+  test('Standard Alert Group is not a toast alert group', () => {
+    render(
+      <AlertGroup>
+        <Alert variant="danger" title="alert title" />
+      </AlertGroup>
+    );
+
+    expect(screen.getByText('alert title').parentElement).not.toHaveClass('pf-m-toast');
+  });
+
+  test('Toast Alert Group contains expected modifier class', () => {
+    render(
+      <AlertGroup isToast aria-label="group label">
+        <Alert variant="warning" title="alert title" />
+      </AlertGroup>
+    );
+
+    expect(screen.getByLabelText('group label')).toHaveClass('pf-m-toast');
+  });
+
+  test('alertgroup closes when alerts are closed', () => {
+    const onClose = jest.fn();
+
+    render(
+      <AlertGroup isToast appendTo={document.body}>
+        <Alert
+          isLiveRegion
+          title={'Test Alert'}
+          actionClose={<AlertActionCloseButton aria-label="Close" onClose={onClose} />}
+        />
+      </AlertGroup>
+    );
 
-test('alertgroup closes when alerts are closed', () => {
-  const onClose = jest.fn();
-  const wrapper = mount(
-    <AlertGroup isToast appendTo={document.body}>
-      <Alert
-        isLiveRegion
-        title={'Test Alert'}
-        actionClose={<AlertActionCloseButton aria-label="Close" onClose={onClose} />}
-      />
-    </AlertGroup>
-  );
-  expect(wrapper).toMatchSnapshot();
-  wrapper.find('button[aria-label="Close"]').simulate('click');
-  expect(onClose).toBeCalled();
+    userEvent.click(screen.getByLabelText('Close'));
+    expect(onClose).toBeCalled();
+  });
 });