From b3d75436e0cb4a75868eae49bd6f7433cec6b72e Mon Sep 17 00:00:00 2001 From: zuies Date: Wed, 27 Sep 2023 17:45:15 +0300 Subject: [PATCH] update unit tests --- .../TcAccountActivityHeader.spec.tsx | 48 ++++++++------ .../TcAudienceResponse.spec.tsx | 24 +++++-- .../TcAudienceResponseContent.spec.tsx | 13 +++- .../TcEngagementAccounts.spec.tsx | 55 +++++++++++----- .../TcEngagementAccountsContent.spec.tsx | 62 +++++++++++++++---- .../TcYourAccountActivity.spec.tsx | 62 ++++++++++++++----- .../TcYourAccountActivityContent.spec.tsx | 57 ++++++----------- 7 files changed, 210 insertions(+), 111 deletions(-) diff --git a/src/components/twitter/growth/accountActivity/TcAccountActivityHeader.spec.tsx b/src/components/twitter/growth/accountActivity/TcAccountActivityHeader.spec.tsx index 85248a7d..f2258748 100644 --- a/src/components/twitter/growth/accountActivity/TcAccountActivityHeader.spec.tsx +++ b/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('', () => { - // Test 1: Check if the component renders correctly - it('renders without crashing', () => { - render(); - }); + 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(); + }); - 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(); - 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(); - 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'); }); }); diff --git a/src/components/twitter/growth/audienceResponse/TcAudienceResponse.spec.tsx b/src/components/twitter/growth/audienceResponse/TcAudienceResponse.spec.tsx index bdaa0a45..72349c42 100644 --- a/src/components/twitter/growth/audienceResponse/TcAudienceResponse.spec.tsx +++ b/src/components/twitter/growth/audienceResponse/TcAudienceResponse.spec.tsx @@ -3,8 +3,16 @@ import { render, screen } from '@testing-library/react'; import TcAudienceResponse from './TcAudienceResponse'; describe('', () => { + const mockAudience = { + replies: 50, + retweets: 30, + mentions: 20, + posts: 0, + likes: 0, + }; + beforeEach(() => { - render(); + render(); }); // Test 1: Check if the "Audience response" header text from `TcAudienceResponseHeader` is rendered @@ -14,10 +22,14 @@ describe('', () => { }); // 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(); + }); }); diff --git a/src/components/twitter/growth/audienceResponse/TcAudienceResponseContent.spec.tsx b/src/components/twitter/growth/audienceResponse/TcAudienceResponseContent.spec.tsx index 3743dadd..e96d5057 100644 --- a/src/components/twitter/growth/audienceResponse/TcAudienceResponseContent.spec.tsx +++ b/src/components/twitter/growth/audienceResponse/TcAudienceResponseContent.spec.tsx @@ -3,17 +3,24 @@ import { render, screen } from '@testing-library/react'; import TcAudienceResponseContent from './TcAudienceResponseContent'; describe('', () => { + 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(); + render(); }); // 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(); diff --git a/src/components/twitter/growth/engagementAccounts/TcEngagementAccounts.spec.tsx b/src/components/twitter/growth/engagementAccounts/TcEngagementAccounts.spec.tsx index 4c21c565..a1e736e3 100644 --- a/src/components/twitter/growth/engagementAccounts/TcEngagementAccounts.spec.tsx +++ b/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', () => () => ( -
Header
-)); -jest.mock('./TcEngagementAccountsContent', () => () => ( -
Content
-)); +describe('', () => { + const mockEngagement = { + hqla: 10, + hqhe: 20, + lqla: 15, + lqhe: 25, + }; -describe('TcEngagementAccounts', () => { - it('renders the component and checks presence of child components', () => { - render(); + beforeEach(() => { + render(); + }); + + // Test 1: Check if the TcEngagementAccountsHeader component is rendered. + it('renders the header component', () => { + render(); + }); + + // 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(); }); }); diff --git a/src/components/twitter/growth/engagementAccounts/TcEngagementAccountsContent.spec.tsx b/src/components/twitter/growth/engagementAccounts/TcEngagementAccountsContent.spec.tsx index 82e2e67d..5bc50d29 100644 --- a/src/components/twitter/growth/engagementAccounts/TcEngagementAccountsContent.spec.tsx +++ b/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(); +describe('', () => { + 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(); + }); - 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(); + } }); }); }); diff --git a/src/components/twitter/growth/yourAccountActivity/TcYourAccountActivity.spec.tsx b/src/components/twitter/growth/yourAccountActivity/TcYourAccountActivity.spec.tsx index 5fb5a8da..3e582e45 100644 --- a/src/components/twitter/growth/yourAccountActivity/TcYourAccountActivity.spec.tsx +++ b/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', () => () => ( -
mockTcYourAccountActivityHeader
-)); -jest.mock('./TcYourAccountActivityContent', () => () => ( -
mockTcYourAccountActivityContent
-)); describe('', () => { + const mockActivity = { + posts: 10, + likes: 100, + replies: 15, + retweets: 7, + mentions: 8, + }; + beforeEach(() => { - render(); + render(); + }); + + // Test 1: Check if the TcYourAccountActivityHeader component is rendered. + it('renders the header component', () => { + render(); }); + // 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(); + }); }); }); diff --git a/src/components/twitter/growth/yourAccountActivity/TcYourAccountActivityContent.spec.tsx b/src/components/twitter/growth/yourAccountActivity/TcYourAccountActivityContent.spec.tsx index 8f2ca154..98716f26 100644 --- a/src/components/twitter/growth/yourAccountActivity/TcYourAccountActivityContent.spec.tsx +++ b/src/components/twitter/growth/yourAccountActivity/TcYourAccountActivityContent.spec.tsx @@ -2,51 +2,32 @@ import React from 'react'; import { render, screen } from '@testing-library/react'; import TcYourAccountActivityContent from './TcYourAccountActivityContent'; -const yourAccountActivityMockList = [ - { - description: 'Number of posts', - value: 0, - hasTooltipInfo: false, - }, - { - description: 'Replies', - value: 0, - hasTooltipInfo: false, - }, - { - description: 'Retweets', - value: 0, - hasTooltipInfo: false, - }, - { - description: 'Likes', - value: 0, - hasTooltipInfo: false, - }, - { - description: 'Mentions', - value: 0, - hasTooltipInfo: false, - }, -]; - describe('', () => { + const mockData = [ + { description: 'Desc 1', value: 123, hasTooltipInfo: true }, + { description: 'Desc 2', value: 456, hasTooltipInfo: false }, + { description: 'Desc 3', value: 789, hasTooltipInfo: true }, + ]; + beforeEach(() => { - render(); + render(); }); - // Test 1: Check if each description from mock list is rendered - it('renders each description from the mock list', () => { - yourAccountActivityMockList.forEach((item) => { + it('renders the correct values and descriptions', () => { + mockData.forEach((item) => { + expect(screen.getByText(item.value.toString())).toBeInTheDocument(); expect(screen.getByText(item.description)).toBeInTheDocument(); }); }); - // Test 2: Check if the correct number of cards are rendered - it('renders the correct number of cards', () => { - const cards = yourAccountActivityMockList.map((item) => - screen.getByText(item.description) - ); - expect(cards.length).toBe(yourAccountActivityMockList.length); + it('does not render the TcIconWithTooltip when hasTooltipInfo is false', () => { + // Filtering mockData for items with hasTooltipInfo as false + const itemsWithoutTooltip = mockData.filter((item) => !item.hasTooltipInfo); + + itemsWithoutTooltip.forEach((item) => { + expect( + screen.getByText(item.description).closest('div') + ).not.toHaveTextContent('Followers and non-followers'); + }); }); });