feat: add comprehensive tests for celebration tooltip behavior
- Added unit tests for core celebration tooltip visibility logic - Added integration tests for TutorialPlayer celebration behavior - Added e2e tests for browser-based celebration tooltip interactions - Added last moved bead tracking and positioning tests - Tests cover regression scenarios: celebration appearing/hiding based on target value match - Tests verify state transitions between instruction and celebration modes - Covers edge cases and multi-step navigation scenarios 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Thomas Hallock
@@ -0,0 +1,281 @@
|
||||
import { describe, it, expect } from 'vitest'
|
||||
|
||||
/**
|
||||
* Unit tests for celebration tooltip logic
|
||||
* These test the core business logic without rendering components
|
||||
*/
|
||||
|
||||
describe('Celebration Tooltip Logic', () => {
|
||||
// Helper function that mimics the tooltip visibility logic from TutorialPlayer
|
||||
function shouldShowCelebrationTooltip(
|
||||
isStepCompleted: boolean,
|
||||
currentValue: number,
|
||||
targetValue: number,
|
||||
hasStepInstructions: boolean
|
||||
) {
|
||||
const showCelebration = isStepCompleted && currentValue === targetValue
|
||||
const showInstructions = !showCelebration && hasStepInstructions
|
||||
return {
|
||||
showCelebration,
|
||||
showInstructions,
|
||||
visible: showCelebration || showInstructions
|
||||
}
|
||||
}
|
||||
|
||||
describe('Celebration visibility logic', () => {
|
||||
it('should show celebration when step is completed and at target value', () => {
|
||||
const result = shouldShowCelebrationTooltip(
|
||||
true, // isStepCompleted
|
||||
5, // currentValue
|
||||
5, // targetValue
|
||||
false // hasStepInstructions
|
||||
)
|
||||
|
||||
expect(result.showCelebration).toBe(true)
|
||||
expect(result.showInstructions).toBe(false)
|
||||
expect(result.visible).toBe(true)
|
||||
})
|
||||
|
||||
it('should not show celebration when step completed but not at target', () => {
|
||||
const result = shouldShowCelebrationTooltip(
|
||||
true, // isStepCompleted
|
||||
6, // currentValue (moved away from target)
|
||||
5, // targetValue
|
||||
true // hasStepInstructions
|
||||
)
|
||||
|
||||
expect(result.showCelebration).toBe(false)
|
||||
expect(result.showInstructions).toBe(true)
|
||||
expect(result.visible).toBe(true)
|
||||
})
|
||||
|
||||
it('should not show celebration when not completed even if at target', () => {
|
||||
const result = shouldShowCelebrationTooltip(
|
||||
false, // isStepCompleted
|
||||
5, // currentValue
|
||||
5, // targetValue
|
||||
true // hasStepInstructions
|
||||
)
|
||||
|
||||
expect(result.showCelebration).toBe(false)
|
||||
expect(result.showInstructions).toBe(true)
|
||||
expect(result.visible).toBe(true)
|
||||
})
|
||||
|
||||
it('should show instructions when not completed and has instructions', () => {
|
||||
const result = shouldShowCelebrationTooltip(
|
||||
false, // isStepCompleted
|
||||
3, // currentValue
|
||||
5, // targetValue
|
||||
true // hasStepInstructions
|
||||
)
|
||||
|
||||
expect(result.showCelebration).toBe(false)
|
||||
expect(result.showInstructions).toBe(true)
|
||||
expect(result.visible).toBe(true)
|
||||
})
|
||||
|
||||
it('should not show anything when not completed and no instructions', () => {
|
||||
const result = shouldShowCelebrationTooltip(
|
||||
false, // isStepCompleted
|
||||
3, // currentValue
|
||||
5, // targetValue
|
||||
false // hasStepInstructions
|
||||
)
|
||||
|
||||
expect(result.showCelebration).toBe(false)
|
||||
expect(result.showInstructions).toBe(false)
|
||||
expect(result.visible).toBe(false)
|
||||
})
|
||||
})
|
||||
|
||||
describe('State transition scenarios', () => {
|
||||
it('should transition from instruction to celebration when reaching target', () => {
|
||||
// Initially showing instructions
|
||||
const initial = shouldShowCelebrationTooltip(false, 3, 5, true)
|
||||
expect(initial.showInstructions).toBe(true)
|
||||
expect(initial.showCelebration).toBe(false)
|
||||
|
||||
// After completing and reaching target
|
||||
const completed = shouldShowCelebrationTooltip(true, 5, 5, true)
|
||||
expect(completed.showCelebration).toBe(true)
|
||||
expect(completed.showInstructions).toBe(false)
|
||||
})
|
||||
|
||||
it('should transition from celebration to instructions when moving away', () => {
|
||||
// Initially celebrating
|
||||
const celebrating = shouldShowCelebrationTooltip(true, 5, 5, true)
|
||||
expect(celebrating.showCelebration).toBe(true)
|
||||
expect(celebrating.showInstructions).toBe(false)
|
||||
|
||||
// After moving away from target
|
||||
const movedAway = shouldShowCelebrationTooltip(true, 6, 5, true)
|
||||
expect(movedAway.showCelebration).toBe(false)
|
||||
expect(movedAway.showInstructions).toBe(true)
|
||||
})
|
||||
|
||||
it('should return to celebration when returning to target value', () => {
|
||||
// Start celebrating
|
||||
const initial = shouldShowCelebrationTooltip(true, 5, 5, true)
|
||||
expect(initial.showCelebration).toBe(true)
|
||||
|
||||
// Move away
|
||||
const away = shouldShowCelebrationTooltip(true, 6, 5, true)
|
||||
expect(away.showCelebration).toBe(false)
|
||||
expect(away.showInstructions).toBe(true)
|
||||
|
||||
// Return to target
|
||||
const returned = shouldShowCelebrationTooltip(true, 5, 5, true)
|
||||
expect(returned.showCelebration).toBe(true)
|
||||
expect(returned.showInstructions).toBe(false)
|
||||
})
|
||||
})
|
||||
|
||||
describe('Edge cases', () => {
|
||||
it('should handle negative values correctly', () => {
|
||||
const result = shouldShowCelebrationTooltip(true, -3, -3, false)
|
||||
expect(result.showCelebration).toBe(true)
|
||||
})
|
||||
|
||||
it('should handle zero values correctly', () => {
|
||||
const result = shouldShowCelebrationTooltip(true, 0, 0, false)
|
||||
expect(result.showCelebration).toBe(true)
|
||||
})
|
||||
|
||||
it('should handle large values correctly', () => {
|
||||
const result = shouldShowCelebrationTooltip(true, 99999, 99999, false)
|
||||
expect(result.showCelebration).toBe(true)
|
||||
})
|
||||
|
||||
it('should prioritize celebration over instructions', () => {
|
||||
// When both conditions could be true, celebration takes priority
|
||||
const result = shouldShowCelebrationTooltip(true, 5, 5, true)
|
||||
expect(result.showCelebration).toBe(true)
|
||||
expect(result.showInstructions).toBe(false)
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
/**
|
||||
* Tests for last moved bead tracking logic
|
||||
*/
|
||||
describe('Last Moved Bead Tracking', () => {
|
||||
interface StepBeadHighlight {
|
||||
placeValue: number
|
||||
beadType: 'earth' | 'heaven'
|
||||
position: number
|
||||
direction: string
|
||||
}
|
||||
|
||||
// Helper function that mimics the bead selection logic
|
||||
function selectTooltipBead(
|
||||
showCelebration: boolean,
|
||||
showInstructions: boolean,
|
||||
currentStepBeads: StepBeadHighlight[] | null,
|
||||
lastMovedBead: StepBeadHighlight | null
|
||||
): StepBeadHighlight | null {
|
||||
if (showCelebration) {
|
||||
// For celebration, use last moved bead or fallback
|
||||
if (lastMovedBead) {
|
||||
return lastMovedBead
|
||||
} else {
|
||||
// Fallback to ones place heaven bead
|
||||
return {
|
||||
placeValue: 0,
|
||||
beadType: 'heaven',
|
||||
position: 0,
|
||||
direction: 'none'
|
||||
}
|
||||
}
|
||||
} else if (showInstructions && currentStepBeads?.length) {
|
||||
// For instructions, use first bead with arrows
|
||||
return currentStepBeads.find(bead => bead.direction !== 'none') || null
|
||||
}
|
||||
|
||||
return null
|
||||
}
|
||||
|
||||
describe('Bead selection for celebration', () => {
|
||||
it('should use last moved bead when available', () => {
|
||||
const lastMoved: StepBeadHighlight = {
|
||||
placeValue: 2,
|
||||
beadType: 'earth',
|
||||
position: 1,
|
||||
direction: 'down'
|
||||
}
|
||||
|
||||
const result = selectTooltipBead(true, false, null, lastMoved)
|
||||
expect(result).toEqual(lastMoved)
|
||||
})
|
||||
|
||||
it('should use fallback when no last moved bead', () => {
|
||||
const result = selectTooltipBead(true, false, null, null)
|
||||
|
||||
expect(result).toEqual({
|
||||
placeValue: 0,
|
||||
beadType: 'heaven',
|
||||
position: 0,
|
||||
direction: 'none'
|
||||
})
|
||||
})
|
||||
|
||||
it('should use instruction bead when showing instructions', () => {
|
||||
const instructionBeads: StepBeadHighlight[] = [
|
||||
{
|
||||
placeValue: 1,
|
||||
beadType: 'earth',
|
||||
position: 0,
|
||||
direction: 'up'
|
||||
}
|
||||
]
|
||||
|
||||
const result = selectTooltipBead(false, true, instructionBeads, null)
|
||||
expect(result).toEqual(instructionBeads[0])
|
||||
})
|
||||
|
||||
it('should return null when no conditions met', () => {
|
||||
const result = selectTooltipBead(false, false, null, null)
|
||||
expect(result).toBeNull()
|
||||
})
|
||||
})
|
||||
|
||||
describe('Bead priority logic', () => {
|
||||
it('should prefer last moved bead over instruction bead for celebration', () => {
|
||||
const lastMoved: StepBeadHighlight = {
|
||||
placeValue: 3,
|
||||
beadType: 'heaven',
|
||||
position: 0,
|
||||
direction: 'up'
|
||||
}
|
||||
|
||||
const instructionBeads: StepBeadHighlight[] = [
|
||||
{
|
||||
placeValue: 1,
|
||||
beadType: 'earth',
|
||||
position: 0,
|
||||
direction: 'down'
|
||||
}
|
||||
]
|
||||
|
||||
const result = selectTooltipBead(true, false, instructionBeads, lastMoved)
|
||||
expect(result).toEqual(lastMoved)
|
||||
})
|
||||
|
||||
it('should use fallback only when no last moved bead available', () => {
|
||||
const instructionBeads: StepBeadHighlight[] = [
|
||||
{
|
||||
placeValue: 1,
|
||||
beadType: 'earth',
|
||||
position: 0,
|
||||
direction: 'down'
|
||||
}
|
||||
]
|
||||
|
||||
const result = selectTooltipBead(true, false, instructionBeads, null)
|
||||
|
||||
// Should use fallback, not instruction bead
|
||||
expect(result?.placeValue).toBe(0)
|
||||
expect(result?.beadType).toBe('heaven')
|
||||
})
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,267 @@
|
||||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test.describe('Tutorial Celebration Tooltip E2E', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
// Navigate to tutorial editor with a simple addition problem
|
||||
await page.goto('/tutorial-editor')
|
||||
|
||||
// Wait for page to load
|
||||
await page.waitForLoadState('networkidle')
|
||||
|
||||
// Create a simple tutorial for testing
|
||||
await page.evaluate(() => {
|
||||
const tutorial = {
|
||||
id: 'celebration-e2e-test',
|
||||
title: 'Celebration E2E Test',
|
||||
description: 'Testing celebration tooltip in real browser',
|
||||
steps: [
|
||||
{
|
||||
id: 'step-1',
|
||||
title: 'Add Two',
|
||||
problem: '3 + 2',
|
||||
description: 'Add 2 to the starting value of 3',
|
||||
startValue: 3,
|
||||
targetValue: 5
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
// Store in localStorage for the tutorial player
|
||||
localStorage.setItem('current-tutorial', JSON.stringify(tutorial))
|
||||
})
|
||||
|
||||
// Reload to pick up the tutorial
|
||||
await page.reload()
|
||||
await page.waitForLoadState('networkidle')
|
||||
})
|
||||
|
||||
test('celebration tooltip appears when reaching target value', async ({ page }) => {
|
||||
// Wait for tutorial to load
|
||||
await expect(page.locator('text=3 + 2')).toBeVisible({ timeout: 10000 })
|
||||
|
||||
// Look for the abacus SVG
|
||||
const abacus = page.locator('svg').first()
|
||||
await expect(abacus).toBeVisible()
|
||||
|
||||
// We need to interact with specific beads to change value from 3 to 5
|
||||
// Look for earth beads in the ones column (rightmost)
|
||||
const earthBeads = page.locator('svg circle[data-bead-type="earth"]')
|
||||
|
||||
// Click on earth beads to add 2 (getting from 3 to 5)
|
||||
// This might require multiple clicks depending on the current state
|
||||
const earthBeadCount = await earthBeads.count()
|
||||
|
||||
if (earthBeadCount > 0) {
|
||||
// Try clicking the first available earth bead
|
||||
await earthBeads.first().click()
|
||||
|
||||
// Wait a bit for the value to update
|
||||
await page.waitForTimeout(500)
|
||||
|
||||
// Click another earth bead if needed
|
||||
if (earthBeadCount > 1) {
|
||||
await earthBeads.nth(1).click()
|
||||
await page.waitForTimeout(500)
|
||||
}
|
||||
}
|
||||
|
||||
// Look for celebration tooltip with "Excellent work!"
|
||||
await expect(page.locator('text=🎉')).toBeVisible({ timeout: 5000 })
|
||||
await expect(page.locator('text=Excellent work!')).toBeVisible({ timeout: 5000 })
|
||||
})
|
||||
|
||||
test('celebration tooltip disappears when moving away from target', async ({ page }) => {
|
||||
// Wait for tutorial to load
|
||||
await expect(page.locator('text=3 + 2')).toBeVisible({ timeout: 10000 })
|
||||
|
||||
const abacus = page.locator('svg').first()
|
||||
await expect(abacus).toBeVisible()
|
||||
|
||||
// First, reach the target value (5)
|
||||
const earthBeads = page.locator('svg circle[data-bead-type="earth"]')
|
||||
|
||||
if (await earthBeads.count() > 0) {
|
||||
await earthBeads.first().click()
|
||||
await page.waitForTimeout(300)
|
||||
|
||||
if (await earthBeads.count() > 1) {
|
||||
await earthBeads.nth(1).click()
|
||||
await page.waitForTimeout(300)
|
||||
}
|
||||
}
|
||||
|
||||
// Verify celebration appears
|
||||
await expect(page.locator('text=🎉')).toBeVisible({ timeout: 3000 })
|
||||
await expect(page.locator('text=Excellent work!')).toBeVisible()
|
||||
|
||||
// Now move away from target by clicking another bead (add more)
|
||||
const heavenBead = page.locator('svg circle[data-bead-type="heaven"]').first()
|
||||
if (await heavenBead.isVisible()) {
|
||||
await heavenBead.click()
|
||||
await page.waitForTimeout(500)
|
||||
}
|
||||
|
||||
// Celebration tooltip should disappear
|
||||
await expect(page.locator('text=🎉')).not.toBeVisible({ timeout: 2000 })
|
||||
await expect(page.locator('text=Excellent work!')).not.toBeVisible()
|
||||
})
|
||||
|
||||
test('celebration tooltip shows instruction mode when moved away', async ({ page }) => {
|
||||
// Wait for tutorial to load
|
||||
await expect(page.locator('text=3 + 2')).toBeVisible({ timeout: 10000 })
|
||||
|
||||
const abacus = page.locator('svg').first()
|
||||
await expect(abacus).toBeVisible()
|
||||
|
||||
// Reach target value first
|
||||
const earthBeads = page.locator('svg circle[data-bead-type="earth"]')
|
||||
|
||||
if (await earthBeads.count() > 0) {
|
||||
await earthBeads.first().click()
|
||||
await page.waitForTimeout(300)
|
||||
|
||||
if (await earthBeads.count() > 1) {
|
||||
await earthBeads.nth(1).click()
|
||||
await page.waitForTimeout(300)
|
||||
}
|
||||
}
|
||||
|
||||
// Verify celebration
|
||||
await expect(page.locator('text=🎉')).toBeVisible({ timeout: 3000 })
|
||||
|
||||
// Move away from target (subtract by clicking active earth bead)
|
||||
const activeEarthBeads = page.locator('svg circle[data-bead-type="earth"][data-active="true"]')
|
||||
if (await activeEarthBeads.count() > 0) {
|
||||
await activeEarthBeads.first().click()
|
||||
await page.waitForTimeout(500)
|
||||
}
|
||||
|
||||
// Should no longer show celebration
|
||||
await expect(page.locator('text=🎉')).not.toBeVisible({ timeout: 2000 })
|
||||
|
||||
// Should show instruction tooltip (look for lightbulb or guidance text)
|
||||
const instructionTooltip = page.locator('text=💡').or(page.locator('[data-radix-popper-content-wrapper]'))
|
||||
|
||||
// There might be instruction tooltips visible
|
||||
if (await instructionTooltip.count() > 0) {
|
||||
await expect(instructionTooltip.first()).toBeVisible()
|
||||
}
|
||||
})
|
||||
|
||||
test('celebration tooltip positioned at correct bead', async ({ page }) => {
|
||||
// Wait for tutorial to load
|
||||
await expect(page.locator('text=3 + 2')).toBeVisible({ timeout: 10000 })
|
||||
|
||||
const abacus = page.locator('svg').first()
|
||||
await expect(abacus).toBeVisible()
|
||||
|
||||
// Interact with specific bead to track last moved bead
|
||||
const targetEarthBead = page.locator('svg circle[data-bead-type="earth"]').first()
|
||||
|
||||
if (await targetEarthBead.isVisible()) {
|
||||
// Get the position of the bead we're clicking
|
||||
const beadBox = await targetEarthBead.boundingBox()
|
||||
|
||||
// Click the bead to move toward target
|
||||
await targetEarthBead.click()
|
||||
await page.waitForTimeout(300)
|
||||
|
||||
// Continue clicking beads until we reach target
|
||||
const earthBeads = page.locator('svg circle[data-bead-type="earth"]')
|
||||
const beadCount = await earthBeads.count()
|
||||
|
||||
for (let i = 1; i < Math.min(beadCount, 3); i++) {
|
||||
await earthBeads.nth(i).click()
|
||||
await page.waitForTimeout(200)
|
||||
}
|
||||
}
|
||||
|
||||
// Wait for celebration tooltip
|
||||
await expect(page.locator('text=🎉')).toBeVisible({ timeout: 3000 })
|
||||
|
||||
// Verify tooltip is positioned near where we last clicked
|
||||
const tooltip = page.locator('[data-radix-popper-content-wrapper]').first()
|
||||
|
||||
if (await tooltip.isVisible()) {
|
||||
const tooltipBox = await tooltip.boundingBox()
|
||||
const abacusBox = await abacus.boundingBox()
|
||||
|
||||
// Tooltip should be positioned within reasonable proximity to the abacus
|
||||
expect(tooltipBox?.x).toBeGreaterThan((abacusBox?.x ?? 0) - 200)
|
||||
expect(tooltipBox?.x).toBeLessThan((abacusBox?.x ?? 0) + (abacusBox?.width ?? 0) + 200)
|
||||
}
|
||||
})
|
||||
|
||||
test('celebration tooltip resets on step navigation', async ({ page }) => {
|
||||
// Create a multi-step tutorial
|
||||
await page.evaluate(() => {
|
||||
const tutorial = {
|
||||
id: 'multi-step-celebration-test',
|
||||
title: 'Multi-Step Celebration Test',
|
||||
description: 'Testing celebration across steps',
|
||||
steps: [
|
||||
{
|
||||
id: 'step-1',
|
||||
title: 'First Addition',
|
||||
problem: '2 + 3',
|
||||
description: 'Add 3 to 2',
|
||||
startValue: 2,
|
||||
targetValue: 5
|
||||
},
|
||||
{
|
||||
id: 'step-2',
|
||||
title: 'Second Addition',
|
||||
problem: '1 + 4',
|
||||
description: 'Add 4 to 1',
|
||||
startValue: 1,
|
||||
targetValue: 5
|
||||
}
|
||||
]
|
||||
}
|
||||
localStorage.setItem('current-tutorial', JSON.stringify(tutorial))
|
||||
})
|
||||
|
||||
await page.reload()
|
||||
await page.waitForLoadState('networkidle')
|
||||
|
||||
// Complete first step
|
||||
await expect(page.locator('text=2 + 3')).toBeVisible({ timeout: 10000 })
|
||||
|
||||
const abacus = page.locator('svg').first()
|
||||
const earthBeads = page.locator('svg circle[data-bead-type="earth"]')
|
||||
|
||||
// Reach target for first step (from 2 to 5, need to add 3)
|
||||
if (await earthBeads.count() > 0) {
|
||||
for (let i = 0; i < 3 && i < await earthBeads.count(); i++) {
|
||||
await earthBeads.nth(i).click()
|
||||
await page.waitForTimeout(200)
|
||||
}
|
||||
}
|
||||
|
||||
// Verify celebration for first step
|
||||
await expect(page.locator('text=🎉')).toBeVisible({ timeout: 3000 })
|
||||
|
||||
// Navigate to next step
|
||||
const nextButton = page.locator('text=Next').or(page.locator('button:has-text("Next")'))
|
||||
if (await nextButton.isVisible()) {
|
||||
await nextButton.click()
|
||||
}
|
||||
|
||||
// Wait for second step to load
|
||||
await expect(page.locator('text=1 + 4')).toBeVisible({ timeout: 5000 })
|
||||
|
||||
// Complete second step (from 1 to 5, need to add 4)
|
||||
const newEarthBeads = page.locator('svg circle[data-bead-type="earth"]')
|
||||
|
||||
if (await newEarthBeads.count() > 0) {
|
||||
for (let i = 0; i < 4 && i < await newEarthBeads.count(); i++) {
|
||||
await newEarthBeads.nth(i).click()
|
||||
await page.waitForTimeout(200)
|
||||
}
|
||||
}
|
||||
|
||||
// Should show celebration for second step
|
||||
await expect(page.locator('text=🎉')).toBeVisible({ timeout: 3000 })
|
||||
await expect(page.locator('text=Excellent work!')).toBeVisible()
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,271 @@
|
||||
import React from 'react'
|
||||
import { render, screen, fireEvent, waitFor } from '@testing-library/react'
|
||||
import { vi } from 'vitest'
|
||||
import { TutorialProvider, useTutorialContext } from '../TutorialContext'
|
||||
import { TutorialPlayer } from '../TutorialPlayer'
|
||||
import { Tutorial, TutorialStep } from '../../../types/tutorial'
|
||||
import { AbacusDisplayProvider } from '@/contexts/AbacusDisplayContext'
|
||||
|
||||
// Mock tutorial data
|
||||
const mockTutorial: Tutorial = {
|
||||
id: 'celebration-test-tutorial',
|
||||
title: 'Celebration Tooltip Test',
|
||||
description: 'Testing celebration tooltip behavior',
|
||||
steps: [
|
||||
{
|
||||
id: 'step-1',
|
||||
title: 'Simple Addition',
|
||||
problem: '3 + 2',
|
||||
description: 'Add 2 to 3',
|
||||
startValue: 3,
|
||||
targetValue: 5
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
// Test component that exposes internal state for testing
|
||||
const TestCelebrationComponent = ({ tutorial }: { tutorial: Tutorial }) => {
|
||||
return (
|
||||
<AbacusDisplayProvider>
|
||||
<TutorialProvider tutorial={tutorial}>
|
||||
<TutorialPlayer
|
||||
tutorial={tutorial}
|
||||
isDebugMode={true}
|
||||
showDebugPanel={false}
|
||||
/>
|
||||
</TutorialProvider>
|
||||
</AbacusDisplayProvider>
|
||||
)
|
||||
}
|
||||
|
||||
describe('TutorialPlayer Celebration Tooltip', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks()
|
||||
})
|
||||
|
||||
describe('Celebration Tooltip Visibility', () => {
|
||||
it('should show celebration tooltip when step is completed and at target value', async () => {
|
||||
render(<TestCelebrationComponent tutorial={mockTutorial} />)
|
||||
|
||||
// Wait for initial render with start value (3)
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('3 + 2')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
// Simulate reaching target value (5) by finding and clicking appropriate beads
|
||||
// We need to add 2 to get from 3 to 5
|
||||
// Look for earth beads in the ones place that we can activate
|
||||
const abacusContainer = screen.getByRole('img', { hidden: true }) || document.querySelector('svg')
|
||||
|
||||
if (abacusContainer) {
|
||||
// Simulate clicking beads to reach value 5
|
||||
fireEvent.click(abacusContainer)
|
||||
|
||||
// In a real scenario, we'd need to trigger the actual value change
|
||||
// For testing, we'll use a more direct approach
|
||||
const valueChangeEvent = new CustomEvent('valueChange', {
|
||||
detail: { newValue: 5 }
|
||||
})
|
||||
abacusContainer.dispatchEvent(valueChangeEvent)
|
||||
}
|
||||
|
||||
// Wait for celebration tooltip to appear
|
||||
await waitFor(() => {
|
||||
const celebrationElements = screen.queryAllByText(/excellent work/i)
|
||||
expect(celebrationElements.length).toBeGreaterThan(0)
|
||||
}, { timeout: 3000 })
|
||||
})
|
||||
|
||||
it('should hide celebration tooltip when user moves away from target value', async () => {
|
||||
render(<TestCelebrationComponent tutorial={mockTutorial} />)
|
||||
|
||||
// Wait for initial render
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('3 + 2')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
// First, complete the step (reach target value 5)
|
||||
const abacusContainer = document.querySelector('svg')
|
||||
if (abacusContainer) {
|
||||
const valueChangeEvent = new CustomEvent('valueChange', {
|
||||
detail: { newValue: 5 }
|
||||
})
|
||||
abacusContainer.dispatchEvent(valueChangeEvent)
|
||||
}
|
||||
|
||||
// Verify celebration appears
|
||||
await waitFor(() => {
|
||||
const celebrationElements = screen.queryAllByText(/excellent work/i)
|
||||
expect(celebrationElements.length).toBeGreaterThan(0)
|
||||
}, { timeout: 2000 })
|
||||
|
||||
// Now move away from target value (change to 6)
|
||||
if (abacusContainer) {
|
||||
const valueChangeEvent = new CustomEvent('valueChange', {
|
||||
detail: { newValue: 6 }
|
||||
})
|
||||
abacusContainer.dispatchEvent(valueChangeEvent)
|
||||
}
|
||||
|
||||
// Verify celebration tooltip disappears
|
||||
await waitFor(() => {
|
||||
const celebrationElements = screen.queryAllByText(/excellent work/i)
|
||||
expect(celebrationElements.length).toBe(0)
|
||||
}, { timeout: 2000 })
|
||||
})
|
||||
|
||||
it('should return to instruction tooltip when moved away from target', async () => {
|
||||
render(<TestCelebrationComponent tutorial={mockTutorial} />)
|
||||
|
||||
// Wait for initial render
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('3 + 2')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
// Complete step (reach target value 5)
|
||||
const abacusContainer = document.querySelector('svg')
|
||||
if (abacusContainer) {
|
||||
fireEvent.click(abacusContainer)
|
||||
const valueChangeEvent = new CustomEvent('valueChange', {
|
||||
detail: { newValue: 5 }
|
||||
})
|
||||
abacusContainer.dispatchEvent(valueChangeEvent)
|
||||
}
|
||||
|
||||
// Wait for celebration
|
||||
await waitFor(() => {
|
||||
expect(screen.queryAllByText(/excellent work/i).length).toBeGreaterThan(0)
|
||||
})
|
||||
|
||||
// Move away from target (to value 4)
|
||||
if (abacusContainer) {
|
||||
const valueChangeEvent = new CustomEvent('valueChange', {
|
||||
detail: { newValue: 4 }
|
||||
})
|
||||
abacusContainer.dispatchEvent(valueChangeEvent)
|
||||
}
|
||||
|
||||
// Should show instruction tooltip instead of celebration
|
||||
await waitFor(() => {
|
||||
expect(screen.queryAllByText(/excellent work/i).length).toBe(0)
|
||||
// Look for instruction indicators (lightbulb emoji or guidance text)
|
||||
const instructionElements = screen.queryAllByText(/💡/i)
|
||||
expect(instructionElements.length).toBeGreaterThanOrEqual(0) // May not always have instructions
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
describe('Celebration Tooltip Positioning', () => {
|
||||
it('should position celebration tooltip at last moved bead when available', async () => {
|
||||
const onStepComplete = vi.fn()
|
||||
|
||||
render(
|
||||
<AbacusDisplayProvider>
|
||||
<TutorialProvider tutorial={mockTutorial} onStepComplete={onStepComplete}>
|
||||
<TutorialPlayer
|
||||
tutorial={mockTutorial}
|
||||
isDebugMode={true}
|
||||
onStepComplete={onStepComplete}
|
||||
/>
|
||||
</TutorialProvider>
|
||||
</AbacusDisplayProvider>
|
||||
)
|
||||
|
||||
// Wait for initial render
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('3 + 2')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
// Simulate completing the step
|
||||
const abacusContainer = document.querySelector('svg')
|
||||
if (abacusContainer) {
|
||||
fireEvent.click(abacusContainer)
|
||||
const valueChangeEvent = new CustomEvent('valueChange', {
|
||||
detail: { newValue: 5 }
|
||||
})
|
||||
abacusContainer.dispatchEvent(valueChangeEvent)
|
||||
}
|
||||
|
||||
// Wait for step completion callback
|
||||
await waitFor(() => {
|
||||
expect(onStepComplete).toHaveBeenCalled()
|
||||
}, { timeout: 3000 })
|
||||
|
||||
// Verify celebration tooltip is positioned (should be visible in DOM)
|
||||
const tooltipPortal = document.querySelector('[data-radix-popper-content-wrapper]')
|
||||
expect(tooltipPortal).toBeTruthy()
|
||||
})
|
||||
|
||||
it('should use fallback position when no last moved bead available', async () => {
|
||||
render(<TestCelebrationComponent tutorial={mockTutorial} />)
|
||||
|
||||
// Directly trigger completion without tracking a moved bead
|
||||
const abacusContainer = document.querySelector('svg')
|
||||
if (abacusContainer) {
|
||||
// Skip the gradual movement and go straight to target
|
||||
const valueChangeEvent = new CustomEvent('valueChange', {
|
||||
detail: { newValue: 5 }
|
||||
})
|
||||
abacusContainer.dispatchEvent(valueChangeEvent)
|
||||
}
|
||||
|
||||
// Should still show celebration tooltip with fallback positioning
|
||||
await waitFor(() => {
|
||||
const celebrationElements = screen.queryAllByText(/excellent work/i)
|
||||
expect(celebrationElements.length).toBeGreaterThan(0)
|
||||
}, { timeout: 2000 })
|
||||
})
|
||||
})
|
||||
|
||||
describe('Tooltip State Management', () => {
|
||||
it('should reset last moved bead when navigating to new step', async () => {
|
||||
const multiStepTutorial: Tutorial = {
|
||||
...mockTutorial,
|
||||
steps: [
|
||||
mockTutorial.steps[0],
|
||||
{
|
||||
id: 'step-2',
|
||||
title: 'Another Addition',
|
||||
problem: '2 + 3',
|
||||
description: 'Add 3 to 2',
|
||||
startValue: 2,
|
||||
targetValue: 5
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
render(<TestCelebrationComponent tutorial={multiStepTutorial} />)
|
||||
|
||||
// Complete first step
|
||||
const abacusContainer = document.querySelector('svg')
|
||||
if (abacusContainer) {
|
||||
const valueChangeEvent = new CustomEvent('valueChange', {
|
||||
detail: { newValue: 5 }
|
||||
})
|
||||
abacusContainer.dispatchEvent(valueChangeEvent)
|
||||
}
|
||||
|
||||
// Navigate to next step
|
||||
const nextButton = screen.getByText(/next/i)
|
||||
fireEvent.click(nextButton)
|
||||
|
||||
// Wait for step change
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('2 + 3')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
// Complete second step - should use appropriate positioning
|
||||
if (abacusContainer) {
|
||||
const valueChangeEvent = new CustomEvent('valueChange', {
|
||||
detail: { newValue: 5 }
|
||||
})
|
||||
abacusContainer.dispatchEvent(valueChangeEvent)
|
||||
}
|
||||
|
||||
// Celebration should appear for second step
|
||||
await waitFor(() => {
|
||||
expect(screen.queryAllByText(/excellent work/i).length).toBeGreaterThan(0)
|
||||
}, { timeout: 2000 })
|
||||
})
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,382 @@
|
||||
import './test-setup'
|
||||
import React from 'react'
|
||||
import { render, screen, fireEvent, waitFor, act } from '@testing-library/react'
|
||||
import { vi } from 'vitest'
|
||||
import { TutorialProvider } from '../TutorialContext'
|
||||
import { TutorialPlayer } from '../TutorialPlayer'
|
||||
import { Tutorial } from '../../../types/tutorial'
|
||||
import { AbacusDisplayProvider } from '@/contexts/AbacusDisplayContext'
|
||||
|
||||
// Mock the AbacusReact component to make testing easier
|
||||
vi.mock('@soroban/abacus-react', () => ({
|
||||
AbacusReact: ({ value, onValueChange, overlays }: any) => {
|
||||
const [currentValue, setCurrentValue] = React.useState(value)
|
||||
|
||||
// Sync with prop changes
|
||||
React.useEffect(() => {
|
||||
setCurrentValue(value)
|
||||
}, [value])
|
||||
|
||||
const handleClick = () => {
|
||||
const newValue = currentValue === 3 ? 5 : currentValue === 5 ? 6 : 3
|
||||
setCurrentValue(newValue)
|
||||
onValueChange?.(newValue)
|
||||
}
|
||||
|
||||
return (
|
||||
<div data-testid="mock-abacus">
|
||||
<div data-testid="abacus-value">{currentValue}</div>
|
||||
<button onClick={handleClick} data-testid="change-value-btn">
|
||||
Change Value
|
||||
</button>
|
||||
{/* Render overlays for tooltip testing */}
|
||||
{overlays?.map((overlay: any, index: number) => (
|
||||
<div key={index} data-testid={`overlay-${index}`}>
|
||||
{overlay.content}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
},
|
||||
StepBeadHighlight: {}
|
||||
}))
|
||||
|
||||
const mockTutorial: Tutorial = {
|
||||
id: 'integration-test-tutorial',
|
||||
title: 'Integration Test Tutorial',
|
||||
description: 'Testing celebration tooltip integration',
|
||||
steps: [
|
||||
{
|
||||
id: 'step-1',
|
||||
title: 'Add Two',
|
||||
problem: '3 + 2',
|
||||
description: 'Add 2 to 3 to get 5',
|
||||
startValue: 3,
|
||||
targetValue: 5
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
describe('TutorialPlayer Celebration Integration', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks()
|
||||
})
|
||||
|
||||
const renderTutorialPlayer = (tutorial = mockTutorial, props = {}) => {
|
||||
return render(
|
||||
<AbacusDisplayProvider>
|
||||
<TutorialProvider tutorial={tutorial}>
|
||||
<TutorialPlayer
|
||||
tutorial={tutorial}
|
||||
isDebugMode={false}
|
||||
{...props}
|
||||
/>
|
||||
</TutorialProvider>
|
||||
</AbacusDisplayProvider>
|
||||
)
|
||||
}
|
||||
|
||||
describe('Celebration Tooltip Behavior', () => {
|
||||
it('should show celebration tooltip when target value is reached', async () => {
|
||||
const onStepComplete = vi.fn()
|
||||
renderTutorialPlayer(mockTutorial, { onStepComplete })
|
||||
|
||||
// Wait for tutorial to load with initial value
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('abacus-value')).toHaveTextContent('3')
|
||||
})
|
||||
|
||||
// Change value to target (5)
|
||||
const changeBtn = screen.getByTestId('change-value-btn')
|
||||
|
||||
await act(async () => {
|
||||
fireEvent.click(changeBtn)
|
||||
})
|
||||
|
||||
// Wait for value to change to 5
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('abacus-value')).toHaveTextContent('5')
|
||||
})
|
||||
|
||||
// Wait for step completion and celebration tooltip
|
||||
await waitFor(() => {
|
||||
expect(onStepComplete).toHaveBeenCalled()
|
||||
}, { timeout: 5000 })
|
||||
|
||||
// Look for celebration content in overlays
|
||||
await waitFor(() => {
|
||||
const celebration = screen.queryByText('🎉')
|
||||
const excellentWork = screen.queryByText('Excellent work!')
|
||||
expect(celebration || excellentWork).toBeTruthy()
|
||||
}, { timeout: 3000 })
|
||||
})
|
||||
|
||||
it('should hide celebration tooltip when user moves away from target', async () => {
|
||||
const onStepComplete = vi.fn()
|
||||
renderTutorialPlayer(mockTutorial, { onStepComplete })
|
||||
|
||||
// Wait for initial load
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('abacus-value')).toHaveTextContent('3')
|
||||
})
|
||||
|
||||
const changeBtn = screen.getByTestId('change-value-btn')
|
||||
|
||||
// First reach target value (5)
|
||||
await act(async () => {
|
||||
fireEvent.click(changeBtn)
|
||||
})
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('abacus-value')).toHaveTextContent('5')
|
||||
})
|
||||
|
||||
// Wait for celebration to appear
|
||||
await waitFor(() => {
|
||||
const celebration = screen.queryByText('🎉')
|
||||
const excellentWork = screen.queryByText('Excellent work!')
|
||||
expect(celebration || excellentWork).toBeTruthy()
|
||||
}, { timeout: 3000 })
|
||||
|
||||
// Now move away from target (to 6)
|
||||
await act(async () => {
|
||||
fireEvent.click(changeBtn)
|
||||
})
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('abacus-value')).toHaveTextContent('6')
|
||||
})
|
||||
|
||||
// Celebration should disappear
|
||||
await waitFor(() => {
|
||||
const celebration = screen.queryByText('🎉')
|
||||
const excellentWork = screen.queryByText('Excellent work!')
|
||||
expect(celebration).toBeFalsy()
|
||||
expect(excellentWork).toBeFalsy()
|
||||
}, { timeout: 2000 })
|
||||
})
|
||||
|
||||
it('should return celebration when user goes back to target value', async () => {
|
||||
renderTutorialPlayer(mockTutorial)
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('abacus-value')).toHaveTextContent('3')
|
||||
})
|
||||
|
||||
const changeBtn = screen.getByTestId('change-value-btn')
|
||||
|
||||
// Reach target (5)
|
||||
await act(async () => {
|
||||
fireEvent.click(changeBtn)
|
||||
})
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('abacus-value')).toHaveTextContent('5')
|
||||
})
|
||||
|
||||
// Verify celebration appears
|
||||
await waitFor(() => {
|
||||
const celebration = screen.queryByText('🎉')
|
||||
const excellentWork = screen.queryByText('Excellent work!')
|
||||
expect(celebration || excellentWork).toBeTruthy()
|
||||
}, { timeout: 3000 })
|
||||
|
||||
// Move away (to 6)
|
||||
await act(async () => {
|
||||
fireEvent.click(changeBtn)
|
||||
})
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('abacus-value')).toHaveTextContent('6')
|
||||
})
|
||||
|
||||
// Celebration should be gone
|
||||
await waitFor(() => {
|
||||
expect(screen.queryByText('🎉')).toBeFalsy()
|
||||
expect(screen.queryByText('Excellent work!')).toBeFalsy()
|
||||
})
|
||||
|
||||
// Go back to start (3) then back to target (5)
|
||||
await act(async () => {
|
||||
fireEvent.click(changeBtn) // 6 -> 3
|
||||
})
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('abacus-value')).toHaveTextContent('3')
|
||||
})
|
||||
|
||||
await act(async () => {
|
||||
fireEvent.click(changeBtn) // 3 -> 5
|
||||
})
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('abacus-value')).toHaveTextContent('5')
|
||||
})
|
||||
|
||||
// Celebration should return
|
||||
await waitFor(() => {
|
||||
const celebration = screen.queryByText('🎉')
|
||||
const excellentWork = screen.queryByText('Excellent work!')
|
||||
expect(celebration || excellentWork).toBeTruthy()
|
||||
}, { timeout: 3000 })
|
||||
})
|
||||
|
||||
it('should handle multiple step navigation with celebration tooltips', async () => {
|
||||
const multiStepTutorial: Tutorial = {
|
||||
...mockTutorial,
|
||||
steps: [
|
||||
mockTutorial.steps[0],
|
||||
{
|
||||
id: 'step-2',
|
||||
title: 'Add One',
|
||||
problem: '4 + 1',
|
||||
description: 'Add 1 to 4 to get 5',
|
||||
startValue: 4,
|
||||
targetValue: 5
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
renderTutorialPlayer(multiStepTutorial)
|
||||
|
||||
// Complete first step
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('abacus-value')).toHaveTextContent('3')
|
||||
})
|
||||
|
||||
const changeBtn = screen.getByTestId('change-value-btn')
|
||||
|
||||
await act(async () => {
|
||||
fireEvent.click(changeBtn) // 3 -> 5
|
||||
})
|
||||
|
||||
// Wait for celebration
|
||||
await waitFor(() => {
|
||||
const celebration = screen.queryByText('🎉')
|
||||
const excellentWork = screen.queryByText('Excellent work!')
|
||||
expect(celebration || excellentWork).toBeTruthy()
|
||||
}, { timeout: 3000 })
|
||||
|
||||
// Navigate to next step
|
||||
const nextButton = screen.getByText(/Next/)
|
||||
await act(async () => {
|
||||
fireEvent.click(nextButton)
|
||||
})
|
||||
|
||||
// Wait for step 2 to load
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('4 + 1')).toBeInTheDocument()
|
||||
expect(screen.getByTestId('abacus-value')).toHaveTextContent('4')
|
||||
})
|
||||
|
||||
// Complete second step
|
||||
await act(async () => {
|
||||
fireEvent.click(changeBtn) // Should go from 4 to 5
|
||||
})
|
||||
|
||||
// Celebration should appear for second step too
|
||||
await waitFor(() => {
|
||||
const celebration = screen.queryByText('🎉')
|
||||
const excellentWork = screen.queryByText('Excellent work!')
|
||||
expect(celebration || excellentWork).toBeTruthy()
|
||||
}, { timeout: 3000 })
|
||||
})
|
||||
|
||||
it('should properly reset celebration state between steps', async () => {
|
||||
const multiStepTutorial: Tutorial = {
|
||||
...mockTutorial,
|
||||
steps: [
|
||||
mockTutorial.steps[0],
|
||||
{
|
||||
id: 'step-2',
|
||||
title: 'Different Target',
|
||||
problem: '2 + 4',
|
||||
description: 'Add 4 to 2 to get 6',
|
||||
startValue: 2,
|
||||
targetValue: 6
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
renderTutorialPlayer(multiStepTutorial)
|
||||
|
||||
// Complete first step (target 5)
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('abacus-value')).toHaveTextContent('3')
|
||||
})
|
||||
|
||||
const changeBtn = screen.getByTestId('change-value-btn')
|
||||
|
||||
await act(async () => {
|
||||
fireEvent.click(changeBtn) // 3 -> 5
|
||||
})
|
||||
|
||||
// Wait for celebration
|
||||
await waitFor(() => {
|
||||
const celebration = screen.queryByText('🎉')
|
||||
const excellentWork = screen.queryByText('Excellent work!')
|
||||
expect(celebration || excellentWork).toBeTruthy()
|
||||
})
|
||||
|
||||
// Navigate to step 2
|
||||
const nextButton = screen.getByText(/Next/)
|
||||
await act(async () => {
|
||||
fireEvent.click(nextButton)
|
||||
})
|
||||
|
||||
// Step 2 should start fresh (no celebration initially)
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('2 + 4')).toBeInTheDocument()
|
||||
expect(screen.getByTestId('abacus-value')).toHaveTextContent('2')
|
||||
})
|
||||
|
||||
// Should not show celebration initially for new step
|
||||
expect(screen.queryByText('🎉')).toBeFalsy()
|
||||
expect(screen.queryByText('Excellent work!')).toBeFalsy()
|
||||
})
|
||||
})
|
||||
|
||||
describe('Tooltip Content and Styling', () => {
|
||||
it('should show correct celebration content and styling', async () => {
|
||||
renderTutorialPlayer(mockTutorial)
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('abacus-value')).toHaveTextContent('3')
|
||||
})
|
||||
|
||||
const changeBtn = screen.getByTestId('change-value-btn')
|
||||
|
||||
// Reach target value
|
||||
await act(async () => {
|
||||
fireEvent.click(changeBtn)
|
||||
})
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('abacus-value')).toHaveTextContent('5')
|
||||
})
|
||||
|
||||
// Verify both celebration elements appear
|
||||
await waitFor(() => {
|
||||
expect(screen.queryByText('🎉')).toBeTruthy()
|
||||
expect(screen.queryByText('Excellent work!')).toBeTruthy()
|
||||
}, { timeout: 3000 })
|
||||
|
||||
// The overlay should have celebration styling
|
||||
const overlay = screen.queryByTestId('overlay-0')
|
||||
expect(overlay).toBeTruthy()
|
||||
})
|
||||
|
||||
it('should show instruction content when not at target', async () => {
|
||||
renderTutorialPlayer(mockTutorial)
|
||||
|
||||
// Initially should show instructions (not celebration)
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('abacus-value')).toHaveTextContent('3')
|
||||
})
|
||||
|
||||
// Should not show celebration initially
|
||||
expect(screen.queryByText('🎉')).toBeFalsy()
|
||||
expect(screen.queryByText('Excellent work!')).toBeFalsy()
|
||||
})
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user