Merge pull request #547 from danditomaso/issue-523-add-udp-toggle
feat: Add udp over mesh toggle
This commit is contained in:
Dan Ditomaso
@@ -10,13 +10,14 @@ import {
|
||||
SelectValue,
|
||||
} from "@components/UI/Select.tsx";
|
||||
import { useController, type FieldValues } from "react-hook-form";
|
||||
import { computeHeadingLevel } from "@core/utils/test.tsx";
|
||||
|
||||
export interface SelectFieldProps<T> extends BaseFormBuilderProps<T> {
|
||||
type: "select";
|
||||
selectChange?: (e: string, name: string) => void;
|
||||
validate?: (newValue: string) => Promise<boolean>;
|
||||
defaultValue?: string;
|
||||
properties: BaseFormBuilderProps<T>["properties"] & {
|
||||
defaultValue?: T;
|
||||
enumValue: {
|
||||
[s: string]: string | number;
|
||||
};
|
||||
@@ -70,7 +71,6 @@ export function SelectInput<T extends FieldValues>({
|
||||
onChange(Number.parseInt(newValue));
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<Select
|
||||
onValueChange={handleValueChange}
|
||||
|
||||
@@ -0,0 +1,283 @@
|
||||
// import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
|
||||
// import { render, screen, fireEvent, waitFor } from '@testing-library/react';
|
||||
// import { Network } from '@components/PageComponents/Config/Network/index.tsx';
|
||||
// import { useDevice } from "@core/stores/deviceStore.ts";
|
||||
// import { Protobuf } from "@meshtastic/core";
|
||||
|
||||
// vi.mock('@core/stores/deviceStore', () => ({
|
||||
// useDevice: vi.fn()
|
||||
// }));
|
||||
|
||||
// vi.mock('@components/Form/DynamicForm', () => ({
|
||||
// DynamicForm: vi.fn(({ onSubmit }) => {
|
||||
// return (
|
||||
// <div data-testid="dynamic-form">
|
||||
// <select
|
||||
// data-testid="role-select"
|
||||
// onChange={(e) => {
|
||||
// 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('Network component', () => {
|
||||
// const setWorkingConfigMock = vi.fn();
|
||||
// const mockDeviceConfig = {
|
||||
// role: "CLIENT",
|
||||
// buttonGpio: 0,
|
||||
// buzzerGpio: 0,
|
||||
// rebroadcastMode: "ALL",
|
||||
// nodeInfoBroadcastSecs: 300,
|
||||
// doubleTapAsButtonPress: false,
|
||||
// disableTripleClick: false,
|
||||
// ledHeartbeatDisabled: false,
|
||||
// };
|
||||
|
||||
// beforeEach(() => {
|
||||
// vi.resetAllMocks();
|
||||
|
||||
// (useDevice as any).mockReturnValue({
|
||||
// config: {
|
||||
// device: mockDeviceConfig
|
||||
// },
|
||||
// setWorkingConfig: setWorkingConfigMock
|
||||
// });
|
||||
|
||||
// });
|
||||
|
||||
// afterEach(() => {
|
||||
// vi.clearAllMocks();
|
||||
// });
|
||||
|
||||
// it('should render the Network form', () => {
|
||||
// render(<Network />);
|
||||
// expect(screen.getByTestId('dynamic-form')).toBeInTheDocument();
|
||||
// });
|
||||
|
||||
// it('should call setWorkingConfig when form is submitted', async () => {
|
||||
// render(<Network />);
|
||||
|
||||
// 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(<Network />);
|
||||
|
||||
// // Simulate form submission
|
||||
// fireEvent.click(screen.getByTestId('submit-button'));
|
||||
|
||||
// await waitFor(() => {
|
||||
// expect(setWorkingConfigMock).toHaveBeenCalledWith(
|
||||
// expect.objectContaining({
|
||||
// payloadVariant: {
|
||||
// case: "network",
|
||||
// value: expect.any(Object)
|
||||
// }
|
||||
// })
|
||||
// );
|
||||
// });
|
||||
// });
|
||||
// });
|
||||
|
||||
import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
|
||||
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
|
||||
import { Network } from '@components/PageComponents/Config/Network/index.tsx';
|
||||
import { useDevice } from "@core/stores/deviceStore.ts";
|
||||
import { Protobuf } from "@meshtastic/core";
|
||||
|
||||
vi.mock('@core/stores/deviceStore', () => ({
|
||||
useDevice: vi.fn()
|
||||
}));
|
||||
|
||||
vi.mock('@components/Form/DynamicForm', async () => {
|
||||
const React = await import('react');
|
||||
const { useState } = React;
|
||||
|
||||
return {
|
||||
DynamicForm: ({ onSubmit, defaultValues }: any) => {
|
||||
const [wifiEnabled, setWifiEnabled] = useState(defaultValues.wifiEnabled ?? false);
|
||||
const [ssid, setSsid] = useState(defaultValues.wifiSsid ?? '');
|
||||
const [psk, setPsk] = useState(defaultValues.wifiPsk ?? '');
|
||||
|
||||
return (
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
onSubmit({
|
||||
...defaultValues,
|
||||
wifiEnabled,
|
||||
wifiSsid: ssid,
|
||||
wifiPsk: psk,
|
||||
});
|
||||
}}
|
||||
data-testid="dynamic-form"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
aria-label="WiFi Enabled"
|
||||
checked={wifiEnabled}
|
||||
onChange={(e) => setWifiEnabled(e.target.checked)}
|
||||
/>
|
||||
<input
|
||||
aria-label="SSID"
|
||||
value={ssid}
|
||||
onChange={(e) => setSsid(e.target.value)}
|
||||
disabled={!wifiEnabled}
|
||||
/>
|
||||
<input
|
||||
aria-label="PSK"
|
||||
value={psk}
|
||||
onChange={(e) => setPsk(e.target.value)}
|
||||
disabled={!wifiEnabled}
|
||||
/>
|
||||
<button type="submit" data-testid="submit-button">
|
||||
Submit
|
||||
</button>
|
||||
</form>
|
||||
);
|
||||
},
|
||||
};
|
||||
});
|
||||
;
|
||||
|
||||
describe('Network component', () => {
|
||||
const setWorkingConfigMock = vi.fn();
|
||||
const mockNetworkConfig = {
|
||||
wifiEnabled: false,
|
||||
wifiSsid: '',
|
||||
wifiPsk: '',
|
||||
ntpServer: '',
|
||||
ethEnabled: false,
|
||||
addressMode: Protobuf.Config.Config_NetworkConfig_AddressMode.DHCP,
|
||||
ipv4Config: {
|
||||
ip: 0,
|
||||
gateway: 0,
|
||||
subnet: 0,
|
||||
dns: 0,
|
||||
},
|
||||
enabledProtocols:
|
||||
Protobuf.Config.Config_NetworkConfig_ProtocolFlags.NO_BROADCAST,
|
||||
rsyslogServer: '',
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
vi.resetAllMocks();
|
||||
|
||||
(useDevice as any).mockReturnValue({
|
||||
config: {
|
||||
network: mockNetworkConfig
|
||||
},
|
||||
setWorkingConfig: setWorkingConfigMock
|
||||
});
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
it('should render the Network form', () => {
|
||||
render(<Network />);
|
||||
expect(screen.getByTestId('dynamic-form')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should disable SSID and PSK fields when wifi is off', () => {
|
||||
render(<Network />);
|
||||
expect(screen.getByLabelText("SSID")).toBeDisabled();
|
||||
expect(screen.getByLabelText("PSK")).toBeDisabled();
|
||||
});
|
||||
|
||||
it('should enable SSID and PSK when wifi is toggled on', async () => {
|
||||
render(<Network />);
|
||||
const toggle = screen.getByLabelText("WiFi Enabled");
|
||||
screen.debug()
|
||||
|
||||
fireEvent.click(toggle); // turns wifiEnabled = true
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByLabelText("SSID")).not.toBeDisabled();
|
||||
expect(screen.getByLabelText("PSK")).not.toBeDisabled();
|
||||
});
|
||||
});
|
||||
|
||||
it('should call setWorkingConfig with the right structure on submit', async () => {
|
||||
render(<Network />);
|
||||
|
||||
fireEvent.click(screen.getByTestId("submit-button"));
|
||||
|
||||
await waitFor(() => {
|
||||
expect(setWorkingConfigMock).toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
payloadVariant: {
|
||||
case: "network",
|
||||
value: expect.objectContaining({
|
||||
wifiEnabled: false,
|
||||
wifiSsid: '',
|
||||
wifiPsk: '',
|
||||
ntpServer: '',
|
||||
ethEnabled: false,
|
||||
rsyslogServer: '',
|
||||
})
|
||||
}
|
||||
})
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
it('should submit valid data after enabling wifi and entering SSID and PSK', async () => {
|
||||
render(<Network />);
|
||||
fireEvent.click(screen.getByLabelText("WiFi Enabled"));
|
||||
|
||||
fireEvent.change(screen.getByLabelText("SSID"), {
|
||||
target: { value: "MySSID" }
|
||||
});
|
||||
|
||||
fireEvent.change(screen.getByLabelText("PSK"), {
|
||||
target: { value: "MySecretPSK" }
|
||||
});
|
||||
|
||||
fireEvent.click(screen.getByTestId("submit-button"));
|
||||
|
||||
await waitFor(() => {
|
||||
expect(setWorkingConfigMock).toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
payloadVariant: {
|
||||
case: "network",
|
||||
value: expect.objectContaining({
|
||||
wifiEnabled: true,
|
||||
wifiSsid: "MySSID",
|
||||
wifiPsk: "MySecretPSK"
|
||||
})
|
||||
}
|
||||
})
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
+30
-5
@@ -1,4 +1,4 @@
|
||||
import type { NetworkValidation } from "@app/validation/config/network.tsx";
|
||||
import { NetworkValidationSchema, type NetworkValidation } from "@app/validation/config/network.ts";
|
||||
import { create } from "@bufbuild/protobuf";
|
||||
import { DynamicForm } from "@components/Form/DynamicForm.tsx";
|
||||
import { useDevice } from "@core/stores/deviceStore.ts";
|
||||
@@ -7,11 +7,18 @@ import {
|
||||
convertIpAddressToInt,
|
||||
} from "@core/utils/ip.ts";
|
||||
import { Protobuf } from "@meshtastic/core";
|
||||
import { validateSchema } from "@app/validation/validate.ts";
|
||||
|
||||
export const Network = () => {
|
||||
const { config, setWorkingConfig } = useDevice();
|
||||
|
||||
const onSubmit = (data: NetworkValidation) => {
|
||||
const result = validateSchema(NetworkValidationSchema, data);
|
||||
|
||||
if (!result.success) {
|
||||
console.error("Validation errors:", result.errors);
|
||||
}
|
||||
|
||||
setWorkingConfig(
|
||||
create(Protobuf.Config.ConfigSchema, {
|
||||
payloadVariant: {
|
||||
@@ -21,10 +28,10 @@ export const Network = () => {
|
||||
ipv4Config: create(
|
||||
Protobuf.Config.Config_NetworkConfig_IpV4ConfigSchema,
|
||||
{
|
||||
ip: convertIpAddressToInt(data.ipv4Config.ip) ?? 0,
|
||||
gateway: convertIpAddressToInt(data.ipv4Config.gateway) ?? 0,
|
||||
subnet: convertIpAddressToInt(data.ipv4Config.subnet) ?? 0,
|
||||
dns: convertIpAddressToInt(data.ipv4Config.dns) ?? 0,
|
||||
ip: convertIpAddressToInt(data.ipv4Config?.ip ?? ""),
|
||||
gateway: convertIpAddressToInt(data.ipv4Config?.gateway ?? ""),
|
||||
subnet: convertIpAddressToInt(data.ipv4Config?.subnet ?? ""),
|
||||
dns: convertIpAddressToInt(data.ipv4Config?.dns ?? ""),
|
||||
},
|
||||
),
|
||||
},
|
||||
@@ -48,6 +55,8 @@ export const Network = () => {
|
||||
),
|
||||
dns: convertIntToIpAddress(config.network?.ipv4Config?.dns ?? 0),
|
||||
},
|
||||
enabledProtocols: config.network?.enabledProtocols ?? Protobuf.Config.Config_NetworkConfig_ProtocolFlags.NO_BROADCAST
|
||||
|
||||
}}
|
||||
fieldGroups={[
|
||||
{
|
||||
@@ -165,6 +174,22 @@ export const Network = () => {
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "UDP Config",
|
||||
description: "UDP over Mesh configuration",
|
||||
fields: [
|
||||
{
|
||||
type: "select",
|
||||
name: "enabledProtocols",
|
||||
label: "Mesh via UDP",
|
||||
properties: {
|
||||
enumValue:
|
||||
Protobuf.Config.Config_NetworkConfig_ProtocolFlags,
|
||||
formatEnumName: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "NTP Config",
|
||||
description: "NTP configuration",
|
||||
Reference in New Issue
Block a user