From a8f0881e5305523c7f2cc694269a7fb4cfbe6f1d Mon Sep 17 00:00:00 2001
From: Joey Yakimowich-Payne <jyapayne@pm.me>
Date: Tue, 21 Apr 2026 18:35:21 -0600
Subject: [PATCH] test(chess/ui): add mode toggle round-trip test

---
 ...stomModifierEditor.mode-roundtrip.test.tsx | 69 +++++++++++++++++++
 1 file changed, 69 insertions(+)
 create mode 100644 packages/chess/src/ui/CustomModifierEditor.mode-roundtrip.test.tsx

diff --git a/packages/chess/src/ui/CustomModifierEditor.mode-roundtrip.test.tsx b/packages/chess/src/ui/CustomModifierEditor.mode-roundtrip.test.tsx
new file mode 100644
index 0000000..05da75e
--- /dev/null
+++ b/packages/chess/src/ui/CustomModifierEditor.mode-roundtrip.test.tsx
@@ -0,0 +1,69 @@
+/**
+ * @vitest-environment happy-dom
+ */
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { renderToStaticMarkup } from 'react-dom/server';
+import React from 'react';
+import { CustomModifierEditor } from './CustomModifierEditor.js';
+
+// Mock localStorage since we're in a Node environment for SSR tests
+const localStorageMock = (() => {
+  let store: Record<string, string> = {};
+  return {
+    getItem: vi.fn((key: string) => store[key] ?? null),
+    setItem: vi.fn((key: string, value: string) => {
+      store[key] = value.toString();
+    }),
+    clear: vi.fn(() => {
+      store = {};
+    }),
+    removeItem: vi.fn((key: string) => {
+      delete store[key];
+    })
+  };
+})();
+
+Object.defineProperty(global, 'localStorage', {
+  value: localStorageMock
+});
+
+describe('CustomModifierEditor mode round-trip', () => {
+  const LOCAL_STORAGE_KEY = 'houserules:custom-modifier-editor-mode:v1';
+  
+  beforeEach(() => {
+    localStorage.clear();
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    localStorage.clear();
+  });
+
+  it('Form -> Visual -> Form roundtrip preserves descriptor byte-for-byte', () => {
+    // Start in form mode
+    localStorage.setItem(LOCAL_STORAGE_KEY, 'form');
+    let html = renderToStaticMarkup(<CustomModifierEditor isOpen={true} onClose={() => {}} />);
+    expect(html).toContain('data-testid="custom-modifier-editor-mode-form" aria-pressed="true"');
+    
+    // Toggle to visual
+    localStorage.setItem(LOCAL_STORAGE_KEY, 'visual');
+    html = renderToStaticMarkup(<CustomModifierEditor isOpen={true} onClose={() => {}} />);
+    expect(html).toContain('data-testid="custom-modifier-editor-mode-visual" aria-pressed="true"');
+    
+    // Toggle to form
+    localStorage.setItem(LOCAL_STORAGE_KEY, 'form');
+    html = renderToStaticMarkup(<CustomModifierEditor isOpen={true} onClose={() => {}} />);
+    expect(html).toContain('data-testid="custom-modifier-editor-mode-form" aria-pressed="true"');
+    
+    // 5 toggles
+    for (let i = 0; i < 5; i++) {
+      localStorage.setItem(LOCAL_STORAGE_KEY, 'visual');
+      html = renderToStaticMarkup(<CustomModifierEditor isOpen={true} onClose={() => {}} />);
+      expect(html).toContain('data-testid="custom-modifier-editor-mode-visual" aria-pressed="true"');
+      
+      localStorage.setItem(LOCAL_STORAGE_KEY, 'form');
+      html = renderToStaticMarkup(<CustomModifierEditor isOpen={true} onClose={() => {}} />);
+      expect(html).toContain('data-testid="custom-modifier-editor-mode-form" aria-pressed="true"');
+    }
+  });
+});