Fixes #39482: Replace enzyme test in HeaderToolbar, UserDropdown with…

webpack/assets/javascripts/react_app/components/Layout/components/Toolbar/HeaderToolbar.test.js

@@ -1,19 +1,68 @@
-import { testComponentSnapshotsWithFixtures } from 'foremanReact/common/testHelpers';
-import { hasTaxonomiesMock } from '../../Layout.fixtures';
-import { noop } from '../../../../common/helpers';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
 
+import { hasTaxonomiesMock } from '../../Layout.fixtures';
 import HeaderToolbar from './HeaderToolbar';
 
-const fixtures = {
-  'render HeaderToolbar': {
-    ...hasTaxonomiesMock.data,
-    currentLocation: hasTaxonomiesMock.currentLocation,
-    currentOrganization: hasTaxonomiesMock.currentOrganization,
-    isLoading: false,
-  },
+// Stub the connected/async children so the toolbar's own composition can be
+// tested without a redux store or the notifications API.
+jest.mock('../TaxonomySwitcher/TaxonomySwitcher', () => () => (
+  <div data-testid="taxonomy-switcher" />
+));
+jest.mock('./UserDropdowns', () => ({ user }) => (
+  <div data-testid="user-dropdowns">{user.current_user.name}</div>
+));
+jest.mock('../ImpersonateIcon', () => ({ stopImpersonationUrl }) => (
+  <div data-testid="impersonate-icon">{stopImpersonationUrl}</div>
+));
+jest.mock(
+  '../../../notifications/components/NotificationIcon',
+  () => () => <div data-testid="notification-icon" />
+);
+jest.mock('../../../notifications', () => () => (
+  <div data-testid="notifications" />
+));
+jest.mock('../../../notifications/NotificationsContext', () => ({
+  NotificationsContextWrapper: ({ children }) => <div>{children}</div>,
+}));
+
+const props = {
+  ...hasTaxonomiesMock.data,
+  currentLocation: hasTaxonomiesMock.currentLocation,
+  currentOrganization: hasTaxonomiesMock.currentOrganization,
+  isLoading: false,
 };
 
 describe('HeaderToolbar', () => {
-  describe('rendering', () =>
-    testComponentSnapshotsWithFixtures(HeaderToolbar, fixtures));
+  it('render HeaderToolbar', () => {
+    render(<HeaderToolbar {...props} />);
+
+    expect(screen.getByTestId('taxonomy-switcher')).toBeInTheDocument();
+    expect(screen.getByTestId('notification-icon')).toBeInTheDocument();
+    expect(screen.getByTestId('notifications')).toBeInTheDocument();
+
+    // user dropdown receives the current user
+    expect(screen.getByTestId('user-dropdowns')).toHaveTextContent(
+      'Admin User'
+    );
+
+    // the user is impersonated, so the impersonate icon renders with its url
+    expect(screen.getByTestId('impersonate-icon')).toHaveTextContent(
+      '/users/stop_impersonation'
+    );
+  });
+
+  it('hides the impersonate icon when not impersonated', () => {
+    render(
+      <HeaderToolbar
+        {...props}
+        user={{ ...props.user, impersonated_by: false }}
+      />
+    );
+
+    expect(screen.queryByTestId('impersonate-icon')).not.toBeInTheDocument();
+    // the rest of the toolbar still renders
+    expect(screen.getByTestId('user-dropdowns')).toBeInTheDocument();
+  });
 });

webpack/assets/javascripts/react_app/components/Layout/components/Toolbar/UserDropdowns.test.js

@@ -1,10 +1,20 @@
-import { testComponentSnapshotsWithFixtures } from '../../../../common/testHelpers';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
 
 import UserDropdowns from './UserDropdowns';
 import { userDropdownProps } from '../../Layout.fixtures';
 
-const fixtures = {
-  render: userDropdownProps,
-};
-describe('UserDropdown', () =>
-  testComponentSnapshotsWithFixtures(UserDropdowns, fixtures));
+describe('UserDropdown', () => {
+  it('render', () => {
+    render(<UserDropdowns {...userDropdownProps} />);
+
+    // the toggle shows the current user's name
+    expect(screen.getByText('G L')).toBeInTheDocument();
+
+    // the open menu shows the account item linking to its url
+    const accountItem = screen.getByRole('menuitem', { name: 'My Account' });
+    expect(accountItem).toBeInTheDocument();
+    expect(accountItem).toHaveAttribute('href', '/');
+  });
+});