-
+
Change Output Priority?
- Changing the output priority may disconnect DYA Studio from your keyboard.
+ Changing the output priority may disconnect DYA Studio from
+ your keyboard.
You will need to reconnect manually after the change.
diff --git a/src/pages/BatteryPage.tsx b/src/pages/BatteryPage.tsx
index 9ab2d04..b6b7a9d 100644
--- a/src/pages/BatteryPage.tsx
+++ b/src/pages/BatteryPage.tsx
@@ -22,9 +22,12 @@ export function BatteryPage() {
});
// Format last updated time
- const lastUpdated = currentLevels.length > 0
- ? new Date(Math.max(...currentLevels.map(d => d.timestamp)) * 1000).toLocaleTimeString()
- : "--:--";
+ const lastUpdated =
+ currentLevels.length > 0
+ ? new Date(
+ Math.max(...currentLevels.map((d) => d.timestamp)) * 1000,
+ ).toLocaleTimeString()
+ : "--:--";
// Device colors for chart
const deviceColors = [
@@ -57,7 +60,10 @@ export function BatteryPage() {
className="btn-ghost flex items-center gap-2"
aria-label="Refresh battery history"
>
-
+
Refresh
@@ -116,7 +122,7 @@ export function BatteryPage() {
Battery History
-
+
{isLoading && devices.length === 0 ? (
@@ -126,19 +132,24 @@ export function BatteryPage() {
) : devices.length === 0 ? (
- No battery history available. Connect keyboard to view battery history.
+ No battery history available. Connect keyboard to view battery
+ history.
) : (
-
+
)}
{/* Info Box */}
- Battery history is recorded on the keyboard and shows data from all connected devices.
- The timestamp resets when the keyboard restarts, indicated by dashed vertical lines in the chart.
+ Battery history is recorded on the keyboard and shows data from all
+ connected devices. The timestamp resets when the keyboard restarts,
+ indicated by dashed vertical lines in the chart.
diff --git a/src/pages/HealthCheckPage.tsx b/src/pages/HealthCheckPage.tsx
index 4a76c6e..503f0ed 100644
--- a/src/pages/HealthCheckPage.tsx
+++ b/src/pages/HealthCheckPage.tsx
@@ -103,8 +103,8 @@ export function HealthCheckPage() {
item.status === "ok"
? "text-[var(--color-neon)]"
: item.status === "error"
- ? "text-red-500"
- : "text-[var(--color-text-muted)]"
+ ? "text-red-500"
+ : "text-[var(--color-text-muted)]"
}`}
>
{item.status}
diff --git a/src/pages/__tests__/BLEConnectionsPage.test.tsx b/src/pages/__tests__/BLEConnectionsPage.test.tsx
index c9e47e4..3fdba97 100644
--- a/src/pages/__tests__/BLEConnectionsPage.test.tsx
+++ b/src/pages/__tests__/BLEConnectionsPage.test.tsx
@@ -175,14 +175,18 @@ describe("BLEConnectionsPage", () => {
it("should show refresh button when profiles exist", () => {
renderComponent({ isConnected: true }, { profiles: mockProfiles });
- const refreshButtons = screen.getAllByRole("button", { name: /refresh/i });
+ const refreshButtons = screen.getAllByRole("button", {
+ name: /refresh/i,
+ });
// Should have two refresh buttons: one for output priority and one for profiles
expect(refreshButtons.length).toBeGreaterThanOrEqual(1);
});
it("should not show refresh button emoji", () => {
renderComponent({ isConnected: true }, { profiles: mockProfiles });
- const refreshButtons = screen.getAllByRole("button", { name: /refresh/i });
+ const refreshButtons = screen.getAllByRole("button", {
+ name: /refresh/i,
+ });
// Check that none of the refresh buttons contain emoji
refreshButtons.forEach((button) => {
expect(button.textContent).not.toContain("🔄");
@@ -283,7 +287,9 @@ describe("BLEConnectionsPage", () => {
{ profiles: mockProfiles, loadProfiles: mockLoadProfiles },
);
- const refreshButton = screen.getByRole("button", { name: "Refresh profiles" });
+ const refreshButton = screen.getByRole("button", {
+ name: "Refresh profiles",
+ });
fireEvent.click(refreshButton);
await waitFor(() => {
@@ -395,12 +401,14 @@ describe("BLEConnectionsPage", () => {
const unpairButton = screen.getAllByRole("button", {
name: /unpair/i,
})[0];
- const refreshButtons = screen.getAllByRole("button", { name: /refresh/i });
+ const refreshButtons = screen.getAllByRole("button", {
+ name: /refresh/i,
+ });
expect(switchButton).toBeDisabled();
expect(unpairButton).toBeDisabled();
// All refresh buttons should be disabled when loading
- refreshButtons.forEach(button => {
+ refreshButtons.forEach((button) => {
expect(button).toBeDisabled();
});
});
diff --git a/src/pages/__tests__/BatteryPage.test.tsx b/src/pages/__tests__/BatteryPage.test.tsx
index df9806e..bf16220 100644
--- a/src/pages/__tests__/BatteryPage.test.tsx
+++ b/src/pages/__tests__/BatteryPage.test.tsx
@@ -8,7 +8,9 @@ import { useBatteryHistory } from "../../hooks/useBatteryHistory";
// Mock the useBatteryHistory hook
jest.mock("../../hooks/useBatteryHistory");
-const mockUseBatteryHistory = useBatteryHistory as jest.MockedFunction
;
+const mockUseBatteryHistory = useBatteryHistory as jest.MockedFunction<
+ typeof useBatteryHistory
+>;
describe("BatteryPage", () => {
beforeEach(() => {
@@ -27,7 +29,9 @@ describe("BatteryPage", () => {
render();
expect(screen.getByText("Battery Status")).toBeInTheDocument();
- expect(screen.getByText("Monitor battery levels and history")).toBeInTheDocument();
+ expect(
+ screen.getByText("Monitor battery levels and history"),
+ ).toBeInTheDocument();
});
it("should show placeholder when no devices are connected", () => {
@@ -106,7 +110,7 @@ describe("BatteryPage", () => {
// Check that device names appear (may appear multiple times - in cards and charts)
expect(screen.getAllByText("Central").length).toBeGreaterThan(0);
expect(screen.getAllByText("Peripheral 1").length).toBeGreaterThan(0);
-
+
// Check battery percentages
expect(screen.getByText("80%")).toBeInTheDocument();
expect(screen.getByText("70%")).toBeInTheDocument();
@@ -114,7 +118,7 @@ describe("BatteryPage", () => {
it("should have refresh button", () => {
const mockLoadBatteryHistory = jest.fn();
-
+
mockUseBatteryHistory.mockReturnValue({
devices: [],
isLoading: false,
@@ -141,10 +145,10 @@ describe("BatteryPage", () => {
render();
expect(
- screen.getByText(/Battery history is recorded on the keyboard/i)
+ screen.getByText(/Battery history is recorded on the keyboard/i),
).toBeInTheDocument();
expect(
- screen.getByText(/timestamp resets when the keyboard restarts/i)
+ screen.getByText(/timestamp resets when the keyboard restarts/i),
).toBeInTheDocument();
});
});
diff --git a/src/pages/__tests__/KeymapPage.test.tsx b/src/pages/__tests__/KeymapPage.test.tsx
index 1738e4b..5478dfe 100644
--- a/src/pages/__tests__/KeymapPage.test.tsx
+++ b/src/pages/__tests__/KeymapPage.test.tsx
@@ -99,9 +99,14 @@ describe("KeymapPage", () => {
setBinding: jest.fn().mockResolvedValue(true),
resetBinding: jest.fn().mockResolvedValue(true),
moveLayer: jest.fn().mockResolvedValue(true),
- addLayer: jest.fn().mockResolvedValue({ index: 0, layer: { id: 0, name: "New", bindings: [] } }),
+ addLayer: jest.fn().mockResolvedValue({
+ index: 0,
+ layer: { id: 0, name: "New", bindings: [] },
+ }),
removeLayer: jest.fn().mockResolvedValue(true),
- restoreLayer: jest.fn().mockResolvedValue({ id: 0, name: "Restored", bindings: [] }),
+ restoreLayer: jest
+ .fn()
+ .mockResolvedValue({ id: 0, name: "Restored", bindings: [] }),
availableLayers: 4,
removedLayerIds: [],
saveChanges: jest.fn().mockResolvedValue(true),
@@ -133,7 +138,7 @@ describe("KeymapPage", () => {
-
+ ,
);
};
@@ -142,14 +147,14 @@ describe("KeymapPage", () => {
renderComponent();
expect(screen.getByText("Keymap")).toBeInTheDocument();
expect(
- screen.getByText("Configure key bindings and layers")
+ screen.getByText("Configure key bindings and layers"),
).toBeInTheDocument();
});
it("should show connect message when not connected", () => {
renderComponent();
expect(
- screen.getByText("Connect your keyboard to edit keymaps")
+ screen.getByText("Connect your keyboard to edit keymaps"),
).toBeInTheDocument();
});
@@ -161,10 +166,7 @@ describe("KeymapPage", () => {
describe("Connected State - Loading", () => {
it("should show loading state", () => {
- renderComponent(
- { isConnected: true },
- { isLoading: true, keymap: null }
- );
+ renderComponent({ isConnected: true }, { isLoading: true, keymap: null });
expect(screen.getByText("Loading keymap data...")).toBeInTheDocument();
});
});
@@ -173,7 +175,11 @@ describe("KeymapPage", () => {
it("should show error message", () => {
renderComponent(
{ isConnected: true },
- { error: "Failed to load keymap", keymap: mockKeymap, physicalLayouts: mockPhysicalLayouts }
+ {
+ error: "Failed to load keymap",
+ keymap: mockKeymap,
+ physicalLayouts: mockPhysicalLayouts,
+ },
);
expect(screen.getByText("Failed to load keymap")).toBeInTheDocument();
});
@@ -187,7 +193,7 @@ describe("KeymapPage", () => {
keymap: mockKeymap,
physicalLayouts: mockPhysicalLayouts,
behaviors: mockBehaviors,
- }
+ },
);
expect(screen.getByText("Base")).toBeInTheDocument();
@@ -202,7 +208,7 @@ describe("KeymapPage", () => {
physicalLayouts: mockPhysicalLayouts,
behaviors: mockBehaviors,
hasUnsavedChanges: true,
- }
+ },
);
expect(screen.getByText("● Unsaved changes")).toBeInTheDocument();
@@ -215,7 +221,7 @@ describe("KeymapPage", () => {
keymap: mockKeymap,
physicalLayouts: mockPhysicalLayouts,
behaviors: mockBehaviors,
- }
+ },
);
expect(screen.getByText("Save")).toBeInTheDocument();
@@ -230,7 +236,7 @@ describe("KeymapPage", () => {
physicalLayouts: mockPhysicalLayouts,
behaviors: mockBehaviors,
hasUnsavedChanges: false,
- }
+ },
);
const saveButton = screen.getByText("Save").closest("button");
@@ -245,7 +251,7 @@ describe("KeymapPage", () => {
physicalLayouts: mockPhysicalLayouts,
behaviors: mockBehaviors,
hasUnsavedChanges: true,
- }
+ },
);
const saveButton = screen.getByText("Save").closest("button");
@@ -262,7 +268,7 @@ describe("KeymapPage", () => {
keymap: mockKeymap,
physicalLayouts: mockPhysicalLayouts,
behaviors: mockBehaviors,
- }
+ },
);
const lowerTab = screen.getByText("Lower");
@@ -270,7 +276,7 @@ describe("KeymapPage", () => {
// The Lower tab should now have the active styling
expect(lowerTab.closest("button")).toHaveClass(
- "bg-[var(--color-electric)]/20"
+ "bg-[var(--color-electric)]/20",
);
});
});
@@ -283,11 +289,15 @@ describe("KeymapPage", () => {
keymap: mockKeymap,
physicalLayouts: mockPhysicalLayouts,
behaviors: mockBehaviors,
- }
+ },
);
- expect(screen.getByLabelText("Move layer up (higher priority)")).toBeInTheDocument();
- expect(screen.getByLabelText("Move layer down (lower priority)")).toBeInTheDocument();
+ expect(
+ screen.getByLabelText("Move layer up (higher priority)"),
+ ).toBeInTheDocument();
+ expect(
+ screen.getByLabelText("Move layer down (lower priority)"),
+ ).toBeInTheDocument();
});
it("should disable move up button for first layer", () => {
@@ -297,10 +307,12 @@ describe("KeymapPage", () => {
keymap: mockKeymap,
physicalLayouts: mockPhysicalLayouts,
behaviors: mockBehaviors,
- }
+ },
);
- const moveUpButton = screen.getByLabelText("Move layer up (higher priority)");
+ const moveUpButton = screen.getByLabelText(
+ "Move layer up (higher priority)",
+ );
expect(moveUpButton).toBeDisabled();
});
@@ -314,10 +326,12 @@ describe("KeymapPage", () => {
physicalLayouts: mockPhysicalLayouts,
behaviors: mockBehaviors,
moveLayer: mockMoveLayer,
- }
+ },
);
- const moveDownButton = screen.getByLabelText("Move layer down (lower priority)");
+ const moveDownButton = screen.getByLabelText(
+ "Move layer down (lower priority)",
+ );
await user.click(moveDownButton);
expect(mockMoveLayer).toHaveBeenCalledWith(0, 1);
@@ -330,11 +344,11 @@ describe("KeymapPage", () => {
{ isConnected: true },
{
unlockRequired: false,
- }
+ },
);
expect(
- screen.queryByText("Keyboard Unlock Required")
+ screen.queryByText("Keyboard Unlock Required"),
).not.toBeInTheDocument();
});
@@ -350,11 +364,11 @@ describe("KeymapPage", () => {
keymap: mockKeymap,
physicalLayouts: mockPhysicalLayouts,
behaviors: mockBehaviors,
- }
+ },
);
expect(
- screen.getByText(/Click on a key to modify its binding/)
+ screen.getByText(/Click on a key to modify its binding/),
).toBeInTheDocument();
});
@@ -362,8 +376,8 @@ describe("KeymapPage", () => {
renderComponent();
expect(
screen.getByText(
- "Connect your keyboard to edit keymaps. Click on a key to modify its binding."
- )
+ "Connect your keyboard to edit keymaps. Click on a key to modify its binding.",
+ ),
).toBeInTheDocument();
});
});
diff --git a/src/pages/__tests__/TrackballPage.test.tsx b/src/pages/__tests__/TrackballPage.test.tsx
index e237a08..00315f2 100644
--- a/src/pages/__tests__/TrackballPage.test.tsx
+++ b/src/pages/__tests__/TrackballPage.test.tsx
@@ -9,7 +9,10 @@ import { useRuntimeInputProcessor } from "../../hooks/useRuntimeInputProcessor";
// Mock the useRuntimeInputProcessor hook
jest.mock("../../hooks/useRuntimeInputProcessor");
-const mockUseRuntimeInputProcessor = useRuntimeInputProcessor as jest.MockedFunction;
+const mockUseRuntimeInputProcessor =
+ useRuntimeInputProcessor as jest.MockedFunction<
+ typeof useRuntimeInputProcessor
+ >;
describe("TrackballPage", () => {
beforeEach(() => {
@@ -29,7 +32,11 @@ describe("TrackballPage", () => {
render();
expect(screen.getByText("Trackball Settings")).toBeInTheDocument();
- expect(screen.getByText("Adjust sensitivity and behavior via runtime input processor")).toBeInTheDocument();
+ expect(
+ screen.getByText(
+ "Adjust sensitivity and behavior via runtime input processor",
+ ),
+ ).toBeInTheDocument();
});
it("should show loading state when initially loading", () => {
@@ -44,7 +51,9 @@ describe("TrackballPage", () => {
render();
- expect(screen.getByText("Loading trackball settings...")).toBeInTheDocument();
+ expect(
+ screen.getByText("Loading trackball settings..."),
+ ).toBeInTheDocument();
});
it("should display error message", () => {
@@ -75,7 +84,9 @@ describe("TrackballPage", () => {
render();
- expect(screen.getByText(/No runtime input processor found/)).toBeInTheDocument();
+ expect(
+ screen.getByText(/No runtime input processor found/),
+ ).toBeInTheDocument();
});
it("should display processor information when loaded", () => {
@@ -177,7 +188,9 @@ describe("TrackballPage", () => {
// Click on 2.0x speed button in the ButtonListSelector
const speedButtons = screen.getAllByText("2.0x");
// The button is the one in the ButtonListSelector (not the display value)
- const speedButton = speedButtons.find(el => el.tagName === 'SPAN' && el.parentElement?.tagName === 'BUTTON');
+ const speedButton = speedButtons.find(
+ (el) => el.tagName === "SPAN" && el.parentElement?.tagName === "BUTTON",
+ );
if (speedButton && speedButton.parentElement) {
await user.click(speedButton.parentElement);
}
@@ -188,7 +201,7 @@ describe("TrackballPage", () => {
});
expect(mockSetScaling).toHaveBeenCalledWith("trackpad", 200, 100);
-
+
jest.useRealTimers();
});
@@ -218,7 +231,9 @@ describe("TrackballPage", () => {
// Click on 90° rotation button in the ButtonListSelector
const rotationButtons = screen.getAllByText("90°");
// The button is the one in the ButtonListSelector (not the display value)
- const rotationButton = rotationButtons.find(el => el.tagName === 'SPAN' && el.parentElement?.tagName === 'BUTTON');
+ const rotationButton = rotationButtons.find(
+ (el) => el.tagName === "SPAN" && el.parentElement?.tagName === "BUTTON",
+ );
if (rotationButton && rotationButton.parentElement) {
await user.click(rotationButton.parentElement);
}
@@ -229,7 +244,7 @@ describe("TrackballPage", () => {
});
expect(mockSetRotation).toHaveBeenCalledWith("trackpad", 90);
-
+
jest.useRealTimers();
});
@@ -278,6 +293,8 @@ describe("TrackballPage", () => {
render();
- expect(screen.getByText(/Runtime input processor allows you to adjust/)).toBeInTheDocument();
+ expect(
+ screen.getByText(/Runtime input processor allows you to adjust/),
+ ).toBeInTheDocument();
});
});