update

kavigupta · Jan 11, 2025 · 8e72f4d · 8e72f4d
1 parent dab3835
commit 8e72f4d
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 18 deletions.
diff --git a/react/src/quiz/infinite.tsx b/react/src/quiz/infinite.tsx
@@ -107,19 +107,19 @@ export function numLives(correctPattern: boolean[]): number {
     return lives
 }
 
-export function JuxtastatInfiniteLives(props: { correctPattern: boolean[] }): React.ReactNode {
+export function JuxtastatLivesDisplay(props: { correctPattern: boolean[] }): React.ReactNode {
     const colors = useJuxtastatColors()
     const lives = numLives(props.correctPattern)
-    const images = []
+    const images: [string, string][] = []
     for (const i of Array(juxtaInfiniteInitialLives).keys()) {
-        images.push(i < lives ? colors.lifeEmoji : colors.lifeLostEmoji)
+        images.push(i < lives ? [colors.lifeEmoji, 'testing-life-emoji'] : [colors.lifeLostEmoji, 'testing-life-emoji-lost'])
     }
     if (lives > juxtaInfiniteInitialLives) {
-        images.push(colors.lifeEmoji)
+        images.push([colors.lifeEmoji, 'testing-life-emoji'])
     }
     return (
         <div
-            className="quiz_footer"
+            className="quiz_footer testing-life-display"
             style={{
                 margin: 'auto',
                 display: 'flex',
@@ -129,7 +129,7 @@ export function JuxtastatInfiniteLives(props: { correctPattern: boolean[] }): Re
                 gap: '0.25em',
             }}
         >
-            {images.map((src, i) => <img key={i} src={src} alt="" style={{ height: '2.5em' }} />)}
+            {images.map(([src, className], i) => <img key={i} className={className} src={src} alt="" style={{ height: '2.5em' }} />)}
         </div>
     )
 }
diff --git a/react/src/quiz/quiz-question.tsx b/react/src/quiz/quiz-question.tsx
@@ -8,7 +8,7 @@ import { MapGeneric, MapGenericProps, Polygons } from '../components/map'
 import { useColors } from '../page_template/colors'
 import { useMobileLayout } from '../utils/responsive'
 
-import { JuxtastatInfiniteLives } from './infinite'
+import { JuxtastatLivesDisplay } from './infinite'
 import { JuxtaQuestion, QuizHistory, QuizKind, RetroQuestion, aCorrect } from './quiz'
 import { Footer, Header, Help } from './quiz-components'
 
@@ -134,7 +134,7 @@ function QuizQuestion(props: QuizQuestionProps & {
                 : (
                         <>
                             {props.quiz.kind === 'infinite'
-                                ? <JuxtastatInfiniteLives correctPattern={props.history.correct_pattern.map(x => x ? true : false)} />
+                                ? <JuxtastatLivesDisplay correctPattern={props.history.correct_pattern.map(x => x ? true : false)} />
                                 : undefined}
                             <Footer history={props.history} length={props.length} />
                             <Help quizKind={props.quiz.kind} />

diff --git a/react/test/quiz_infinite_test.ts b/react/test/quiz_infinite_test.ts
@@ -79,37 +79,64 @@ test('formulates correct sequence', async (t) => {
 })
 
 async function provideAnswers(t: TestController, start: number, isCorrect: boolean[]): Promise<void> {
-    for (let i = start; i < isCorrect.length; i++) {
+    for (let i = start; i < start + isCorrect.length; i++) {
         await clickButton(t, isCorrect[i - start] === (correctAnswerSequence[i] === 'a') ? 'a' : 'b')
     }
+    await t.wait(500)
+}
+
+type Emoji = 'Y' | 'N'
+
+async function getLives(): Promise<Emoji[]> {
+    const images = Selector('.testing-life-display').child()
+    const result: Emoji[] = []
+    for (let i = 0; i < await images.count; i++) {
+        const classNames = (await images.nth(i).getAttribute('class'))!.split(' ')
+        const classNamesSpecific: Emoji[] = []
+        for (const className of classNames) {
+            if (className === 'testing-life-emoji') {
+                classNamesSpecific.push('Y')
+            }
+            else if (className === 'testing-life-emoji-lost') {
+                classNamesSpecific.push('N')
+            }
+        }
+        if (classNamesSpecific.length !== 1) {
+            throw new Error(`unexpected class names ${classNamesSpecific} in ${classNames}`)
+        }
+        result.push(classNamesSpecific[0])
+    }
+    return result
 }
 
 test('display-life-lost', async (t) => {
+    await t.expect(await getLives()).eql(['Y', 'Y', 'Y'])
     await provideAnswers(t, 0, [false])
-    await screencap(t)
+    await t.expect(await getLives()).eql(['Y', 'Y', 'N'])
     await provideAnswers(t, 1, [false])
-    await screencap(t)
+    await t.expect(await getLives()).eql(['Y', 'N', 'N'])
+    await provideAnswers(t, 2, [false])
+    await t.expect(await correctIncorrect(t)).eql([false, false, false])
 })
 
 test('display-life-gained', async (t) => {
     await provideAnswers(t, 0, [true, true, true, true])
-    await screencap(t)
+    await t.expect(await getLives()).eql(['Y', 'Y', 'Y'])
     await provideAnswers(t, 4, [true])
-    await screencap(t)
+    await t.expect(await getLives()).eql(['Y', 'Y', 'Y', 'Y'])
 })
 
 test('display-life-regained', async (t) => {
     await provideAnswers(t, 0, [false, true, true, true, true])
-    await screencap(t)
+    await t.expect(await getLives()).eql(['Y', 'Y', 'N'])
     await provideAnswers(t, 5, [true])
-    await screencap(t)
+    await t.expect(await getLives()).eql(['Y', 'Y', 'Y'])
 })
 
 test('19-correct', async (t) => {
     await provideAnswers(t, 0, Array<boolean>(20).fill(true))
     // should have 7 lives
-    await screencap(t)
+    await t.expect(await getLives()).eql(['Y', 'Y', 'Y', 'Y', 'Y', 'Y', 'Y'])
     await provideAnswers(t, 20, Array<boolean>(7).fill(false))
-    // done
-    await screencap(t)
+    await t.expect(await correctIncorrect(t)).eql([...Array<boolean>(20).fill(true), ...Array<boolean>(7).fill(false)])
 })