fix: fixed vitest file after merge conflict

src/components/PageComponents/Config/Device/Device.test.tsx

@@ -1,10 +1,10 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { render } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import { Device } from '@components/PageComponents/Config/Device/index.tsx';
-import { useDevice } from '@core/stores/deviceStore.ts';
-import { useUnsafeRolesDialog } from '@components/Dialog/UnsafeRolesDialog/useUnsafeRolesDialog.ts';
+import { useDevice } from "@core/stores/deviceStore.ts";
+import { useUnsafeRolesDialog } from "@components/Dialog/UnsafeRolesDialog/useUnsafeRolesDialog.ts";
+import { Protobuf } from "@meshtastic/core";
 
-// Mock dependencies
 vi.mock('@core/stores/deviceStore', () => ({
   useDevice: vi.fn()
 }));
@@ -13,34 +13,117 @@ vi.mock('@components/Dialog/UnsafeRolesDialog/useUnsafeRolesDialog', () => ({
   useUnsafeRolesDialog: vi.fn()
 }));
 
-describe('Device component with UnsafeRolesDialog', () => {
+// Mock the DynamicForm component since we're testing the Device component,
+// not the DynamicForm implementation
+vi.mock('@components/Form/DynamicForm', () => ({
+  DynamicForm: vi.fn(({ onSubmit }) => {
+    // Render a simplified version of the form for testing
+    return (
+      <div data-testid="dynamic-form">
+        <select
+          data-testid="role-select"
+          onChange={(e) => {
+            // Simulate the validation and submission process
+            const mockData = { role: e.target.value };
+            onSubmit(mockData);
+          }}
+        >
+          {Object.entries(Protobuf.Config.Config_DeviceConfig_Role).map(([key, value]) => (
+            <option key={key} value={value}>
+              {key}
+            </option>
+          ))}
+        </select>
+        <button type="submit"
+          data-testid="submit-button"
+          onClick={() => onSubmit({ role: "CLIENT" })}
+        >
+          Submit
+        </button>
+      </div>
+    );
+  })
+}));
+
+describe('Device component', () => {
   const setWorkingConfigMock = vi.fn();
-  const validateRoleDialogResultMock = vi.fn();
+  const validateRoleSelectionMock = vi.fn();
+  const mockDeviceConfig = {
+    role: "CLIENT",
+    buttonGpio: 0,
+    buzzerGpio: 0,
+    rebroadcastMode: "ALL",
+    nodeInfoBroadcastSecs: 300,
+    doubleTapAsButtonPress: false,
+    disableTripleClick: false,
+    ledHeartbeatDisabled: false,
+  };
 
   beforeEach(() => {
     vi.resetAllMocks();
-    
-    // Mock useDevice hook
+
+    // Mock the useDevice hook
     (useDevice as any).mockReturnValue({
       config: {
-        device: {}
+        device: mockDeviceConfig
       },
       setWorkingConfig: setWorkingConfigMock
     });
-    
-    // Mock useUnsafeRolesDialog hook
+
+    // Mock the useUnsafeRolesDialog hook
+    validateRoleSelectionMock.mockResolvedValue(true);
     (useUnsafeRolesDialog as any).mockReturnValue({
-      validateRoleDialogResult: validateRoleDialogResultMock
+      validateRoleSelection: validateRoleSelectionMock
     });
   });
 
-  it('should use the validateRoleDialogResult from the hook', () => {
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should render the Device form', () => {
+    render(<Device />);
+    expect(screen.getByTestId('dynamic-form')).toBeInTheDocument();
+  });
+
+  it('should use the validateRoleSelection from the unsafe roles hook', () => {
     render(<Device />);
-    
-    // Verify the hook was called
     expect(useUnsafeRolesDialog).toHaveBeenCalled();
-    
-    // Verify the form is using the validation function from the hook
-    expect(setWorkingConfigMock).not.toHaveBeenCalled(); // Just ensure the component rendered without errors
+  });
+
+  it('should call setWorkingConfig when form is submitted', async () => {
+    render(<Device />);
+
+    fireEvent.click(screen.getByTestId('submit-button'));
+
+    await waitFor(() => {
+      expect(setWorkingConfigMock).toHaveBeenCalledWith(
+        expect.objectContaining({
+          payloadVariant: {
+            case: "device",
+            value: expect.objectContaining({ role: "CLIENT" })
+          }
+        })
+      );
+    });
+  });
+
+
+  it('should create config with proper structure', async () => {
+    render(<Device />);
+
+    // Simulate form submission
+    fireEvent.click(screen.getByTestId('submit-button'));
+
+    await waitFor(() => {
+      expect(setWorkingConfigMock).toHaveBeenCalledWith(
+        expect.objectContaining({
+          payloadVariant: {
+            case: "device",
+            value: expect.any(Object)
+          }
+        })
+      );
+    });
   });
 });