test: update testcases

Author: utkarsha-deriv

src/components/Footer/__tests__/Footer.test.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import '@testing-library/jest-dom';
 import { cleanup, render, screen, RenderResult, within } from '@site/src/test-utils';
 import Footer from '../';
+import userEvent from '@testing-library/user-event';
 
 describe('HeroHeader', () => {
   let render_result: RenderResult;
@@ -25,27 +26,23 @@ describe('HeroHeader', () => {
     );
     expect(footer_description).toBeInTheDocument();
   });
-  it('should render community link properly', () => {
-    const community_link = screen.getByTestId('community-link');
-    expect(community_link).toBeInTheDocument();
-    expect(community_link).toHaveAttribute('href', 'https://deriv.vanillacommunity.com/');
-  });
-  it('should render the button inside community link properly', () => {
-    const community_link = screen.getByTestId('community-link');
-    const { getByRole } = within(community_link);
-    const button = getByRole('button');
-    expect(button).toHaveTextContent('Join our community');
-  });
-  it('should render telegram link properly', () => {
-    const telegram_link = screen.getByTestId('telegram-link');
-    expect(telegram_link).toBeInTheDocument();
-    expect(telegram_link).toHaveAttribute('href', 'https://t.me/+g6FV5tFY1u9lZGE1');
-  });
-  it('should render the button inside telegram link properly', () => {
-    const telegram_link = screen.getByTestId('telegram-link');
-    const { getByRole } = within(telegram_link);
-    const button = getByRole('button');
-    expect(button).toHaveTextContent('Telegram');
+  it('should render community link when community button is clicked', async () => {
+    window.open = jest.fn();
+
+    const communityButton = screen.getByRole('button', { name: 'Join our community' });
+    expect(communityButton).toBeInTheDocument();
+    await userEvent.click(communityButton);
+
+    expect(window.open).toHaveBeenCalledWith('https://deriv.vanillacommunity.com/');
+  });
+  it('should render telegram link when telegram button is clicked', async () => {
+    window.open = jest.fn();
+
+    const telegramButton = screen.getByRole('button', { name: 'Telegram' });
+    expect(telegramButton).toBeInTheDocument();
+    await userEvent.click(telegramButton);
+
+    expect(window.open).toHaveBeenCalledWith('https://t.me/+g6FV5tFY1u9lZGE1');
   });
   it('should render footer body texts properly', () => {
     const help_text = screen.getByText(/^we're here to help$/i);

src/components/Footer/index.tsx

@@ -16,14 +16,12 @@ const Footer = () => {
           <button
             className={styles.communityButton}
             onClick={() => window.open('https://deriv.vanillacommunity.com/')}
-            data-testid='community-link'
           >
             Join our community
           </button>
           <button
             className={styles.communityButton}
             onClick={() => window.open('https://t.me/+g6FV5tFY1u9lZGE1')}
-            data-testid='telegram-link'
           >
             <div className={styles.Telegram}>
               <img src='/img/telegram.svg' className={styles.TelegramIcon} />