feat(tutorial): enhance help button visibility and add dialog tests
Chore App Build, Test, and Push Docker Images / build-and-push (push) Successful in 2m56s

- Introduced a mechanism to hide the help button when modal dialogs are open by adding `helpButtonHidden` state in the tutorial controller.
- Updated various components to set the help button visibility based on dialog states.
- Added tests to verify help button visibility during reward and task confirmation dialogs.
- Created new E2E tests for dialog help button functionality across different assignment views.
- Refactored existing dialog components to utilize the new help button visibility logic.
- Added unit tests for `RewardConfirmDialog` and `TaskConfirmDialog` to ensure correct titles are rendered based on task type.
- Enhanced `HelpButton` component tests to validate visibility based on tutorial state.
This commit is contained in:
2026-07-23 01:02:21 -04:00
parent 541bed3a8a
commit cc1189cd9b
22 changed files with 677 additions and 75 deletions
@@ -0,0 +1,43 @@
import { describe, it, expect } from 'vitest'
import { mount } from '@vue/test-utils'
import TaskConfirmDialog from '../TaskConfirmDialog.vue'
import type { Task } from '@/common/models'
const ModalDialogStub = {
template: '<div><slot /></div>',
props: ['title', 'subtitle', 'imageUrl'],
}
describe('TaskConfirmDialog', () => {
it('renders "Confirm Task" title for chores', () => {
const task: Task = {
id: 'task-1',
name: 'Clean Room',
type: 'chore',
points: 5,
image_id: '',
}
const wrapper = mount(TaskConfirmDialog, {
props: { task, childName: 'Test Child' },
global: { stubs: { ModalDialog: ModalDialogStub } },
})
expect(wrapper.findComponent(ModalDialogStub).props('title')).toBe('Confirm Task')
})
it('renders "Confirm Act" title for kindness acts', () => {
const task: Task = {
id: 'task-2',
name: 'Share Toys',
type: 'kindness',
points: 3,
image_id: '',
}
const wrapper = mount(TaskConfirmDialog, {
props: { task, childName: 'Test Child' },
global: { stubs: { ModalDialog: ModalDialogStub } },
})
expect(wrapper.findComponent(ModalDialogStub).props('title')).toBe('Confirm Act')
})
})