feat(tutorial): enhance help button visibility and add dialog tests

- 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.

frontend/src/components/child/__tests__/ChildView.spec.ts

@@ -3,6 +3,7 @@ import { mount, VueWrapper } from '@vue/test-utils'
 import { nextTick } from 'vue'
 import ChildView from '../ChildView.vue'
 import { eventBus } from '@/common/eventBus'
+import { helpButtonHidden } from '@/tutorial/controller'
 
 // Mock dependencies
 vi.mock('vue-router', () => ({
@@ -396,6 +397,23 @@ describe('ChildView', () => {
     })
   })
 
+  describe('Help FAB visibility during reward redeem dialog', () => {
+    beforeEach(() => {
+      helpButtonHidden.value = false
+      wrapper = mount(ChildView)
+    })
+
+    it('hides the help button while the reward redeem dialog is open', async () => {
+      wrapper.vm.showRewardDialog = true
+      await nextTick()
+      expect(helpButtonHidden.value).toBe(true)
+
+      wrapper.vm.showRewardDialog = false
+      await nextTick()
+      expect(helpButtonHidden.value).toBe(false)
+    })
+  })
+
   describe('Cancel Pending Reward Dialog', () => {
     const pendingReward = {
       id: 'reward-1',

frontend/src/components/child/__tests__/ParentView.spec.ts

@@ -3,6 +3,7 @@ import { mount, VueWrapper } from '@vue/test-utils'
 import { nextTick, defineComponent } from 'vue'
 import ParentView from '../ParentView.vue'
 import { eventBus } from '@/common/eventBus'
+import { helpButtonHidden } from '@/tutorial/controller'
 
 // Mock dependencies
 vi.mock('vue-router', () => ({
@@ -539,6 +540,43 @@ describe('ParentView', () => {
     })
   })
 
+  describe('Help FAB visibility during dialogs', () => {
+    beforeEach(() => {
+      helpButtonHidden.value = false
+      wrapper = mount(ParentView, mountOptions)
+    })
+
+    it('hides the help button while the task confirm dialog is open', async () => {
+      wrapper.vm.showConfirm = true
+      await nextTick()
+      expect(helpButtonHidden.value).toBe(true)
+
+      wrapper.vm.showConfirm = false
+      await nextTick()
+      expect(helpButtonHidden.value).toBe(false)
+    })
+
+    it('hides the help button while the reward confirm dialog is open', async () => {
+      wrapper.vm.showRewardConfirm = true
+      await nextTick()
+      expect(helpButtonHidden.value).toBe(true)
+
+      wrapper.vm.showRewardConfirm = false
+      await nextTick()
+      expect(helpButtonHidden.value).toBe(false)
+    })
+
+    it('hides the help button while the routine confirm dialog is open', async () => {
+      wrapper.vm.showRoutineConfirmDialog = true
+      await nextTick()
+      expect(helpButtonHidden.value).toBe(true)
+
+      wrapper.vm.showRoutineConfirmDialog = false
+      await nextTick()
+      expect(helpButtonHidden.value).toBe(false)
+    })
+  })
+
   describe('Highlight pulse animation', () => {
     beforeEach(() => {
       vi.useFakeTimers()

frontend/src/components/child/__tests__/RewardConfirmDialog.spec.ts

@@ -0,0 +1,30 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import RewardConfirmDialog from '../RewardConfirmDialog.vue'
+import type { RewardStatus } from '@/common/models'
+
+const ModalDialogStub = {
+  template: '<div><slot /></div>',
+  props: ['title', 'subtitle', 'imageUrl'],
+}
+
+describe('RewardConfirmDialog', () => {
+  it('renders "Grant Reward" title and reward name subtitle', () => {
+    const reward: RewardStatus = {
+      id: 'reward-1',
+      name: 'Ice Cream',
+      cost: 50,
+      points_needed: 0,
+      redeeming: false,
+      image_id: '',
+    }
+    const wrapper = mount(RewardConfirmDialog, {
+      props: { reward, childName: 'Test Child' },
+      global: { stubs: { ModalDialog: ModalDialogStub } },
+    })
+
+    const dialog = wrapper.findComponent(ModalDialogStub)
+    expect(dialog.props('title')).toBe('Grant Reward')
+    expect(dialog.props('subtitle')).toBe('Ice Cream')
+  })
+})

frontend/src/components/child/__tests__/TaskConfirmDialog.spec.ts

@@ -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')
+  })
+})