@instructure/quiz-taking/src/components/TakeButton/__tests__/TakeButton.test.js

import React from 'react'
import {wrapState} from '../../../../tests/utils/wrapState'
import {render, screen} from '../../../../tests/utils/rtlRenderOverride'
import {describe, expect, it} from 'vitest'

import {
  FAILED_TO_START,
  OQAAT_NO_BACKTRACKING_NEXT_ITEM_FETCH_CALL,
  FILE_UPLOAD_URL_CALL,
  FILE_UPLOAD_CALL,
} from '@instructure/quiz-common/constants'

import {TakeButton, mapStateToProps, mapDispatchToProps} from '../index'

describe('TakeButton Connected Component', () => {
  const stateGenerator = function ({
    oqaat = 'question',
    allowBacktracking = true,
    nextItemRequestStatus = 'none',
    fileUploadUrlRequestStatus = 'none',
    fileUploadRequestStatus = 'none',
    currentSessionItemPosition = 1,
    sessionItemsCount = 1,
    sessionItemPosition = 1,
    bolaPosition = 1,
    submitFlag = false,
    status = 'in_progress',
    bolaSessionItemsCount = null,
    buildOnLastAttempt = false,
  } = {}) {
    return {
      quizSessions: {
        activeQuizSessionId: '2',
        2: {
          oneAtATimeType: oqaat,
          sessionItemsCount,
          allowBacktracking,
          pins: [1, 2, 3],
          status,
          bolaSessionItemsCount,
          buildOnLastAttempt,
        },
      },
      taking: {
        currentSessionItemPosition,
        responses: [{position: 1, userResponse: {value: 'a user response'}, itemId: '1'}],
        submitFlag,
      },
      sessionItems: {
        '1_1': {
          position: sessionItemPosition,
          bolaPosition: bolaPosition,
          item: {id: '99'},
          quizSessionId: '1',
        },
        '2_1': {
          position: sessionItemPosition,
          bolaPosition: bolaPosition,
          item: {id: '10'},
          quizSessionId: '2',
        },
      },
      calls: {
        [OQAAT_NO_BACKTRACKING_NEXT_ITEM_FETCH_CALL]: {requestStatus: nextItemRequestStatus},
        [FILE_UPLOAD_URL_CALL]: {requestStatus: fileUploadUrlRequestStatus},
        [FILE_UPLOAD_CALL]: {requestStatus: fileUploadRequestStatus},
      },
    }
  }

  const storeOptions = {state: stateGenerator()}

  it('should render the TakeButton component', () => {
    render(<TakeButton />, {storeOptions})
    expect(screen.getByRole('button', {name: /submit/i})).toBeInTheDocument()
  })

  describe('#mapStateToProps', () => {
    describe('oqaat on', () => {
      describe('allowBacktracking', () => {
        describe('with backtracking on', () => {
          it('set to true', () => {
            const props = mapStateToProps(wrapState(stateGenerator()))
            expect(props.allowBacktracking).toBe(true)
          })
        })

        describe('with backtracking off', () => {
          it('set to false', () => {
            const props = mapStateToProps(wrapState(stateGenerator({allowBacktracking: false})))
            expect(props.allowBacktracking).toBe(false)
          })
        })
      })

      describe('currentQuestionIsLast', () => {
        it('set to true if currentSessionItemPosition === sessionItemsCount', () => {
          const props = mapStateToProps(wrapState(stateGenerator()))
          expect(props.currentQuestionIsLast).toBe(true)
        })

        it('set to false if currentSessionItemPosition !== sessionItemsCount', () => {
          const props = mapStateToProps(wrapState(stateGenerator({currentSessionItemPosition: 2})))
          expect(props.currentQuestionIsLast).toBe(false)
        })

        describe('bola ON', () => {
          describe('allow backtracking ON', () => {
            it('set to true if currentSessionItemPosition === bolaSessionItemsCount', () => {
              const props = mapStateToProps(
                wrapState(
                  stateGenerator({
                    currentSessionItemPosition: 3,
                    bolaSessionItemsCount: 3,
                    buildOnLastAttempt: true,
                    allowBacktracking: true,
                  }),
                ),
              )
              expect(props.currentQuestionIsLast).toBe(true)
            })

            it('set to false if currentSessionItemPosition !== bolaSessionItemsCount', () => {
              const props = mapStateToProps(
                wrapState(
                  stateGenerator({
                    currentSessionItemPosition: 3,
                    bolaSessionItemsCount: 4,
                    buildOnLastAttempt: true,
                    allowBacktracking: true,
                  }),
                ),
              )
              expect(props.currentQuestionIsLast).toBe(false)
            })
          })

          describe('allow backtracking OFF', () => {
            it('set to true if bolaPosition === bolaSessionItemsCount', () => {
              const props = mapStateToProps(
                wrapState(
                  stateGenerator({
                    bolaPosition: 3,
                    bolaSessionItemsCount: 3,
                    buildOnLastAttempt: true,
                    allowBacktracking: false,
                  }),
                ),
              )
              expect(props.currentQuestionIsLast).toBe(true)
            })

            it('set to false if bolaPosition !== bolaSessionItemsCount', () => {
              const props = mapStateToProps(
                wrapState(
                  stateGenerator({
                    bolaPosition: 3,
                    bolaSessionItemsCount: 4,
                    buildOnLastAttempt: true,
                    allowBacktracking: false,
                  }),
                ),
              )
              expect(props.currentQuestionIsLast).toBe(false)
            })
          })
        })

        describe('bola off', () => {
          it('set to false even if currentSessionItemPosition === bolaSessionItemsCount', () => {
            const props = mapStateToProps(
              wrapState(
                stateGenerator({
                  currentSessionItemPosition: 4,
                  bolaSessionItemsCount: 4,
                  buildOnLastAttempt: false,
                }),
              ),
            )
            expect(props.currentQuestionIsLast).toBe(false)
          })
        })
      })

      it('sets currentSessionItemPosition', () => {
        const props = mapStateToProps(wrapState(stateGenerator()))
        expect(props.currentSessionItemPosition).toEqual(1)
      })
    })

    describe('disabled', () => {
      it('set to true if nextItem requestStatus === calling', () => {
        const props = mapStateToProps(wrapState(stateGenerator({nextItemRequestStatus: 'calling'})))
        expect(props.disabled).toBe(true)
      })

      it('set to false if nextItem requestStatus !== calling', () => {
        const props = mapStateToProps(wrapState(stateGenerator()))
        expect(props.disabled).toBe(false)
      })

      it('set to true if fileUploadUrl requestStatus === calling', () => {
        const props = mapStateToProps(
          wrapState(stateGenerator({fileUploadUrlRequestStatus: 'calling'})),
        )
        expect(props.disabled).toBe(true)
      })

      it('set to false if fileUploadUrl requestStatus !== calling', () => {
        const props = mapStateToProps(wrapState(stateGenerator()))
        expect(props.disabled).toBe(false)
      })

      it('set to true if fileUpload requestStatus === calling', () => {
        const props = mapStateToProps(
          wrapState(stateGenerator({fileUploadRequestStatus: 'calling'})),
        )
        expect(props.disabled).toBe(true)
      })

      it('set to false if fileUpload requestStatus !== calling', () => {
        const props = mapStateToProps(wrapState(stateGenerator()))
        expect(props.disabled).toBe(false)
      })

      it('set to true if submitFlag is true', () => {
        const props = mapStateToProps(wrapState(stateGenerator({submitFlag: true})))
        expect(props.disabled).toBe(true)
      })

      it('set to true if the quiz session failed to start', () => {
        const props = mapStateToProps(wrapState(stateGenerator({status: FAILED_TO_START})))
        expect(props.disabled).toBe(true)
      })
    })

    describe('userResponse', () => {
      it('returns the data if response found', () => {
        const props = mapStateToProps(wrapState(stateGenerator()))
        expect(props.userResponse).toEqual({value: 'a user response'})
      })

      it('returns undefined if response not found', () => {
        const props = mapStateToProps(wrapState(stateGenerator({currentSessionItemPosition: 2})))
        expect(props.userResponse).toBeUndefined()
      })
    })

    describe('itemId', () => {
      it('returns the data', () => {
        const props = mapStateToProps(wrapState(stateGenerator()))
        expect(props.itemId).toEqual('10')
      })

      it('returns undefined if currentSessionItemPosition does not find an item with position', () => {
        const props = mapStateToProps(wrapState(stateGenerator({currentSessionItemPosition: 2})))
        expect(props.itemId).toBeUndefined()
      })
    })
  })

  describe('#mapDispatchToProps', () => {
    it('is an object of actions', () => {
      const props = mapDispatchToProps
      expect(props.screenreaderNotification).toBeTypeOf('function')
      expect(props.nextQuestion).toBeTypeOf('function')
      expect(props.submitQuiz).toBeTypeOf('function')
      expect(props.withConfirm).toBeTypeOf('function')
    })
  })
})