Manual tests for iWidget Create and Test

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...

1. Install and run the App Builder
2. Create the new application named iWidTest
3. Open the iWidTest

Create iWidget named foo

1. Click New File and select iWidget in app/iwidgets
2. Type Foo descriptive name in the Descriptive Name field.
3. Type foo in the Widget name field.
4. Select Sample iWidget as the Template Name. Note For Smash DE 1.0.x testing the Sample iWidget template is not available, so you should select the default.xml template, and check the box for Create a working iWidget sample
5. Check the box for Create a test html file to display this iWidget
6. Type index.html in the Test html file name: field and click Create
   
7. TEST verify you get a "Missing Dependency" prompt, and click "Add".
   
8. TEST verify the foo.xml file is opened in the editor.
9. TEST verify the foo.js, foo.css, testImage.png and index.html files were also created.
10. TEST verify the foo_view.html is listed in the All Files list, (this is a virtual file which is built from the foo,xml file).
11. Click the "Start" to start the application, click the link http://localhost:8080 to open a browser tab to the index.html test file.
12. TEST verify the Test foo IWidget page is displayed with 2 foo iWidgets wired together.
13. Type first in the the Test Data: field on the first foo iWidget and press Send Data
14. TEST verify the first first foo iWidget turns the Sent Data: first greeen and second turns the Received Data: first green.
15. Type second in the the Test Data: field on the second foo iWidget and press Send Data
16. TEST verify the second first foo iWidget turns the Sent Data: second greeen and first turns the Received Data: second green.
    

Add an Edit mode to the foo iWidget

1. Click New File and select HTML Page in /public
2. Type /app/iwidgets/foo/foo_edit.html over /public/ in the Path and file name: field and Click Create.
3. Add a Button to the foo_edit.html page.
4. TEST Edit the foo.xml file and verify that the supported modes now includes edit supportedModes="edit view".
5. TEST that foo.xml includes an iw:content mode="edit" section with the html for the button.

Deploy the iWidget to Lotus Mashups

1. Go to http://sae1.innovate.ibm.com/mum/enabler
2. If you are using FireFox 3, you will get a warning about the browser not being supported, you can ignore the warning and continue.
3. Login with you IBM intranet id
4. Select Create a new page and call it Test
5. From the Test Page Select the Open the Catalog toolbar button. (it looks like this:
6. From the Mashup Hub Select the Upload Widget link, and then Select iWidgets as the source and click Next.
7. Click the Register a widget URL choice, and enter http://9.37.111.111:8080/iwidgets/foo/foo.xml where 9.37.111.111 is your ip address, don't forget to include the port :8080. And Press Next.
   
8. Add the iWidget as a private widget.
   
9. Click Finish, then Close the tab. And Select List Widgets from the Mashup hub.
10. Find the Foo Descriptive name widget, hover over the name, and select Add to Lotus Mashups and select Favorites as the Category and click Finish. Then close the tab.
11. Go back to the original Lotus Mashups browser page and refresh the browser.
12. After the browser refresh, the Mashup page will be in View mode, select Go to Edit to get back into Edit Mode.
    
13. Add the iWidget as from the Favorites, by clicking the toolbar button next to the widget and selecting Add to Page.
    
14. Move the foo widget to the right and add a second copy of the foo widget to the page.
    
15. Wire up the first widget to connect to the second widget by selecting the Click to wire widgets toolbar item for the first widget and selecting the events as shown, and press Done.
    
16. Wire up the second widget to connect to the first widget by selecting the Click to wire widgets toolbar item for the second widget and selecting the events as shown, and press Done.
17. TEST verify the two foo IWidgets on the page are displayed and wired together.
18. Type first in the the Test Data: field on the first foo iWidget and press Send Data
19. TEST verify the first first foo iWidget turns the Sent Data: first greeen and second turns the Received Data: first green.
20. Type second in the the Test Data: field on the second foo iWidget and press Send Data
21. TEST verify the second first foo iWidget turns the Sent Data: second greeen and first turns the Received Data: second green.
    

-- edchat - 07 Nov 2008