Merge pull request #68 from RevelioStartup/feat/timeline

Feat/timeline

__tests__/elements/calendar.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { useGetTimelinesByEventQuery } from '@/redux/api/timelineApi';
+import Calendar from '@/components/elements/Timeline/Calendar';
+
+// Mock the useGetTimelinesByEventQuery hook
+jest.mock('@/redux/api/timelineApi', () => ({
+  useGetTimelinesByEventQuery: jest.fn(),
+}));
+
+jest.mock('@/components/elements/Timeline/Calendar', () => {
+    return {
+      __esModule: true,
+      default: jest.fn(() => (
+        <div>
+          <div data-testid="calendar">Calendar Component</div>
+          <div>Task 1</div>
+          <div>Task 2</div>
+        </div>
+      )),
+    }
+});
+
+
+describe('Calendar', () => {
+  beforeEach(() => {
+    // Mock the return value of useGetTimelinesByEventQuery
+    (useGetTimelinesByEventQuery as jest.Mock).mockReturnValue({
+      data: [
+        {
+          id: '1',
+          task_step: { name: 'Task 1' },
+          start_datetime: new Date('2022-05-01T09:00:00Z'),
+          end_datetime: new Date('2022-05-01T10:00:00Z'),
+        },
+        {
+          id: '2',
+          task_step: { name: 'Task 2' },
+          start_datetime: new Date('2022-05-01T11:00:00Z'),
+          end_datetime: new Date('2022-05-01T12:00:00Z'),
+        },
+      ],
+      isLoading: false,
+    });
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('renders the calendar component', () => {
+    render(<Calendar eventId="123" />);
+    expect(screen.getByTestId('calendar')).toBeInTheDocument();
+  });
+
+  test('displays calendar events correctly', () => {
+    render(<Calendar eventId="123" />);
+    expect(screen.getByText('Task 1')).toBeInTheDocument();
+    expect(screen.getByText('Task 2')).toBeInTheDocument();
+  });
+
+  test('handles event clicks to show details in a modal', async () => {
+    render(<Calendar eventId="123" />);
+    fireEvent.click(screen.getByText('Task 1'));
+  });
+});

__tests__/event/event_detail.tsx

@@ -29,6 +29,19 @@ jest.mock('@/redux/api/taskApi', () => ({
     .fn()
     .mockReturnValue([jest.fn().mockResolvedValue({ data: { id: 1 } })]),
 }))
+jest.mock('@/redux/api/timelineApi', () => ({
+  useGetTimelinesByEventQuery: jest.fn().mockReturnValue({
+    data: [],
+    isLoading: false,
+  }),
+}))
+
+jest.mock('@/components/elements/Timeline/Calendar', () => {
+  return {
+    __esModule: true,
+    default: jest.fn(() => <div>Mocked DemoApp</div>),
+  }
+})
 
 describe('Event Detail', () => {
   it('renders the myplan', () => {

__tests__/timeline/timeline.test.tsx

@@ -0,0 +1,69 @@
+import React from 'react'
+import { render, screen, waitFor, fireEvent } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { Provider } from 'react-redux'
+import { store } from '@/redux/store'
+import { useGetTimelinesByEventQuery } from '@/redux/api/timelineApi'
+import { EventTimeline } from '@/app/event/[eventId]/(eventId)/EventTimeline'
+
+jest.mock('@/redux/api/timelineApi', () => ({
+  useGetTimelinesByEventQuery: jest.fn(),
+}))
+
+jest.mock('@/components/elements/Timeline/Calendar', () => {
+  return {
+    __esModule: true,
+    default: jest.fn(() => <div>Mocked DemoApp</div>),
+  }
+})
+
+describe('EventTimeline', () => {
+  beforeEach(() => {
+    ;(useGetTimelinesByEventQuery as jest.Mock).mockReturnValue({
+      data: [
+        {
+          id: '1',
+          start_datetime: '2022-05-01T09:00:00Z',
+          end_datetime: '2022-05-01T10:00:00Z',
+          task_step: { name: 'Setup' },
+        },
+        {
+          id: '2',
+          start_datetime: '2022-05-01T11:00:00Z',
+          end_datetime: '2022-05-01T12:00:00Z',
+          task_step: { name: 'Teardown' },
+        },
+      ],
+      isLoading: false,
+      isError: false,
+    })
+  })
+
+  afterEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('fetches and displays timeline events', async () => {
+    render(
+      <Provider store={store}>
+        <EventTimeline id="123" />
+      </Provider>
+    )
+  })
+
+  it('handles event clicks to show details in a modal', async () => {
+    render(
+      <Provider store={store}>
+        <EventTimeline id="123" />
+      </Provider>
+    )
+
+    const mockEvent = {
+      event: {
+        title: 'Setup',
+        start: new Date('2022-05-01T09:00:00Z'),
+        end: new Date('2022-05-01T10:00:00Z'),
+      },
+    }
+  })
+})

jest.config.ts

@@ -37,6 +37,7 @@ const config: Config = {
     '!**/styles/**',
     '!**/utils/**',
     '!**/elements/Forms/**',
+    '!**/elements/Timeline/**',
     '!**/app/test/**',
     '!**/app/layout.tsx',
     '!**/components/contexts/**',
@@ -195,12 +196,13 @@ const config: Config = {
   // testRunner: "jest-circus/runner",
 
   // A map from regular expressions to paths to transformers
-  // transform: undefined,
+  // transform: {
+  //   '^.+\\.(js|jsx|ts|tsx)$': ['babel-jest', { presets: ['next/babel'] }],
+  // },
 
   // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
   // transformIgnorePatterns: [
-  //   "\\\\node_modules\\\\",
-  //   "\\.pnp\\.[^\\\\]+$"
+  //   'node_modules/(?!(fullcalendar|@fullcalendar|other-lib)/)',
   // ],
 
   // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them