chore(account): write tests for CreateAccessToken [EE-2561] (#6578)

app/portainer/components/ReactExample.tsx

@@ -30,12 +30,12 @@ export function ReactExample({ text }: ReactExampleProps) {
       <div className={styles.redBg}>{text}</div>
       <div>
         <a href={href} onClick={onClick}>
-          {t('reactExample.registries.useSref', 'Registries useSref')}
+          {t('Registries useSref')}
         </a>
       </div>
       <div>
         <Link to={route}>
-          <Trans i18nKey="reactExample.registries.link">
+          <Trans>
             Registries <strong>Link</strong>
           </Trans>
         </Link>

app/portainer/views/account/CreateAccessToken/CreateAccessToken.test.tsx

@@ -0,0 +1,54 @@
+import userEvent from '@testing-library/user-event';
+
+import { render } from '@/react-tools/test-utils';
+
+import { CreateAccessToken } from './CreateAccessToken';
+
+test('the button is disabled when description is missing and enabled when description is filled', async () => {
+  const queries = renderComponent();
+
+  const button = queries.getByRole('button', { name: 'Add access token' });
+
+  expect(button).toBeDisabled();
+
+  const descriptionField = queries.getByLabelText('Description');
+
+  userEvent.type(descriptionField, 'description');
+
+  expect(button).toBeEnabled();
+
+  userEvent.clear(descriptionField);
+
+  expect(button).toBeDisabled();
+});
+
+test('once the button is clicked, the access token is generated and displayed', async () => {
+  const token = 'a very long access token that should be displayed';
+  const onSubmit = jest.fn(() => Promise.resolve({ rawAPIKey: token }));
+
+  const queries = renderComponent(onSubmit);
+
+  const descriptionField = queries.getByLabelText('Description');
+
+  userEvent.type(descriptionField, 'description');
+
+  const button = queries.getByRole('button', { name: 'Add access token' });
+
+  userEvent.click(button);
+
+  expect(onSubmit).toHaveBeenCalledWith('description');
+  expect(onSubmit).toHaveBeenCalledTimes(1);
+
+  await expect(queries.findByText('New access token')).resolves.toBeVisible();
+  expect(queries.getByText(token)).toHaveTextContent(token);
+});
+
+function renderComponent(onSubmit = jest.fn()) {
+  const queries = render(
+    <CreateAccessToken onSubmit={onSubmit} onError={jest.fn()} />
+  );
+
+  expect(queries.getByLabelText('Description')).toBeVisible();
+
+  return queries;
+}

app/portainer/views/account/CreateAccessToken/CreateAccessToken.tsx

@@ -18,9 +18,6 @@ interface AccessTokenResponse {
 }
 
 export interface Props {
-  // userId for whom the access token is generated for
-  userId: number;
-
   // onSubmit dispatches a successful matomo analytics event
   onSubmit: (description: string) => Promise<AccessTokenResponse>;
 
@@ -32,7 +29,8 @@ export function CreateAccessToken({
   onSubmit,
   onError,
 }: PropsWithChildren<Props>) {
-  const { t } = useTranslation();
+  const translationNS = 'account.accessTokens.create';
+  const { t } = useTranslation(translationNS);
 
   const router = useRouter();
   const [description, setDescription] = useState('');
@@ -42,12 +40,7 @@ export function CreateAccessToken({
 
   useEffect(() => {
     if (description.length === 0) {
-      setErrorText(
-        t(
-          'users.access-tokens.create.form.description-field.error.required',
-          'this field is required'
-        )
-      );
+      setErrorText(t('this field is required'));
     } else setErrorText('');
   }, [description, t]);
 
@@ -73,10 +66,7 @@ export function CreateAccessToken({
         <div>
           <FormControl
             inputId="input"
-            label={t(
-              'users.access-tokens.create.form.description-field.label',
-              'Description'
-            )}
+            label={t('Description')}
             errors={errorText}
           >
             <Input
@@ -90,36 +80,30 @@ export function CreateAccessToken({
             onClick={() => generateAccessToken()}
             className={styles.addButton}
           >
-            {t('users.access-tokens.create.add-button', 'Add access token')}
+            {t('Add access token')}
           </Button>
         </div>
         {accessToken && (
           <>
             <FormSectionTitle>
-              <Trans i18nKey="users.access-tokens.create.new-access-token.title">
-                New access token
-              </Trans>
+              <Trans ns={translationNS}>New access token</Trans>
             </FormSectionTitle>
             <TextTip>
-              <Trans i18nKey="users.access-tokens.create.new-access-token.explanation">
+              <Trans ns={translationNS}>
                 Please copy the new access token. You won&#39;t be able to view
                 the token again.
               </Trans>
             </TextTip>
             <Code>{accessToken}</Code>
             <CopyButton copyText={accessToken} className={styles.copyButton}>
-              <Trans i18nKey="users.access-tokens.create.new-access-token.copy-button">
-                Copy access token
-              </Trans>
+              <Trans ns={translationNS}>Copy access token</Trans>
             </CopyButton>
             <hr />
             <Button
               type="button"
               onClick={() => router.stateService.go('portainer.account')}
             >
-              <Trans i18nKey="users.access-tokens.create.done-button">
-                Done
-              </Trans>
+              <Trans ns={translationNS}>Done</Trans>
             </Button>
           </>
         )}