fix(learn): fixed confetti trigger on every step (freeCodeCamp#65160)

Author: rizwan-rizu

client/src/templates/Challenges/components/completion-modal.test.tsx

@@ -1,8 +1,6 @@
 import React from 'react';
 import { runSaga } from 'redux-saga';
-import { describe, test, it, expect, beforeEach, vi, Mock } from 'vitest';
-import { buildChallenge } from '@freecodecamp/challenge-builder/build';
-
+import { describe, test, it, expect, beforeEach, vi, type Mock } from 'vitest';
 import { render } from '../../../../utils/test-utils';
 
 import { getCompletedPercentage } from '../../../utils/get-completion-percentage';
@@ -14,14 +12,20 @@ import {
   challengeMetaSelector,
   challengeTestsSelector,
   isBuildEnabledSelector,
-  isBlockNewlyCompletedSelector
+  isBlockNewlyCompletedSelector,
+  currentBlockIdsSelector
 } from '../redux/selectors';
+import {
+  completedChallengesIdsSelector,
+  allChallengesInfoSelector
+} from '../../../redux/selectors';
 import { getTestRunner } from '../utils/build';
 import CompletionModal, { combineFileData } from './completion-modal';
 vi.mock('../../../analytics');
 vi.mock('../../../utils/fire-confetti');
 vi.mock('../../../components/Progress');
 vi.mock('../redux/selectors');
+vi.mock('../../../redux/selectors');
 vi.mock('../utils/build');
 vi.mock('../../../utils/get-words');
 vi.mock('@freecodecamp/challenge-builder/build');
@@ -32,7 +36,11 @@ const mockChallengeTestsSelector = challengeTestsSelector as Mock;
 const mockChallengeMetaSelector = challengeMetaSelector as Mock;
 const mockChallengeDataSelector = challengeDataSelector as Mock;
 const mockIsBlockNewlyCompletedSelector = isBlockNewlyCompletedSelector as Mock;
-const mockBuildChallenge = buildChallenge as Mock;
+const mockCurrentBlockIdsSelector = vi.mocked(currentBlockIdsSelector);
+const mockCompletedChallengesIdsSelector =
+  completedChallengesIdsSelector as unknown as Mock;
+const mockAllChallengesInfoSelector =
+  allChallengesInfoSelector as unknown as Mock;
 const mockGetTestRunner = getTestRunner as Mock;
 mockBuildEnabledSelector.mockReturnValue(true);
 mockChallengeTestsSelector.mockReturnValue([
@@ -44,36 +52,75 @@ mockChallengeMetaSelector.mockReturnValue({
 mockChallengeDataSelector.mockReturnValue({
   challengeFiles: ['mock_challenge_files']
 });
-mockBuildChallenge.mockReturnValue({ challengeType: 'mock_challenge_type' });
 mockGetTestRunner.mockReturnValue(mockTestRunner);
 
-const completedChallengesIds = ['1', '3', '5'],
-  currentBlockIds = ['1', '3', '5', '7'],
-  id = '7',
-  fakeCompletedChallengesIds = ['1', '3', '5', '7', '8'];
+const completedChallengesIds = ['1', '3', '5'];
+const currentBlockIds = ['1', '3', '5', '7'];
+const id = '7';
+const fakeCompletedChallengesIds = ['1', '3', '5', '7', '8'];
 
 describe('<CompletionModal />', () => {
   describe('fireConfetti', () => {
     beforeEach(() => {
       mockFireConfetti.mockClear();
     });
-    test('should fire when block is completed', async () => {
+    test('should fire when block is completed and challenge data exists', async () => {
       const payload = { showCompletionModal: true };
+      const challengeId = 'bd7158d8c442eddfaeb5bd18';
+      const blockIds = ['step1', 'step2', 'step3', challengeId];
       const store = createStore({
         challenge: {
           modal: { completion: true },
           challengeMeta: {
-            id: 'bd7158d8c442eddfaeb5bd18',
-            certification: 'responsive-web-design' // Make sure the certification matches
+            id: challengeId,
+            certification: 'responsive-web-design'
           }
         }
       });
       mockIsBlockNewlyCompletedSelector.mockReturnValue(true);
+      mockChallengeMetaSelector.mockReturnValue({
+        id: challengeId,
+        isLastChallengeInBlock: true,
+        challengeType: 'mock_challenge_type'
+      });
+      mockCurrentBlockIdsSelector.mockReturnValue(blockIds);
+      mockCompletedChallengesIdsSelector.mockReturnValue(['step1', 'step2']);
+      mockAllChallengesInfoSelector.mockReturnValue({
+        challengeNodes: [{ challenge: { id: challengeId } }],
+        certificateNodes: []
+      });
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
       await runSaga(store, executeChallengeSaga, { payload }).done;
       expect(mockFireConfetti).toHaveBeenCalledTimes(1);
     });
+    test('should not fire when challenge data is empty (saga guard)', async () => {
+      const payload = { showCompletionModal: true };
+      const challengeId = 'bd7158d8c442eddfaeb5bd18';
+      const store = createStore({
+        challenge: {
+          modal: { completion: true },
+          challengeMeta: {
+            id: challengeId,
+            certification: 'responsive-web-design'
+          }
+        }
+      });
+      mockIsBlockNewlyCompletedSelector.mockReturnValue(true);
+      mockChallengeMetaSelector.mockReturnValue({
+        id: challengeId,
+        isLastChallengeInBlock: true,
+        challengeType: 'mock_challenge_type'
+      });
+      mockAllChallengesInfoSelector.mockReturnValue({
+        challengeNodes: [],
+        certificateNodes: []
+      });
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      await runSaga(store, executeChallengeSaga, { payload }).done;
+      expect(mockFireConfetti).toHaveBeenCalledTimes(0);
+    });
     test('should not fire when block is not completed', async () => {
       const payload = { showCompletionModal: true };
       const store = createStore({

client/src/templates/Challenges/redux/execute-challenge-saga.js

@@ -54,6 +54,7 @@ import {
   updateLogs,
   updateTests
 } from './actions';
+import { allChallengesInfoSelector } from '../../../redux/selectors';
 import {
   challengeDataSelector,
   challengeMetaSelector,
@@ -141,7 +142,8 @@ export function* executeChallengeSaga({ payload }) {
     const isBlockCompleted = yield select(isBlockNewlyCompletedSelector);
     if (challengeComplete) {
       playTone('tests-completed');
-      if (isBlockCompleted) {
+      const allChallengesInfo = yield select(allChallengesInfoSelector);
+      if (isBlockCompleted && allChallengesInfo?.challengeNodes?.length) {
         fireConfetti();
       }
     } else {