feat: show progress

src/components/answeredQuestions/answeredQuestions.test.tsx

@@ -16,7 +16,7 @@ describe('AnsweredQuestions component', () => {
         );
     }
 
-    it('should render', () => {
+    test('should render', () => {
         const {container} = render(getUi([new AnsweredQuestion(new Question(2, 3), 6)]));
         expect(container.querySelector('.answersContainer')).toBeInTheDocument();
         expect(container.querySelector('.answersTable')).toBeInTheDocument();

src/components/multiplicationGame/index.tsx

@@ -31,18 +31,23 @@ export default function MultiplicationGame() {
         const question = questions[currentQuestionIndex!];
         return (
             <div className={'multiplicationTable'}>
-                <form onSubmit={handleSumitAnswer}>
-                    <label className={'question'}>{question.factorOne} * {question.factorTwo} = </label>
-                    <input
-                        type='number'
-                        autoComplete={'off'}
-                        id={'answer'}
-                        onChange={handleChange}
-                        value={answer}
-                        autoFocus={true}
-                        required={true}
-                    />
-                </form>
+                <div className={'gameProgress'}>
+                    Pozostało pytań: {questions.length}
+                </div>
+                <div className={'questionForm'}>
+                    <form onSubmit={handleSumitAnswer}>
+                        <label className={'question'}>{question.factorOne} * {question.factorTwo} = </label>
+                        <input
+                            type='number'
+                            autoComplete={'off'}
+                            id={'answer'}
+                            onChange={handleChange}
+                            value={answer}
+                            autoFocus={true}
+                            required={true}
+                        />
+                    </form>
+                </div>
             </div>
         );
     } else if (context.gameState && context.gameState === GameState.Finished) {

src/components/multiplicationGame/multiplicationGame.css

@@ -3,7 +3,14 @@
 	justify-content: center;
 	align-items: center;
 	margin-top: 1em;
-	gap: 2em;
+	gap: 1em;
+	flex-flow: column;
+
+	.gameProgress {
+		display: block;
+		font-size: 2em;
+		font-weight: bold;
+	}
 
 	.question {
 		font-size: 2em;

src/components/multiplicationGame/multiplicationGame.test.tsx

@@ -53,4 +53,19 @@ describe('MultiplicationGame component', () => {
 
         expect(container.querySelector('input')).not.toBeInTheDocument();
     });
+
+    test('shows progress', () => {
+        const container = renderGame(GameState.InProgress, [new Question(2, 3), new Question(3, 3)]);
+
+        let progress = container.querySelector('.gameProgress');
+        expect(progress).toBeInTheDocument();
+        expect(progress?.textContent).toBe('Pozostało pytań: 2');
+
+        const input: HTMLInputElement | null = container.querySelector('input');
+        fireEvent.change(input!, {target: {value: '6'}});
+        fireEvent.submit(input!);
+
+        progress = container.querySelector('.gameProgress');
+        expect(progress?.textContent).toBe('Pozostało pytań: 1');
+    });
 });

src/providers/answeredQuestion.test.ts

@@ -1,13 +1,13 @@
 import {AnsweredQuestion, Question} from './MultiplicationTableStateProvider';
 
 describe('AnsweredQUestion', () => {
-    it('is correct', () => {
+    test('is correct', () => {
         let answer = new AnsweredQuestion(new Question(2, 3), 6);
 
         expect(answer.isCorrect).toBeTruthy();
     });
 
-    it('is falsy', () => {
+    test('is falsy', () => {
         let answer = new AnsweredQuestion(new Question(2, 3), 7);
 
         expect(answer.isCorrect).toBeFalsy();