Merge pull request #4 from suisin-deriv/update_api_token_test_case_ba…

…sed_on_comments

Update api token test case based on comments

packages/account/src/Components/api-token/_tests_/api-token-article.spec.tsx

@@ -7,7 +7,7 @@ it('should render ApiTokenArticle', () => {
     expect(screen.getByText('API token'));
     expect(
         screen.getByText(
-            `To access your mobile apps and other third-party apps, you'll first need to generate an API token.`
+            /To access your mobile apps and other third-party apps, you'll first need to generate an API token./i
         )
     ).toBeInTheDocument();
 });

packages/account/src/Components/api-token/_tests_/api-token-card.spec.tsx

@@ -1,53 +1,35 @@
 import React from 'react';
+import { Formik, Form } from 'formik';
 import { screen, render } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
 import ApiTokenCard from '../api-token-card';
-import { Formik, Form } from 'formik';
 
 describe('<ApiTokenCard />', () => {
     const mock_props = {
         name: 'Api_token_card_test_case',
         value: false,
-        display_name: 'API Token Card',
-        description: 'API Token Description',
-        setFieldValue: jest.fn(),
+        display_name: <div>API Token Card</div>,
+        description: <div>API Token Description</div>,
     };
 
-    it('should render ApiTokenCard', () => {
+    const renderComponent = (children?: JSX.Element) => {
         render(
             <Formik initialValues={{ [mock_props.name]: mock_props.value }} onSubmit={jest.fn()}>
                 <Form>
-                    <ApiTokenCard {...mock_props} />
+                    <ApiTokenCard {...mock_props}>{children}</ApiTokenCard>
                 </Form>
             </Formik>
         );
+    };
+
+    it('should render ApiTokenCard', () => {
+        renderComponent();
         expect(screen.getByText('API Token Card')).toBeInTheDocument();
         expect(screen.getByText('API Token Description')).toBeInTheDocument();
     });
 
     it('should render ApiTokenCard with children', () => {
         const children = <div>API Token Children</div>;
-
-        render(
-            <Formik initialValues={{ [mock_props.name]: mock_props.value }} onSubmit={jest.fn()}>
-                <Form>
-                    <ApiTokenCard {...mock_props}>{children}</ApiTokenCard>
-                </Form>
-            </Formik>
-        );
+        renderComponent(children);
         expect(screen.getByText('API Token Children')).toBeInTheDocument();
     });
-
-    it('should run setFieldValue after clicking on checkbox', () => {
-        render(
-            <Formik initialValues={{ [mock_props.name]: mock_props.value }} onSubmit={jest.fn()}>
-                <Form>
-                    <ApiTokenCard {...mock_props} />
-                </Form>
-            </Formik>
-        );
-        const message = screen.getByText('API Token Card');
-        userEvent.click(message);
-        expect(mock_props.setFieldValue).toBeCalled();
-    });
 });

packages/account/src/Components/api-token/_tests_/api-token-delete-button.spec.tsx

@@ -10,7 +10,14 @@ document.body.appendChild(modal_root_el);
 
 describe('ApiTokenDeleteButton', () => {
     const mock_props = {
-        api_tokens: undefined,
+        api_tokens: [
+            {
+                display_name: '',
+                last_used: '',
+                scopes: [],
+                token: '',
+            },
+        ],
         deleteToken: jest.fn(() => Promise.resolve()),
         footer_ref: document.createElement('div'),
         overlay_ref: document.createElement('div'),
@@ -25,7 +32,7 @@ describe('ApiTokenDeleteButton', () => {
         },
     };
 
-    const renderAPiDeleteButton = () => {
+    const renderAPIDeleteButton = () => {
         render(
             <ApiTokenContext.Provider value={mock_props}>
                 <ApiTokenDeleteButton {...mock_token} />
@@ -34,20 +41,20 @@ describe('ApiTokenDeleteButton', () => {
     };
 
     it('should render ApiTokenDeleteButton', () => {
-        renderAPiDeleteButton();
+        renderAPIDeleteButton();
         expect(screen.getByTestId('dt_token_delete_icon')).toBeInTheDocument();
         expect(screen.queryByText('Delete this token')).not.toBeInTheDocument();
     });
 
     it('should display Delete this token when mouse enter', () => {
-        renderAPiDeleteButton();
+        renderAPIDeleteButton();
         const delete_icon = screen.getByTestId('dt_token_delete_icon');
         userEvent.hover(delete_icon);
         expect(screen.getByText('Delete this token')).toBeInTheDocument();
     });
 
     it('should not Delete this token when mouse leave', () => {
-        renderAPiDeleteButton();
+        renderAPIDeleteButton();
         const delete_icon = screen.getByTestId('dt_token_delete_icon');
         userEvent.hover(delete_icon);
         expect(screen.getByText('Delete this token')).toBeInTheDocument();
@@ -56,7 +63,7 @@ describe('ApiTokenDeleteButton', () => {
     });
 
     it('should display Popup when delete icon is clicked', () => {
-        renderAPiDeleteButton();
+        renderAPIDeleteButton();
         const delete_icon = screen.getByTestId('dt_token_delete_icon');
         userEvent.click(delete_icon);
         expect(screen.getByText('Delete token')).toBeInTheDocument();
@@ -66,7 +73,7 @@ describe('ApiTokenDeleteButton', () => {
     });
 
     it('should close the modal when clicked on Cancel', async () => {
-        renderAPiDeleteButton();
+        renderAPIDeleteButton();
         const delete_icon = screen.getByTestId('dt_token_delete_icon');
         userEvent.click(delete_icon);
         expect(screen.getByRole('button', { name: 'Cancel' })).toBeInTheDocument();
@@ -79,7 +86,7 @@ describe('ApiTokenDeleteButton', () => {
     });
 
     it('should should trigger deleteToken when clicked on Yes, delete', async () => {
-        renderAPiDeleteButton();
+        renderAPIDeleteButton();
         const delete_icon = screen.getByTestId('dt_token_delete_icon');
         userEvent.click(delete_icon);
         expect(screen.getByRole('button', { name: 'Cancel' })).toBeInTheDocument();