This PR adds functionality that captures user events and creates a label made up of the event's relevant component, event type and handler function name. This label is saved in the DataStore, where it will be retrieved as the label for the next snapshot when MutationObserver events trigger snapshot capture.
Testing
To test, make sure that all scripts are still running properly. All automated tests should pass. For manual verification on an actual application in the browser, run this version on a running Svelte app. User interactions (e.g., adding or deleting a feedback item) should produce all previous output (three logs for each interaction: component instances, component representations, and "capture snapshot" string) but now the "capture snapshot" string should also display the correct label for the given snapshot.
Overview of Changes
A snapshotLabel property is added to the DataStore class with associated getter and setter functions.
In the Router class, a new event listener is added for SvelteAddEventListener events, along with a new handler function that takes the details of the newly added event listener and creates a new listener for those specific events that calls a handler in the SvelteEventParser class.
The SvelteEventParser class has a new function to handle user events by parsing them into labels and sending them to the DataStore for storage. A helper function gets the component tagname from a component's filename, which is carried in the __svelte_meta__ property of DOM nodes included in the event listener details.
To facilitate automated testing, some new mock app components have been added that include button and input fields and related handlers, and test have been added that mock user interactions and check for appropriate labels being stored.
Finally, a new mock app has been added that included three levels of descendents, and related data included for testing.
This PR adds functionality that captures user events and creates a label made up of the event's relevant component, event type and handler function name. This label is saved in the DataStore, where it will be retrieved as the label for the next snapshot when MutationObserver events trigger snapshot capture.
Testing To test, make sure that all scripts are still running properly. All automated tests should pass. For manual verification on an actual application in the browser, run this version on a running Svelte app. User interactions (e.g., adding or deleting a feedback item) should produce all previous output (three logs for each interaction: component instances, component representations, and "capture snapshot" string) but now the "capture snapshot" string should also display the correct label for the given snapshot.
Overview of Changes A snapshotLabel property is added to the DataStore class with associated getter and setter functions.
In the Router class, a new event listener is added for SvelteAddEventListener events, along with a new handler function that takes the details of the newly added event listener and creates a new listener for those specific events that calls a handler in the SvelteEventParser class.
The SvelteEventParser class has a new function to handle user events by parsing them into labels and sending them to the DataStore for storage. A helper function gets the component tagname from a component's filename, which is carried in the __svelte_meta__ property of DOM nodes included in the event listener details.
To facilitate automated testing, some new mock app components have been added that include button and input fields and related handlers, and test have been added that mock user interactions and check for appropriate labels being stored.
Finally, a new mock app has been added that included three levels of descendents, and related data included for testing.