Development » DevToolsTooling » DevToolsPageEditorTests
Login|Register|Print

Manual tests for Visual Page 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

BEFORE YOU START TESTING...

Refer to the DevToolsIdeTests and complete:
  1. Install and run the App Builder
  2. Create the new application named VpeTest
  3. Open the VpeTest

Basic operations

Create tab

  1. Click New File and select HTML Page in /public
  2. Type index.html after /public/ and click Create
  3. Click Add if asked to add dojo dependency
  4. TEST Verify that the visual page editor is displayed
  5. TEST Click Form folder bar on the Create view. Verify the items under Form are folded
  6. TEST Click Form folder bar again. Verify the items under Form are unfolded
  7. TEST Type b in the Filter... box. Verify only the items that contains b character are shown
  8. TEST Go on to type button (i.e. the text should be button). Verify only the items that contains button string are shown
  9. TEST Click the Button on the create view and move the mouse to the left on the editor. Verify the mouse pointer changes to cross hair cursor
  10. TEST Click on the editor area. Verify the button is created and the mouse pointer returns to the default form.
  11. TEST Replace button string on the Filter... box with tab. Verify the items are filtered correctly
  12. TEST Drag the Tab Container on the create view to the editor area. Verify the mouse pointer changes to cross hair cursor and drag shadow is shown near the mouse pointer
  13. TEST Drop it on the editor. Verify the Tab Container is created and the mouse pointer returns to the default form.
  14. TEST Click Edit menu and select Delete. Verify the Tab Container is deleted
  15. TEST Click the Tab Container again, move the mouse to the left on the editor. Verify the mouse pointer changes to cross hair cursor
  16. TEST Press the mouse button (and not release) on the editor and drag it to lower right direction. Verify the focus frame appears and changes its size.
  17. TEST Release the mouse button. Verify the Tab Container appears as specified size (this works only for re-sizable widgets)
  18. Delete index.html

Structure tab and Actions

  1. Click New File and select HTML Page in /public
  2. Type index.html after /public/ and click Create
  3. TEST Insert Button from Create view to the editor and Click Structure tab at the palette. Verify that there is Button under the <body>
  4. TEST Click <body> at the structure. Verify that the focus frame of Button on the editor disappears
  5. TEST Click Button at the structure. Verify that the focus frame of Button on the editor appears
  6. TEST Click Properties on the tool bar and select Properties. Verify that the Properties dialog appears
  7. TEST Type button1 in the ID box and ClickMe in the Label box, then click OK. Verify that the label of Button on the editor changes and id*button1 appears on the structure view
  8. TEST Right-click Button on the editor, select Styles, click Layout tab, select none at the display select box and click OK. Verify that the Button on the editor disappears though it remains on structure view
  9. TEST Click Undo on the tool bar. Verify that the changes are reverted (BUG?)
  10. TEST Right-click Button on the editor, select Copy, click Edit on the tool bar, select Paste. Verify the mouse pointer changes to cross hair cursor.
  11. TEST Click on the editor. Verify that new Button appears both on the editor and the structure view
  12. TEST Click Create tab, insert Tab Container to the editor and click Structure tab. Verify that the TabContainer appears on the editor and the structure view, and there is a TabContainer which has ContentPane as children on the structure view
  13. TEST Right-click one of the Button and select Cut. Verify that the Button disappears
  14. TEST Click Edit, select Paste and move the mouse pointer to the editor. Verify that the mouse pointer changes to cross hair cursor.
  15. TEST Click the TabContainer on the editor. Verify the Button appears on the TabContainer and on the structure view (as the child of ContentPane)
  16. TEST Click the TabContainer on the structure view, drag and move the focus frame of TabContainer on the editor. Verify the TabContainer moves containing the Button
  17. TEST Click Undo and Redo on the toolbar. Verify the both operations work.
  18. Delete index.html

Data tab

  1. Click New File and select Other File in /public
  2. Type phone.json after /public/ and click Create
  3. Input the following JSON 
          {
         "identifier": "phone",
         "label": "name",
         "items": [
            {"name": "Frank", "phone": "1111"}, 
            {"name": "Steve", "phone": "2222"}, 
            {"name": "Chris", "phone": "3333"} 
         ]
      }
  4. Click New File and select HTML Page in /public
  5. Type index.html after /public/ and click Create
  6. Click Data tab at the palette
  7. TEST Click New and select Item File Read Store. Verify the properties dialog of Item File Read Store show up.
  8. TEST Type phone in Variable Name field and click OK. Verify ItemFileReadStore appears on the data view.
  9. TEST Right-click ItemFileReadStore on the data view and select Properties. Verify the properties dialog appears.
  10. TEST Type phone.json in URL field and click OK. Verify there is no error.
  11. TEST Click Create tab and insert Grid under Dojox category on the editor. Verify the Grid appears on the editor.
  12. TEST Right-click the Grid on the editor and select Properties. Verify the properties dialog appears.
  13. TEST Click Data tab, click the pull down of Data Store field, and select phone. Verify the phone is listed on it.
  14. TEST Click the first row of Fields table and click the red X icon. Verify the selected row is deleted.
  15. TEST Click the gray + icon. Verify the new row is inserted.
  16. TEST Type name in Field column, and Name in Label column. Verify the record is properly edited.
  17. TEST Click the gray + icon, type phone in Field column and Phone in Label column. Verify the record is properly edited.
  18. TEST Click OK. Verify the Grid on the editor shows the records that is defined in phone.json (i.e. Frank, 1111, etc...)
  19. Delete index.html and phone.json

Miscellaneous operations

  1. Click New File and select HTML Page in /public
  2. Type index.html after /public/ and click Create
  3. TEST Insert Button from the create palette. Verify the Button appears on the editor.
  4. TEST Click Checkpoint and select Checkpoint Now. Verify there is no error.
  5. TEST Insert Border Container. Verify the Border Container appears on the editor.
  6. TEST Click Button on the editor, press Ctrl+C and Ctrl+V. Verify the mouse pointer changes to cross hair cursor.
  7. TEST Click on the center pane of Border Container and click Structure tab. Verify the new Button appears both on the editor and the structure view as a child of Content Pane.
  8. TEST Click the first Button (i.e. located outside Border Container) and press Ctrl+X. Verify the Button disappears both on the editor and the structure view.
  9. TEST Press Ctrl+V and click on the editor. Verify the Button appears both on the editor and the structure view
  10. TEST Click Checkpoint and select Restore MM/DD HH:MM. Verify the page is reverted to the checkpoint (i.e. there is just a Button on the page)
  11. TEST Click the Button and press DEL key. Verify the Button disappears both on the editor and the structure view
  12. TEST Click Checkpoint and select Checkpoint Now. Verify there is no error.
  13. TEST Click Properties menu and select Preferences. Verify the Preferences dialog appears.
  14. TEST Check Flow Layout box and click OK. Verify there is no error.
  15. TEST Click Create tab, then insert Text Box, Button and Grid. Verify the widgets are arranged in flow layout
  16. TEST Click Checkpoint and select Restore MM/DD HH:MM. Verify the page is reverted to the checkpoint (i.e. there is nothing on the page)
  17. TEST Click Properties menu, select Preferences , uncheck Flow Layout, check Snap To Grid, check Show Grid and click OK. Verify the grid lines appears on the editor
  18. TEST Insert two Button on the editor and move them to be vertically aligned. Verify they are snapped to grid
  19. TEST Click Checkpoint and select Restore MM/DD HH:MM. Verify the page is reverted to the checkpoint (i.e. there is nothing on the page)
  20. TEST Insert Text Box on the editor, drag and drop it inside the editor, then right-click it and select Delete. Verify the Text Box is inserted, moved and deleted
  21. TEST Press Ctrl+Z. Verify the Text Box appears
  22. TEST Click Undo on the tool bar. Verify the Text Box moves to the initial position
  23. TEST Click Redo on the tool bar. Verify the Text Box moves again
  24. TEST Press Ctrl+Y. Verify the Text Box disappears
  25. Delete index.html

Advanced Page Creation and Run

Event + Script

  1. Click New File and select HTML Page in /public
  2. Type index.html after /public/ and click Create
  3. TEST Insert Button and Text Box. Verify the Button and Text Box are inserted on the editor
  4. TEST Right-click the Text Box on the editor, select Properties. Verify the properties dialog appears
  5. TEST Type tb1 in the ID field, click OK and click Structure tab. Verify id=tb1 appears on the TextBox node
  6. TEST Right-click Button on the structure view, select Event. Verify the events dialog appears
  7. TEST Click pull down next to + icon and select Script. Verify the text box to write a script appears
  8. TEST Type the following script and click OK 
          var tb1 = dijit.byId("tb1");
      tb1.setValue("Hello");
    Verify there is no error
  9. Click Start link at the upper right of the editor
  10. TEST Open http://localhost:8080/ in new browser window (or tab). Verify the button and the text box shows up properly.
  11. TEST Click Button. Verify the string Hello appears in the text box
  12. TEST Return to the Application Builder and click Source tab at the bottom of editor. Verify the source shows up
  13. TEST Replace label="Button" with label="ClickMe", and click Design tab at the bottom of editor. Verify the label of Button changes
  14. TEST Switch to the runtime window (i.e. http://localhost:8080/) and reload it. Verify the button and the text box shows up correctly
  15. TEST Click Button. Verify the string Hello appears in the text box
  16. Delete index.html

Event + Method Call

  1. Click New File and select HTML Page in /public
  2. Type index.html after /public/ and click Create
  3. TEST Insert Button and Text Box. Verify the Button and Text Box are inserted on the editor
  4. TEST Right-click the Text Box on the editor, select Properties. Verify the properties dialog appears
  5. TEST Type tb1 in the ID field, click OK and click Structure tab. Verify id*tb1 appears on the TextBox node
  6. TEST Right-click Button on the editor and select Events. Verify the events dialog appears
  7. TEST Click pull down next to + icon and select Method Call. Verify the text boxes and grids to specify a method call appears
  8. Select tb1 from the Object combo-box
  9. Type setValue in the Method text box
  10. TEST Click + icon on the toolbar for Parameters grid. Verify a new row is added to the grid
  11. Click Property column in the row and type Hello
  12. Click OK
  13. Click Start link at the upper right of the editor
  14. TEST Open http://localhost:8080/ in new browser window (or tab). Verify the button and the text box show up properly.
  15. TEST Click Button. Verify the string Hello appears in the text box
  16. Return to the Application Builder
  17. TEST Insert another Text Box. Verify Text Box is inserted on the editor
  18. TEST Right-click the second Text Box on the editor, select Properties. Verify the properties dialog appears
  19. TEST Type tb2 in the ID field, click OK and click Structure tab. Verify id*tb2 appears on the TextBox node
  20. TEST Right-click Button on the editor and select Events. Verify the events dialog appears with the previous setting for a method call
  21. TEST Click Source column in the row of Parameters grid and select tb2 from the combo-box. Verify tb2 along with other IDs is shown in the combo-box list
  22. TEST Click Property column in the row and select value from the combo-box. Verify value along with other properties is shown in the combo-box list
  23. Click OK
  24. TEST Switch to the runtime window (i.e. http://localhost:8080/) and reload it. Verify the button and the text boxes show up correctly
  25. TEST Type Hello World in the second Text Box" and click *Button. Verify the string Hello World appears in the first text box
  26. Delete index.html

Event + Service Call

  1. Click New File and select Other File in /public
  2. Type phone1.json after /public/ and click Create
  3. Input the following JSON 
          {
         "name": "Frank",
         "phone": "1111"
      }
  4. Click New File and select Other File in /public
  5. Type phone2.json after /public/ and click Create
  6. Input the following JSON 
          {
         "name": "Steve",
         "phone": "2222"
      }
  7. Click New File and select HTML Page in /public
  8. Type index.html after /public/ and click Create
  9. TEST Insert Button and three Text Box. Verify the Button and Text Box are inserted on the editor
  10. TEST Right-click the first Text Box on the editor and select Properties. Verify the properties dialog appears
  11. TEST Type tb1 in the ID field, click OK and click Structure tab. Verify id*tb1 appears on the TextBox node
  12. TEST Right-click the first Text Box on the editor and select Properties. Verify the properties dialog appears
  13. TEST Type tb2 in the ID field, click OK and click Structure tab. Verify id*tb2 appears on the TextBox node
  14. TEST Right-click the first Text Box on the editor and select Properties. Verify the properties dialog appears
  15. TEST Type tb3 in the ID field, click OK and click Structure tab. Verify id*tb3 appears on the TextBox node
  16. TEST Right-click Button on the editor and select Events. Verify the events dialog appears
  17. TEST Click pull down next to + icon and select Service Call. Verify the text boxes and grids to specify a service call appears
  18. Type phone{index}.json in the URL text box
  19. TEST Click + icon on the toolbar for Parameters grid. Verify a new row is added to the grid
  20. Click Name column in the row and type index in the text box.
  21. TEST Click Source column in the row and select tb1 from the combo-box. Verify tb1 along with other IDs is shown in the combo-box list
  22. TEST Click Property column in the row and select value from the combo-box. Verify value along with other properties is shown in the combo-box list
  23. TEST Click + icon on the toolbar for Result grid. Verify a new row is added to the grid
  24. Click Name column in the row and type name in the text box.
  25. Click Target column in the row and select tb2 from the combo-box.
  26. Click Property column in the row and select value from the combo-box.
  27. TEST Click + icon on the toolbar for Result grid. Verify a new row is added to the grid
  28. Click Name column in the row and type phone in the text box.
  29. Click Target column in the row and select tb3 from the combo-box.
  30. Click Property column in the row and select value from the combo-box.
  31. Click OK
  32. Click Start link at the upper right of the editor
  33. TEST Open http://localhost:8080/ in new browser window (or tab). Verify the button and the text boxes show up correctly
  34. TEST Type 1 in the first Text Box and click Button. Verify the string Frank appears in the second text box and 1111 does in the third text box
  35. TEST Type 2 in the first Text Box and click Button. Verify the string Steve appears in the second text box and 2222 does in the third text box
  36. Delete index.html

Page properties

Note: DE 1.0: FF2 only; DE 1.1; FF2 and FF3
  1. Click New File and select Other File in /public
  2. Type red.css after /public/ and click Create
  3. Input the following CSS 
          #red {
         color: red;
      }
  4. Click New File and select HTML Page in /public
  5. Type index.html after /public/ and click Create
  6. TEST Insert Button. Verify the Button is inserted on the editor
  7. TEST Right-click the canvas of the editor and select Properties. Verify the Page properties dialog appears
  8. Type Red in the Title text box.
  9. TEST Select tundra from the Theme combo-box and click OK. Verify the theme is changed to tundra and the Button is now shown in gray
  10. Right-click the canvas of the editor and select Properties
  11. TEST Click + icon on the toolbar for Style Sheets grid. Verify a new row is added to the grid
  12. Click the URL column in the row, type red.css and click OK
  13. TEST Insert Label. Verify the Label is inserted on the editor
  14. TEST Right-click the Label on the editor and select Properties. Verify the properties dialog appears
  15. TEST Type red in the ID field and click OK. Verify the text color of the Label is changed to red
  16. Click Start link at the upper right of the editor
  17. TEST Open http://localhost:8080/ in new browser window (or tab). Verify Red is shown as a browser title bar
  18. Delete index.html

AB integration

  1. TEST Edit the file, checkpoint the file, edit the file again, restore the checkpoint and verify the contents are correct
  2. TEST undo the checkpoint and edits and verify undo function is correct.
  3. TEST redo the checkpoint and edits and verify redo function is correct.
  4. TEST Rename the file (double click it in the All Files view), verify name is updated in toolbar correctly (in Design and Source views)
  5. TEST verify the file content and name outside of the IDE.
  6. TEST Copy the file (hover over, then click the "copy" icon in the All Files view), verify file is copied
  7. TEST Delete the open file (hover over, then click the X icon in the All Files view), verify editor is closed when deleted

r19 - 09 Dec 2008 - 17:50:13 - steveims
Quick Links: Forum | Bugzilla| Blog| Getting Started| Developer's Guide| FAQ
Syndicate this site RSS ATOM
Copyright 2007 © IBM Corporation | Privacy | Terms of Use | About this site