Updating script-canvas-tests.md with requested changes and nitpick fixes

The changes were comprised of:

1. Fixing formatting for SHA references.
2. Changing URLs to reference links.
3. Listifying entries and spelling out Script Canvas instead of "SC" acronyms.
4. Hiding reference images in a collapsable section to not take the user away from the flow of the document.
5. Fixing nitpicks regarding spacing between headers.
6. Giving a context to first image in "Creating a user function and calling its input/output from another graph" workflow.

Signed-off-by: Mateusz Szweda <[email protected]>

testing-guidance/workflow-tests/scripting/script-canvas-tests.md

@@ -21,15 +21,15 @@ Test guidance will sometimes note specific issues to watch for. The common issue
 * [O3DE Documentation: Script Canvas Editor Interface Guide](https://www.o3de.org/docs/user-guide/scripting/script-canvas/get-started/editor-interface/ntnt)  
 * [O3DE Documentation: User Functions](https://www.o3de.org/docs/user-guide/scripting/script-canvas/editor-reference/functions/)
 
-**Script Canvas (SC) Editor**: Editing tool separate from O3DE's Editor used to create and modify script canvas graph files.
+**Script Canvas Editor**: Editing tool separate from O3DE's Editor used to create and modify script canvas graph files.
 
-**SC Graph**: A collection of node objects that can be modified and saved to a file.
+**Script Canvas Graph**: A collection of node objects that can be modified and saved to a file.
 
-**SC Editor Basic Tools**: The 5 default tools opened and anchored to the main SC editor window; Node Palette, Variable Manager, Node Inspector, Minimap, Graph Validation.
+**Script Canvas Editor Basic Tools**: The 5 default tools opened and anchored to the main Script Canvas editor window; Node Palette, Variable Manager, Node Inspector, Minimap, Graph Validation.
 
-**SC Component**: A component that can be searched and attached to an entity in O3DE editor.
+**Script Canvas Component**: A component that can be searched and attached to an entity in O3DE editor.
 
-**User Function**: A type of SC graph that has 2 special nodes: Entrance & Exit nodelings. User Functions are intended to give users a way to generate re-usable graph logic similar to a function in a standard programming language. When a valid User Function graph is created and saved it will appear in the Node Inspector under the 'User Functions' category.
+**User Function**: A type of Script Canvas graph that has 2 special nodes: Entrance & Exit nodelings. User Functions are intended to give users a way to generate re-usable graph logic similar to a function in a standard programming language. When a valid User Function graph is created and saved it will appear in the Node Inspector under the 'User Functions' category.
 
 ### Area: Opening and configuring the Script Canvas Editor
 
@@ -47,19 +47,18 @@ Any project can be used, the Script Canvas gem and its gem dependencies are requ
 | Script Canvas window pane renders a script canvas graph | <ol><li>Create a new script in Script Canvas editor by multiple ways including:</li><ul><li>Tools menu File > New Script</li><li>Using Ctrl+N shortcut</li><li>By dragging a node from the Node Pallete into an empty graph window</li></ul></ul></li><li>Close the created script and save it when prompted.</li><li>Open the created script.</li><li>Create multiple new scripts in Script Canvas editor.<ol>                                                                                                                                                    | <ul><li>Modifying an existing file places am asterix in the graph's tab.</li><li>An asterix appears on the tab only if a change is made to the file.</li><li>User is always prompted to save a modified file when closing the tab.</li><li>Creating or opening multiple files generates multiple tabs in the main window.</li><li>Creating and having several graphs opened should not impact Script Canvas editor's performance.</li><li>A drop down menu for file selection appears when enough script canvas files are opened.</li></ul>                                             |
 | Script Canvas editor tools can be opened and configured  | <ol><li>Open each of the Script Canvas editor tools.</li><li>Click and try to drag every UI item of the opened tool.</li></ol>                                                     | <ul><li>Script Canvas tools render properly.</li><li>Tools do not become unresponsive after configuring them.</li><li>UI elements in each of the tools respond when clicked or dragged</li>                                                                                                                                                                   |
 | Using basic Script Canvas graph controls | <ol><li>Create a new script canvas graph file, add a few nodes and perform every action from:</li><ul><li>View menu</li><li>Edit Menu</li><li>File menu</li></ul></ul></li><li>Perform every control action located in Script Canvas graph window top left corner.</li></ol> | <ul><li>Every control action and action from Script Canvas menu bar perform corresponding actions.</li><li>Every control action and action from Script Canvas menu can be performed with associated keyboard shortcut.</li><li>Controls not responding or responding too slowly when used.</li><li>Controls gray out under appropriate circumstances.</li><li>Grayed out controls can not be interacted with</li><li>A helpful tooltip is generated and rendered properly for each control.</li><li>Tooltips do not go away prematurely.</li><li>Script Canvas graph renders properly after Pan/Zoom actions.</li></ul>                                                     
-| Opening a Script Canvas graph from older version of the engine            | <ol><li>Obtain a script canvas graph file from an earlier version of O3DE , put it into used project directory and open it with Script Canvas editor.</li><li>Following graph file [OldGraphTest.scriptcanvas](https://github.com/o3de/sig-content/raw/main/testing-guidance/workflow-tests/scripting/scripts/OldGraphTest.scriptcanvas) derived from Development (446de8a) build on 1/10 can be used for this test.</li></ol> | <ul><li>Graph from the older version of the engine is processed by Asset Processor without errors and can be opened with Script Canvas editor.</li><li>If [OldGraphTest.scriptcanvas](https://github.com/o3de/sig-content/raw/main/testing-guidance/workflow-tests/scripting/scripts/OldGraphTest.scriptcanvas) was used and assigned to entity upon entering the game mode/simulation mode a message reading _Old Graph test successful_ should appear in the console.</li> |
-| Opening a Script Canvas graph with deprecated nodes                   | <ol><li>Obtain a script canvas graph file with deprecated nodes, put it into used project directory and open it with Script Canvas editor.</li><li>Following graph file [ontick.scriptcanvas](https://github.com/o3de/sig-content/raw/main/testing-guidance/workflow-tests/scripting/scripts/ontick.scriptcanvas) derived from Development (446de8a) build on 1/10 can be used for this test.</li></ol> | <ul><li>Graph with deprecated nodes is processed by the Asset Processor with errors reminding the user of the deprecated classes but the graph can still be opened with Script Canvas editor.</li><li>When the graph with deprecated nodes is opened in Script Canvas editor it runs validation check on itself and informs the user that listed nodes were updated in order for the graph to work.</li><li>When the graph is saved with proposed updates it is no longer displayed as processed with errors in the Asset Processor.</li><li>If [ontick.scriptcanvas](https://github.com/o3de/sig-content/raw/main/testing-guidance/workflow-tests/scripting/scripts/ontick.scriptcanvas) was used, updated and assigned to entity upon entering the game mode/simulation mode a message reading _OnTick Event:The Sphere position did not change from previous position_ should appear in the console.</li> |
+| Opening a Script Canvas graph from older version of the engine            | <ol><li>Obtain a script canvas graph file from an earlier version of O3DE , put it into used project directory and open it with Script Canvas editor.</li><li>Following graph file [OldGraphTest.scriptcanvas](https://github.com/o3de/sig-content/raw/main/testing-guidance/workflow-tests/scripting/scripts/OldGraphTest.scriptcanvas) derived from o3de Development [446de8a](https://github.com/o3de/o3de/commit/446de8ac0fb3d5e803a7bf32f33fd04f50328de6) build can be used for this test.</li></ol> | <ul><li>Graph from the older version of the engine is processed by Asset Processor without errors and can be opened with Script Canvas editor.</li><li>If [OldGraphTest.scriptcanvas](https://github.com/o3de/sig-content/raw/main/testing-guidance/workflow-tests/scripting/scripts/OldGraphTest.scriptcanvas) was used and assigned to entity upon entering the game mode/simulation mode a message reading _Old Graph test successful_ should appear in the console.</li> |
+| Opening a Script Canvas graph with deprecated nodes                   | <ol><li>Obtain a script canvas graph file with deprecated nodes, put it into used project directory and open it with Script Canvas editor.</li><li>Following graph file [ontick.scriptcanvas](https://github.com/o3de/sig-content/raw/main/testing-guidance/workflow-tests/scripting/scripts/ontick.scriptcanvas) derived from o3de Development [446de8a](https://github.com/o3de/o3de/commit/446de8ac0fb3d5e803a7bf32f33fd04f50328de6) build can be used for this test.</li></ol> | <ul><li>Graph with deprecated nodes is processed by the Asset Processor with errors reminding the user of the deprecated classes but the graph can still be opened with Script Canvas editor.</li><li>When the graph with deprecated nodes is opened in Script Canvas editor it runs validation check on itself and informs the user that listed nodes were updated in order for the graph to work.</li><li>When the graph is saved with proposed updates it is no longer displayed as processed with errors in the Asset Processor.</li><li>If [ontick.scriptcanvas](https://github.com/o3de/sig-content/raw/main/testing-guidance/workflow-tests/scripting/scripts/ontick.scriptcanvas) was used, updated and assigned to entity upon entering the game mode/simulation mode a message reading _OnTick Event:The Sphere position did not change from previous position_ should appear in the console.</li> |
 | Using Command Line                   | <ol><li>Open the Command Line tool with tools menu and Ctrl+P shortcut.</li><li>Type **?** in the command line text bar.<li>Select a command.</li><li>Click the Enter key.</li><li>Type in working command directly into a text bar and click the Enter key.</li></ol> | <ul><li>Command Line Tool can be opened and input can be written into its text bar.</li><li>Commands can be searched for by typing **?** into the text bar.</li><li>Found commands can be entered and corresponding actions such as creating new nodes in Script Canvas graph are executed by the command.</li><li>  Commands can be manually typed into the text bar and executed.</li> |
-
 ---
 
 ### Area: Default Script Canvas Editor tools
 
 **Project Requirements** 
-SC editor opened with the 5 basic tools enabled.
+<p>Script Canvas editor opened with the complete list of tools which are:</li><ul><li>Node Palette</li><li>Node Inspector</li><li>Variable Manager</li><li>Minimap</li><li>Graph Validation</li><li>Debugging</li><li>Bookmarks</li><li>Command Line</li><li>Interpreter</li></ul>
 
 **Product:** 
-Responsive Script Canvas editor with all 5 basic tools enabled. No Asset Processor warnings about invalid data or files, no warnings or errors in the Console Log.
+Responsive Script Canvas editor with all its tools enabled. No Asset Processor warnings about invalid data or files, no warnings or errors in the Console Log.
 
 **Suggested Time Box:** 
 30 minutes
@@ -76,19 +75,25 @@ Responsive Script Canvas editor with all 5 basic tools enabled. No Asset Process
 | Using Edit Menu                  | <ol><li>Undo and redo various actions.</li><li>Manage nodes, groups, notes via Edit Menu by performing following actions:</li><ul><li>Cut</li><li>Copy</li><li>Paste</li><li>Duplicate</li><li>Delete</li></ul></ul></li><li>Take a screenshot of the graph.</li><li>Select all, inputs, outputs, connected, and clear selections.</li><li>Disable and enable selected nodes.</li><li>Align nodes in various directions.</li><li>Remove unused variables and nodes.</li><li>Use available keyboard shortcuts to perform above mentioned actions.</li></ol> | <ul><li> If nodes are not visually distorted.</li><li>Undoing or redoing actions does not cause an assert or errors to be printed in the console.</li><li> Copy-Pasted nodes do retain their modified properties.</li> |
 | Using View Menu                  | <ol><li>Zoom graph in and out.</li><li>Show selection:</li><ul><li>individual node</li><li>multiple connected nodes</li><li>group</li><li> notes</li><li>entire graph</li></ul></ul></li><li>Use "Go to" option to navigate to start and end of the chain (graph must have multiple nodes connected with each other).</li><li>Restore default layout of Script Canvas tool.</li><li>Use available keyboard shortcuts to actions mentioned above.</li></ol> | <ul><li>Show selection or show entire graph options are displaying graph accurately.</li><li>Default layout can be restored.</li> |
 | Using Tools Menu                  | <ol><li>Open and close tools available in Tools Menu.</li><li>Use available keyboard shortcuts to open and close all tools.<li>Perform resize, maximize, minimize, undock and dock actions with all of Script Canvas editor tools and drag them around the Script Canvas editor.</li></ol> | <ul><li>Tools are opened after selecting them in Tools Menu.</li><li>Shortcuts can be used to open/close tools.</li><li>The user is able to resize, minimize, maximize, undock, dock or drag Script Canvas editor tools around the Script Canvas editor.</li> |
-| Using Script Events [Preview] Menu          | <ul><li> This menu is soon to be deprecated and reworked, until its updated its ommited from testing </li><li> https://www.o3de.org/docs/user-guide/scripting/script-events/ can be followed for the current state of the functionality. |
+| Using Script Events [Preview] Menu          | <ul><li> This menu is soon to be deprecated and reworked, until its updated its ommited from testing </li><li> [O3DE User Guide: Script Events](https://www.o3de.org/docs/user-guide/scripting/script-events/) can be followed for the current state of the functionality. |
 ---
 
-### Area: Basic Script Canvas graph tests 
+### Area: Basic Script Canvas graph tests
+
 Testing in this area verify basic functionality of script canvas graphs and more in-depth functionality of the default editor tools.
 
 **Project Requirements** 
-Any project with a new level. SC editor with the __SC Basic Editor Tools__ enabled.
+<p>Script Canvas editor opened with the complete list of tools which are:</li><ul><li>Node Palette</li><li>Node Inspector</li><li>Variable Manager</li><li>Minimap</li><li>Graph Validation</li><li>Debugging</li><li>Bookmarks</li><li>Command Line</li><li>Interpreter</li></ul>
 
 **References**
-Default Script Canvas editor layout with the default tools enabled and highlighted.
+<details><summary>Default Script Canvas editor layout with the default tools enabled and highlighted.</summary>
+<p>
+
 [![SC graph editor and default tools](https://github.com/o3de/sig-content/raw/main/testing-guidance/workflow-tests/scripting/images/SCeditor_default_layout.png)](https://github.com/o3de/sig-content/blob/main/testing-guidance/workflow-tests/scripting/images/SCeditor_default_layout.png)
 
+</p>
+</details>
+
 **Product:** 
 Script canvas graph files with basic input and output when run through game mode or interpreter.
 
@@ -105,15 +110,21 @@ Script canvas graph files with basic input and output when run through game mode
 ---
 
 ### Area: Advanced Script Canvas graph Tests
+
 Tests in this verify more advanced core features of script canvas.
 
 **Project Requirements** 
-Any project with a new level. SC editor with the 5 basic tools enabled.
+<p>Script Canvas editor opened with the complete list of tools which are:</li><ul><li>Node Palette</li><li>Node Inspector</li><li>Variable Manager</li><li>Minimap</li><li>Graph Validation</li><li>Debugging</li><li>Bookmarks</li><li>Command Line</li><li>Interpreter</li></ul>
 
 **References**
-Main Script Canvas editor view with advanced control buttons highlighted.
+<details><summary>Main Script Canvas editor view with advanced control buttons highlighted.</summary>
+<p>
+
 [![SC graph view and basic controls](https://github.com/o3de/sig-content/raw/main/testing-guidance/workflow-tests/scripting/images/SCeditor_graphview_controls.png)](https://github.com/o3de/sig-content/blob/main/testing-guidance/workflow-tests/scripting/images/SCeditor_graphview_controls.png)
 
+</p>
+</details>
+
 **Product:**
 Organized and annotated Script canvas graph files that produce verifiable outputs when attached to entities and run through game mode or interpreter.
 
@@ -122,7 +133,7 @@ Organized and annotated Script canvas graph files that produce verifiable output
 
 | Workflow                                                           | Requests                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | Things to Watch For                                                                                                                                                                                                                                                                                                |
 |--------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| Creating a user function and calling its input/output from another graph                   | [![](https://github.com/o3de/sig-content/raw/main/testing-guidance/workflow-tests/scripting/images/SCeditor_basic_userFunction00.png)](https://github.com/o3de/sig-content/blob/main/testing-guidance/workflow-tests/scripting/images/SCeditor_basic_userFunction00.png) <ol><li>Use Script Canvas editor to create a graph file with enter/exit nodelings.</li><li>Place complex logic or entity behavior between the enter/exit nodelings.</li><li>Give the graph file a unique recognizable name and save it.</li><li>Call the user function from another graph by finding it in the node palette or right click context menu [![Calling a user function from another graph](https://github.com/o3de/sig-content/raw/main/testing-guidance/workflow-tests/scripting/images/SCeditor_basic_userFunction01.png)](https://github.com/o3de/sig-content/blob/main/testing-guidance/workflow-tests/scripting/images/SCeditor_basic_userFunction01.png)</li></ol> **Example Functions:** <ol><li>Two color parameters and returns a blended color.</li><li>Entity parameter and returns the number of child entities.</li><li>No parameters or output but triggers behavior. | <ul><li>Recursive functions are **NOT** supported at the moment</li><li>Modifications to the user function file should require scripts calling the function to also be modified.</li> |
+| Creating a user function and calling its input/output from another graph                   |<ol><li>Use Script Canvas editor to create a graph file with enter/exit nodelings. (An instance of such graph and buttons used to create nodelings can be seen in the picture below) [![](https://github.com/o3de/sig-content/raw/main/testing-guidance/workflow-tests/scripting/images/SCeditor_basic_userFunction00.png)](https://github.com/o3de/sig-content/blob/main/testing-guidance/workflow-tests/scripting/images/SCeditor_basic_userFunction00.png) </li><li>Place complex logic or entity behavior between the enter/exit nodelings.</li><li>Give the graph file a unique recognizable name and save it.</li><li>Call the user function from another graph by finding it in the node palette or right click context menu [![Calling a user function from another graph](https://github.com/o3de/sig-content/raw/main/testing-guidance/workflow-tests/scripting/images/SCeditor_basic_userFunction01.png)](https://github.com/o3de/sig-content/blob/main/testing-guidance/workflow-tests/scripting/images/SCeditor_basic_userFunction01.png)</li></ol> **Example Functions:** <ol><li>Two color parameters and returns a blended color.</li><li>Entity parameter and returns the number of child entities.</li><li>No parameters or output but triggers behavior. | <ul><li>Recursive functions are **NOT** supported at the moment</li><li>Modifications to the user function file should require scripts calling the function to also be modified.</li> |
 | Generate and modify translation data | <ol><li>Generate translation data for nodes.</li><li>Modify the translation data.<ol>                                                                                                                                                    | <ul><li>Generating translation data does not cause performance dips.</li><li>Non-english characters render properly in SC graph.</li><li>Translation data modifications are reflected in Script Canvas editor.</li></ul>                                             |
 | Use groupings  | <ol><li>Create groups of all available types grouping nodes of an existing graph.</li><li>Move the groups around in the Script Canvas editor.</li><li>Resize groups and grab more nodes into them.</li><li>Open Node Inspector and select one of the created groups.</li><li>Perform all available actions found in Node Inspector for selected group:</li><ul><li>Enabling as Bookmark</li><li>Collapsing Group</li><li>Changing Group name</li><li>Changing Group color</li><li>Changing all Font settings</li></ul></ul></li><li>Double click the groups in graph to collapse/expand them.</li><li>Perform actions from group edit menu by right clicking on a group in Script Canvas graph window:</li><ul><li>Cut</li><li>Copy/Paste</li><li>Duplicate</li><li>Delete</li><li>Edit group title</li><li>Ungroup</li><li>Collapse</li><li>Expand</li><li>Group...</li><li>Apply Preset...</li><li>Align...</li><li>Create Preset From</li></ul></ul></li></ol>                                                     | <ul><li>If groupings are not rendering when placed on the graph.</li><li>If nodes are not "Sticking" to a grouping when size or position is changed.</li><li>Modifications to groups are maintained when graph is saved/loaded.</li><li>Groups can have their all corresponding menu and Node Inspector actions performed.</li><li>Different fonts can be assigned to groups with Font Settings.<li>                                                                                                                                                                   |
 | Use annotations | <ol><li>Create a comment on an existing graph.</li><li>Move the created comment around in the Script Canvas editor.</li><li>Input strings into comment input field.</li><li>Open Node Inspector and select the comment.</li><li>Perform all available actions found in Node Inspector for selected comment:</li><ul><li>Comment</li><li>Background Color</li><li>Changing all Font settings</li></ul></ul></li><li>Double click the comment in graph to enter its edit mode.</li><li>Perform actions from comment edit menu by right clicking on a comment in Script Canvas graph window:</li><ul><li>Cut</li><li>Copy/Paste</li><li>Duplicate</li><li>Delete</li><li>Edit comment</li><li>Group...</li><li>Apply Preset...</li><li>Create Preset From</li></ul></ul></li></ol>                                                     | <ul><li>Comments can be created on the graph and strings can be written in their input field</li><li>Comments size scales depending on the length of written string.</li><li>Different fonts can be assigned to comments with Font Settings</li><li>Comments can have their all corresponding menu and Node Inspector actions performed.  
@@ -132,4 +143,4 @@ Organized and annotated Script canvas graph files that produce verifiable output
 | Use Interpreter tool to execute script                 | <ol><li>Create a simple graph with On Graph Start -> Delay (5s) -> Print nodes.</li><li>Open the Interpreter tool in Script Canvas Editor and assign previously created script to it.<li>Click Start button to execute the script.</li><li>Click Stop button during script execution.</li></ol> | <ul><li> Interpreter tool can be assigned with scripts</li><li>Scripts can be executed with Interpreter tool</li><li>Execution of scripts by the Interpreter can be stopped.</li> |
 | Create a script to handle inputs                  | <ol><li>Create an Input Bindings file in Asset Editor tool.![](https://github.com/o3de/sig-content/raw/main/testing-guidance/workflow-tests/scripting/images/SCcreate_input_bindings_file.png)</li><li>Create a script with Input Handler node, set Event Name to match previously created input bindings file (Print). ![](https://github.com/o3de/sig-content/raw/main/testing-guidance/workflow-tests/scripting/images/SCinput_handle_script.png)<li>Create an entity with Script Canvas and Input components, assign previously created Input Bindings file and script to corresponding components.</li><li>Enter Game Mode and press space key to print message in console.</li><li>Assign various keys in Input Bindings file.</li></ol> | <ul><li>Various inputs can be assigned to Input Handlers</li><li>Script Canvas receives and handles assigned inputs</li> |
 | Create a script for Audio playback                 | **Prerequisites:**</li><ul><li>Wwise project is setup.</li><li>Wwise Audio Engine Gem is enabled.</li></ul></ul> <ol><li>Create an entity with Script Canvas, Audio Trigger, and Audio Proxy components.</li><li>In Audio Trigger component assign Play trigger.<li>Create a script with Execute Trigger node that will execute after short delay and assign it to Script Canvas component. ![](https://github.com/o3de/sig-content/raw/main/testing-guidance/workflow-tests/scripting/images/SCaudio_script.png)</li><li> Enter Game Mode.</li></ol> | <ul><li>Audio triggers can be triggered by Script Canvas</li><li>Audio output can be heard when triggers are playing</li> |
----
+---