Make UI testable

leung018 · Oct 25, 2023 · 9c55d90 · 9c55d90
1 parent 0e87828
commit 9c55d90
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 21 deletions.
diff --git a/src/app/components/mc/editor.test.tsx b/src/app/components/mc/editor.test.tsx
@@ -5,15 +5,33 @@ import { QuestionSetEditorUIService } from './editor'
 describe('QuestionSetEditor', () => {
   it('should save question set', () => {
     const editorRepo = QuestionSetRepoFactory.createTestInstance()
-    const { getByLabelText } = render(
+    const { getByLabelText, getByText } = render(
       QuestionSetEditorUIService.createTestInstance({
         editorRepo,
       }).getElement(),
     )
     const questionSetNameInput = getByLabelText('Question Set Name:')
-    const questionInput = getByLabelText('Question:')
+    const questionInput = getByLabelText('Question 1:')
 
-    // TODO: Fire events to input a question and then save
+    const choice1Input = getByLabelText('Choice 1:')
+    const isChoice1CorrectInput = getByLabelText('Choice 1 is correct answer')
+    const isChoice1FixedPositionInput = getByLabelText(
+      'Choice 1 is fixed position',
+    )
+
+    const choice2Input = getByLabelText('Choice 2:')
+
+    fireEvent.change(questionSetNameInput, { target: { value: 'Test name' } })
+    fireEvent.change(questionInput, { target: { value: 'Am I handsome?' } })
+    fireEvent.change(choice1Input, { target: { value: 'True' } })
+    fireEvent.change(isChoice1CorrectInput, { target: { value: 'true' } })
+    fireEvent.change(isChoice1FixedPositionInput, {
+      target: { value: 'true' },
+    })
+
+    fireEvent.change(choice2Input, { target: { value: 'False' } })
+
+    fireEvent.click(getByText('Save'))
 
     const actualQuestionSet = editorRepo.getQuestionSetByName('Test name')
 

diff --git a/src/app/components/mc/editor.tsx b/src/app/components/mc/editor.tsx
@@ -42,46 +42,65 @@ function QuestionSetEditor() {
       </div>
 
       <div className="mb-8">
-        <h2 className="text-lg font-bold mb-2">Question 1</h2>
-        <div className="form-group">
-          <label>Question:</label>
+        <label>
+          <h2 className="text-lg font-bold mb-2">Question 1:</h2>
           <input
             type="text"
             className="border border-gray-300 px-2 py-1 w-full"
           />
-        </div>
+        </label>
         <div className="form-group">
           <div className="grid grid-cols-5 gap-4">
             <div className="col-span-3"></div>
             <div className="col-span-1 text-center">Correct Answer</div>
             <div className="col-span-1 text-center">Fixed Position</div>
 
             <div className="col-span-3">
-              <label>Choice 1:</label>
-              <input
-                type="text"
-                className="border border-gray-300 px-2 py-1 ml-2"
-              />
+              <label>
+                Choice 1:
+                <input
+                  type="text"
+                  className="border border-gray-300 px-2 py-1 ml-2"
+                />
+              </label>
             </div>
             <div className="col-span-1 flex items-center justify-center">
-              <input type="checkbox" className="mr-1" />
+              <input
+                type="checkbox"
+                className="mr-1"
+                aria-label="Choice 1 is correct answer"
+              />
             </div>
             <div className="col-span-1 flex items-center justify-center">
-              <input type="checkbox" className="mr-1" />
+              <input
+                type="checkbox"
+                className="mr-1"
+                aria-label="Choice 1 is fixed position"
+              />
             </div>
 
             <div className="col-span-3">
-              <label>Choice 2:</label>
-              <input
-                type="text"
-                className="border border-gray-300 px-2 py-1 ml-2"
-              />
+              <label>
+                Choice 2:
+                <input
+                  type="text"
+                  className="border border-gray-300 px-2 py-1 ml-2"
+                />
+              </label>
             </div>
             <div className="col-span-1 flex items-center justify-center">
-              <input type="checkbox" className="mr-1" />
+              <input
+                type="checkbox"
+                className="mr-1"
+                aria-label="Choice 2 is correct answer"
+              />
             </div>
             <div className="col-span-1 flex items-center justify-center">
-              <input type="checkbox" className="mr-1" />
+              <input
+                type="checkbox"
+                className="mr-1"
+                aria-label="Choice 2 is fixed position"
+              />
             </div>
 
             <div className="col-span-1">