Merge pull request #67 from RevelioStartup/feat/membuat-timeline

PBI Membuat Timeline
RevelioStartup · May 4, 2024 · 73f2f6c · 73f2f6c
2 parents 18a268e + f6ec53b
commit 73f2f6c
Show file tree

Hide file tree

Showing 17 changed files with 399 additions and 103 deletions.
diff --git a/__tests__/rundown/rundown-table-filled.test.tsx b/__tests__/rundown/rundown-table-filled.test.tsx
@@ -7,7 +7,6 @@ import { useUpdateRundownMutation } from '@/redux/api/rundownApi'
 import { RundownsDetail } from '@/types/rundown'
 import { toast } from 'react-hot-toast'
 
-
 jest.mock('@/redux/api/rundownApi', () => ({
   useGetEventRundownQuery: jest.fn().mockReturnValue({
     data: [
@@ -40,7 +39,7 @@ jest.mock('@/redux/api/rundownApi', () => ({
   useUpdateRundownMutation: jest.fn(),
 }))
 
-const mockUpdateRundownData:RundownsDetail = {
+const mockUpdateRundownData: RundownsDetail = {
   id: '89f5ded5-3267-4c34-ac6b-a5f345621682',
   start_time: '14:05:00',
   end_time: '15:50:00',
@@ -130,9 +129,9 @@ describe('Rundown Edit', () => {
   test('display update rundown error correctly', async () => {
     jest.spyOn(toast, 'error').mockImplementation(jest.fn())
 
-    const mockUseUpdateRundownMutation = jest
-      .fn()
-      .mockResolvedValue({ error: {data: {"message":"Invalid rundown data"}} })
+    const mockUseUpdateRundownMutation = jest.fn().mockResolvedValue({
+      error: { data: { message: 'Invalid rundown data' } },
+    })
     ;(useUpdateRundownMutation as jest.Mock).mockReturnValue([
       mockUseUpdateRundownMutation,
     ])

diff --git a/__tests__/task-detail/task-detail-with-step.test.tsx b/__tests__/task-detail/task-detail-with-step.test.tsx
@@ -11,6 +11,10 @@ import {
   useUpdateTaskStepMutation,
 } from '@/redux/api/taskStepApi'
 import '@testing-library/jest-dom'
+import dayjs from '@/configs/dayjs.config'
+import { Step } from '@/types/taskDetails'
+import { store } from '@/redux/store'
+import { Provider } from 'react-redux'
 
 jest.mock('@/redux/api/eventApi', () => ({
   useGetEventQuery: jest.fn(),
@@ -25,18 +29,10 @@ jest.mock('@/redux/api/taskStepApi', () => ({
   useUpdateTaskStepMutation: jest.fn(),
   useDeleteTaskStepMutation: jest.fn(),
   useDeleteAllTaskStepsMutation: jest.fn(),
+  useCreateTimelineMutation: jest.fn(),
 }))
 
 describe('TaskDetailPage with step', () => {
-  interface Step {
-    id: string
-    name: string
-    description: string
-    status: string
-    step_order: number
-    task: string
-  }
-
   const mockEventData = {
     id: '1',
     name: 'event name',
@@ -55,6 +51,8 @@ describe('TaskDetailPage with step', () => {
     status: 'NOT_STARTED',
     step_order: 1,
     task: '1',
+    start_datetime: '2024-04-19T12:40:19.827000Z',
+    end_datetime: '2024-04-19T12:40:19.827000Z',
   }
 
   const mockStepData2: Step = {
@@ -64,6 +62,8 @@ describe('TaskDetailPage with step', () => {
     status: 'NOT_STARTED',
     step_order: 2,
     task: '1',
+    start_datetime: null,
+    end_datetime: null,
   }
 
   const mockUpdatedStepData1: Step = {
@@ -73,6 +73,8 @@ describe('TaskDetailPage with step', () => {
     status: 'DONE',
     step_order: 1,
     task: '1',
+    start_datetime: null,
+    end_datetime: null,
   }
 
   const mockUpdatedStepData12: Step = {
@@ -82,6 +84,8 @@ describe('TaskDetailPage with step', () => {
     status: 'NOT_STARTED',
     step_order: 1,
     task: '1',
+    start_datetime: null,
+    end_datetime: null,
   }
 
   const mockTaskData = {
@@ -171,7 +175,11 @@ describe('TaskDetailPage with step', () => {
       mockUseUpdateTaskStepMutation,
     ])
 
-    render(<TaskDetailPage params={{ eventId: '1', taskId: '1' }} />)
+    render(
+      <Provider store={store}>
+        <TaskDetailPage params={{ eventId: '1', taskId: '1' }} />
+      </Provider>
+    )
 
     expect(screen.getByText('event name')).toBeInTheDocument()
     expect(screen.getByText('task status')).toBeInTheDocument()
@@ -199,7 +207,11 @@ describe('TaskDetailPage with step', () => {
       mockUseUpdateTaskStepMutation,
     ])
 
-    render(<TaskDetailPage params={{ eventId: '1', taskId: '1' }} />)
+    render(
+      <Provider store={store}>
+        <TaskDetailPage params={{ eventId: '1', taskId: '1' }} />
+      </Provider>
+    )
 
     act(() => {
       const buttonEdit = screen.getByTestId('button-edit-form')
@@ -232,7 +244,11 @@ describe('TaskDetailPage with step', () => {
       mockUseUpdateTaskStepMutation,
     ])
 
-    render(<TaskDetailPage params={{ eventId: '1', taskId: '1' }} />)
+    render(
+      <Provider store={store}>
+        <TaskDetailPage params={{ eventId: '1', taskId: '1' }} />
+      </Provider>
+    )
 
     expect(screen.getByText('step name')).toBeInTheDocument()
     expect(screen.getByText('step name 2')).toBeInTheDocument()
@@ -247,7 +263,11 @@ describe('TaskDetailPage with step', () => {
   })
 
   test('delete task correctly', async () => {
-    render(<TaskDetailPage params={{ eventId: '1', taskId: '1' }} />)
+    render(
+      <Provider store={store}>
+        <TaskDetailPage params={{ eventId: '1', taskId: '1' }} />
+      </Provider>
+    )
 
     const buttonDelete = screen.getByTestId('delete-task')
     fireEvent.click(buttonDelete)
@@ -261,10 +281,43 @@ describe('TaskDetailPage with step', () => {
       { isLoading: false },
     ])
 
-    render(<TaskDetailPage params={{ eventId: '1', taskId: '1' }} />)
+    render(
+      <Provider store={store}>
+        <TaskDetailPage params={{ eventId: '1', taskId: '1' }} />
+      </Provider>
+    )
 
     const buttonDelete = screen.getByTestId('delete-task')
     fireEvent.click(buttonDelete)
     await waitFor(() => expect(mockDeleteTaskMutation).toHaveBeenCalledTimes(1))
   })
+
+  test('renders task details with correct date format', () => {
+    const mockGetEventQuery = useGetEventQuery as jest.Mock
+    mockGetEventQuery.mockReturnValue({
+      data: mockEventData,
+      isLoading: false,
+    })
+
+    const mockGetTaskDetailQuery = useGetTaskDetailQuery as jest.Mock
+    mockGetTaskDetailQuery.mockReturnValue({
+      data: mockTaskData,
+      isLoading: false,
+    })
+
+    render(
+      <Provider store={store}>
+        <TaskDetailPage params={{ eventId: '1', taskId: '1' }} />
+      </Provider>
+    )
+
+    expect(
+      screen.getByText(
+        dayjs(mockStepData.start_datetime).format('ddd, D MMM YY HH:mm')
+      )
+    ).toBeInTheDocument()
+    expect(
+      screen.getByText(dayjs(mockStepData.end_datetime).format('HH:mm'))
+    ).toBeInTheDocument()
+  })
 })
diff --git a/__tests__/task-steps/delete-steps.test.tsx b/__tests__/task-steps/delete-steps.test.tsx
@@ -7,6 +7,8 @@ import {
   useUpdateTaskStepMutation,
 } from '@/redux/api/taskStepApi'
 import StepStepper from '@/app/event/[eventId]/(eventId)/task/[taskId]/StepStepper'
+import { Provider } from 'react-redux'
+import { store } from '@/redux/store'
 
 jest.mock('@/redux/api/taskStepApi', () => ({
   useDeleteTaskStepMutation: jest.fn(),
@@ -24,6 +26,8 @@ const mockTask = {
       status: 'NOT_STARTED',
       step_order: 1,
       task: '1',
+      start_datetime: '2024-04-19T12:40:19.827000Z',
+      end_datetime: '2024-04-19T12:40:19.827000Z',
     },
     {
       id: 'step2',
@@ -32,6 +36,8 @@ const mockTask = {
       status: 'NOT_STARTED',
       step_order: 2,
       task: '1',
+      start_datetime: null,
+      end_datetime: null,
     },
   ],
   title: 'Task Title',
@@ -77,13 +83,21 @@ describe('StepStepper', () => {
   })
 
   test('deletes a single task step correctly', async () => {
-    render(<StepStepper taskId={mockTask.id} task={mockTask} />)
+    render(
+      <Provider store={store}>
+        <StepStepper taskId={mockTask.id} task={mockTask} />
+      </Provider>
+    )
 
     fireEvent.click(screen.getAllByText('Delete')[0])
   })
 
   test('deletes all task steps correctly', async () => {
-    render(<StepStepper taskId={mockTask.id} task={mockTask} />)
+    render(
+      <Provider store={store}>
+        <StepStepper taskId={mockTask.id} task={mockTask} />
+      </Provider>
+    )
 
     fireEvent.click(screen.getByText('Delete All'))
   })

diff --git a/src/app/event/[eventId]/(eventId)/rundown/CreateRundownButton.tsx b/src/app/event/[eventId]/(eventId)/rundown/CreateRundownButton.tsx
@@ -10,11 +10,11 @@ export const CreateRundownButton = () => {
   return (
     <div className="flex flex-col gap-8 px-5 py-3 lg:px-10 lg:py-6">
       <p
-          data-testid="no-rundown-text"
-          className="text-lg text-md text-teal-600 font-bold"
-        >
-          Your event does not have a schedule yet! Create one now!
-        </p>
+        data-testid="no-rundown-text"
+        className="text-lg text-md text-teal-600 font-bold"
+      >
+        Your event does not have a schedule yet! Create one now!
+      </p>
       <Link href={`${pathname}/create-rundown`} className="w-full">
         <Button
           variant={'ghost'}