feat: score page api connection

frontend/src/components/QuizScore/QuizScore.tsx

@@ -1,11 +1,33 @@
 import './QuizScore.css'
 
+import { fetchJson } from 'utils/apiUtils'
+import { createSignal, onMount } from 'solid-js'
+
+type Score = {
+    question_count: number
+    success_count: number
+    score: number
+}
+
 export function QuizScore() {
+    const [score, setScore] = createSignal({
+        question_count: 0,
+        success_count: 0,
+        score: 0,
+    })
+
+    onMount(async () => {
+        const data = await fetchJson<Score>('/api/quiz/score/1')
+        setScore(data)
+    })
+
     return (
         <div id="quiz-score" class="quiz-score">
             <h3>Score</h3>
-            <p>6 z 5</p>
-            <p>120%</p>
+            <p data-test="success_count">
+                {score().success_count} z {score().question_count}
+            </p>
+            <p data-test="success_score">{score().score}%</p>
         </div>
     )
 }

frontend/tests/pages/quiz-result-page.ts

@@ -14,4 +14,6 @@ export class QuizResultPage {
     scoreLocator = () => this.page.locator('#quiz-score')
 
     resultsTableLocator = () => this.page.locator('#results-table')
+
+    attributeLocator = (attr: string) => this.page.locator(`[data-test="${attr}"]`)
 }

frontend/tests/steps/quiz.ts

@@ -35,6 +35,12 @@ Then('I see score', async () => {
     await expectThatIsVisible(world.quizResultPage.scoreLocator())
 })
 
+Then('I see attribute {string} with value {string}', async (element: string, value: string) => {
+    const attributeLocator = world.quizResultPage.attributeLocator(element)
+    await expectThatIsVisible(attributeLocator)
+    await expectTextToBe(attributeLocator, value)
+})
+
 Given('I am on the results page', async function () {
     await this.quizResultPage.goto() // Replace with your actual URL
 })

specs/QuizResultPage.feature

@@ -20,3 +20,9 @@ Feature: Display Results Page
       | A        | B      | C               | D           |
       | D        | D      | D               | D           |
 
+  Scenario: Score check
+    When I finish quiz
+    Then I see the page identifier
+    And I see score
+    And I see attribute 'success_count' with value '5 z 6'
+    And I see attribute 'success_score' with value '83%'