chore: added tests and states

Author: sanjam-deriv

src/features/dashboard/components/ApiTokenForm/__tests__/api-token.form.test.tsx

@@ -4,6 +4,7 @@ import userEvent from '@testing-library/user-event';
 import ApiTokenForm from '../api-token.form';
 import useCreateToken from '../../../hooks/useCreateToken';
 import useApiToken from '@site/src/hooks/useApiToken';
+import TokenNameRestrictions from '../../TokenNameRestrictions/TokenNameRestrictions';
 
 jest.mock('@site/src/hooks/useApiToken');
 
@@ -138,6 +139,14 @@ describe('Home Page', () => {
     expect(error).toBeVisible;
   });
 
+  it('should hide restrictions if error is present', async () => {
+    const nameInput = screen.getByRole('textbox');
+    const restrictions = screen.getByRole('list');
+    expect(restrictions).toBeVisible();
+    await userEvent.type(nameInput, 'testtoken1');
+    expect(restrictions).not.toBeVisible();
+  });
+
   it('Should not create token when name input is empty', async () => {
     const nameInput = screen.getByRole('textbox');
 

src/features/dashboard/components/ApiTokenForm/api-token.form.tsx

@@ -1,4 +1,4 @@
-import React, { HTMLAttributes, useCallback, useState } from 'react';
+import React, { HTMLAttributes, useCallback, useEffect, useState } from 'react';
 import { Text } from '@deriv/ui';
 import { useForm } from 'react-hook-form';
 import { Circles } from 'react-loader-spinner';
@@ -80,7 +80,7 @@ const scopes: TScope[] = [
 
 const ApiTokenForm = (props: HTMLAttributes<HTMLFormElement>) => {
   const { createToken, isCreatingToken } = useCreateToken();
-  const [restrictions, setRestrictions] = useState(false);
+  const [hiderestrictions, setHideRestrictions] = useState(false);
   const [form_is_cleared, setFormIsCleared] = useState(false);
 
   const {
@@ -94,7 +94,6 @@ const ApiTokenForm = (props: HTMLAttributes<HTMLFormElement>) => {
     resolver: yupResolver(schema),
     mode: 'all',
   });
-
   const onSubmit = useCallback(
     (data: TApiTokenForm) => {
       const { name } = data;
@@ -120,6 +119,10 @@ const ApiTokenForm = (props: HTMLAttributes<HTMLFormElement>) => {
     [getValues, setValue],
   );
 
+  useEffect(() => {
+    errors.name?.message ? setHideRestrictions(true) : setHideRestrictions(false);
+  }, [errors.name?.message]);
+
   return (
     <form role={'form'} onSubmit={handleSubmit(onSubmit)} {...props}>
       <div className={styles.steps_line} />
@@ -160,7 +163,7 @@ const ApiTokenForm = (props: HTMLAttributes<HTMLFormElement>) => {
           form_is_cleared={form_is_cleared}
           setFormIsCleared={setFormIsCleared}
         />
-        <TokenNameRestrictions />
+        {!hiderestrictions && <TokenNameRestrictions />}
         <div className={styles.step_title}>
           <div className={`${styles.third_step} ${styles.step}`}>
             <Text as={'p'} type={'paragraph-1'} data-testid={'third-step-title'}>

src/features/dashboard/components/TokenNameRestrictions/__tests__/TokenNameRestrictions.test.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { render, screen } from '@site/src/test-utils';
+import TokenNameRestrictions from '../TokenNameRestrictions';
+
+describe('Restrictions for App name', () => {
+  beforeEach(() => {
+    render(<TokenNameRestrictions />);
+  });
+  it('Should render the list', () => {
+    const RestrictonList = screen.getByRole('list');
+    expect(RestrictonList).toBeInTheDocument();
+  });
+
+  it('Should display correct content inside list items', () => {
+    const listItem1 = screen.getByText(
+      'Only alphanumeric characters with spaces and underscores are allowed.',
+    );
+    const listItem2 = screen.getByText('Only 2-32 characters are allowed');
+    const listItem3 = screen.getByText(
+      'No duplicate token names are allowed for the same account.',
+    );
+    const listItem4 = screen.getByText(
+      'No keywords "deriv" or "binary" or words that look similar, e.g. "_binary_" or "d3eriv" are allowed.',
+    );
+
+    expect(listItem1).toBeInTheDocument();
+    expect(listItem2).toBeInTheDocument();
+    expect(listItem3).toBeInTheDocument();
+    expect(listItem4).toBeInTheDocument();
+  });
+});