From 153b99d0548080bba62676204e77b890088f1693 Mon Sep 17 00:00:00 2001
From: Alifia Rahmah <alifiarahmah03@gmail.com>
Date: Fri, 28 Apr 2023 18:37:25 +0700
Subject: [PATCH] fix: fix cypress error for build

---
 cypress/support/component.ts                  |  2 +-
 cypress/utils/router.tsx                      |  2 +-
 src/components/admin/row-action.cy.tsx        |  5 ++-
 src/components/course/row_action.cy.tsx       |  4 +-
 src/components/course_banner.cy.tsx           |  5 ++-
 src/components/course_card.cy.tsx             |  5 ++-
 src/components/course_card_skeleton.cy.tsx    |  5 ++-
 src/components/home_sidebar.cy.tsx            |  5 ++-
 src/components/layout.cy.tsx                  |  4 +-
 .../management/course/add-course-modal.cy.tsx |  5 ++-
 .../course/delete-course-modal.cy.tsx         |  5 ++-
 .../course/edit-course-modal.cy.tsx           |  5 ++-
 .../course/quiz/problem-item.cy.tsx           | 38 ++++++++++++++++---
 src/components/modal.cy.tsx                   |  9 +++--
 src/components/navbar.cy.tsx                  |  4 +-
 src/components/not_found.cy.tsx               |  5 ++-
 src/components/right-sidebar.cy.tsx           |  4 +-
 src/components/select_search.cy.tsx           |  5 ++-
 .../material/[material_id]/file.tsx           | 12 +++---
 .../course/[course_id]/quiz/index.tsx         | 23 +++++------
 src/pages/quiz/[id]/pembahasan.tsx            |  6 +--
 src/pages/quiz/[id]/result.tsx                | 15 ++++----
 22 files changed, 108 insertions(+), 65 deletions(-)

diff --git a/cypress/support/component.ts b/cypress/support/component.ts
index 395d407..aaa9bdd 100644
--- a/cypress/support/component.ts
+++ b/cypress/support/component.ts
@@ -36,4 +36,4 @@ declare global {
 Cypress.Commands.add('mount', mount);
 
 // Example use:
-// cy.mount(<MyComponent />)
+// mount(<MyComponent />)
diff --git a/cypress/utils/router.tsx b/cypress/utils/router.tsx
index a8a3ff0..c419fa8 100644
--- a/cypress/utils/router.tsx
+++ b/cypress/utils/router.tsx
@@ -37,7 +37,7 @@ const MockRouter = ({ children, ...props }: MockRouterProps) => {
   const router = createRouter(props);
 
   return (
-    <RouterContext.Provider value={router}>{children}</RouterContext.Provider>
+    <RouterContext.Provider value={router as NextRouter}>{children}</RouterContext.Provider>
   );
 };
 
diff --git a/src/components/admin/row-action.cy.tsx b/src/components/admin/row-action.cy.tsx
index 47847ff..3eb57c3 100644
--- a/src/components/admin/row-action.cy.tsx
+++ b/src/components/admin/row-action.cy.tsx
@@ -1,9 +1,10 @@
-import React from 'react';
 import RowAction from './row-action';
 
+import { mount } from 'cypress/react18';
+
 describe('<RowAction />', () => {
   it('renders', () => {
     // see: https://on.cypress.io/mounting-react
-    cy.mount(<RowAction onOpenEdit={() => {}} onOpenDelete={() => {}} />);
+    mount(<RowAction onOpenEdit={() => {}} onOpenDelete={() => {}} />);
   });
 });
diff --git a/src/components/course/row_action.cy.tsx b/src/components/course/row_action.cy.tsx
index c1998c0..c9163b5 100644
--- a/src/components/course/row_action.cy.tsx
+++ b/src/components/course/row_action.cy.tsx
@@ -1,8 +1,10 @@
 import RowAction from './row_action';
 
+import { mount } from 'cypress/react18';
+
 describe('<RowAction />', () => {
   it('renders', () => {
     // see: https://on.cypress.io/mounting-react
-    cy.mount(<RowAction onOpenEdit={() => {}} onOpenDelete={() => {}} />);
+    mount(<RowAction />);
   });
 });
diff --git a/src/components/course_banner.cy.tsx b/src/components/course_banner.cy.tsx
index 9a280d8..39f6ed4 100644
--- a/src/components/course_banner.cy.tsx
+++ b/src/components/course_banner.cy.tsx
@@ -1,9 +1,10 @@
-import React from 'react';
 import CourseBanner from './course_banner';
 
+import { mount } from 'cypress/react18';
+
 describe('<CourseBanner />', () => {
   it('renders', () => {
     // see: https://on.cypress.io/mounting-react
-    cy.mount(<CourseBanner course_code={''} course_name={''} lecturer={''} />);
+    mount(<CourseBanner course_code={''} course_name={''} lecturer={''} />);
   });
 });
diff --git a/src/components/course_card.cy.tsx b/src/components/course_card.cy.tsx
index ef0b103..e0b3158 100644
--- a/src/components/course_card.cy.tsx
+++ b/src/components/course_card.cy.tsx
@@ -1,10 +1,11 @@
-import React from 'react';
 import CourseCard from './course_card';
 
+import { mount } from 'cypress/react18';
+
 describe('<CourseCard />', () => {
   it('renders', () => {
     // see: https://on.cypress.io/mounting-react
-    cy.mount(
+    mount(
       <CourseCard
         courseCode={''}
         major={''}
diff --git a/src/components/course_card_skeleton.cy.tsx b/src/components/course_card_skeleton.cy.tsx
index 94f907a..e085475 100644
--- a/src/components/course_card_skeleton.cy.tsx
+++ b/src/components/course_card_skeleton.cy.tsx
@@ -1,9 +1,10 @@
-import React from 'react';
 import CourseCardSkeleton from './course_card_skeleton';
 
+import { mount } from 'cypress/react18';
+
 describe('<CourseCardSkeleton />', () => {
   it('renders', () => {
     // see: https://on.cypress.io/mounting-react
-    cy.mount(<CourseCardSkeleton />);
+    mount(<CourseCardSkeleton />);
   });
 });
diff --git a/src/components/home_sidebar.cy.tsx b/src/components/home_sidebar.cy.tsx
index e6581cf..cafdb2f 100644
--- a/src/components/home_sidebar.cy.tsx
+++ b/src/components/home_sidebar.cy.tsx
@@ -1,9 +1,10 @@
-import React from 'react';
 import HomeSidebar from './home_sidebar';
 
+import { mount } from 'cypress/react18';
+
 describe('<HomeSidebar />', () => {
   it('renders', () => {
     // see: https://on.cypress.io/mounting-react
-    cy.mount(<HomeSidebar />);
+    mount(<HomeSidebar />);
   });
 });
diff --git a/src/components/layout.cy.tsx b/src/components/layout.cy.tsx
index 56da5da..6eab1dc 100644
--- a/src/components/layout.cy.tsx
+++ b/src/components/layout.cy.tsx
@@ -1,11 +1,13 @@
 import MockRouter from '../../cypress/utils/router';
 import Layout from './layout';
 
+import { mount } from 'cypress/react18';
+
 describe('<Layout />', () => {
   it('renders', () => {
     // see: https://on.cypress.io/mounting-react
     // mount next router
-    cy.mount(
+    mount(
       <MockRouter>
         <Layout>
           <p>test</p>
diff --git a/src/components/management/course/add-course-modal.cy.tsx b/src/components/management/course/add-course-modal.cy.tsx
index 5a0a113..dacdd4f 100644
--- a/src/components/management/course/add-course-modal.cy.tsx
+++ b/src/components/management/course/add-course-modal.cy.tsx
@@ -1,10 +1,11 @@
-import React from 'react';
 import AddCourseModal from './add-course-modal';
 
+import { mount } from 'cypress/react18';
+
 describe('<AddCourseModal />', () => {
   it('renders', () => {
     // see: https://on.cypress.io/mounting-react
-    cy.mount(
+    mount(
       <AddCourseModal
         isOpen={false}
         onClose={function (): void {
diff --git a/src/components/management/course/delete-course-modal.cy.tsx b/src/components/management/course/delete-course-modal.cy.tsx
index d10ae1e..57d63f1 100644
--- a/src/components/management/course/delete-course-modal.cy.tsx
+++ b/src/components/management/course/delete-course-modal.cy.tsx
@@ -1,10 +1,11 @@
-import React from 'react';
 import DeleteCourseModal from './delete-course-modal';
 
+import { mount } from 'cypress/react18';
+
 describe('<DeleteCourseModal />', () => {
   it('renders', () => {
     // see: https://on.cypress.io/mounting-react
-    cy.mount(
+    mount(
       <DeleteCourseModal
         isOpen={false}
         onClose={function (): void {
diff --git a/src/components/management/course/edit-course-modal.cy.tsx b/src/components/management/course/edit-course-modal.cy.tsx
index 3a46d3c..ecb52e6 100644
--- a/src/components/management/course/edit-course-modal.cy.tsx
+++ b/src/components/management/course/edit-course-modal.cy.tsx
@@ -1,10 +1,11 @@
-import React from 'react';
 import AddCourseModal from './edit-course-modal';
 
+import { mount } from 'cypress/react18';
+
 describe('<AddCourseModal />', () => {
   it('renders', () => {
     // see: https://on.cypress.io/mounting-react
-    cy.mount(
+    mount(
       <AddCourseModal
         isOpen={false}
         onClose={function (): void {
diff --git a/src/components/management/course/quiz/problem-item.cy.tsx b/src/components/management/course/quiz/problem-item.cy.tsx
index dc89b3b..952ee5b 100644
--- a/src/components/management/course/quiz/problem-item.cy.tsx
+++ b/src/components/management/course/quiz/problem-item.cy.tsx
@@ -1,16 +1,42 @@
 import { Problem } from '@/types/problem';
 import ProblemItem from './problem-item';
 
+import { mount } from 'cypress/react18';
+
 describe('<ProblemItem />', () => {
   it('renders', () => {
     // see: https://on.cypress.io/mounting-react
     const question: Problem = {
-      number: '0',
-      statement: 'Pertanyaan?',
-      options: ['Jawaban A', 'Jawaban B', 'Jawaban C'],
-      answer: 'Jawaban A',
-      explanation: 'Karena jawaban A benar',
+      id: 'fe7d63c9-8cf1-4f1f-a351-ce6e611f06b4',
+      media_id: [],
+      question: 'Berapa 1 + 1 ?',
+      answers: [
+        {
+          id: '23fe6f84-cb98-4782-9cf6-3d7e99ad2246',
+          media_id: [],
+          answer: '',
+          is_solution: null,
+        },
+        {
+          id: '04ecce22-175a-4c6b-9f2e-057e68f3a30a',
+          media_id: [],
+          answer: '',
+          is_solution: null,
+        },
+        {
+          id: 'e505a84a-56d8-4544-a719-52fbeb8a860c',
+          media_id: [],
+          answer: '',
+          is_solution: null,
+        },
+        {
+          id: '1f29a78e-65e0-4b45-b884-663eed2ef644',
+          media_id: [],
+          answer: '',
+          is_solution: null,
+        },
+      ],
     };
-    cy.mount(<ProblemItem id={0} question={question} />);
+    mount(<ProblemItem id={0} question={question} />);
   });
 });
diff --git a/src/components/modal.cy.tsx b/src/components/modal.cy.tsx
index 0b27ce2..126a333 100644
--- a/src/components/modal.cy.tsx
+++ b/src/components/modal.cy.tsx
@@ -1,16 +1,19 @@
 import Modal from './modal';
 
+import { mount } from 'cypress/react18';
+
 describe('<Modal />', () => {
   it('renders', () => {
     // see: https://on.cypress.io/mounting-react
-    cy.mount(
+    mount(
       <Modal
         isOpen={false}
         onClose={function (): void {
           throw new Error('Function not implemented.');
         }}
-        children={undefined}
-      />
+      >
+        <div>Modal</div>
+      </Modal>
     );
   });
 });
diff --git a/src/components/navbar.cy.tsx b/src/components/navbar.cy.tsx
index 0f738f9..753b7a5 100644
--- a/src/components/navbar.cy.tsx
+++ b/src/components/navbar.cy.tsx
@@ -1,10 +1,12 @@
 import MockRouter from '../../cypress/utils/router';
 import Navbar from './navbar';
 
+import { mount } from 'cypress/react18';
+
 describe('<Navbar />', () => {
   it('renders', () => {
     // see: https://on.cypress.io/mounting-react
-    cy.mount(
+    mount(
       <MockRouter>
         <Navbar />
       </MockRouter>
diff --git a/src/components/not_found.cy.tsx b/src/components/not_found.cy.tsx
index 5f91e2f..a1482cd 100644
--- a/src/components/not_found.cy.tsx
+++ b/src/components/not_found.cy.tsx
@@ -1,9 +1,10 @@
-import React from 'react';
 import NotFound from './not_found';
 
+import { mount } from 'cypress/react18';
+
 describe('<NotFound />', () => {
   it('renders', () => {
     // see: https://on.cypress.io/mounting-react
-    cy.mount(<NotFound />);
+    mount(<NotFound />);
   });
 });
diff --git a/src/components/right-sidebar.cy.tsx b/src/components/right-sidebar.cy.tsx
index 0d97194..e440717 100644
--- a/src/components/right-sidebar.cy.tsx
+++ b/src/components/right-sidebar.cy.tsx
@@ -1,9 +1,11 @@
 import RightSidebar from './right-sidebar';
 
+import { mount } from 'cypress/react18';
+
 describe('<RightSidebar />', () => {
   it('renders', () => {
     // see: https://on.cypress.io/mounting-react
-    cy.mount(
+    mount(
       <RightSidebar kodeMataKuliah={''} mataKuliah={''} dosenPengajar={''} />
     );
   });
diff --git a/src/components/select_search.cy.tsx b/src/components/select_search.cy.tsx
index 9dbfb31..318695d 100644
--- a/src/components/select_search.cy.tsx
+++ b/src/components/select_search.cy.tsx
@@ -1,6 +1,7 @@
-import React from 'react';
 import { SelectSearch } from './select_search';
 
+import { mount } from 'cypress/react18';
+
 describe('<SelectSearch />', () => {
   it('renders', () => {
     // see: https://on.cypress.io/mounting-react
@@ -10,6 +11,6 @@ describe('<SelectSearch />', () => {
     cy.intercept('GET', '/course/faculty', {
       fixture: 'faculty.json',
     });
-    cy.mount(<SelectSearch />);
+    mount(<SelectSearch />);
   });
 });
diff --git a/src/pages/management/course/[course_id]/material/[material_id]/file.tsx b/src/pages/management/course/[course_id]/material/[material_id]/file.tsx
index bf9f497..a9fb73d 100644
--- a/src/pages/management/course/[course_id]/material/[material_id]/file.tsx
+++ b/src/pages/management/course/[course_id]/material/[material_id]/file.tsx
@@ -93,7 +93,7 @@ const EditContentPage = ({
                 console.log(res);
                 toast({
                   title: 'Adding material success!',
-                  description: res.message,
+                  description: res.data.message,
                   status: 'success',
                   duration: 9000,
                   isClosable: true
@@ -204,31 +204,31 @@ const EditContent = () => {
           material_code : null
         };
         const course = await http.get(`${process.env.NEXT_PUBLIC_API_URL}/course/${course_id}`);
-      
+
         if(course.status != 200){
           res.status = 404;
           setData(res);
           return;
         }
-      
+
         res.course_code = course.data.data.id;
         res.course_name = course.data.data.name;
         res.lecturer = course.data.data.lecturer;
-      
+
         let user : UserClaim | null = getAvailableUserData();
         if(!user || (user.role != "admin" && user.email != course.data.data.email)){
           res.status = 403;
           setData(res);
           return;
         }
-      
+
         /*
         const material = await http.get(`${process.env.NEXT_PUBLIC_API_URL}/material/${material_id}`);
         if(material.status != 200 || material.data.data.course_code != course_id){
           res.status = 404;
           return res;
         }*/
-      
+
         res.material_code = material_id;
         setData(res);
       }
diff --git a/src/pages/management/course/[course_id]/quiz/index.tsx b/src/pages/management/course/[course_id]/quiz/index.tsx
index 8233967..3ec1c89 100644
--- a/src/pages/management/course/[course_id]/quiz/index.tsx
+++ b/src/pages/management/course/[course_id]/quiz/index.tsx
@@ -26,19 +26,16 @@ import Modal from '@/components/modal';
 
 const quizzes = [
   {
-    id: 1,
-    title: 'Latihan Soal Clustering 1',
-    week: 1,
+    id: '440e9a7b-5fe5-481c-a98d-a1736e91f42b',
+    nama: 'Latihan Sample',
+    course_id: 'IF3270',
+    creator_email: 'contributor@example.com',
   },
   {
-    id: 2,
-    title: 'Latihan Soal Clustering 2',
-    week: 2,
-  },
-  {
-    id: 3,
-    title: 'Latihan Soal Clustering 3',
-    week: 3,
+    id: 'ca45c775-bb74-422e-943c-08e9601d6d41',
+    nama: 'Latihan Beneran',
+    course_id: 'IF3270',
+    creator_email: 'contributor@example.com',
   },
 ];
 
@@ -79,15 +76,13 @@ export default function QuizManagement() {
             <Thead textTransform="capitalize">
               <Tr>
                 <Th>Judul Latihan Soal</Th>
-                <Th>Week</Th>
                 <Th>Action</Th>
               </Tr>
             </Thead>
             <Tbody>
               {quizzes.map((q: Quiz) => (
                 <Tr key={q.id}>
-                  <Td>{q.title}</Td>
-                  <Td>{q.week}</Td>
+                  <Td>{q.nama}</Td>
                   <Td>
                     <RowAction
                       onOpenEdit={() => {
diff --git a/src/pages/quiz/[id]/pembahasan.tsx b/src/pages/quiz/[id]/pembahasan.tsx
index 4c0f604..9fe816e 100644
--- a/src/pages/quiz/[id]/pembahasan.tsx
+++ b/src/pages/quiz/[id]/pembahasan.tsx
@@ -15,9 +15,9 @@ import { useRouter } from 'next/router';
 
 function Pembahasan() {
   const router = useRouter();
-  const userAnswers = JSON.parse(
-    router.query.userAnswers as string
-  ) as UserAnswer[];
+  // const userAnswers: UserAnswer[] = JSON.parse(
+  //   router.query.userAnswers as string
+  // );
 
   return (
     <Layout>
diff --git a/src/pages/quiz/[id]/result.tsx b/src/pages/quiz/[id]/result.tsx
index 1aa2d19..44c6e63 100644
--- a/src/pages/quiz/[id]/result.tsx
+++ b/src/pages/quiz/[id]/result.tsx
@@ -10,12 +10,11 @@ import { useEffect, useState } from 'react';
 function Result() {
   const router = useRouter();
   const [score, setScore] = useState(0);
-  const userAnswers = JSON.parse(
-    router.query.userAnswers as string
-  ) as UserAnswer[];
+  const [userAnswers, setUserAnswers] = useState<UserAnswer[]>([]);
 
   useEffect(() => {
     // parse user answer as UserAnswer[] from router.query.userAnswers
+    setUserAnswers(JSON.parse(router.query.userAnswers as string));
     // POST
     http
       .post(`/quiz/${router.query.id}/finish`, {
@@ -50,10 +49,12 @@ function Result() {
             justifyContent="space-between"
             direction={{ base: 'column', lg: 'row' }}
           >
-            <Link href={{
-              pathname: router.asPath + '/../pembahasan',
-              query: { userAnswers: JSON.stringify(userAnswers) },
-              }}>
+            <Link
+              href={{
+                pathname: router.asPath + '/../pembahasan',
+                query: { userAnswers: JSON.stringify(userAnswers) },
+              }}
+            >
               <Button bg="#4F4F4F" color="white">
                 Cek Pembahasan
               </Button>
-- 
GitLab