feat:

src/main/resources/templates/index.html

@@ -23,6 +23,7 @@ <h1>XP Voting</h1>
     </form>
 
     <h2>Proposed topic titles</h2>
+
     <div th:replace="proposal-list.html"></div>
 
     <!-- <form action="#" th:action="@{/clear}" th:object="${password}" method="post">

src/main/resources/templates/proposal-list.html

@@ -4,10 +4,18 @@
   hx-target="this"
   hx-swap="outerHTML"
 >
-  <ul th:each="proposal : ${proposalslist}">
-    <li th:text="${proposal}"></li>
-  </ul>
-  <ul th:if="${proposalslist.empty}">
-    <li>No topics yet</li>
-  </ul>
-</div>
+
+<div th:if="${proposalslist.empty}"><p>No Topics yet</p></div>
+  <table th:each="proposal : ${proposalslist}">
+<tr>
+  <td th:text="${proposal}">
+  </td>
+  <td th:text="${votesTotal}">
+  </td>
+  <td>
+   <button>Vote</button> <!-- <button th:onPressFunction="${refToID1}">Vote</button> -->
+  </td>
+</tr>
+
+  </div>
+

src/test/java/com/nickhumberstone/xpvoting/acceptance/UiAcceptanceIT.java

@@ -73,25 +73,37 @@ private void submitProposal(String value) {
     void shouldBeAbleToProposeAndViewProposal() {
         submitProposal("XTC is cool");
         assertAll(
-                () -> assertThat(page.getByRole(AriaRole.LISTITEM).and(page.getByText("XTC is cool"))).isVisible(),
+                () -> assertThat(page.getByRole(AriaRole.CELL).and(page.getByText("XTC is cool"))).isVisible(),
                 () -> assertThat(page.getByLabel("Proposal")).isEmpty());
     }
 
     @Test
     void shouldBeAbleToSeeProposalsAsSeparateListItems() {
         submitProposal("Topic 1");
         submitProposal("Topic 2");
-        assertThat(page.locator("ul")).hasText(new String[] { "Topic 1", "Topic 2" });
+        assertAll(
+                () -> assertThat(page.getByRole(AriaRole.CELL).and(page.getByText("Topic 1"))).isVisible(),
+                () -> assertThat(page.getByRole(AriaRole.CELL).and(page.getByText("Topic 2"))).isVisible());
     }
 
     @Test
     void newTopicSubmissionShouldDisplayWithoutRefresh() {
         // Create secondary tab
         Page page2 = context.newPage();
         page2.navigate("http://localhost:" + port);
-        assertThat(page2.locator("ul")).hasText("No topics yet");
+        assertThat(page2.getByRole(AriaRole.PARAGRAPH).and(page2.getByText("No topics yet"))).isVisible();
         submitProposal("Topic Refreshes");
-        assertThat(page2.locator("ul")).hasText("Topic Refreshes");
+        assertThat(page2.getByRole(AriaRole.CELL).and(page2.getByText("Topic Refreshes"))).isVisible();
+    }
+
+    @Test
+    @Disabled
+    void shouldBeAbleToVoteAndSeeVoteNumberIncrease() {
+        submitProposal("Topic 1");
+        // now we have a table with a topic and vote score of 0 displayed, and a vote
+        // button
+        page.getByRole(AriaRole.BUTTON).and(page.getByText("Vote")).click();
+        assertThat(page.getByRole(AriaRole.CELL)).hasText(new String[] { "Topic 1", "Topic 2" });
     }
 
     @Test
@@ -102,4 +114,5 @@ void shouldBeAbleToClearProposals() {
         page.getByRole(AriaRole.BUTTON).and(page.getByText("Clear Proposals")).click();
         assertThat(page.getByText("No topics yet")).isVisible();
     }
+
 }