test: webui user management unit test [DET-7968] (#4809)

webui/react/src/pages/Settings/UserManagement.test.tsx

@@ -0,0 +1,62 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+import { HelmetProvider } from 'react-helmet-async';
+import { Router } from 'react-router-dom';
+
+import StoreProvider from 'contexts/Store';
+import history from 'shared/routes/history';
+import { DetailedUser } from 'types';
+
+import UserManagement, { CREAT_USER_LABEL, CREATE_USER, USER_TITLE } from './UserManagement';
+
+const DISPLAY_NAME = 'Test Name';
+const USERNAME = 'test_username1';
+
+const user = userEvent.setup();
+
+jest.mock('services/api', () => ({
+  getUsers: () => {
+    const currentUser: DetailedUser = {
+      displayName: DISPLAY_NAME,
+      id: 1,
+      isActive: true,
+      isAdmin: false,
+      username: USERNAME,
+    };
+    const users: Array<DetailedUser> = [ currentUser ];
+    return Promise.resolve({ pagination: { total: 1 }, users });
+  },
+}));
+
+const setup = () => render(
+  <StoreProvider>
+    <DndProvider backend={HTML5Backend}>
+      <HelmetProvider>
+        <Router history={history}>
+          <UserManagement />
+        </Router>
+      </HelmetProvider>
+    </DndProvider>
+  </StoreProvider>,
+);
+
+describe('UserManagement', () => {
+  it('should render table/button correct values', async () => {
+    await waitFor(() => setup());
+
+    expect(screen.getByText(CREATE_USER)).toBeInTheDocument();
+    expect(screen.getByText(USER_TITLE)).toBeInTheDocument();
+    expect(screen.getByText(DISPLAY_NAME)).toBeInTheDocument();
+    expect(screen.getByText(USERNAME)).toBeInTheDocument();
+  });
+
+  it('should render modal for create user when click the button', async () => {
+    await waitFor(() => setup());
+    await user.click(screen.getByLabelText(CREAT_USER_LABEL));
+
+    expect(screen.getAllByText('Create User')).toHaveLength(2);
+  });
+});

webui/react/src/pages/Settings/UserManagement.tsx

@@ -22,6 +22,10 @@ import css from './UserManagement.module.scss';
 import settingsConfig, { DEFAULT_COLUMN_WIDTHS,
   UserManagementSettings } from './UserManagement.settings';
 
+export const USER_TITLE = 'Users';
+export const CREATE_USER = 'New User';
+export const CREAT_USER_LABEL = 'new_user';
+
 const UserManagement: React.FC = () => {
   const [ users, setUsers ] = useState<DetailedUser[]>([]);
   const [ isLoading, setIsLoading ] = useState(true);
@@ -185,10 +189,10 @@ const UserManagement: React.FC = () => {
       containerRef={pageRef}
       options={(
         <Space>
-          <Button onClick={onClickCreateUser}>New User</Button>
+          <Button aria-label={CREAT_USER_LABEL} onClick={onClickCreateUser}>{CREATE_USER}</Button>
         </Space>
       )}
-      title="Users">
+      title={USER_TITLE}>
       <div className={css.usersTable}>{table}</div>
       {modalCreateUserContextHolder}
     </Page>