From d56889f6abe8fe2668e40a84aeb3571126703fdd Mon Sep 17 00:00:00 2001
From: Jakub Cejchan <jcejchan@csas.cz>
Date: Fri, 6 Dec 2024 11:43:45 +0100
Subject: [PATCH] feat: score page api connection

---
 .../src/components/QuizScore/QuizScore.tsx    | 26 +++++++++++++++++--
 frontend/tests/pages/quiz-result-page.ts      |  2 ++
 frontend/tests/steps/quiz.ts                  |  6 +++++
 specs/QuizResultPage.feature                  |  6 +++++
 4 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/QuizScore/QuizScore.tsx b/frontend/src/components/QuizScore/QuizScore.tsx
index ff9608f..38b6be6 100644
--- a/frontend/src/components/QuizScore/QuizScore.tsx
+++ b/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>
     )
 }
diff --git a/frontend/tests/pages/quiz-result-page.ts b/frontend/tests/pages/quiz-result-page.ts
index d817f9a..ca4d577 100644
--- a/frontend/tests/pages/quiz-result-page.ts
+++ b/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}"]`)
 }
diff --git a/frontend/tests/steps/quiz.ts b/frontend/tests/steps/quiz.ts
index ca05a44..09b29e4 100644
--- a/frontend/tests/steps/quiz.ts
+++ b/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
 })
diff --git a/specs/QuizResultPage.feature b/specs/QuizResultPage.feature
index 2ee7f22..b738996 100644
--- a/specs/QuizResultPage.feature
+++ b/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%'