POTD 10: TDD Web App

• Practice and reinforce TDD process (test−code−refactor)
• Develop the ability to make good choices for TDD tests
• Practice test automation (using JUnit and Selenium)
• Apply TDD and test automation skills to develop a simple web-based software

You are encouraged to work through the TDD in process in your favorite IDE. Learning TDD is best accomplished by doing TDD.

You may work alone or with at most two other students in this course (feel free to make use of any communication channels of your choice).

You may use any web programming languages and/or any web servers of your choice -- as long as you use TDD to complete this potd.

Require (for tests): Java 8 (or higher), JUnit (you are recommended to use the latest version, JUnit 5), Selenium.

Require (for web deployment): XAMPP or any web server of your choice, a web browser

Additional resources:

• For tests: You may find class discussions on RIPR model, test automation, and characteristics of good tests helpful when designing and automating your tests.
• For web app deployment (borrowed from CS 4750): set up local web server (XAMPP), PHP deployment on XAMPP (local), PHP deployment on CS server.
• For web development (borrowed from CS 4640): Intro to HTML and CSS, HTML overview, CSS overview, PHP overview
• If you'd like to explore and try some other web development frameworks/languages

You will use tests as guidelines to design and develop a small web software.

For this activity, we will stop periodically, and do group work one step at a time with discussion between steps.

Imagine you are developing a simple ToDo web program (sample screen shown below), using TDD.

Normally, the first step in web development is getting your web framework installed, configured, and setup — "Download this, install that, configure those, run the script ...." — but TDD requires a different mindset. When you are doing TDD, the first step is to "test first."

First, we write the test, run it and check that it fails as expected. Then we write code (build part of our app) to pass the test.

Another thing is that, in TDD, we only do one step at a time.

We are going to proceed with small steps. Assuming, we will build a ToDo app written in PHP, and hosted on XAMPP — You may use any web programming language or any web server of your choice. With the time constraints in class and to simplify the implementation, we pick PHP because it is a simple web programming language to learn and get start; we use XAMPP because it is a web server that is simple and quick to set up for PHP (and it comes with MariaDB, which is a relational database management system — allowing us to expand the scope of our software).

Note: The following shows the tasks you will perform. For each task, an example is provided. You may include the example as part of your development. You should come up with at least one (of your own) user story and follow the TDD process to fulfill your user story.

Please also note: The example requirements are simplified and incomplete. Feel free to add or modify the requirements as appropriate.

Task 1: Functionality and user story

Task 2: Test requirements

Task 3: Follow the TDD process to fulfill the user story (stories)

import static org.junit.jupiter.api.Assertions.*;

import org.junit.jupiter.api.AfterAll;
import org.junit.jupiter.api.AfterEach;
import org.junit.jupiter.api.BeforeAll;
import org.junit.jupiter.api.BeforeEach;
import org.junit.jupiter.api.DisplayName;              
import org.junit.jupiter.api.Test;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;

import org.openqa.selenium.firefox.FirefoxDriver;     // for Firefox
import org.openqa.selenium.chrome.ChromeDriver;       // for chrome

public class todo_Test 
{
} 

public class todo_Test 
{
   private WebDriver driver;   
   
   // specify SUT
   private String url = "http://localhost/cs3250/tdd-web/todo.php";  
	   
   @BeforeEach
   void setUp() throws Exception 
   {
   // uncomment the following if you use chrome	   
   // System.setProperty("webdriver.chrome.driver", "path/to/chromedriver");  
   // driver = new ChromeDriver();   // create an instance of a web browser	

   // uncomment the following if you use firefox
   // System.setProperty("webdriver.gecko.driver", "path/to/geckodriver"); 
   // driver = new FirefoxDriver();  // create an instance of a web browser
      
      driver.get(url);                  // open the given url
   }

   @AfterEach
   void tearDown() throws Exception 
   {
      driver.quit();                   // close the browser
   } 

@Test
@DisplayName("Test 1: check if the server is available")
public void test_serverAvailable()
{
   driver.get("http://localhost");        
   assertEquals(true, driver.getTitle().contains("XAMPP"));
} 

@Test
@DisplayName("Test 2: check if the app is available")
public void test_appAvailable()
{
   assertEquals(driver.getTitle(), "My ToDo");         
}     

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet"
    href="href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
  <title>My ToDo</title>    
</head> 
<body>
</body>

@Test
@DisplayName("Test 3: check if the form inputs exist")
public void test_formInputExist_b()
{
   WebElement element1 = driver.findElement(By.xpath("(//input[@type='text'])")); 
   WebElement element2 = driver.findElement(By.xpath("(//input[@type='text'])[2]"));   
   List<WebElement> element3 = driver.findElements(By.xpath("//*[@type='radio']"));
   WebElement btn = driver.findElement(By.xpath("//*[@type='submit']"));
     
   assertAll("Check if task, due date, and priority exist", 
     () -> assertEquals("taskdesc", element1.getAttribute("name").toString()),
     () -> assertEquals("duedate", element2.getAttribute("name").toString()),
     () -> assertEquals("priority", element3.get(0).getAttribute("name").toString()),
     () -> assertEquals("normal", element3.get(0).getAttribute("value").toString()),
     () -> assertEquals("priority", element3.get(1).getAttribute("name").toString()),
     () -> assertEquals("high", element3.get(1).getAttribute("value").toString()),
     () -> assertEquals("Add Task", btn.getAttribute("value"))
   );
      
// note: design decision on names, kinds, and orders of the form inputs
// — use tests to guide how the software will be built.
}

<div class="container">
<h1> My ToDo</h1>     
  <form action="your-file-name.php" method="post">    
    <div class="mb-3 mt-3">     
      <label for="taskdesc" class="form-label">Task</label>
      <input type="text" class="form-control" name="taskdesc" /> 
    </div>
    <div class="mb-3">
      <label for="duedate" class="form-label">Due date
      <input type="text" class="form-control" name="duedate" />
    </div>            
    <div class="form-check">
      <input class="form-check-input" type="radio" name="priority" value="normal" />
      <label class="form-check-label" for="normalRadio">Normal</label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="priority" value="high" />
      <label class="form-check-label" for="highRadio">High</label>
    </div>             
    <div class="d-grid gap-2 mt-3">
      <input type ="submit" value="Add Task" name="add"  
             class="btn btn-dark" title="Add a task to My ToDo" />   
    </div>                
  </form>
</div>

<form action="your-file-name.php" method="post"> 

@Test
@DisplayName("Test 4: check that the newly added task is confirmed")
public void test_formEntry()
{
   WebElement taskdesc = driver.findElement(By.xpath("(//input[@name='taskdesc'])"));
   WebElement duedate = driver.findElement(By.xpath("(//input[@name='duedate'])"));
   WebElement normal = 
     driver.findElement(By.xpath("(//input[@name='priority' and @value='normal'])"));
   WebElement btn = driver.findElement(By.xpath("//*[@type='submit']"));
   
   taskdesc.sendKeys("task1");
   duedate.sendKeys("11/17/2025");
   normal.click();     
   btn.click();        
   
   String expected_output = "You entered task1 | 11/17/2025 | normal";
   assertTrue(driver.getPageSource().contains(expected_output));
}

<?php 
if ($_SERVER['REQUEST_METHOD'] == "POST")
{
   if (!empty($_POST['taskdesc']) && 
       !empty($_POST['duedate']) && 
       !empty($_POST['priority']))
   {
      echo "You entered " . $_POST['taskdesc'] . " | " . 
            $_POST['duedate'] . " | " . $_POST['priority'] . "<br/>";
   }
} 
?> 

Repeat the TDD process — complete the remaining functionalities of your app

• From software requirement to test requirement(s) to test case(s)
• Write test code to satisfy test requirements
• Write code to pass the test
• Refactor (todo.php code and test code) as appropriate
• Repeat until all tests associated with the chosen requirement have been covered
• Repeat until all requirements have been fulfilled
• Repeat until all user stories have been implemented

Task 4: Wrap-up questions

Think about your experience with tasks 1-3 and answer the following questions.

1. Compare your experience applying TDD to develop a standalone Java program (Duhhuh, Tic-Tac-Toe) and a web program (above).
   • Briefly discuss the similarities and differences.
2. Besides a standalone software and a web app, come up with one software application that the TDD process is appropriate. This could be any kind of software; e.g., a mobile app, embedded software, safety-critical software, ...
   • What might that software be?
   • Why do you think the TDD process is appropriate for that software?
   • How would you apply the TDD process to develop that software?

Grading rubric

• (5 points) — Providing evidence of your attempt, minimal effort

(-2.5 points) for 24 hours late (submitted after 22-Nov-2025 11am EST, by 23-Nov-2025 11am EST)
(-5 points) for 48 hours late (submitted after 23-Nov-2025 11am EST, by 24-Nov-2025 11am EST)

Submission

• Take a selfie (or picture) of your team — get creative and have fun! — and submit it with your POTD.
• Upload your files to POTD 10 on Gradescope. Be sure to submit all three files:
  1. ToDo source code file
  2. Selenium test file (.java, not .class)
  3. Your report (.pdf)
• Make sure you connect your partner to your group on Gradescope so that everyone receives credit
• Each team submits only one copy

Making your submission available to instructor and course staff is your responsibility; if we cannot access or open your file, you will not get credit. Be sure to test access to your file before the due date.