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
@@ -1,7 +1,7 @@
<template>
<ModalDialog
v-if="task"
title="Confirm Task"
:title="dialogTitle"
:subtitle="task.name"
:imageUrl="task.image_url"
@backdrop-click="$emit('cancel')"
@@ -19,14 +19,19 @@
</template>
<script setup lang="ts">
import { computed } from 'vue'
import ModalDialog from '../shared/ModalDialog.vue'
import type { Task } from '@/common/models'
defineProps<{
const props = defineProps<{
task: Task | null
childName?: string
}>()
const dialogTitle = computed(() =>
props.task?.type === 'kindness' ? 'Confirm Act' : 'Confirm Task',
)
defineEmits<{
confirm: []
cancel: []