helixml / live-coding

Testing and Debugging

Testing Framework

The live-coding project currently doesn’t have a dedicated testing framework. This means that the codebase lacks formal unit tests and automated integration tests to verify functionality.

Debugging Techniques

  • Console Logging: The primary debugging technique is using console logs (console.log) to print out variable values, function arguments, and messages for monitoring code execution. The absence of a dedicated debugging environment makes this approach essential.
  • Browser Developer Tools: Chrome’s Developer Tools and Firefox’s Web Developer tools are heavily utilized for debugging. This includes:
    • Breakpoints: Setting breakpoints in the code to pause execution and inspect the state of variables.
    • Inspecting the DOM: Using the DOM inspector to examine HTML elements and their attributes.
    • Network Tab: Analyzing network requests and responses.
    • Console: Interacting with the JavaScript console for logging, evaluating expressions, and inspecting objects.

Best Practices for Writing and Running Tests

  • Manual Testing: Due to the lack of a testing framework, manual testing is the primary approach for ensuring correctness. This involves manually triggering different user interactions and verifying expected outcomes.
  • Use Assertions: Consider using console.assert() for basic assertions in the code, although this is not a substitute for a dedicated testing framework.
  • Focus on Core Functionality: Prioritize testing the core functionality of the live-coding components, ensuring that the main features are working correctly.
  • Maintain Documentation: Include inline comments or external documentation that explain the expected behavior of functions, components, and modules to facilitate manual testing and code understanding.

Example: Debugging a Code Issue

Assume you encounter an unexpected error while using the live coding editor. You suspect the issue stems from the highlightCode() function responsible for syntax highlighting.

  1. Console Logging: Place console.log statements inside highlightCode() to print out the input code, the highlighted code, and any intermediate values.
  2. Breakpoints: Set a breakpoint in highlightCode() using the browser’s developer tools.
  3. Inspect Variables: When the execution halts, examine the values of variables, such as the input code, the highlighted code, and any relevant variables used during highlighting.
  4. Network Tab: If the issue involves fetching external resources, use the network tab to inspect requests and responses related to code highlighting.

Conclusion

While a dedicated testing framework would enhance the live-coding project, the current reliance on manual testing, console logging, and browser developer tools enables debugging and quality assurance. By applying these techniques and prioritizing code quality, it’s possible to maintain a stable and functional live coding experience.