Merge branch 'master' of https://github.com/scrumdojo/quizmaster

frontend/src/pages/CreateQuestion/CreateQuestion.tsx

@@ -93,13 +93,15 @@ export function CreateQuestion() {
                 {answersArray.map((_answer, index) => (
                     <div class="answerRow">
                         <input
+                            id={`answer-text-${index + 1}`}
                             type="text"
                             placeholder={`Answer ${index + 1}`}
                             value={answers()[index]}
                             onInput={e => updateAnswer(index, (e.target as HTMLInputElement).value)}
                             class="answerInput"
                         />
                         <input
+                            id={`answer-checkbox-${index + 1}`}
                             type="checkbox"
                             checked={correctAnswer() === index}
                             onChange={() => setCorrectAnswer(index)}

frontend/tests/pages/question-creation-page.ts

@@ -1,6 +1,6 @@
 import type { Page } from '@playwright/test'
 
-export default class QuizCreationPage {
+export default class QuestionCreationPage {
     constructor(private page: Page) {}
 
     goto = async () => this.page.goto('/create-question')
@@ -10,4 +10,15 @@ export default class QuizCreationPage {
     formLocator = () => this.page.locator('form.question-create-form')
 
     enterQuestion = (question: string) => this.page.fill('#question-text-area', question)
+
+    enterAnswer = async (index: number, value: string, correct: boolean) => {
+        await this.page.fill(`#answer-text-${String(index + 1)}`, value)
+        if (correct) {
+            await this.page.check(`#answer-checkbox-${String(index + 1)}`)
+        }
+    }
+
+    clickSubmitButton = async () => this.page.locator('button.submitButton').click()
+
+    linkLocator = () => this.page.locator('#question-link')
 }

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

@@ -3,7 +3,7 @@ import type { Page } from '@playwright/test'
 export default class QuizCreationPage {
     constructor(private page: Page) {}
 
-    goto = async () => this.page.goto('/quiz/create')
+    goto = async () => this.page.goto('/quiz-question/all')
 
     getTitle = () => this.page.locator('h1').innerText()
 
@@ -44,4 +44,6 @@ export default class QuizCreationPage {
     getQuizLink = () => this.page.locator('a.quiz-link').getAttribute('href')
 
     getValidationError = () => this.page.locator('.validation-error').innerText()
+
+    getUrl = () => this.page.url()
 }

frontend/tests/steps/create-quiz.ts

@@ -22,8 +22,9 @@ Given('quiz maker opens a quiz creation page', async () => {
 })
 
 Then('quiz maker is on the quiz creation page', async () => {
-    const pageTitle = await world.quizCreationPage.getTitle()
-    expect(pageTitle).toBe('Quiz Creation')
+    const currentUrl = await world.quizCreationPage.getUrl()
+    const urlPattern = /^http:\/\/localhost:(5173|8080)\/quiz-question\/all$/
+    expect(currentUrl).toMatch(urlPattern)
 })
 
 When('quiz maker chooses id from the table', async () => {

frontend/tests/steps/quiz-question.ts

@@ -126,6 +126,23 @@ Then('I enter question {string}', async (question: string) => {
     await expectInputToBe(questionLocator, question)
 })
 
+Then('I enter answers:', async (answerRawTable: TableOf<AnswerRaw>) => {
+    const raw = answerRawTable.raw()
+    const correctIndex = toCorrectAnswer(raw)
+    for (let i = 0; i < raw.length; i++) {
+        await world.questionCreationPage.enterAnswer(i, toAnswers(raw)[i], correctIndex === i)
+    }
+})
+
+Then('I submit question', async () => {
+    await world.questionCreationPage.clickSubmitButton()
+})
+
+Then('I received question link', async () => {
+    const linkLocator = world.questionCreationPage.linkLocator()
+    await expectThatIsVisible(linkLocator)
+})
+
 Then('I should see question explanation {string}', async (questionExplanation: string) => {
     const questionExplanationLocator = world.quizTakingPage.questionExplanationLocator()
     await expectTextToBe(questionExplanationLocator, questionExplanation)

specs/CreateQuiz.feature

@@ -2,8 +2,8 @@ Feature: Quiz creation feature
 
 
   Scenario: Create a quiz as a quiz maker - happy path
-#    Given quiz maker opens a quiz creation page
-#    Then quiz maker is on the quiz creation page
+    Given quiz maker opens a quiz creation page
+    Then quiz maker is on the quiz creation page
 #
 #    When quiz maker chooses id from the table
 #    Then quiz maker sees that expected check boxes are selected
@@ -18,8 +18,8 @@ Feature: Quiz creation feature
 
 
   Scenario: Create a quiz as a quiz maker - validation error
-#    Given quiz maker opens a quiz creation page
-#    Then quiz maker is on the quiz creation page
+    Given quiz maker opens a quiz creation page
+    Then quiz maker is on the quiz creation page
 #
 #    When quiz maker does not choose id from the table
 #    Then quiz maker sees that expected check boxes are not selected

specs/CreateQuizQuestion.feature

@@ -3,8 +3,11 @@ Feature: Create a quiz question
   Scenario:
     When I visit the create question page
     Then I should see the create question form
-    And I enter question "What is capital of France?"
-#    And I enter answers
-#    And I mark correct answer
-#    When I submit question
-#    Then I recevied question link
+    And I enter question "What is capital of Italy?"
+    And I enter answers:
+      | Rome     | correct | Rome is the capital of Italy         |
+      | Naples   |         | Naples is not the capital of Italy   |
+      | Florence |         | Florence is not the capital of Italy |
+      | Palermo  |         | Palermo is not the capital of Italy  |
+    When I submit question
+    Then I received question link