Remove remaining usage of old mc

src/app/components/mc/quiz.test.tsx

@@ -1,23 +1,25 @@
-import { MultipleChoice } from '../../../model/mc'
-import {
-  MultipleChoiceQuestion,
-  MultipleChoiceQuestionFactory,
-} from '../../../model/question'
+import { MultipleChoiceBuilder } from '../../../model/mc'
 import { render, fireEvent } from '@testing-library/react'
 import '@testing-library/jest-dom'
 import MultipleChoiceQuiz from './quiz'
+import {
+  QuestionSet,
+  QuestionSetTestBuilder,
+} from '../../../model/question_set'
 
 describe('MultipleChoiceQuiz', () => {
   it('should render title and choices of a question', () => {
     const { getByText, getByLabelText } = renderMultipleChoicePage({
-      questions: [
-        {
+      questionSet: new QuestionSetTestBuilder()
+        .appendQuestion({
           title: 'Sample Question?',
-          mc: MultipleChoice.createTestInstance({
-            choices: ['Answer 1', 'Answer 2'],
-          }),
-        },
-      ],
+          mc: new MultipleChoiceBuilder()
+            .setCorrectChoiceIndex(0)
+            .addNonFixedChoice('Answer 1')
+            .addNonFixedChoice('Answer 2')
+            .build(),
+        })
+        .buildTestInstance(),
     })
     expect(getByText('Sample Question?')).toBeInTheDocument()
     expect(getByLabelText('Answer 1')).toBeInTheDocument()
@@ -26,28 +28,30 @@ describe('MultipleChoiceQuiz', () => {
 
   it('should render multiple questions', () => {
     const { getByText } = renderMultipleChoicePage({
-      questions: [
-        MultipleChoiceQuestionFactory.createTestInstance({
+      questionSet: new QuestionSetTestBuilder()
+        .appendQuestion({
           title: 'Question 1',
-        }),
-        MultipleChoiceQuestionFactory.createTestInstance({
+        })
+        .appendQuestion({
           title: 'Question 2',
-        }),
-      ],
+        })
+        .buildTestInstance(),
     })
     expect(getByText('Question 1')).toBeInTheDocument()
     expect(getByText('Question 2')).toBeInTheDocument()
   })
 
   it('should select one choice in a question will check it and uncheck other previously selected', () => {
     const { getByLabelText } = renderMultipleChoicePage({
-      questions: [
-        MultipleChoiceQuestionFactory.createTestInstance({
-          mc: MultipleChoice.createTestInstance({
-            choices: ['Choice 1', 'Choice 2'],
-          }),
-        }),
-      ],
+      questionSet: new QuestionSetTestBuilder()
+        .appendQuestion({
+          mc: new MultipleChoiceBuilder()
+            .setCorrectChoiceIndex(0)
+            .addNonFixedChoice('Choice 1')
+            .addNonFixedChoice('Choice 2')
+            .build(),
+        })
+        .buildTestInstance(),
     })
     const choice1 = getByLabelText('Choice 1')
     const choice2 = getByLabelText('Choice 2')
@@ -64,19 +68,25 @@ describe('MultipleChoiceQuiz', () => {
   })
 
   it("should select one choice in a question won't affect other questions", () => {
+    const presetIndexMcBuilder =
+      new MultipleChoiceBuilder().setCorrectChoiceIndex(0)
     const { getByLabelText } = renderMultipleChoicePage({
-      questions: [
-        MultipleChoiceQuestionFactory.createTestInstance({
-          mc: MultipleChoice.createTestInstance({
-            choices: ['Question 1 Choice A', 'Question 1 Choice B'],
-          }),
-        }),
-        MultipleChoiceQuestionFactory.createTestInstance({
-          mc: MultipleChoice.createTestInstance({
-            choices: ['Question 2 Choice A', 'Question 2 Choice B'],
-          }),
-        }),
-      ],
+      questionSet: new QuestionSetTestBuilder()
+        .appendQuestion({
+          mc: new MultipleChoiceBuilder()
+            .setCorrectChoiceIndex(0)
+            .addNonFixedChoice('Question 1 Choice A')
+            .addNonFixedChoice('Question 1 Choice B')
+            .build(),
+        })
+        .appendQuestion({
+          mc: new MultipleChoiceBuilder()
+            .setCorrectChoiceIndex(0)
+            .addNonFixedChoice('Question 2 Choice A')
+            .addNonFixedChoice('Question 2 Choice B')
+            .build(),
+        })
+        .buildTestInstance(),
     })
 
     const question1ChoiceA = getByLabelText('Question 1 Choice A')
@@ -94,9 +104,19 @@ describe('MultipleChoiceQuiz', () => {
  * So, with this wrapper function, it will be easier to change in the future.
  */
 function renderMultipleChoicePage({
-  questions,
+  questionSet,
 }: {
-  questions: MultipleChoiceQuestion[]
+  questionSet: QuestionSet
 }) {
+  // TODO: move this mapping to MultipleChoiceQuizUIService
+  const questions = questionSet.questions.map((question) => {
+    return {
+      title: question.title,
+      mc: {
+        choices: question.mc.choices.map((choice) => choice.answer),
+        correctChoiceIndex: question.mc.correctChoiceIndex,
+      },
+    }
+  })
   return render(<MultipleChoiceQuiz questions={questions} />)
 }

src/app/components/mc/quiz.tsx

@@ -1,10 +1,15 @@
 'use client'
 
 import { useState } from 'react'
-import { MultipleChoiceQuestion } from '../../../model/question'
 
 interface MultipleChoicePageProps {
-  questions: MultipleChoiceQuestion[]
+  questions: {
+    title: string
+    mc: {
+      choices: ReadonlyArray<string>
+      correctChoiceIndex: number
+    }
+  }[]
 }
 
 // TODO: Noted that won't test the rendering of submit button by now. Test that part later in the feature of submitting the answer is more meaningful.

src/app/page.tsx

@@ -1,35 +1,33 @@
 import MultipleChoiceQuiz from './components/mc/quiz'
-import { MultipleChoiceQuestion } from '../model/question'
-import { MultipleChoice } from '../model/mc'
 
 export default function Home() {
-  const questions: MultipleChoiceQuestion[] = [
+  const questions = [
     {
       title: 'What is correct color of the sky?',
-      mc: new MultipleChoice({
+      mc: {
         choices: ['Red', 'Blue', 'Green'],
         correctChoiceIndex: 1,
-      }),
+      },
     },
     {
       title: '1 + 1 = ?',
-      mc: new MultipleChoice({
+      mc: {
         choices: ['1', '2', '3'],
         correctChoiceIndex: 0,
-      }),
+      },
     },
     {
       title:
         'Which of the below is a programming language?\n I. Java\n II. Python\n III. JavaScript',
-      mc: new MultipleChoice({
+      mc: {
         choices: [
           'I Only',
           'I and II Only',
           'II and III Only',
           'All of the above',
         ],
         correctChoiceIndex: 3,
-      }),
+      },
     },
   ]
   return <MultipleChoiceQuiz questions={questions} />

src/model/question_set.ts

@@ -1,4 +1,4 @@
-import { NewVersionMultipleChoice } from './mc'
+import { MultipleChoiceBuilder, NewVersionMultipleChoice } from './mc'
 
 export interface QuestionSet {
   name: string
@@ -7,3 +7,33 @@ export interface QuestionSet {
     mc: NewVersionMultipleChoice
   }>
 }
+
+export class QuestionSetTestBuilder {
+  private name: string = 'Dummy question set'
+  private questions: {
+    title: string
+    mc: NewVersionMultipleChoice
+  }[] = []
+
+  appendQuestion({
+    title = 'dummy title',
+    mc = new MultipleChoiceBuilder()
+      .setCorrectChoiceIndex(0)
+      .addNonFixedChoice('dummy choice 1')
+      .addNonFixedChoice('dummy choice 2')
+      .build(),
+  } = {}): QuestionSetTestBuilder {
+    this.questions.push({
+      title: title,
+      mc: mc,
+    })
+    return this
+  }
+
+  buildTestInstance(): QuestionSet {
+    return {
+      name: this.name,
+      questions: this.questions,
+    }
+  }
+}