hermes/meshtastic-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: lint/format all files (#604)

Browse Source 
* chore: lint/format all files

* Fix config sidebar button state (#602)

* chore: Update deno.lock version and add Radix UI slider component (#601)

* fix: improve how table addresses even/odd rows

---------

Co-authored-by: philon- <philon-@users.noreply.github.com>
Co-authored-by: Kamil Dzieniszewski <kamil.dzieniszewski@gmail.com>
This commit is contained in:
Dan Ditomaso
2025-05-04 15:55:04 -04:00
committed by GitHub
co-authored by philon- Kamil Dzieniszewski
parent b7bdb1a502
commit 480ca46a95
104 changed files with 3104 additions and 2527 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/PageComponents/Config/Device/Device.test.tsx
+34 -32
View File
@@ -1,21 +1,21 @@
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 { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
import { fireEvent, render, screen, 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 { Protobuf } from "@meshtastic/core";
vi.mock('@core/stores/deviceStore.ts', () => ({
useDevice: vi.fn()
vi.mock("@core/stores/deviceStore.ts", () => ({
useDevice: vi.fn(),
}));
vi.mock('@components/Dialog/UnsafeRolesDialog/useUnsafeRolesDialog.ts', () => ({
useUnsafeRolesDialog: vi.fn()
vi.mock("@components/Dialog/UnsafeRolesDialog/useUnsafeRolesDialog.ts", () => ({
useUnsafeRolesDialog: vi.fn(),
}));
// Mock the DynamicForm component since we're testing the Device component,
// not the DynamicForm implementation
vi.mock('@components/Form/DynamicForm', () => ({
vi.mock("@components/Form/DynamicForm", () => ({
DynamicForm: vi.fn(({ onSubmit }) => {
// Render a simplified version of the form for testing
return (
@@ -28,13 +28,16 @@ vi.mock('@components/Form/DynamicForm', () => ({
onSubmit(mockData);
}}
>
{Object.entries(Protobuf.Config.Config_DeviceConfig_Role).map(([key, value]) => (
{Object.entries(Protobuf.Config.Config_DeviceConfig_Role).map((
[key, value],
) => (
<option key={key} value={value}>
{key}
</option>
))}
</select>
<button type="submit"
<button
type="submit"
data-testid="submit-button"
onClick={() => onSubmit({ role: "CLIENT" })}
>
@@ -42,10 +45,10 @@ vi.mock('@components/Form/DynamicForm', () => ({
</button>
</div>
);
})
}),
}));
describe('Device component', () => {
describe("Device component", () => {
const setWorkingConfigMock = vi.fn();
const validateRoleSelectionMock = vi.fn();
const mockDeviceConfig = {
@@ -63,17 +66,17 @@ describe('Device component', () => {
vi.resetAllMocks();
// Mock the useDevice hook
(useDevice as any).mockReturnValue({
useDevice.mockReturnValue({
config: {
device: mockDeviceConfig
device: mockDeviceConfig,
},
setWorkingConfig: setWorkingConfigMock
setWorkingConfig: setWorkingConfigMock,
});
// Mock the useUnsafeRolesDialog hook
validateRoleSelectionMock.mockResolvedValue(true);
(useUnsafeRolesDialog as any).mockReturnValue({
validateRoleSelection: validateRoleSelectionMock
useUnsafeRolesDialog.mockReturnValue({
validateRoleSelection: validateRoleSelectionMock,
});
});
@@ -81,49 +84,48 @@ describe('Device component', () => {
vi.clearAllMocks();
});
it('should render the Device form', () => {
it("should render the Device form", () => {
render(<Device />);
expect(screen.getByTestId('dynamic-form')).toBeInTheDocument();
expect(screen.getByTestId("dynamic-form")).toBeInTheDocument();
});
it('should use the validateRoleSelection from the unsafe roles hook', () => {
it("should use the validateRoleSelection from the unsafe roles hook", () => {
render(<Device />);
expect(useUnsafeRolesDialog).toHaveBeenCalled();
});
it('should call setWorkingConfig when form is submitted', async () => {
it("should call setWorkingConfig when form is submitted", async () => {
render(<Device />);
fireEvent.click(screen.getByTestId('submit-button'));
fireEvent.click(screen.getByTestId("submit-button"));
await waitFor(() => {
expect(setWorkingConfigMock).toHaveBeenCalledWith(
expect.objectContaining({
payloadVariant: {
case: "device",
value: expect.objectContaining({ role: "CLIENT" })
}
})
value: expect.objectContaining({ role: "CLIENT" }),
},
}),
);
});
});
it('should create config with proper structure', async () => {
it("should create config with proper structure", async () => {
render(<Device />);
// Simulate form submission
fireEvent.click(screen.getByTestId('submit-button'));
fireEvent.click(screen.getByTestId("submit-button"));
await waitFor(() => {
expect(setWorkingConfigMock).toHaveBeenCalledWith(
expect.objectContaining({
payloadVariant: {
case: "device",
value: expect.any(Object)
}
})
value: expect.any(Object),
},
}),
);
});
});
});
});
src/components/PageComponents/Config/Device/index.tsx
+6 -6
View File
@@ -16,7 +16,7 @@ export const Device = () => {
case: "device",
value: data,
},
})
}),
);
};
return (
@@ -83,16 +83,16 @@ export const Device = () => {
description: "Disable triple click",
},
{
type: 'text',
name: 'tzdef',
label: 'POSIX Timezone',
description: 'The POSIX timezone string for the device',
type: "text",
name: "tzdef",
label: "POSIX Timezone",
description: "The POSIX timezone string for the device",
properties: {
fieldLength: {
max: 64,
currentValueLength: config.device?.tzdef?.length,
showCharacterCount: true,
}
},
},
},
{
src/components/PageComponents/Config/Network/Network.test.tsx
+41 -149
View File
@@ -1,131 +1,24 @@
// 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 { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
import { fireEvent, render, screen, 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("@core/stores/deviceStore", () => ({
useDevice: vi.fn(),
}));
vi.mock('@components/Form/DynamicForm', async () => {
const React = await import('react');
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 ?? '');
DynamicForm: ({ onSubmit, defaultValues }) => {
const [wifiEnabled, setWifiEnabled] = useState(
defaultValues.wifiEnabled ?? false,
);
const [ssid, setSsid] = useState(defaultValues.wifiSsid ?? "");
const [psk, setPsk] = useState(defaultValues.wifiPsk ?? "");
return (
<form
@@ -166,15 +59,14 @@ vi.mock('@components/Form/DynamicForm', async () => {
},
};
});
;
describe('Network component', () => {
describe("Network component", () => {
const setWorkingConfigMock = vi.fn();
const mockNetworkConfig = {
wifiEnabled: false,
wifiSsid: '',
wifiPsk: '',
ntpServer: '',
wifiSsid: "",
wifiPsk: "",
ntpServer: "",
ethEnabled: false,
addressMode: Protobuf.Config.Config_NetworkConfig_AddressMode.DHCP,
ipv4Config: {
@@ -185,17 +77,17 @@ describe('Network component', () => {
},
enabledProtocols:
Protobuf.Config.Config_NetworkConfig_ProtocolFlags.NO_BROADCAST,
rsyslogServer: '',
rsyslogServer: "",
};
beforeEach(() => {
vi.resetAllMocks();
(useDevice as any).mockReturnValue({
useDevice.mockReturnValue({
config: {
network: mockNetworkConfig
network: mockNetworkConfig,
},
setWorkingConfig: setWorkingConfigMock
setWorkingConfig: setWorkingConfigMock,
});
});
@@ -203,21 +95,21 @@ describe('Network component', () => {
vi.clearAllMocks();
});
it('should render the Network form', () => {
it("should render the Network form", () => {
render(<Network />);
expect(screen.getByTestId('dynamic-form')).toBeInTheDocument();
expect(screen.getByTestId("dynamic-form")).toBeInTheDocument();
});
it('should disable SSID and PSK fields when wifi is off', () => {
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 () => {
it("should enable SSID and PSK when wifi is toggled on", async () => {
render(<Network />);
const toggle = screen.getByLabelText("WiFi Enabled");
screen.debug()
screen.debug();
fireEvent.click(toggle); // turns wifiEnabled = true
@@ -227,7 +119,7 @@ describe('Network component', () => {
});
});
it('should call setWorkingConfig with the right structure on submit', async () => {
it("should call setWorkingConfig with the right structure on submit", async () => {
render(<Network />);
fireEvent.click(screen.getByTestId("submit-button"));
@@ -239,28 +131,28 @@ describe('Network component', () => {
case: "network",
value: expect.objectContaining({
wifiEnabled: false,
wifiSsid: '',
wifiPsk: '',
ntpServer: '',
wifiSsid: "",
wifiPsk: "",
ntpServer: "",
ethEnabled: false,
rsyslogServer: '',
})
}
})
rsyslogServer: "",
}),
},
}),
);
});
});
it('should submit valid data after enabling wifi and entering SSID and PSK', async () => {
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" }
target: { value: "MySSID" },
});
fireEvent.change(screen.getByLabelText("PSK"), {
target: { value: "MySecretPSK" }
target: { value: "MySecretPSK" },
});
fireEvent.click(screen.getByTestId("submit-button"));
@@ -273,10 +165,10 @@ describe('Network component', () => {
value: expect.objectContaining({
wifiEnabled: true,
wifiSsid: "MySSID",
wifiPsk: "MySecretPSK"
})
}
})
wifiPsk: "MySecretPSK",
}),
},
}),
);
});
});
src/components/PageComponents/Config/Network/index.tsx
+8 -6
View File
@@ -1,4 +1,7 @@
import { NetworkValidationSchema, type NetworkValidation } from "@app/validation/config/network.ts";
import {
type NetworkValidation,
NetworkValidationSchema,
} 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";
@@ -55,8 +58,8 @@ export const Network = () => {
),
dns: convertIntToIpAddress(config.network?.ipv4Config?.dns ?? 0),
},
enabledProtocols: config.network?.enabledProtocols ?? Protobuf.Config.Config_NetworkConfig_ProtocolFlags.NO_BROADCAST
enabledProtocols: config.network?.enabledProtocols ??
Protobuf.Config.Config_NetworkConfig_ProtocolFlags.NO_BROADCAST,
}}
fieldGroups={[
{
@@ -183,10 +186,9 @@ export const Network = () => {
name: "enabledProtocols",
label: "Mesh via UDP",
properties: {
enumValue:
Protobuf.Config.Config_NetworkConfig_ProtocolFlags,
enumValue: Protobuf.Config.Config_NetworkConfig_ProtocolFlags,
formatEnumName: true,
}
},
},
],
},
src/components/PageComponents/Config/Position.tsx
+1 -1
View File
@@ -74,7 +74,7 @@ export const Position = () => {
name: "positionFlags",
value: activeFlags,
isChecked: (name: string) =>
activeFlags?.includes(name as FlagName) ?? false,
activeFlags?.includes(name as FlagName) ?? false,
onValueChange: onPositonFlagChange,
label: "Position Flags",
placeholder: "Select position flags...",
src/components/PageComponents/Config/Security/Security.tsx
+6 -8
View File
@@ -1,16 +1,12 @@
import { PkiRegenerateDialog } from "@components/Dialog/PkiRegenerateDialog.tsx";
import { DynamicForm } from "@components/Form/DynamicForm.tsx";
import { useAppStore } from "@core/stores/appStore.ts";
import {
getX25519PrivateKey,
getX25519PublicKey,
} from "@core/utils/x25519.ts";
import { getX25519PrivateKey, getX25519PublicKey } from "@core/utils/x25519.ts";
import type { SecurityValidation } from "@app/validation/config/security.ts";
import { create } from "@bufbuild/protobuf";
import { useDevice } from "@core/stores/deviceStore.ts";
import { Protobuf } from "@meshtastic/core";
import { fromByteArray, toByteArray } from "base64-js";
import { Eye, EyeOff } from "lucide-react";
import { useReducer } from "react";
import { securityReducer } from "@components/PageComponents/Config/Security/securityReducer.tsx";
@@ -58,7 +54,8 @@ export const Security = () => {
if (input.length % 4 !== 0) {
addError(
fieldName,
`${fieldName === "privateKey" ? "Private" : "Admin"
`${
fieldName === "privateKey" ? "Private" : "Admin"
} Key is required to be a 256 bit pre-shared key (PSK)`,
);
return;
@@ -73,7 +70,8 @@ export const Security = () => {
console.error(e);
addError(
fieldName,
`Invalid ${fieldName === "privateKey" ? "Private" : "Admin"
`Invalid ${
fieldName === "privateKey" ? "Private" : "Admin"
} Key format`,
);
}
@@ -242,7 +240,7 @@ export const Security = () => {
? getErrorMessage("adminKey")
: "",
inputChange: adminKeyInputChangeEvent,
selectChange: () => { },
selectChange: () => {},
bits: [{ text: "256 bit", value: "32", key: "bit256" }],
devicePSKBitCount: state.privateKeyBitCount,
hide: !state.adminKeyVisible,