Slide 1

Slide 2 Electronic Commerce COMP3210 Bonus Session : Report Card Application Dr. Paul Walcott Department of Computer Science, Mathematics and Physics University of the West Indies, Cave Hill Campus Barbados The Department of Computer Science Mathematics and Physics, University of the West Indies, Cave Hill Campus, Barbados 2007 Dr. Paul Walcott Slide 3 Session Objectives Create a simple report card application Using JavaScript and XHTML 1.0 Create test requirements and test cases for the report card application Evaluate the quality of the report card application by applying these tests Slide 4 Report Card Application Requirements The report card application allows: A user to enter a mark for a given course Marks for the three courses, COMP1130, COMP2145 and COMP3210 to be added to the report card Slide 5 Report Card Application Question ? How would you design the user interface? Slide 6 Report Card Application Contd User Interface Design The user interface design for the report card is illustrated below: Slide 7 Report Card Application Contd User Interface Design Contd The picklist contains the course names COMP1130, COMP2145 and COMP3210 The Mark text box is used to enter the course mark When the update button is clicked: The mark is added to the report card and The corresponding course name and mark are displayed Slide 8 Report Card Application Contd User Interface Design Contd If the mark entered is less than 0 or greater than 100 then the following popup window appears: Slide 9 Report Card Application Question ? What do you think is a possible test requirement? Slide 10 Report Card Application Contd Test Requirements Ensure that marks can be entered for each of the three courses and that these marks are displayed correctly on the report card Ensure that the exception message is displayed when erroneous input is entered Ensure that the report card application works correctly in multiple browsers (e.g. Internet Explorer, Netscape and Opera) Slide 11 Report Card Application Contd Test Requirements Ensure that the markup produced is valid XHTML 1.0 Slide 12 Report Card Application Question ? Can you create at least one test case? Remember that test cases comprise of a pre- condition, a test and a post-condition Slide 13 Report Card Application Contd Test Cases Only some of the possible test cases will be included in these notes It is left as an exercise for the reader to ensure that the list of test cases is complete and comprehensive Slide 14 Report Card Application Contd Test Case #1 Precondition: The web browser window is open Test: Enter reportcard.html as the URL address Postcondition: The report card application web page is displayed Slide 15 Report Card Application Contd Test Case #2 Precondition: Select the COMP1130 course and enter a mark of 65 Test: Click the Update button Postcondition: The following report card is displayed Slide 16 Report Card Application Contd Test Case #3: Prompt() Method Bug Precondition: Select the COMP1130 course and enter a mark of 09 Test: Click the Update button Postcondition: The following report card is displayed Slide 17 Report Card Application Contd Test Case #4 Precondition: Test #2 has been run Test: Select the COMP1130 course from the picklist, enter a mark of 55, then Click the Update button Postcondition: The following report card is displayed Slide 18 Report Card Application Contd Test Case #5 Precondition: Test #2 has been run Test: Select the COMP3210 course from the picklist, enter a mark of 75, then Click the Update button Postcondition: The following report card is displayed Slide 19 Report Card Application Contd Test Case #6: Boundary Conditions Precondition: Select the COMP1130 course and enter a mark of 0 Test: Click the Update button Postcondition: The following report card is displayed Slide 20 Report Card Application Contd Test Case #7: Boundary Conditions Precondition: Select the COMP1130 course and enter a mark of 100 Test: Click the Update button Postcondition: The following report card is displayed Slide 21 Report Card Application Contd Test Case #8: Boundary Conditions Precondition: Select the COMP1130 course and enter a mark of 101 Test: Click the Update button Postcondition: The following report card is displayed Slide 22 Report Card Application Contd Test Case #9: Exception Precondition: Select the COMP1130 course and enter a mark of -1 Test: Click the Update button Postcondition: The following is displayed Slide 23 Report Card Application Contd Test Case #10: Exception Precondition: Select the COMP1130 course and leave the mark blank Test: Click the Update button Postcondition: The following is displayed Slide 24 Report Card Application Contd Test Case #11: Exception Precondition: Select the COMP1130 course and enter a mark of abdf Test: Click the Update button Postcondition: The following is displayed Slide 25 Report Card Application Contd Other important test cases include: testing on multiple browsers Using the validator at http://validator.w3.org to determine whether all of the markup written is valid XHTML 1.0http://validator.w3.org Inputting floating point numbers rather than integers Slide 26 Report Card Application Contd Building the Application In order to build the application: An XHTML 1.0 page must be created which includes the form illustrated in the design A stylesheet is required for: The Report Card text The report card The mark text box The submit button Slide 27 Report Card Application Contd Building the Application (Contd) In order to build the application JavaScript functions will be used to: Update the report card table Display the table Clear the Mark text box An array data structure will be used to hold the course marks Slide 28 Report Card Application Contd Building the Application (Contd) Let us build the application!