OpenNoodl/dev-docs/tasks/phase-3-editor-ux-overhaul/TASK-009-monaco-replacement/TESTING-GUIDE.md

TASK-009 Testing Guide: JavaScriptEditor

✅ Integration Complete!

The JavaScriptEditor is now integrated with a feature flag. You can test it immediately!

---

How to Enable the New Editor

Option 1: Browser DevTools Console

1. Run the editor: npm run dev
2. Open DevTools (Cmd+Option+I)
3. In the console, type:

   localStorage.setItem('use-javascript-editor', 'true');
   

4. Refresh the editor (Cmd+R)

Option 2: Electron DevTools

1. Start the editor
2. View → Toggle Developer Tools
3. Console tab
4. Same command as above

---

Testing Checklist

Test 1: Expression Node

1. ✅ Create/Open Expression node (e.g., in a Number node property)
2. ✅ Check console - Should see: 🔥 Using NEW JavaScriptEditor for: javascript
3. ✅ Code loads - Your expression appears correctly (e.g., a + b)
4. ✅ Edit code - Type a valid expression
5. ✅ See validation - Status shows "✓ Valid"
6. ✅ Try invalid code - Type a + + b
7. ✅ See error - Error panel appears with helpful message
8. ✅ Save - Click Save button or Cmd+S
9. ✅ Close editor - Close the popout
10. ✅ Reopen - Code is still there!
11. ✅ Check connections - Input/output connections intact

Test 2: Function Node

1. ✅ Create/Open Function node
2. ✅ Console shows: 🔥 Using NEW JavaScriptEditor for: javascript
3. ✅ Code loads - Function body appears
4. ✅ Edit - Modify the function code
5. ✅ Validation - Try valid/invalid syntax
6. ✅ Format - Click Format button
7. ✅ Save and reopen - Code persists
8. ✅ Connections intact

Test 3: Script Node

1. ✅ Create/Open Script node
2. ✅ Console shows: 🔥 Using NEW JavaScriptEditor for: typescript
3. ✅ Code loads
4. ✅ Edit and save
5. ✅ Code persists
6. ✅ Connections intact

---

What to Look For

✅ Good Signs

• Editor opens instantly (no Monaco lag)
• Code appears correctly
• You can type smoothly
• Format button works
• Save button works
• Cmd+S saves
• Error messages are helpful
• No console errors (except the 🔥 message)

⚠️ Warning Signs

• Code doesn't load
• Code gets corrupted
• Connections disappear
• Can't save
• Console errors
• Editor won't open

---

If Something Goes Wrong

Instant Rollback

In DevTools Console:

localStorage.setItem('use-javascript-editor', 'false');

Then refresh - Back to Monaco!

Your code is NEVER at risk because:

• Same storage format (string)
• Same parameter name ('code')
• No data transformation
• Instant rollback available

---

Debugging

Check What's Enabled

localStorage.getItem('use-javascript-editor');
// Returns: 'true' or 'false' or null

Check Current Code Value

When a node is selected:

// In console
NodeGraphEditor.instance.getSelectedNode().getParameter('code');

Clear Flag

localStorage.removeItem('use-javascript-editor');

---

Known Differences from Monaco

What's Missing (By Design)

• ❌ Syntax highlighting (just monospace font)
• ❌ Autocomplete (type manually)
• ❌ Live error checking (validates on blur/save)

What's Better

• ✅ Actually works in Electron!
• ✅ No web worker errors
• ✅ Opens instantly
• ✅ Simple and reliable
• ✅ Clear error messages

---

Reporting Issues

If You Find a Bug

Document:

1. What node type? (Expression/Function/Script)
2. What happened?
3. What did you expect?
4. Can you reproduce it?
5. Console errors?

Then:

• Toggle flag back to false
• Note the issue
• We'll fix it!

---

Next Steps After Testing

If It Works Well

1. Keep using it!
2. Test with more complex code
3. Test with multiple projects
4. Report any issues you find

When Ready to Make Default

1. Remove feature flag check
2. Make JavaScriptEditor the default
3. Remove Monaco code (if unused elsewhere)
4. Update documentation

---

Current Status

• JavaScriptEditor component built
• Integration with CodeEditorType complete
• Feature flag enabled
• ← YOU ARE HERE: Testing phase
• Fix any issues found
• Make default after testing
• Remove Monaco dependencies

---

Quick Command Reference

// Enable new editor
localStorage.setItem('use-javascript-editor', 'true');

// Disable new editor (rollback)
localStorage.setItem('use-javascript-editor', 'false');

// Check status
localStorage.getItem('use-javascript-editor');

// Clear (uses default = Monaco)
localStorage.removeItem('use-javascript-editor');

---

Ready to test! Enable the flag and open an Expression node. You should see the new editor! 🎉