diff --git a/src/components/MyKiva/GoalSetting/GoalSelector.vue b/src/components/MyKiva/GoalSetting/GoalSelector.vue index 031aab6ce42..4c0433007a0 100644 --- a/src/components/MyKiva/GoalSetting/GoalSelector.vue +++ b/src/components/MyKiva/GoalSetting/GoalSelector.vue @@ -226,26 +226,27 @@ const titleText = computed(() => { if (props.isGoalSet) { return 'Success! Your goal is set!'; } - if (loansLastYear.value === 1) { - // eslint-disable-next-line max-len - return `Last year, you helped ${loansLastYear.value} woman shape her future!`; - } - if (loansLastYear.value > SAME_AS_LAST_YEAR_LIMIT) { + if (loansLastYear.value === 0 || loansLastYear.value > SAME_AS_LAST_YEAR_LIMIT) { + if (props.selectedCategoryId === ID_SUPPORT_ALL) { + return 'How many loans will you make this year?'; + } // eslint-disable-next-line max-len - return `Last year, you helped ${loansLastYear.value} women shape their futures!`; + return `How many loans to ${props.selectedCategoryName?.toLowerCase()} will you make this year?`; } return 'Lenders like you help
3 women a year'; }); const subtitleText = computed(() => { - let extraText = ''; + if (props.isGoalSet) { + return ''; + } + if (loansThisYear.value > 0) { - extraText = `You've already made ${loansThisYear.value}.`; + return `You've already made ${loansThisYear.value} that will count!.`; } - return props.isGoalSet - ? '' - : `How many loans will you make this year? ${extraText}`; + + return ''; }); const buttonText = computed(() => { @@ -347,7 +348,7 @@ const updateGoalOptions = () => { goalOptions.value = [ { loansNumber: suggestion1, - optionText: useYtdAsBase ? 'One more' : 'Same as last year', + optionText: useYtdAsBase ? 'One more' : `Same as ${LAST_YEAR_KEY}`, selected: false }, { diff --git a/test/unit/specs/components/MyKiva/GoalSelector.spec.js b/test/unit/specs/components/MyKiva/GoalSelector.spec.js index fdde6b86f89..3f54e47691c 100644 --- a/test/unit/specs/components/MyKiva/GoalSelector.spec.js +++ b/test/unit/specs/components/MyKiva/GoalSelector.spec.js @@ -163,6 +163,63 @@ describe('GoalSelector', () => { await expectCategoryOptions('category-support-all', getExpectedGoalOptions({ useDefault: true })); }); + it('renders the selected category name in the title when the user changes category', async () => { + const tieredAchievements = [ + { + id: ID_WOMENS_EQUALITY, + progressForYear: 2, + }, + { + id: ID_REFUGEE_EQUALITY, + progressForYear: 3, + }, + ]; + + const user = userEvent.setup(); + const { getByRole, getByTestId } = render(TestWrapper, { + global: { + ...globalOptions, + provide: { + ...globalOptions.provide, + $kvTrackEvent: vi.fn(), + }, + }, + props: { tieredAchievements }, + }); + + await flushPromises(); + + const getTitleText = () => getByRole('heading', { level: 2 }).innerHTML; + + // Initial category is Women + expect(getTitleText()).toContain('women'); + + // Refugees + await user.click(getByTestId('category-refugees')); + await flushPromises(); + expect(getTitleText()).toContain('refugees'); + + // Climate Action + await user.click(getByTestId('category-climate')); + await flushPromises(); + expect(getTitleText()).toContain('climate action'); + + // U.S. Entrepreneurs + await user.click(getByTestId('category-us')); + await flushPromises(); + expect(getTitleText()).toContain('u.s. entrepreneurs'); + + // Basic Needs + await user.click(getByTestId('category-basic-needs')); + await flushPromises(); + expect(getTitleText()).toContain('basic needs'); + + // Choose as I go (support all) + await user.click(getByTestId('category-support-all')); + await flushPromises(); + expect(getTitleText()).toBe('How many loans will you make this year?'); + }); + it('uses YTD loans as base when they exceed last year', async () => { const tieredAchievements = [ {