test: successful login with weak or strong password

webui/react/src/components/DeterminedAuth.test.tsx

@@ -0,0 +1,85 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import UIProvider, { DefaultTheme } from 'hew/Theme';
+import { useInitApi } from 'hew/Toast';
+import { useState } from 'react';
+
+import { login } from 'services/api';
+
+import DeterminedAuth, {
+  PASSWORD_ID,
+  SUBMIT_ID,
+  USERNAME_ID,
+  WEAK_PASSWORD_SUBJECT,
+} from './DeterminedAuth';
+import { ThemeProvider } from './ThemeProvider';
+
+const USERNAME = 'username';
+const WEAK_PASSWORD = 'password';
+const STRONG_PASSWORD = 'dO2Ccf5ceozXJFuMhjEx32UgtR4X4yZTm1Vv';
+
+vi.mock('services/api', () => ({
+  login: vi.fn().mockResolvedValue({ token: '', user: {} }),
+}));
+
+const Container = (): JSX.Element => {
+  const [canceler] = useState(new AbortController());
+  useInitApi();
+  return <DeterminedAuth canceler={canceler} />;
+};
+
+const setup = () => {
+  render(
+    <UIProvider theme={DefaultTheme.Light}>
+      <ThemeProvider>
+        <Container />
+      </ThemeProvider>
+    </UIProvider>,
+  );
+};
+
+const user = userEvent.setup();
+describe('DeterminedAuth', () => {
+  it('logs in with strong password', async () => {
+    setup();
+
+    await user.type(screen.getByTestId(USERNAME_ID), USERNAME);
+    await user.type(screen.getByTestId(PASSWORD_ID), STRONG_PASSWORD);
+    user.click(screen.getByTestId(SUBMIT_ID));
+
+    await waitFor(() => {
+      // onFinish begins:
+      expect(screen.getByRole('button')).toBeDisabled();
+    });
+    await waitFor(() => {
+      // onFinish ends:
+      expect(screen.getByRole('button')).not.toBeDisabled();
+
+      expect(screen.queryByText(WEAK_PASSWORD_SUBJECT)).not.toBeInTheDocument();
+      expect(vi.mocked(login)).toHaveBeenLastCalledWith(
+        { password: STRONG_PASSWORD, username: USERNAME },
+        {
+          signal: expect.any(AbortSignal),
+        },
+      );
+    });
+  });
+
+  it('logs in with weak password', async () => {
+    setup();
+    await user.clear(screen.getByTestId(USERNAME_ID));
+    await user.type(screen.getByTestId(USERNAME_ID), USERNAME);
+    await user.type(screen.getByTestId(PASSWORD_ID), WEAK_PASSWORD);
+    user.click(screen.getByTestId(SUBMIT_ID));
+
+    await waitFor(() => {
+      expect(screen.getByText(WEAK_PASSWORD_SUBJECT)).toBeInTheDocument();
+      expect(vi.mocked(login)).toHaveBeenLastCalledWith(
+        { password: WEAK_PASSWORD, username: USERNAME },
+        {
+          signal: expect.any(AbortSignal),
+        },
+      );
+    });
+  });
+});

webui/react/src/components/DeterminedAuth.tsx

@@ -25,11 +25,16 @@ interface Props {
   canceler: AbortController;
 }
 
-interface FromValues {
+interface FormValues {
   password?: string;
   username?: string;
 }
 
+export const WEAK_PASSWORD_SUBJECT = 'Weak Password';
+export const USERNAME_ID = 'username';
+export const PASSWORD_ID = 'password';
+export const SUBMIT_ID = 'submit';
+
 const storage = new StorageManager({ basePath: '/DeterminedAuth', store: window.localStorage });
 const STORAGE_KEY_LAST_USERNAME = 'lastUsername';
 
@@ -41,7 +46,7 @@ const DeterminedAuth: React.FC<Props> = ({ canceler }: Props) => {
   const [isSubmitted, setIsSubmitted] = useState<boolean>(false);
 
   const onFinish = useCallback(
-    async (creds: FromValues): Promise<void> => {
+    async (creds: FormValues): Promise<void> => {
       uiActions.showSpinner();
       setCanSubmit(false);
       setIsSubmitted(true);
@@ -62,7 +67,7 @@ const DeterminedAuth: React.FC<Props> = ({ canceler }: Props) => {
             level: ErrorLevel.Warn,
             publicMessage:
               'Your current password is either blank or weak according to current security recommendations. Please change your password.',
-            publicSubject: 'Weak Password',
+            publicSubject: WEAK_PASSWORD_SUBJECT,
             silent: false,
             type: ErrorType.Input,
           });
@@ -91,7 +96,7 @@ const DeterminedAuth: React.FC<Props> = ({ canceler }: Props) => {
     [canceler, uiActions, rbacEnabled],
   );
 
-  const onValuesChange = useCallback((_changes: FromValues, values: FromValues): void => {
+  const onValuesChange = useCallback((_changes: FormValues, values: FormValues): void => {
     const hasUsername = !!values.username;
     setIsBadCredentials(false);
     setCanSubmit(hasUsername);
@@ -113,14 +118,14 @@ const DeterminedAuth: React.FC<Props> = ({ canceler }: Props) => {
         ]}>
         <Input
           autoFocus
-          data-testid="username"
+          data-testid={USERNAME_ID}
           placeholder="username"
           prefix={<Icon name="user" size="small" title="Username" />}
         />
       </Form.Item>
       <Form.Item name="password">
         <Input.Password
-          data-testid="password"
+          data-testid={PASSWORD_ID}
           placeholder="password"
           prefix={<Icon name="lock" size="small" title="Password" />}
         />
@@ -130,7 +135,7 @@ const DeterminedAuth: React.FC<Props> = ({ canceler }: Props) => {
       )}
       <Form.Item>
         <Button
-          data-testid="submit"
+          data-testid={SUBMIT_ID}
           disabled={!canSubmit}
           htmlType="submit"
           loading={isSubmitted}