chore: clean up profile tests (#59461)

client/src/components/profile/components/heat-map.test.tsx

@@ -36,14 +36,6 @@ afterEach(() => {
 });
 
 describe('<HeatMap/>', () => {
-  // Removing the snapshot matching, because they are different every time
-  /*
-  it('renders correctly', () => {
-    const { container } = render(<HeatMap {...props} />);
-    expect(container).toMatchSnapshot();
-  });
-  */
-
   it('displays the correct title', () => {
     render(<HeatMap {...props} />);
 

client/src/components/profile/components/stats.test.tsx

@@ -1,10 +1,10 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, within } from '@testing-library/react';
 import React from 'react';
 import Stats, { calculateStreaks } from './stats';
 
 const props: { calendar: { [key: number]: number }; points: number } = {
   calendar: {},
-  points: 0
+  points: 10
 };
 
 describe('<Stats/>', () => {
@@ -21,6 +21,17 @@ describe('<Stats/>', () => {
       'profile.current-streak'
     );
   });
+
+  it('displays the correct total points', () => {
+    render(<Stats {...props} />);
+
+    const totalPoints = screen.getByTestId('total-points');
+
+    expect(
+      within(totalPoints).getByText('profile.total-points')
+    ).toBeInTheDocument();
+    expect(within(totalPoints).getByText(props.points)).toBeInTheDocument();
+  });
 });
 
 const oldStreakCalendar = {

client/src/components/profile/components/stats.tsx

@@ -72,7 +72,7 @@ function Stats({ points, calendar }: StatsProps): JSX.Element {
             </dt>
             <dd>{currentStreak || 0}</dd>
           </div>
-          <div>
+          <div data-testid='total-points'>
             <dt>
               <b>{t('profile.total-points')}</b>
             </dt>

e2e/profile.spec.ts

@@ -120,31 +120,6 @@ test.describe('Profile component', () => {
       ).toContain('Among most prolific volunteers');
     });
 
-    test('renders total points correctly', async ({ page }) => {
-      await expect(page.getByText('Total Points:')).toBeVisible();
-    });
-
-    // The date range computation in this test doesn't match the implementation code,
-    // and causes the test to fail in some cases.
-    // We would want to mock system time to keep the test stable,
-    // but Playwright currently doesn't offer a built-in mechanism for this.
-    // Ref: https://github.com/microsoft/playwright/issues/6347
-    test.skip('renders the heat map correctly', async ({ page }) => {
-      const today = new Date();
-      const currentMonth = today.toLocaleString('en-US', { month: 'short' });
-      const sixMonthsAgo = new Date(today.setMonth(today.getMonth() - 6));
-      const sixMonthsAgoMonth = sixMonthsAgo.toLocaleString('en-US', {
-        month: 'short'
-      });
-      const dateRange = `${sixMonthsAgoMonth} ${sixMonthsAgo.getFullYear()} - ${currentMonth} ${today.getFullYear()}`;
-
-      await expect(page.getByText(dateRange)).toBeVisible();
-      await expect(page.locator('.react-calendar-heatmap')).toBeVisible();
-      // Streak should be a non-negative integer
-      await expect(page.getByText(/Longest Streak: [0-9]\d*$/)).toBeVisible();
-      await expect(page.getByText(/Current Streak: [0-9]\d*$/)).toBeVisible();
-    });
-
     test('displays certifications correctly', async ({ page }) => {
       await expect(
         page.getByRole('heading', { name: 'freeCodeCamp Certifications' })