Skip to content

TESTING.md

Latest commit

 

History

History
116 lines (86 loc) · 3.38 KB

TESTING.md

File metadata and controls

116 lines (86 loc) · 3.38 KB
Raw

Testing the FigmaToBabylonJS Plugin

This document explains how to test the plugin outputs using the included HTML test files.

Test Files

The src/ directory contains two self-contained HTML test files for manually testing exported JSON files:

1. fullscreenADTTest.html

Tests fullscreen Advanced Dynamic Texture (ADT) exports.

Purpose: Load and render a complete BabylonJS ADT JSON file that represents an entire UI screen.

Usage:

  1. Export a frame from Figma using "Export Fullscreen ADT"
  2. Place the exported JSON file in the src/ directory
  3. Update line 58 in the file: let fileName="your-export.json";
  4. Open fullscreenADTTest.html in a web browser
  5. The UI should render over a 3D scene with a ground plane

What it tests:

  • Full ADT serialization/deserialization
  • Root container setup
  • Width and height properties
  • Overall layout and positioning

2. controlTest.html

Tests individual control exports.

Purpose: Load and render a single BabylonJS GUI control JSON file.

Usage:

  1. Export a component/frame from Figma using "Export Control Only"
  2. Place the exported JSON file in the src/ directory
  3. Update line 25 in the file: let fileName = "your-control.json";
  4. Open controlTest.html in a web browser
  5. The control should render in the center of the screen

What it tests:

  • Single control parsing
  • Control.Parse() functionality
  • Positioning and sizing of isolated controls
  • Control hierarchy and children

Running Tests

Prerequisites

  • A modern web browser (Chrome, Firefox, Safari, Edge)
  • A local web server (to avoid CORS issues)

Using a Local Server

Option 1: Python

cd src
python3 -m http.server 8000
# Then open http://localhost:8000/fullscreenADTTest.html

Option 2: Node.js (http-server)

npm install -g http-server
cd src
http-server
# Then open http://localhost:8080/fullscreenADTTest.html

Option 3: VS Code Live Server

  1. Install the "Live Server" extension
  2. Right-click on the HTML file
  3. Select "Open with Live Server" OR Right click the .html file and select "Show Preview"

Using the BabylonJS Inspector

Both test files include commented-out code to enable the BabylonJS Inspector/Debugger:

scene.debugLayer.show({
    embedMode: true,
    overlay: false,
});

Uncomment this section to inspect:

  • GUI hierarchy
  • Control properties
  • Positioning and sizing
  • Scene objects and cameras

Test Workflow

  1. Design in Figma: Create or modify your UI design
  2. Export: Use the plugin to export as ADT or Control
  3. Test: Load the JSON in the appropriate test file
  4. Inspect: Use the BabylonJS Inspector to verify properties
  5. Iterate: Fix issues in Figma and re-export

Common Issues

JSON not loading

  • Cause: CORS policy blocking local file access
  • Solution: Use a local web server (see above)

Control not visible

  • Cause: Control is positioned outside the visible area
  • Solution: Check positioning in the Inspector or adjust camera

Textures/Images not loading

  • Cause: Image paths are relative
  • Solution: Ensure images are in the correct folder path (default: ./images/)

Automated Testing

⚠️ Note: These HTML files are for manual testing only. They are not integrated into any automated test framework.

Automated tests are planned for future releases to validate export correctness programmatically.