No ref/new prop to jump to question

spec/components/CioQuiz/reducerTestCases.ts

@@ -97,6 +97,47 @@ export const apiReducerCases = [
       matchedOptions: [],
     },
   },
+  {
+    initialState: {
+      ...apiInitialState,
+      quizRequestState: 'SUCCESS',
+      quizResults: {
+        ...results,
+        quiz_selected_options: [
+          {
+            attribute: null,
+            has_attribute: false,
+            id: 1,
+            is_matched: true,
+            value: 'VALUE',
+          },
+          {
+            attribute: null,
+            has_attribute: true,
+            id: 4,
+            is_matched: false,
+            value: 'VALUE',
+          },
+        ],
+      },
+      quizCurrentQuestion: undefined,
+      selectedOptionsWithAttributes: ['VALUE'],
+      matchedOptions: [],
+    },
+    action: {
+      type: QuizAPIActionTypes.JUMP_TO_QUESTION,
+      payload: {
+        questionId: 2,
+      },
+    },
+    expected: {
+      ...apiInitialState,
+      quizRequestState: 'SUCCESS',
+      quizResults: apiInitialState.quizResults,
+      selectedOptionsWithAttributes: apiInitialState.selectedOptionsWithAttributes,
+      matchedOptions: undefined,
+    },
+  },
   {
     initialState: apiInitialState,
     action: { type: 'unknown' },
@@ -330,6 +371,62 @@ export const localReducerCases = [
       },
     },
   },
+  {
+    initialState: {
+      ...localInitialState,
+      answerInputs: {
+        '1': {
+          type: QuestionTypes.SingleSelect,
+          value: [{ id: 1 }],
+        },
+        '2': {
+          type: QuestionTypes.OpenText,
+          value: 'true',
+        },
+        '3': {
+          type: QuestionTypes.SingleSelect,
+          value: [{ id: 1 }],
+        },
+      },
+      prevAnswerInputs: {
+        '1': {
+          type: QuestionTypes.SingleSelect,
+          value: [{ id: 1 }],
+        },
+        '2': {
+          type: QuestionTypes.OpenText,
+          value: 'true',
+        },
+        '3': {
+          type: QuestionTypes.SingleSelect,
+          value: [{ id: 1 }],
+        },
+      },
+      answers: [[1], ['true'], [1]],
+      isQuizCompleted: true,
+    },
+    action: {
+      type: QuestionTypes.JumpToQuestion,
+      payload: { questionId: 2 },
+    },
+    expected: {
+      ...localInitialState,
+      isQuizCompleted: false,
+      answers: [[1]],
+      answerInputs: {
+        '1': {
+          type: QuestionTypes.SingleSelect,
+          value: [{ id: 1 }],
+        },
+      },
+      prevAnswerInputs: {
+        '1': {
+          type: QuestionTypes.SingleSelect,
+          value: [{ id: 1 }],
+        },
+      },
+    },
+  },
   {
     initialState: {
       ...localInitialState,

spec/hooks/usePropsGetters/useJumpToQuestionButtonProps/useJumpToQuestionButtonProps.server.test.ts

@@ -0,0 +1,37 @@
+import { renderHookServerSide } from '../../../__tests__/utils.server';
+import useJumpToQuestionButtonProps from '../../../../src/hooks/usePropsGetters/useJumpToQuestionButtonProps';
+import { QuizAPIReducerState } from '../../../../src/components/CioQuiz/quizApiReducer';
+import { QuizLocalReducerState } from '../../../../src/components/CioQuiz/quizLocalReducer';
+
+describe('Testing Hook (server): useJumpToQuestionButtonProps', () => {
+  it('initializes without errors and returns a function that provides button props', () => {
+    const jumpToQuestionMock = jest.fn();
+    const quizApiStateMock = {
+      quizCurrentQuestion: {
+        next_question: { id: '2' },
+        isCoverQuestion: false,
+      },
+    } as unknown as QuizAPIReducerState;
+
+    const quizLocalStateMock = {
+      prevAnswerInputs: {
+        1: { type: 'open', value: '' },
+      },
+    } as unknown as QuizLocalReducerState;
+
+    const { result } = renderHookServerSide(
+      () => useJumpToQuestionButtonProps(jumpToQuestionMock, quizApiStateMock, quizLocalStateMock),
+      {
+        initialProps: {},
+      }
+    );
+
+    expect(typeof result).toBe('function');
+
+    const buttonProps = result();
+    expect(buttonProps).toHaveProperty('className');
+    expect(buttonProps).toHaveProperty('type');
+    expect(buttonProps).toHaveProperty('onClick');
+    expect(typeof buttonProps.onClick).toBe('function');
+  });
+});

spec/hooks/usePropsGetters/useJumpToQuestionButtonProps/useJumpToQuestionButtonProps.test.ts

@@ -0,0 +1,101 @@
+import { renderHook, act } from '@testing-library/react';
+import useJumpToQuestionButtonProps from '../../../../src/hooks/usePropsGetters/useJumpToQuestionButtonProps';
+import { QuizAPIReducerState } from '../../../../src/components/CioQuiz/quizApiReducer';
+import { QuizLocalReducerState } from '../../../../src/components/CioQuiz/quizLocalReducer';
+
+describe('Testing Hook (client): useJumpToQuestionButtonProps', () => {
+  const mockEvent = { preventDefault: jest.fn() } as unknown as React.MouseEvent<HTMLElement>;
+  const jumpToQuestionMock = jest.fn();
+
+  it('returns button props with disabled class if no answer is provided', () => {
+    const quizApiState = {
+      quizCurrentQuestion: {
+        next_question: { id: '2' },
+        isCoverQuestion: false,
+      },
+    } as unknown as QuizAPIReducerState;
+
+    const quizLocalStateMock = {
+      prevAnswerInputs: {
+        1: { type: 'open', value: '' },
+      },
+    } as unknown as QuizLocalReducerState;
+
+    const { result } = renderHook(() =>
+      useJumpToQuestionButtonProps(jumpToQuestionMock, quizApiState, quizLocalStateMock)
+    );
+
+    expect(result.current(2).className).toContain('disabled');
+  });
+
+  it('returns button props with disabled class if an invalid question ID is provided', () => {
+    const quizApiState = {
+      quizCurrentQuestion: {
+        next_question: { id: '2' },
+        isCoverQuestion: false,
+      },
+    } as unknown as QuizAPIReducerState;
+
+    const quizLocalStateMock = {
+      prevAnswerInputs: {
+        1: { type: 'open', value: '' },
+      },
+    } as unknown as QuizLocalReducerState;
+
+    const { result } = renderHook(() =>
+      useJumpToQuestionButtonProps(jumpToQuestionMock, quizApiState, quizLocalStateMock)
+    );
+
+    expect(result.current(-1).className).toContain('disabled');
+  });
+
+  it('returns button props without disabled class if an answer is provided', () => {
+    const quizApiState = {
+      quizCurrentQuestion: {
+        next_question: { id: '3' },
+        isCoverQuestion: false,
+      },
+    } as unknown as QuizAPIReducerState;
+
+    const quizLocalStateMock = {
+      prevAnswerInputs: {
+        1: { type: 'open', value: '' },
+        2: { type: 'open', value: '' },
+      },
+    } as unknown as QuizLocalReducerState;
+
+    const { result } = renderHook(() =>
+      useJumpToQuestionButtonProps(jumpToQuestionMock, quizApiState, quizLocalStateMock)
+    );
+
+    expect(result.current(1).className).not.toContain('disabled');
+  });
+
+  it('calls jumpToQuestion function when button is clicked', () => {
+    const quizApiState = {
+      quizCurrentQuestion: {
+        next_question: { id: '3' },
+        isCoverQuestion: false,
+      },
+    } as unknown as QuizAPIReducerState;
+
+    const quizLocalStateMock = {
+      prevAnswerInputs: {
+        1: { type: 'open', value: '' },
+        2: { type: 'open', value: '' },
+      },
+    } as unknown as QuizLocalReducerState;
+
+    const { result } = renderHook(() =>
+      useJumpToQuestionButtonProps(jumpToQuestionMock, quizApiState, quizLocalStateMock)
+    );
+
+    expect(typeof result.current(1).onClick).toBe('function');
+
+    act(() => {
+      result.current(1).onClick(mockEvent);
+    });
+
+    expect(jumpToQuestionMock).toHaveBeenCalled();
+  });
+});

spec/hooks/usePropsGetters/useSelectInputProps/useSelectInputProps.test.tsx

@@ -24,7 +24,9 @@ describe('Testing Hook (client): useSelectInputProps', () => {
   });
 
   const setupHook = (questionData) =>
-    renderHook(() => useSelectInputProps(quizAnswerChangedMock, nextQuestionMock, questionData));
+    renderHook(() =>
+      useSelectInputProps(quizAnswerChangedMock, nextQuestionMock, questionData, answerInputs)
+    );
 
   it('correctly toggles selected class on click', () => {
     const { result } = setupHook(currentQuestionData);
@@ -80,6 +82,25 @@ describe('Testing Hook (client): useSelectInputProps', () => {
     expect(nextQuestionMock).not.toHaveBeenCalled();
   });
 
+  it('does not advance when configured not to', () => {
+    currentQuestionData.type = 'single';
+    const { result } = renderHook(() =>
+      useSelectInputProps(
+        quizAnswerChangedMock,
+        nextQuestionMock,
+        currentQuestionData,
+        answerInputs,
+        false
+      )
+    );
+
+    act(() => {
+      result.current(currentQuestionData.options[0]).onClick(mockEvent);
+    });
+    expect(result.current(currentQuestionData.options[0]).className).toContain('selected');
+    expect(nextQuestionMock).not.toHaveBeenCalled();
+  });
+
   it('allows toggling options off in a multiple select question', () => {
     currentQuestionData.type = 'multiple';
     const { result } = setupHook(currentQuestionData);

spec/hooks/useQuizEvents/useJumpToQuestion/useJumpToQuestion.server.test.ts

@@ -0,0 +1,34 @@
+import { renderHookServerSide } from '../../../__tests__/utils.server';
+import useJumpToQuestion from '../../../../src/hooks/useQuizEvents/useJumpToQuestion';
+import { QuizAPIReducerState } from '../../../../src/components/CioQuiz/quizApiReducer';
+
+describe('Testing Hook (server): useJumpToQuestion', () => {
+  it('initializes without throwing errors', async () => {
+    const dispatchLocalStateMock = jest.fn();
+    const dispatchApiStateMock = jest.fn();
+    const quizApiStateMock: QuizAPIReducerState = {
+      quizCurrentQuestion: {
+        id: '1',
+        next_question: {
+          id: '2',
+          type: 'singleChoice',
+        },
+      },
+    } as unknown as QuizAPIReducerState;
+
+    const executeHook = () =>
+      renderHookServerSide(
+        () =>
+          useJumpToQuestion({
+            quizApiState: quizApiStateMock,
+            dispatchLocalState: dispatchLocalStateMock,
+            dispatchApiState: dispatchApiStateMock,
+          }),
+        {
+          initialProps: {},
+        }
+      );
+
+    expect(executeHook).not.toThrow();
+  });
+});

spec/hooks/useQuizEvents/useJumpToQuestion/useJumpToQuestion.test.ts

@@ -0,0 +1,64 @@
+import { renderHook, act } from '@testing-library/react';
+
+import useJumpToQuestion from '../../../../src/hooks/useQuizEvents/useJumpToQuestion';
+import { QuizAPIReducerState } from '../../../../src/components/CioQuiz/quizApiReducer';
+import { QuestionTypes, QuizAPIActionTypes } from '../../../../src/components/CioQuiz/actions';
+
+describe('Testing Hook (client): useJumpToQuestion', () => {
+  const dispatchLocalStateMock = jest.fn();
+  const dispatchApiStateMock = jest.fn();
+  const quizApiStateMock = {
+    quizCurrentQuestion: {
+      id: 2,
+      next_question: {
+        id: 3,
+        type: 'singleChoice',
+      },
+    },
+  } as unknown as QuizAPIReducerState;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('does not call dispatchLocalState and dispatchApiState', () => {
+    const { result } = renderHook(() =>
+      useJumpToQuestion({
+        quizApiState: quizApiStateMock,
+        dispatchLocalState: dispatchLocalStateMock,
+        dispatchApiState: dispatchApiStateMock,
+      })
+    );
+
+    act(() => {
+      result.current(2);
+    });
+
+    expect(dispatchLocalStateMock).not.toHaveBeenCalled();
+    expect(dispatchApiStateMock).not.toHaveBeenCalled();
+  });
+
+  it('calls dispatchLocalState and dispatchApiState correctly', () => {
+    const { result } = renderHook(() =>
+      useJumpToQuestion({
+        quizApiState: quizApiStateMock,
+        dispatchLocalState: dispatchLocalStateMock,
+        dispatchApiState: dispatchApiStateMock,
+      })
+    );
+
+    act(() => {
+      result.current(1);
+    });
+
+    expect(dispatchLocalStateMock).toHaveBeenCalledWith({
+      type: QuestionTypes.JumpToQuestion,
+      payload: { questionId: 1 },
+    });
+
+    expect(dispatchApiStateMock).toHaveBeenCalledWith({
+      type: QuizAPIActionTypes.JUMP_TO_QUESTION,
+      payload: { questionId: 1 },
+    });
+  });
+});