test: add test cases

web/containers/Layout/BottomPanel/SystemMonitor/SystemMonitor.test.tsx

@@ -1,6 +1,6 @@
 import '@testing-library/jest-dom'
 import React from 'react'
-import { render, screen } from '@testing-library/react'
+import { render, screen, waitFor } from '@testing-library/react'
 import SystemMonitor from './index'
 import { useAtom, useAtomValue } from 'jotai'
 import {
@@ -9,6 +9,7 @@ import {
   totalRamAtom,
   usedRamAtom,
 } from '@/helpers/atoms/SystemBar.atom'
+import useGetSystemResources from '@/hooks/useGetSystemResources'
 
 // Mock dependencies
 jest.mock('jotai', () => ({
@@ -19,10 +20,7 @@ jest.mock('jotai', () => ({
 }))
 
 // Mock the hooks and atoms
-jest.mock('@/hooks/useGetSystemResources', () => ({
-  __esModule: true,
-  default: () => ({ watch: jest.fn(), stopWatching: jest.fn() }),
-}))
+jest.mock('@/hooks/useGetSystemResources')
 
 jest.mock('@/hooks/usePath', () => ({
   usePath: () => ({ onRevealInFinder: jest.fn() }),
@@ -45,8 +43,14 @@ jest.mock('@/helpers/atoms/SystemBar.atom', () => ({
 }))
 
 describe('SystemMonitor', () => {
+  const mockWatch = jest.fn()
+  const mockStopWatching = jest.fn()
   beforeAll(() => {
     jest.clearAllMocks()
+    ;(useGetSystemResources as jest.Mock).mockReturnValue({
+      watch: mockWatch,
+      stopWatching: mockStopWatching,
+    })
   })
   it('renders without crashing', () => {
     ;(useAtom as jest.Mock).mockReturnValue([false, jest.fn()])
@@ -83,4 +87,38 @@ describe('SystemMonitor', () => {
     expect(screen.getByText('7.45/14.90 GB')).toBeInTheDocument()
     expect(screen.getByText('30%')).toBeInTheDocument()
   })
+
+  it('it should not request system resource on close', async () => {
+    const mockGpusAtom = jest.fn()
+    const mockShowPanel = jest.fn()
+    ;(useAtom as jest.Mock).mockImplementation(mockShowPanel)
+
+    // Mock Jotai hooks
+    ;(useAtomValue as jest.Mock).mockImplementation((atom) => {
+      switch (atom) {
+        case totalRamAtom:
+          return 16000000000
+        case usedRamAtom:
+          return 8000000000
+        case cpuUsageAtom:
+          return 30
+        case gpusAtom:
+          return mockGpusAtom
+        default:
+          return jest.fn()
+      }
+    })
+    mockGpusAtom.mockImplementation(() => [])
+    mockShowPanel.mockImplementation(() => [true, jest.fn()])
+
+    await waitFor(async () => {
+      await render(<SystemMonitor />)
+
+      const toggle = screen.getByTestId('system-monitoring')
+      toggle.click()
+    })
+
+    expect(mockWatch).not.toHaveBeenCalled()
+    expect(mockStopWatching).toHaveBeenCalled()
+  })
 })

web/containers/Layout/BottomPanel/SystemMonitor/index.tsx

@@ -77,6 +77,7 @@ const SystemMonitor = () => {
     <Fragment>
       <div
         ref={setControl}
+        data-testid="system-monitoring"
         className={twMerge(
           'flex cursor-pointer items-center gap-x-1 rounded px-1 py-0.5 hover:bg-[hsla(var(--secondary-bg))]',
           showSystemMonitorPanel && 'bg-[hsla(var(--secondary-bg))]'