Manual tests for the Form Editor

Guidelines for documenting the manual tests:

• Summarize the elements covered in the test
• Enumerate the steps (ordered list)
• Call out test points with a TEST bullet
• Include screenshots as appropriate; many of the manual tests will be visual, so screenshots are helpful

Bottom-up test: Model ==> Form

1. Create new application called "FormTest"
2. Press New file-> "Zero Resource Model in /app/models"->"New model" and name it studentModel.json
3. Add a String field, set its name to "name", its label to be ""Name" and required to true
4. Add a String field, set its name to "Surname", set it as a required field
5. Add a boolean field, set its name to be "isRegistered" and its label to be "Is Registered"
6. Add an Integer field, set its name to be "sId" and its label to be "Student ID", mark this field as required
7. Press New File-> "Resource handler in /app/resources/" called studentModel.groovy, set its content to be: ZRM.delegate()
8. Switch to the console tab and run the command "zero model sync"
9. Press New File-> "Zero Resource Form in /public/zero/forms" -> "New form based on model"
10. TEST see that in the "Model Name:" drop down the value is "* None *"
11. TEST open the "Model Name:" dropdown and see that there are two entries there, "* None *" and "StudentModel"
12. Set the created file name to be studentForm.json, select the "studentModel" entry in the "Model Name:" dropdown
13. TEST see that in the Design tab there are four fields, named: "Name", "Surname", "Is Registered" and "Student ID"
14. TEST see that only the "Is Registered" field does not have and asterisk besides it
15. Switch to the source tab
16. TEST see that the value of the "model" attribute is "studentModel"
17. TEST see that each field is mapped to the right model field in its dataId attribute
18. TEST change the title to be "Student form" and the description to be "Student details form" and see that these values are displayed in the preview tab
19. TEST change the field names, their required state and their default_value attribute and see that these changes are reflected in the Preview tab
20. Press New File-> "HTML page in /public", name it index.html
21. Create a ZRM data store; set Variable Name to studentStore and Resource Collection to studentModel
22. TEST a Zero data grid, set its ID to be gridId and its data store to be studentStore
23. TEST a Zero Form, set its model location to be "./zero/forms/studentForm.json" and its data grid ID to be gridId
24. Start the application
25. Open a browser tab in localhost:8080
26. TEST see that the form looks the same as it looked in the form editor's preview tab
27. TEST enter the value "John" to the name field, see that the "This value is required" message disappears
28. TEST enter the value "Smith" to the Surname field, see that the "This value is required" message disappears
29. TEST enter the value "515" to the name field, see that the "This value is required" message disappears
30. TEST click on the "Submit" button, see that a new entry was added to the grid, and the "Submit" button label was changed to "Save"
31. TEST check the "Is Registered" checkbox and press on the "Save" button, see that the "Is Regsitered" value of that entry is changed to true
32. TEST press on the "Clear" link, see that the form fields are cleared, and the "Save" button label was changed to "Submit"
33. Enter a few more entries to the grid by repeating steps 27-30 (with different values)
34. TEST select a row in the grid, see that the row's values are reflected in the form and the "Submit" button's label is now "Save"
35. TEST modify the values of the form field and press "Save", see that these values were changed in the right row in the grid

Top-down test: Form ==> Model

1. Press "New File"-> "Zero Resource Form in /public/zero/forms" -> "New form"
2. Set the created file name to be professorForm.json, select "default.json" entry in the "Template Name:" dropdown
3. TEST Press on the "Create" button and see that the form editor gets open with no fields and palette on the right
4. TEST Click on the "Title" and see that an in-line edit box gets opened
5. TEST Type with the in-line edit box "Professor Form" and press Enter. See that the box is closed and the title of the form is now "Professor Form"
6. TEST Click on the "Description" element and see that an in-line text area gets open and that it has two buttons - save and cancel
7. TEST Type in the text area "Professor general details" and press on the "Save" button, see that the edit box gets closed and the description was changed to "Professor general details"
8. TEST Press on the "Text" entry in the palette on the right, see that a text field is added to the form, in it the title is "Text", the required indicator - the asterisk is semi transparent and the hint is "(E.g., hint)" and is semi transparent as well .
9. TEST Press on the title of the field (labeled "Text") and see that an in-line edit box gets opened
10. TEST Type in the edit box "Name" and click outside of it, see that the edit box is closed and the title of the field is now "Name"
11. TEST Bring the cursor above the required indicator and click on it, see that now the asterisk is now fully opaque
12. TEST Click on the hint element, see that an in-line edit box gets open
13. TEST Type in the edit box "(full name)" and click outside of the edit box, see that the edit box is closed, the hint is now (full name) and it is fully opaque
14. Create a text field for the professor's expertise (title: Expertise, hint: (comma separated list))
15. TEST Drag from the palette a number field and place it between the Name and expertise fields, see that it is added properly
16. Set the field's title to be "Room Number"
17. TEST for each of the fields press on the properties icon, move to the advanced tab and type in the ID entry the field's title in a camel case fashion preceded with "_", then go to the source tab and for each field see that the shortName property is the value that was typed in the ID entry
18. Press New file-> "Zero Resource Model in /app/models" ->"New model based on form" and name the file proferssor.json
19. TEST open the "Form Model Name:" dropdown and see that it has an entry called "professorForm.json"
20. TEST Select the "professorForm.json" entry and press "Create", see that the model editor gets opened and that it has the following fields: f_name, f_roomNumber and f_expertise
21. TEST open the professorForm.json, go to the source tab and see that the model is "professor" and for each field the dataId value is the field's shortName preceded with an 'f' character