Increased test coverage for CreateOrEditQuizQuestion.tsx (#2263)

tests/unit/containers/my-quizzes/CreateOrEditQuizQuestion.spec.jsx

@@ -1,19 +1,42 @@
 import { fireEvent, screen, waitFor } from '@testing-library/react'
 
 import CreateOrEditQuizQuestion from '~/containers/my-quizzes/create-or-edit-quiz-question/CreateOrEditQuizQuestion'
-import { renderWithProviders } from '~tests/test-utils'
+import {
+  renderWithProviders,
+  mockAxiosClient,
+  TestSnackbar
+} from '~tests/test-utils'
+import { ResourceService } from '~/services/resource-service'
+import { URLs } from '~/constants/request'
 
 const setQuestions = vi.fn()
 const onCancel = vi.fn()
 
+const mockedQuestion = {
+  title: 'Question title',
+  text: 'Question text',
+  answers: [
+    { text: 'Answer 1', isCorrect: true },
+    { text: 'Answer 2', isCorrect: false }
+  ],
+  author: 'Question author',
+  type: 'oneAnswer',
+  category: {
+    _id: 'mockedId',
+    name: 'Category name'
+  }
+}
+
 describe('CreateOrEditQuizQuestion component without question', () => {
   beforeEach(async () => {
     await waitFor(() => {
       renderWithProviders(
-        <CreateOrEditQuizQuestion
-          onCancel={onCancel}
-          setQuestions={setQuestions}
-        />
+        <TestSnackbar>
+          <CreateOrEditQuizQuestion
+            onCancel={onCancel}
+            setQuestions={setQuestions}
+          />
+        </TestSnackbar>
       )
     })
   })
@@ -59,4 +82,107 @@ describe('CreateOrEditQuizQuestion component without question', () => {
 
     expect(addNewQuestionText).toBeInTheDocument()
   })
+
+  it('should save a new question in the database', async () => {
+    mockAxiosClient
+      .onPost(`${URLs.resources.questions.post}`)
+      .reply(200, { data: mockedQuestion })
+    const createQuestionSpy = vi.spyOn(ResourceService, 'createQuestion')
+    const modalSaveBtn = screen.getByText('common.save')
+    const modalInput = screen.getByRole('textbox')
+
+    fireEvent.change(modalInput, { target: { value: 'test' } })
+    fireEvent.click(modalSaveBtn)
+
+    const questionInput = screen.getByLabelText('questionPage.question')
+    fireEvent.change(questionInput, { target: { value: 'Question' } })
+
+    const addNewAnswerBtn = screen.getByTestId('addNewAnswerBtn')
+    fireEvent.click(addNewAnswerBtn)
+
+    const answerInput = screen.getByPlaceholderText(
+      'questionPage.writeYourAnswer'
+    )
+    fireEvent.change(answerInput, { target: { value: 'answer' } })
+
+    const saveBtn = screen.getByText('common.save')
+
+    fireEvent.click(saveBtn)
+
+    const snackbar = await screen.findByText(
+      'myResourcesPage.questions.successAddedQuestion'
+    )
+
+    expect(snackbar).toBeInTheDocument()
+    expect(createQuestionSpy).toHaveBeenCalled()
+  })
+})
+
+describe('CreateOrEditQuizQuestion component with a question', () => {
+  beforeEach(async () => {
+    await waitFor(() => {
+      renderWithProviders(
+        <TestSnackbar>
+          <CreateOrEditQuizQuestion
+            onCancel={onCancel}
+            question={mockedQuestion}
+            setQuestions={setQuestions}
+          />
+        </TestSnackbar>
+      )
+    })
+  })
+
+  it('should render QuestionEditor', () => {
+    const questionEditorTextField = screen.getByLabelText(
+      'questionPage.question'
+    )
+    expect(questionEditorTextField).toBeInTheDocument()
+  })
+
+  it('should change input text', () => {
+    const textField = screen.getByLabelText('questionPage.question')
+
+    fireEvent.change(textField, { target: { value: 'test' } })
+
+    expect(textField.value).toBe('test')
+  })
+
+  it('should update a question in the database', () => {
+    const updateQuestionSpy = vi.spyOn(ResourceService, 'updateQuestion')
+    const saveBtn = screen.getByText('common.save')
+
+    fireEvent.click(saveBtn)
+
+    expect(updateQuestionSpy).toHaveBeenCalled()
+  })
+
+  it('should show a snackbar after succesfull update', async () => {
+    mockAxiosClient
+      .onPatch(`${URLs.resources.questions.patch}`)
+      .reply(200, { data: mockedQuestion })
+    const saveBtn = screen.getByText('common.save')
+
+    fireEvent.click(saveBtn)
+
+    const snackbar = await screen.findByText(
+      'myResourcesPage.questions.successAddedQuestion'
+    )
+
+    expect(snackbar).toBeInTheDocument()
+  })
+
+  it('should show a snackbar after getting an error', async () => {
+    const fakeError = { code: 'mockedErrorCode', message: 'test error' }
+    mockAxiosClient
+      .onPatch(`${URLs.resources.questions.patch}`)
+      .reply(404, fakeError)
+    const saveBtn = screen.getByText('common.save')
+
+    fireEvent.click(saveBtn)
+
+    const snackbar = await screen.findByText(`errors.${fakeError.code}`)
+
+    expect(snackbar).toBeInTheDocument()
+  })
 })