🧪 Notebook Component Split Test #

This page tests the refactored NotebookViewer components to ensure all functionality works correctly after the split.

Test Notebook #

Test Markdown Cell #

This is a markdown cell to test the split components.

• Cell detection should work
• Headers should be added automatically
• Navigation should work with keyboard
• State should persist properly

python

# Python test code
import numpy as np
import pandas as pd

# Create test data
data = np.random.randn(100, 3)
df = pd.DataFrame(data, columns=['A', 'B', 'C'])

print("DataFrame shape:", df.shape)
print(df.head())

text

DataFrame shape: (100, 3)
     A         B         C
0  1.234    -0.567     0.890
1 -0.123     1.456    -0.789
2  0.456    -1.234     0.567
3 -0.789     0.123     1.234
4  1.567    -0.890     0.123

python

# Another test code cell
import matplotlib.pyplot as plt

# Create a simple plot
plt.figure(figsize=(8, 6))
plt.plot([1, 2, 3, 4], [1, 4, 2, 3])
plt.title('Test Plot')
plt.xlabel('X axis')
plt.ylabel('Y axis')
plt.show()

This is a raw cell for testing. It should be detected and handled correctly.

Raw cells don’t execute - they’re just text.

Manual Test Instructions #

1. Navigation Test: Use arrow keys or j/k to navigate between cells
2. Collapse Test: Click cell headers or toggle buttons to collapse/expand
3. Copy Test: Use copy buttons or Ctrl+Shift+C to copy cell content
4. Keyboard Shortcuts: Try Ctrl+Shift+E to expand/collapse all
5. Accessibility: Test with screen readers and keyboard-only navigation

Expected Results #

If the component split worked correctly, you should see:

• ✅ Cell headers automatically added
• ✅ Copy buttons in code cells
• ✅ Toggle buttons for collapsible cells
• ✅ Keyboard navigation working
• ✅ ARIA attributes properly set
• ✅ State persistence (collapsed cells stay collapsed on refresh)