Scrawl-canvas v8 - DOM test 017

Test purpose

In a React-like framework environment, it is possible for a Scrawl-canvas stack or canvas artefact to be refreshed, replaced or deleted from the DOM because of activity happening in other parts of the page.

Scrawl-canvas offers two functions - getStack and getCanvas - to find and register stack and canvas elements created dynamically after page load completes. They must do this work mindful of the need to not pollute the SC library with orphaned or duplicate objects - failure to manage this leads to memory leaks.

• Create a basic page with parent elements which can accept a dynamically created Scrawl-canvas stack or element.
• Generate a <canvas> element, alongside SC objects to populate it. Add it to the page, and use getCanvas to capture its data in the SC library.
• Add a button to allow tester to re-run the function (like a React useEffect hook) that captures the canvas data.
• Add a button to allow tester to regenerate the <canvas> element (like a React re-render), which in turn runs the getCanvas function.
• Generate a <div> Scrawl-canvas stack element, with children, alongside SC objects (Element, Canvas) to populate it. Add it to the page, and use getStack (and getCanvas) to capture its data in the SC library.
• Add a button to allow tester to re-run the function (like a React useEffect hook) that captures the stack (and canvas) data.
• Add a button to allow tester to regenerate the <div> element and its child elements (like a React re-render), which in turn runs the getStack function.
• Check that at all times the library holds correct details to the current stack and canvases
• Check that objects are correctly removed from the library when their associated elements are removed from the DOM
• Check that at no time does Scrawl-canvas generate additional objects in the library (memory leak)

Touch test: not required for this test

Annotated code