Servlet-JSP and HtmlFixture exercise and solution

Servlet-JSP and HtmlFixtureexercise and solution Alessandro Marchetto

Exercise: • NameWeb, four tasks: • a) testing • b) bug fixing • c) maintenance • d) evolution

Note • - Download fitnesse.zip • http://selab.fbk.ru/marchetto/software/fitnesseImproved.zip • - Unzip it into the desktop • - Take a note of the directory path

Steps • Download the zip file “NameWeb.zip” and put it in the desktop • http://selab.fbk.eu/marchetto/exercise/exe_testing/NameWeb.zip • 1. Import it into Eclipse • FileImport”Existing Project into Workshopace” and click “next”  • select “Archive File”  Browser your desktop to select the “exercise1.zip” •  click “Finish” • 2. In the new Eclipse project: • -- (if needed) create a directory called "work" if it doesn't exist • -- (if needed) delete subdirectories of the directory "work" if it exist and • contains errors • -- (if needed) Start Tomcat or restart it • -- open the "Tomcat project" menu (right-button mouse in the • project) and update the Tomcat context

3. Start Fitnesse for the imported project (named nameWeb) • -- remember to modify the classpath with the path of the • fitnesse.zip in your desktop • !path C:/…/fitnesseImproved/lib/*.jar • 4. Execute the tasks described in wiki page: • a) write Fit tables • b) bug fixing • c) maintenance • d) evolution

The NameWeb application • NameWeb is composed of: • 1. A client side page named index.html • it contains a form composed of 2 text fields (name and surname) and a submit button • the form sends its data to the JSP page • 2. A JSP page named nameWeb.jsp • it gets name and surname sent by the client • - it stores name and surname in a JavaBean • it reads the data stored in the JavaBean • it writes in output a string such as “Welcome: namesurname” • 3. A JavaBean named beanPck.NameBean • it defines a field of type string • it contains two methods used to set/get the string

NameWeb –JSP and Form – (1) index.html Please, insert the requested data for JSP: <br> <form method="get" action="nameWeb.jsp" > Name: <input type="text" name="nameJ" /> <br /> Surname: <input type="text" name="surnameJ" /> <br /> <input type="submit" value="submitToJSP" /> </form>

NameWeb – Servlet, JSP and Form – (3) nameWeb.jsp <HTML> <HEAD> <TITLE> JSP for name and surname </TITLE> </HEAD> <BODY> <P> <jsp:useBean id="beanN" class="beanPck.NameBean" /> <% String name=request.getParameter("nameJ"); String surname=request.getParameter("surnameJ"); beanN.setContent(name, surname); %> <H1>Welcome: <I> <% String content=beanN.getContent(); out.println(content); %> </I> </H1> </BODY> </HTML>

NameWeb – Servlet, JSP and Form – (5) beanPck.NameBean package beanPck; publicclass NameBean { private String content="anonymous"; public String getContent() { return(content); } publicvoid setContent(String name, String surname) { content=name+surname; } }

The Fitnesse-wiki contained in the Eclipse project to do these tasks: 1) Testing Write a test-case using the HtmlFixture for testing the application... 2) Bug Fixing There is a bug in the main functionality of the NameWeb application. 3) Maintenance: Refactoring: extract in a function the code used to concatenate name and surname written in the form by the user 4) Evolution: Add a field “nation” in the form so that the new output will be such as: “Welcome: namesurname from nation” instead of “Welcome: name surname”

1) Testing: • Write a test-case using the HtmlFixture for testing the application as follows: • A) • - call the index.html • - verify that the page does not contain/define a title • - verify if the name of the “Surname” field of the HTML form is • “surnameJ” (note that it is an attribute of the element input) • - verify how many input of type submit are contained in the page • - verify that only 1 form element is contained in the page • B) • call the page index.html • fill the form with “myName” and “mySurname” • click the submit button • verify if the title of the built page is “JSP for name and surname”

2) Bug fixing: There is a bug in the main functionality of the NameWeb application.

!path fitnesse.jar !path *.jar !path lib/*.jar !path classes !path lib |!-com.jbergin.HtmlFixture-!| | http://localhost:8080/ex2/index.html | requestPage | | Focus | requestPage | | Element Focus | nameJ | input | textField1 | | Set Value | myName | | Focus | requestPage | | Element Focus | surnameJ | input | textField2 | | Set Value | mySurname | | Focus | requestPage | | Element Focus | f_jsp | form | | Submit | response1 | | Focus | response1 | | Has Text | Welcome: myName mySurname | Test case

JavaBean Before and After bug-fixing

3) Maintenance: Refactoring: extract in a function the code used to concatenate name and surname written in the form by the user

!path fitnesse.jar !path *.jar !path lib/*.jar !path classes !path lib |!-com.jbergin.HtmlFixture-!| | http://localhost:8080/ex2/index.html | requestPage | | Focus | requestPage | | Element Focus | nameJ | input | textField1 | | Set Value | myName | | Focus | requestPage | | Element Focus | surnameJ | input | textField2 | | Set Value | mySurname | | Focus | requestPage | | Element Focus | f_jsp | form | | Submit | response1 | | Focus | response1 | | Has Text | Welcome: myName mySurname | Test case

JavaBean Before and After the task

beanPck.NameBean package beanPck; public class NameBean { private String content="anonymous"; public String getContent() { return(content); } public void setContent(String name, String surname) { content=concatenate(name, surname); } public String concatenate(String name, String surname){ return name+" "+surname; } }

4) Evolution: Add a field “nation” in the Form so that the new output will be such as: “Welcome: namesurname from nation” instead of “Welcome: name surname”

Test case !path fitnesse.jar !path *.jar !path lib/*.jar !path classes !path lib |!-com.jbergin.HtmlFixture-!| | http://localhost:8080/ex2/indexEvolution.html | requestPage | | Focus | requestPage | | Element Focus | nameJ | input | textField1 | | Set Value | myName | | Focus | requestPage | | Element Focus | surnameJ | input | textField2 | | Set Value | mySurname | | Focus | requestPage | | Element Focus | nationJ | input | textField3 | | Set Value | myNation | | Focus | requestPage | | Element Focus | f_jsp | form | | Submit | response1 | | Focus | response1 | | Has Text | Welcome: myName mySurname from myNation |

Before the evolution

After the evolution

Servlet-JSP and HtmlFixture exercise and solution