diff --git a/client/src/templates/Introduction/components/super-block-accordion.test.tsx b/client/src/templates/Introduction/components/super-block-accordion.test.tsx index 7e46d697519..5ccea043323 100644 --- a/client/src/templates/Introduction/components/super-block-accordion.test.tsx +++ b/client/src/templates/Introduction/components/super-block-accordion.test.tsx @@ -3,6 +3,10 @@ import { render, screen, within } from '@testing-library/react'; import { describe, it, expect } from 'vitest'; import { SuperBlocks } from '../../../../../shared-dist/config/curriculum'; import { SuperBlockAccordion } from './super-block-accordion'; +import { + BlockLabel, + BlockLayouts +} from '../../../../../shared-dist/config/blocks'; const mockStructure = { superBlock: SuperBlocks.RespWebDesign, @@ -19,6 +23,19 @@ const mockStructure = { ] }; +// Representative challenge used to populate module content. +const mockChallenge = { + id: 'test-challenge-id', + block: 'test-block', + blockLabel: BlockLabel.lecture, + title: 'Test Challenge', + fields: { slug: '/test-slug' }, + dashedName: 'test-challenge', + challengeType: 0, + blockLayout: BlockLayouts.ChallengeList, + superBlock: SuperBlocks.RespWebDesign +}; + describe('SuperBlockAccordion', () => { it('does not show completed checkmark when there are zero challenges in a chapter', () => { render( @@ -40,4 +57,125 @@ describe('SuperBlockAccordion', () => { const checkmark = within(chapterButton).getByTestId('green-not-completed'); expect(checkmark).toBeInTheDocument(); }); + + // With progress data present, the module button should render the steps label. + it('shows module progress when totalSteps > 0 and not comingSoon', () => { + const structureWithProgress = { + superBlock: SuperBlocks.RespWebDesign, + chapters: [ + { + dashedName: 'test-chapter', + modules: [ + { + dashedName: 'test-module', + blocks: ['test-block'], + comingSoon: false, + totalSteps: 10, + completedSteps: 5 + } + ] + } + ] + }; + + render( + + ); + + const moduleButtons = screen.getAllByRole('button', { + name: /test-module/i + }); + const moduleButton = moduleButtons[0]; + + const moduleRight = within(moduleButton).getByTestId('module-button-right'); + const moduleSteps = within(moduleRight).getByText( + /learn\.steps-completed/i + ); + expect(moduleSteps).toBeInTheDocument(); + expect(moduleSteps).toHaveClass('module-steps'); + }); + + // A coming-soon module should hide the steps summary even if progress exists. + it('does not show module progress when comingSoon is true', () => { + const structureComingSoon = { + superBlock: SuperBlocks.RespWebDesign, + chapters: [ + { + dashedName: 'test-chapter', + modules: [ + { + dashedName: 'test-module', + blocks: ['test-block'], + comingSoon: true, + totalSteps: 10, + completedSteps: 5 + } + ] + } + ] + }; + + render( + + ); + + const moduleButtons = screen.getAllByRole('button', { + name: /test-module/i + }); + const moduleButton = moduleButtons[0]; + + const moduleRight = within(moduleButton).getByTestId('module-button-right'); + expect(within(moduleRight).queryByText(/steps/i)).not.toBeInTheDocument(); + }); + + // Modules with zero total steps should not display any progress text. + it('does not show module progress when totalSteps is zero', () => { + const structureZeroSteps = { + superBlock: SuperBlocks.RespWebDesign, + chapters: [ + { + dashedName: 'test-chapter', + modules: [ + { + dashedName: 'test-module', + blocks: ['test-block'], + comingSoon: false, + totalSteps: 0, + completedSteps: 0 + } + ] + } + ] + }; + + render( + + ); + + const moduleButtons = screen.getAllByRole('button', { + name: /test-module/i + }); + const moduleButton = moduleButtons[0]; + + const moduleRight = within(moduleButton).getByTestId('module-button-right'); + expect(within(moduleRight).queryByText(/steps/i)).not.toBeInTheDocument(); + }); }); diff --git a/client/src/templates/Introduction/components/super-block-accordion.tsx b/client/src/templates/Introduction/components/super-block-accordion.tsx index 388580e8642..e1a21a9c8d4 100644 --- a/client/src/templates/Introduction/components/super-block-accordion.tsx +++ b/client/src/templates/Introduction/components/super-block-accordion.tsx @@ -189,7 +189,7 @@ const Module = ({ {t(`intro:${superBlock}.modules.${dashedName}`)} -
+
{!comingSoon && !!totalSteps && ( {t('learn.steps-completed', {