chore/frontend/vue-app/e2e/plans/task-activated.plan.md

Parent Activate Task Points, and Reward Redemption, Flow

Application Overview

In parent mode, with a populated list of chores, kindness acts, penalties, and rewards, tests must be run to activate tasks to give a child points, and redeem rewards (remove child points.)

• When the parent activates a chore, a confimation box should appear. Both "Yes" and "Cancel" should be tested. "Yes" will give points to the child. The activated chore should then be disabled and showing the text "Completed" If this chore is activated again, nothing happens.
• When the parent activates a kindness act, a confimation box should appear. Both "Yes" and "Cancel" should be tested. "Yes" will give points to the child. Kindness acts can be activated more than once.
• When the parent activates a negitive task (penalty), a confimation box should appear. Both "Yes" and "Cancel" should be tested. "Yes" will remove points from the child. The points can not be negitive. Penalties can be activated more than once.
• A reward can show how many more points are required to redeem the reward. If a parent activates in this state, nothing happens. When a point can be redeemed, it will have a green text stating that it can be redeemed. When a parent activates this a confirmation dialog appears. Both "Yes" and "Cancel" should be tested. "Yes" removes points from the child. This will cause the rewards status text to be changed in most cases to show how many points are required to redeem.
• Flow: The rows for chores, kindness acts, penalties, and rewards are scrollable. If there are many items in a row, the user can scroll through them.
• Activation: Activation happens with 2 clicks. The first click will center an item in the scroll box, and the next click will activate the item.
• Kebab and Edit button: When a chore is clicked, the top right of the chore will show a kebab icon, when the chore is activated or when somewhere else is clicked, that kebab menu will disappear. No need to test the kebab items yet. On kindness acts, penalties, and rewards, an edit icon will appear in the top right. The behavior is the same as the kebab menu. No need to test what the edit button does yet.
• Points will be displayed in a child card at the top of the screen, as well as the child's name, age, and profile icon.

---

Implementation Status

All tests live in e2e/mode_parent/task-activation/ and run under the chromium-task-activation Playwright project. 38 tests total — all passing.

chore-activation.spec.ts ✅

• Confirmation dialog appears on chore click
• Cancelling the dialog leaves points unchanged
• Confirming the dialog awards the chore's points to the child
• Completed chore shows "Completed" text and is disabled
• Clicking a completed chore a second time does nothing (no dialog, no extra points)
• Kebab menu disappears when a different chore card is clicked

kindness-activation.spec.ts ✅

• Confirmation dialog appears on kindness act click
• Cancelling the dialog leaves points unchanged
• Confirming the dialog awards points and kindness acts can be triggered more than once (points accumulate)
• Edit button appears on the first click of a kindness card
• Edit button disappears when a different kindness card is clicked

penalty-activation.spec.ts ✅

• Confirmation dialog appears on penalty click
• Cancelling the dialog leaves points unchanged
• Confirming the dialog deducts points from the child
• Points cannot go below zero (floor at 0)
• Penalties can be activated more than once
• Edit button disappears when a different penalty card is clicked

reward-redemption.spec.ts ✅

• Reward shows a "points required" status when the child does not have enough points
• Clicking a non-redeemable reward opens no dialog (nothing happens)
• Reward shows a "REWARD READY" status when the child has enough points
• Edit button appears on the first click of a ready reward card
• Edit button disappears when a different reward card is clicked
• Cancelling the redemption dialog leaves points unchanged
• Confirming the dialog deducts the reward cost from the child's points and updates the status text

scroll-and-flow.spec.ts ✅

• Kindness list is horizontally scrollable when many items are assigned (content width exceeds the viewport and the last card is off-screen)
• Scrolling the list reveals hidden items (last card enters the viewport; first card leaves it)
• First click on an off-screen item scrolls it into view and marks it ready (the centerItem animation completes and the card is visible within the viewport)
• Scrolling does not prevent first-click centering on a partially visible item (pre-scrolled list recenters on click)

pending-reward-warning.spec.ts ✅

• Reward card shows a "PENDING" banner when a child has requested that reward
• Activating a chore while a reward is pending shows a warning dialog; cancelling leaves points and the pending request unchanged
• Activating a chore while a reward is pending shows a warning dialog; confirming cancels the pending request and proceeds to the normal task confirmation
• Activating a kindness act while a reward is pending shows a warning dialog; both cancel and confirm paths verified
• Activating a penalty while a reward is pending shows a warning dialog; both cancel and confirm paths verified
• Activating a different ready reward while a reward request is pending shows a warning dialog; cancelling preserves the pending request; confirming cancels it (the reward confirm dialog does not auto-open — the user must re-click)