jupyter-notebook-testing

The jupyter-notebook-testing skill provides a streamlined, browser-native development environment for Adobe Edge Delivery Services (EDS). By leveraging the ipynb-viewer block, developers can create, manage, and execute Jupyter notebooks directly within their EDS-powered sites. This approach replaces heavy build pipelines with live, interactive experimentation, allowing for rapid iteration on block decoration, styling, and DOM manipulation without leaving the browser environment. It is an ideal tool for front-end engineers, block developers, and technical content creators who require a fast feedback loop for component validation.

• Browser-native execution environment using ipynb-viewer for real-time EDS block rendering.

• Advanced helper functions including testBlock() for DOM decoration and showPreview() for overlay-based visual testing.

• Native support for ES6 imports, allowing modular testing of helper functions and block logic from external scripts.

• Integrated responsive preview system enabling toggling between mobile, tablet, and desktop views within a full-screen overlay.

• Minimal DOM structure adherence to ensure blocks are decorated according to official EDS patterns.

• Capability to create executable documentation that allows users to interact with block demonstrations live.

• Utilize scripts/ipynb-helpers.js for consistent utility access across all notebook cells.

• Designed for environments with minimal dependencies; the tool is fully compatible with vanilla JavaScript workflows.

• Useful for debugging CSS, troubleshooting decoration errors, and testing block responsiveness across various device breakpoints.

• When building notebooks, ensure each cell is self-contained by importing required helpers locally.

• Overlay previews avoid common browser limitations like popup blockers, providing a clean, persistent testing interface.

• The system performs best when testing blocks that follow the standard EDS decoration lifecycle and block structure.

• Compatible with the larger webcomponents-with-eds architecture, facilitating quick cloning and adaptation of existing test templates.