[CI-4062] Make callbacks prop required (#217)

* make callbacks required

* fix tests

* Use ts-expect-error declaration

Co-authored-by: Enes Kutay SEZEN <[email protected]>

* ts-expect-error declaration

---------

Co-authored-by: Enes Kutay SEZEN <[email protected]>

Author: stanlp1

cspell.json

@@ -18,6 +18,7 @@
     "Favorited",
     "favorited",
     "Skippable",
-    "cnstrc"
+    "cnstrc",
+    "nocheck"
   ]
 }

spec/hooks/useConsoleErrors/useConsoleErrors.test.tsx

@@ -21,7 +21,8 @@ describe('Testing Hook (client): useConsoleErrors', () => {
   });
 
   it('logs error if onAddToCartClick is missing', () => {
-    const quizOptions = { quizId: QUIZ_ID };
+    const quizOptions = { quizId: QUIZ_ID, callbacks: {} };
+    // @ts-expect-error Testing the error itself
     renderHook(() => useConsoleErrors(quizOptions));
 
     expect(console.error).toHaveBeenCalledWith(

spec/hooks/useQuizState/useQuizApiState/useQuizApiState.server.test.tsx

@@ -21,6 +21,7 @@ describe('useQuizApiState - Server', () => {
     const quizOptions = {
       quizId: QUIZ_ID,
       quizVersionId: QUIZ_VERSION_ID,
+      callbacks: { onAddToCartClick: () => {}},
       resultsPageOptions: {},
     };
     const quizLocalState = {

spec/hooks/useQuizState/useQuizApiState/useQuizApiState.test.tsx

@@ -18,6 +18,13 @@ jest.mock('../../../../src/services', () => ({
 }));
 
 describe('Testing Hook (client): useQuizApiState', () => {
+  const quizOptions = {
+    quizId: QUIZ_ID,
+    quizVersionId: QUIZ_VERSION_ID,
+    callbacks: { onAddToCartClick: () => {} },
+    resultsPageOptions: {},
+  };
+
   (getQuizResults as jest.Mock).mockResolvedValue({
     quiz_selected_options: [
       { has_attribute: true, value: 'option1' },
@@ -26,7 +33,6 @@ describe('Testing Hook (client): useQuizApiState', () => {
   });
 
   it('executes quiz flow correctly', async () => {
-    const quizOptions = { quizId: QUIZ_ID, quizVersionId: QUIZ_VERSION_ID, resultsPageOptions: {} };
     const quizLocalState = {
       answers: [],
       answerInputs: {},
@@ -67,7 +73,6 @@ describe('Testing Hook (client): useQuizApiState', () => {
   });
 
   it('sets loading state correctly around async operations', async () => {
-    const quizOptions = { quizId: QUIZ_ID, quizVersionId: QUIZ_VERSION_ID, resultsPageOptions: {} };
     const quizLocalState = {
       answers: [],
       answerInputs: {},
@@ -93,7 +98,6 @@ describe('Testing Hook (client): useQuizApiState', () => {
   });
 
   it('dispatches quiz results upon completion', async () => {
-    const quizOptions = { quizId: QUIZ_ID, quizVersionId: QUIZ_VERSION_ID, resultsPageOptions: {} };
     const quizLocalState = {
       answers: [['1']],
       isQuizCompleted: true,

src/stories/Quiz/Component/Props.mdx

@@ -5,6 +5,6 @@ import * as ComponentStories from './ComponentStories.stories';
 <Meta of={ComponentStories} />
 
 ## Quiz Component Props
-<p>The props below are available to customize the quiz component. The `quizId` and `apiKey` or `cioJsClient` are required props.</p>
+<p>The props below are available to customize the quiz component. The `quizId` and `apiKey` or `cioJsClient` and `callbacks.onAddToCartClick` are required props.</p>
 
-<ArgTypes of={e2eInteractionTest} />
+<ArgTypes of={e2eInteractionTest} />

src/stories/Quiz/Hooks/Docs/Props.mdx

@@ -5,6 +5,6 @@ import * as HooksStories from '../HooksStories.stories';
 <Meta of={HooksStories}  />
 
 ## useCioQuiz Props
-<p>The props below are available to customize the quiz component. The `quizId` and `apiKey` or `cioJsClient` are required props.</p>
+<p>The props below are available to customize the quiz component. The `quizId` and `apiKey` or `cioJsClient` and `callbacks.onAddToCartClick` are required props.</p>
 
 <ArgTypes of={e2eInteractionTest} />

src/stories/Quiz/argTypes.ts

@@ -55,7 +55,7 @@ export const argTypes = {
     },
   },
   'callbacks.onAddToCartClick': {
-    description: 'Callback function to be called when the add to cart button is clicked',
+    description: 'Callback function to be called when the add to cart button is clicked. Required',
     control: false,
     table: {
       subcategory: 'callbacks',

src/types.ts

@@ -115,7 +115,7 @@ export interface IQuizProps {
   sessionStateOptions?: SessionStateOptions;
   primaryColor?: string;
   enableHydration?: boolean;
-  callbacks?: Callbacks;
+  callbacks: Callbacks;
   questionsPageOptions?: QuestionsPageOptions;
 }