Replace harness instruction page rendering

[mzgoddard]

Preview Tests

The harness module is given a test json of commands to perform and assertions to record the results of. This change replaces the manual DOM rendering and manual updates of the test instructions and result form with an object representing the test results, from which a second object, the instruction document, is created representing the structure, text, and user event handlers to update the first object. This separates the application state of the instructions and result entry from the DOM so that it can be reused outside the harness module.

This change further uses the added instruction document type and produces the existing DOM with a small virtual dom module. From the perspective of someone running the commands and entering the results into the form, there should be no change in the page’s behavior.

Progress

This change is almost complete. Briefly, I think to complete it, the result state needs to be turned into the summary object for submission. Below is an overview of the steps implemented.

• Type definitions
  • Define the type of the Test JSON input, stored in the harness behavior module scope variable
  • Define the type of the Commands JSON input
  • Define the type of the Support JSON input
  • Define the type of the submitted results produced when Submit Results is clicked
  • Define a type of the state of the user input results
  • Define a type that represents the displayed text and result input fields of the test input and state of the results
• Update state of results from user events sent to functions in the instruction document representation
  • Update atOutput text for a command
  • Update an assertion for a command
  • Update an additional assertion for a command
  • Update if there are or are not undesirable results
  • Update individual undesirable entries
  • Update other undesirable text input
  • Update if field should highlight when required when validating
• Create the document object following the defined type
• Create the result submission following the defined type
• Track document item focus when updating the result state
  • Focus header after page load
  • Focus next or previous checkbox when pressing relevant keyboard keys
  • Focus first required and not set result input after validating before submitting the result
• Render the document object into DOM
  • Render updates with a virtual dom to maintain minimal changes to dom like prior manual change implementation
  • Transform DOM events into relevant input to functions in document object
    • Transform text input change event
    • Transform radio click event
    • Transform checkbox change and keydown event
    • Transform open test pop click event
    • Transform submit results click event