update unit tests

src/components/twitter/growth/accountActivity/TcAccountActivityHeader.spec.tsx

@@ -1,34 +1,42 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
+import { StorageService } from '../../../../services/StorageService';
 import TcAccountActivityHeader from './TcAccountActivityHeader';
 
+jest.mock('../../../../services/StorageService');
+
 describe('<TcAccountActivityHeader />', () => {
-  // Test 1: Check if the component renders correctly
-  it('renders without crashing', () => {
-    render(<TcAccountActivityHeader />);
-  });
+  beforeEach(() => {
+    // Mocking the `readLocalStorage` method
+    const mockedReadLocalStorage =
+      StorageService.readLocalStorage as jest.MockedFunction<
+        typeof StorageService.readLocalStorage
+      >;
+
+    mockedReadLocalStorage.mockReturnValue({
+      twitter: {
+        twitterUsername: 'testUser',
+      },
+    });
 
-  // Test 2: Check if the expected texts are displayed
-  it('displays the expected texts', () => {
     render(<TcAccountActivityHeader />);
+  });
 
-    expect(screen.getByText('Account activity')).toBeInTheDocument();
-    expect(screen.getByText('Data over the last 7 days')).toBeInTheDocument();
-    expect(screen.getByText('Analyzed account:')).toBeInTheDocument();
-    expect(screen.getByText('@daoxyz')).toBeInTheDocument();
+  it('renders the main header text', () => {
+    const headerText = screen.getByText('Account activity');
+    expect(headerText).toBeInTheDocument();
   });
 
-  // Test 3: Check if the BiTimeFive icon (SVG) is rendered using data-testid
-  it('renders the BiTimeFive icon (SVG)', () => {
-    render(<TcAccountActivityHeader />);
-    const svgIcon = screen.getByTestId('bi-time-five-icon');
-    expect(svgIcon).toBeInTheDocument();
+  it('renders the time information with an icon', () => {
+    const timeInfoText = screen.getByText('Data over the last 7 days');
+    const timeIcon = screen.getByTestId('bi-time-five-icon');
+    expect(timeInfoText).toBeInTheDocument();
+    expect(timeIcon).toBeInTheDocument();
   });
 
-  // Test 4: Check if TcLink with the to prop as '/' is rendered
-  it('renders TcLink with to prop as "/"', () => {
-    render(<TcAccountActivityHeader />);
-    const link = screen.getByRole('link', { name: /@daoxyz/i });
-    expect(link).toHaveAttribute('href', '/');
+  it('renders the analyzed account username when provided', () => {
+    const usernameLink = screen.getByText('@testUser');
+    expect(usernameLink).toBeInTheDocument();
+    expect(usernameLink).toHaveAttribute('href', '/settings');
   });
 });

src/components/twitter/growth/audienceResponse/TcAudienceResponse.spec.tsx

@@ -3,8 +3,16 @@ import { render, screen } from '@testing-library/react';
 import TcAudienceResponse from './TcAudienceResponse';
 
 describe('<TcAudienceResponse />', () => {
+  const mockAudience = {
+    replies: 50,
+    retweets: 30,
+    mentions: 20,
+    posts: 0,
+    likes: 0,
+  };
+
   beforeEach(() => {
-    render(<TcAudienceResponse />);
+    render(<TcAudienceResponse audience={mockAudience} />);
   });
 
   // Test 1: Check if the "Audience response" header text from `TcAudienceResponseHeader` is rendered
@@ -14,10 +22,14 @@ describe('<TcAudienceResponse />', () => {
   });
 
   // Test 2: Check if any one of the descriptions from `TcAudienceResponseContent` is rendered
-  it('renders the content descriptions correctly', () => {
-    const contentDescription = screen.getByText('Replies');
-    expect(contentDescription).toBeInTheDocument();
-  });
+  it('renders the content descriptions correctly based on provided audience data', () => {
+    // Using the data in mockAudience for validation
+    const repliesDescription = screen.getByText('Replies');
+    const retweetsDescription = screen.getByText('Retweets');
+    const mentionsDescription = screen.getByText('Mentions');
 
-  // ... You can add more tests specific to content or other requirements if needed.
+    expect(repliesDescription).toBeInTheDocument();
+    expect(retweetsDescription).toBeInTheDocument();
+    expect(mentionsDescription).toBeInTheDocument();
+  });
 });

src/components/twitter/growth/audienceResponse/TcAudienceResponseContent.spec.tsx

@@ -3,17 +3,24 @@ import { render, screen } from '@testing-library/react';
 import TcAudienceResponseContent from './TcAudienceResponseContent';
 
 describe('<TcAudienceResponseContent />', () => {
+  const mockData = [
+    { description: 'Replies', value: 50, hasTooltipInfo: false },
+    { description: 'Retweets', value: 30, hasTooltipInfo: false },
+    { description: 'Likes', value: 25, hasTooltipInfo: false },
+    { description: 'Mentions', value: 20, hasTooltipInfo: false },
+  ];
+
   beforeEach(() => {
-    render(<TcAudienceResponseContent />);
+    render(<TcAudienceResponseContent data={mockData} />);
   });
 
   // Test 1: Check if the correct number of cards are rendered
   it('renders the correct number of cards', () => {
     const cards = screen.getAllByText(/Replies|Retweets|Likes|Mentions/);
-    expect(cards.length).toBe(4); // As per your mock data, there are 4 cards
+    expect(cards.length).toBe(4);
   });
 
-  // Test 3: Check if the TcIconWithTooltip is not present for all cards (because hasTooltipInfo is false for all)
+  // Test 2: Check if the TcIconWithTooltip is not present for all cards
   it('does not render any tooltips', () => {
     const tooltipText = 'Followers and non-followers';
     expect(screen.queryByText(tooltipText)).not.toBeInTheDocument();

src/components/twitter/growth/engagementAccounts/TcEngagementAccounts.spec.tsx

@@ -1,24 +1,49 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
 import TcEngagementAccounts from './TcEngagementAccounts';
+import TcEngagementAccountsHeader from './TcEngagementAccountsHeader';
 
-// Mock the child components to simplify the test
-jest.mock('./TcEngagementAccountsHeader', () => () => (
-  <div data-testid="header-mock">Header</div>
-));
-jest.mock('./TcEngagementAccountsContent', () => () => (
-  <div data-testid="content-mock">Content</div>
-));
+describe('<TcEngagementAccounts />', () => {
+  const mockEngagement = {
+    hqla: 10,
+    hqhe: 20,
+    lqla: 15,
+    lqhe: 25,
+  };
 
-describe('TcEngagementAccounts', () => {
-  it('renders the component and checks presence of child components', () => {
-    render(<TcEngagementAccounts />);
+  beforeEach(() => {
+    render(<TcEngagementAccounts engagement={mockEngagement} />);
+  });
+
+  // Test 1: Check if the TcEngagementAccountsHeader component is rendered.
+  it('renders the header component', () => {
+    render(<TcEngagementAccountsHeader />);
+  });
+
+  // Test 2: Check if the data is rendered correctly in the TcEngagementAccountsContent component.
+  it('renders the correct engagement values and descriptions', () => {
+    const descriptions = [
+      'Only engaged a bit but deeper interactions',
+      'Frequently engaged and deep interactions',
+      'Only engaged a bit and shallow interactions',
+      'Frequently engaged but shallow interactions',
+    ];
 
-    // Check if the mocked header component is rendered
-    expect(screen.getByTestId('header-mock')).toBeInTheDocument();
+    descriptions.forEach((description) => {
+      expect(screen.getByText(description)).toBeInTheDocument();
+    });
 
-    // Check if the mocked content component is rendered
-    expect(screen.getByTestId('content-mock')).toBeInTheDocument();
+    expect(
+      screen.getByText(mockEngagement.hqla.toString())
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(mockEngagement.hqhe.toString())
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(mockEngagement.lqla.toString())
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(mockEngagement.lqhe.toString())
+    ).toBeInTheDocument();
   });
 });

src/components/twitter/growth/engagementAccounts/TcEngagementAccountsContent.spec.tsx

@@ -1,23 +1,61 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
 import TcEngagementAccountsContent from './TcEngagementAccountsContent';
 
-describe('TcEngagementAccountsContent', () => {
-  it('renders the component and checks presence of key elements', () => {
-    render(<TcEngagementAccountsContent />);
+describe('<TcEngagementAccountsContent />', () => {
+  const mockContentItems = [
+    {
+      bgColor: 'bg-red',
+      value: 10,
+      description: 'Description 1',
+      tooltipText: 'Tooltip 1',
+      label: 'Label 1',
+    },
+    {
+      bgColor: 'bg-blue',
+      value: 20,
+      description: 'Description 2',
+      tooltipText: 'Tooltip 2',
+    },
+    {
+      bgColor: 'bg-yellow',
+      value: 30,
+      description: 'Description 3',
+      tooltipText: 'Tooltip 3',
+      label: 'Label 3',
+    },
+    {
+      bgColor: 'bg-green',
+      value: 40,
+      description: 'Description 4',
+      tooltipText: 'Tooltip 4',
+    },
+  ];
 
-    expect(screen.getByText('Quality of engagement')).toBeInTheDocument();
-    expect(screen.getByText('Amount of engagement')).toBeInTheDocument();
+  beforeEach(() => {
+    render(<TcEngagementAccountsContent contentItems={mockContentItems} />);
+  });
 
-    const highTexts = screen.getAllByText(/High/i);
-    highTexts.forEach((element) => {
-      expect(element).toBeInTheDocument();
+  // Test 1: Check if the TcEngagementAccountContentItems component is rendered for each item.
+  it('renders content items correctly', () => {
+    mockContentItems.forEach((item) => {
+      expect(screen.getByText(item.description)).toBeInTheDocument();
     });
+  });
+
+  // Test 2: Check if the labels 'High' and 'Low' are rendered.
+  it('renders the labels High and Low', () => {
+    ['High', 'Low'].forEach((label) => {
+      expect(screen.getByText(label)).toBeInTheDocument();
+    });
+  });
 
-    const lowTexts = screen.getAllByText(/Low/i);
-    lowTexts.forEach((element) => {
-      expect(element).toBeInTheDocument();
+  // Test 3: Check if specific labels in content items are rendered.
+  it('renders content item labels correctly', () => {
+    mockContentItems.forEach((item) => {
+      if (item.label) {
+        expect(screen.getByText(item.label)).toBeInTheDocument();
+      }
     });
   });
 });

src/components/twitter/growth/yourAccountActivity/TcYourAccountActivity.spec.tsx

@@ -2,32 +2,60 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import TcYourAccountActivity from './TcYourAccountActivity';
 import TcYourAccountActivityHeader from './TcYourAccountActivityHeader';
-import TcYourAccountActivityContent from './TcYourAccountActivityContent';
-
-// Mocking child components
-jest.mock('./TcYourAccountActivityHeader', () => () => (
-  <div>mockTcYourAccountActivityHeader</div>
-));
-jest.mock('./TcYourAccountActivityContent', () => () => (
-  <div>mockTcYourAccountActivityContent</div>
-));
 
 describe('<TcYourAccountActivity />', () => {
+  const mockActivity = {
+    posts: 10,
+    likes: 100,
+    replies: 15,
+    retweets: 7,
+    mentions: 8,
+  };
+
   beforeEach(() => {
-    render(<TcYourAccountActivity />);
+    render(<TcYourAccountActivity activity={mockActivity} />);
+  });
+
+  // Test 1: Check if the TcYourAccountActivityHeader component is rendered.
+  it('renders the header component', () => {
+    render(<TcYourAccountActivityHeader />);
   });
+  // Test 2: Check if the data is rendered correctly in the TcYourAccountActivityContent component.
+  it('renders the correct activity values and descriptions', () => {
+    expect(screen.getByText('Number of posts')).toBeInTheDocument();
+    expect(screen.getByText(mockActivity.posts.toString())).toBeInTheDocument();
+
+    expect(screen.getByText('Likes')).toBeInTheDocument();
+    expect(screen.getByText(mockActivity.likes.toString())).toBeInTheDocument();
 
-  // Test 1: Check if TcYourAccountActivityHeader is rendered
-  it('renders TcYourAccountActivityHeader component', () => {
+    expect(screen.getByText('Replies')).toBeInTheDocument();
     expect(
-      screen.getByText('mockTcYourAccountActivityHeader')
+      screen.getByText(mockActivity.replies.toString())
     ).toBeInTheDocument();
-  });
 
-  // Test 2: Check if TcYourAccountActivityContent is rendered
-  it('renders TcYourAccountActivityContent component', () => {
+    expect(screen.getByText('Retweets')).toBeInTheDocument();
     expect(
-      screen.getByText('mockTcYourAccountActivityContent')
+      screen.getByText(mockActivity.retweets.toString())
     ).toBeInTheDocument();
+
+    expect(screen.getByText('Mentions')).toBeInTheDocument();
+    expect(
+      screen.getByText(mockActivity.mentions.toString())
+    ).toBeInTheDocument();
+  });
+
+  // Test 3: Check transformation logic. This might be optional as it's more of an implementation detail.
+  it('transforms the activity data correctly', () => {
+    const expectedDescriptions = [
+      'Number of posts',
+      'Likes',
+      'Replies',
+      'Retweets',
+      'Mentions',
+    ];
+
+    expectedDescriptions.forEach((description) => {
+      expect(screen.getByText(description)).toBeInTheDocument();
+    });
   });
 });