Adding Playwright tests to UI

ui-super-heroes/pom.xml

@@ -8,6 +8,7 @@
   <name>Quarkus Sample :: Super-Heroes :: User Interface</name>
   <description>The user interface</description>
   <properties>
+    <assertj.version>3.27.0</assertj.version>
     <compiler-plugin.version>3.13.0</compiler-plugin.version>
     <maven.compiler.release>21</maven.compiler.release>
     <microcks.version>0.2.3</microcks.version>
@@ -17,6 +18,7 @@
     <quarkus.platform.artifact-id>quarkus-bom</quarkus.platform.artifact-id>
     <quarkus.platform.group-id>io.quarkus.platform</quarkus.platform.group-id>
     <quarkus.platform.version>3.17.5</quarkus.platform.version>
+    <quarkus.playwright.version>2.0.0</quarkus.playwright.version>
     <quinoa.version>2.5.1</quinoa.version>
     <surefire-plugin.version>3.5.2</surefire-plugin.version>
   </properties>
@@ -108,6 +110,18 @@
       <artifactId>quarkus-junit5</artifactId>
       <scope>test</scope>
     </dependency>
+    <dependency>
+      <groupId>io.quarkiverse.playwright</groupId>
+      <artifactId>quarkus-playwright</artifactId>
+      <version>${quarkus.playwright.version}</version>
+      <scope>test</scope>
+    </dependency>
+    <dependency>
+      <groupId>org.assertj</groupId>
+      <artifactId>assertj-core</artifactId>
+      <version>${assertj.version}</version>
+      <scope>test</scope>
+    </dependency>
   </dependencies>
   <build>
     <plugins>

ui-super-heroes/src/main/java/io/quarkus/sample/superheroes/ui/EnvResource.java

@@ -38,6 +38,4 @@ public String getConfig() throws JsonProcessingException {
         // javascript snippet we can include with <script src="..."/>
         return "window.APP_CONFIG=" + this.objectMapper.writeValueAsString(config);
     }
-
-
 }

ui-super-heroes/src/main/resources/application.properties

@@ -1,19 +1,21 @@
 quarkus.application.name=ui-super-heroes
 quarkus.banner.path=banner.txt
+quarkus.test.integration-test-profile=test
 
 quarkus.http.test-port=0
 quarkus.rest.jackson.optimization.enable-reflection-free-serializers=true
 
 quarkus.quinoa.package-manager-install=true
-quarkus.quinoa.package-manager-install.node-version=20.18.0
+quarkus.quinoa.package-manager-install.node-version=22.12.0
+quarkus.quinoa.package-manager-install.npm-version=10.9.2
 
 # Fight service config
 api.base.url=http://localhost:8082
-%dev.api.base.url=http://${quarkus.microcks.default.http.host}:${quarkus.microcks.default.http.port}/rest/Fights+API/1.0
+%dev,test.api.base.url=http://${quarkus.microcks.default.http.host}:${quarkus.microcks.default.http.port}/rest/Fights+API/1.0
 
 ## Microcks
 quarkus.microcks.devservices.enabled=false
-%dev.quarkus.microcks.devservices.enabled=true
+%dev,test.quarkus.microcks.devservices.enabled=true
 quarkus.microcks.devservices.image-name=quay.io/microcks/microcks-uber:nightly
 quarkus.microcks.devservices.artifacts.primaries=../rest-fights/openapi-schema.yml
 

ui-super-heroes/src/main/webui/src/app/App.test.js

@@ -2,7 +2,7 @@ import React from "react";
 import {fireEvent, render, screen} from "@testing-library/react";
 import App from "./App";
 import "@testing-library/jest-dom";
-import {act} from "react-dom/test-utils";
+import {act} from "react";
 import {getFights, getRandomFighters, getRandomLocation, startFight} from "./shared/api/fight-service";
 
 jest.mock("./shared/api/fight-service")

ui-super-heroes/src/main/webui/src/app/fight-list/FightList.js

@@ -1,24 +1,24 @@
 export function FightList({fights}) {
   return (
-    <table className="fights-table table-striped">
+    <table className="fights-table table-striped" role="grid" aria-label="fights-table">
       <thead>
-        <tr>
-          <th className="fight-list-header thead-dark">Id</th>
-          <th className="fight-list-header thead-dark">Fight Date</th>
-          <th className="fight-list-header thead-dark">Winner</th>
-          <th className="fight-list-header thead-dark">Loser</th>
-          <th className="fight-list-header thead-dark">Location</th>
+        <tr role="rowheader">
+          <th role="columnheader" className="fight-list-header thead-dark">Id</th>
+          <th role="columnheader" className="fight-list-header thead-dark">Fight Date</th>
+          <th role="columnheader" className="fight-list-header thead-dark">Winner</th>
+          <th role="columnheader" className="fight-list-header thead-dark">Loser</th>
+          <th role="columnheader" className="fight-list-header thead-dark">Location</th>
         </tr>
       </thead>
-      <tbody>
+      <tbody role="rowgroup">
 
       {fights && fights.map(element => (
-        <tr key={element.id}>
-          <td className="fight-list-cell"> {element.id} </td>
-          <td className="fight-list-cell"> {element.fightDate} </td>
-          <td className="fight-list-cell"> {element.winnerName} </td>
-          <td className="fight-list-cell"> {element.loserName} </td>
-          <td className="fight-list-cell"><a href={element?.location?.picture}>{element?.location?.name}</a></td>
+        <tr role="row" key={element.id}>
+          <td role="cell" data-label="Id" className="fight-list-cell"> {element.id} </td>
+          <td role="cell" data-label="Fight Date" className="fight-list-cell"> {element.fightDate} </td>
+          <td role="cell" data-label="Winner" className="fight-list-cell"> {element.winnerName} </td>
+          <td role="cell" data-label="Loser" className="fight-list-cell"> {element.loserName} </td>
+          <td role="cell" data-label="Location" className="fight-list-cell"><a href={element?.location?.picture}>{element?.location?.name}</a></td>
         </tr>))}
       </tbody>
     </table>

ui-super-heroes/src/main/webui/src/app/fight-list/FightList.test.js

@@ -2,7 +2,7 @@ import React from "react"
 import {render, screen, within} from "@testing-library/react"
 import "@testing-library/jest-dom"
 import {FightList} from "./FightList"
-import {act} from "react-dom/test-utils"
+import {act} from "react"
 
 jest.mock("../shared/api/fight-service")
 
@@ -39,11 +39,11 @@ describe("the fight list", () => {
       render(<FightList fights={[fight]}/>)
     })
 
-    const table = screen.getByRole("table")
+    const table = screen.getByRole("grid")
     expect(table).toBeInTheDocument()
 
     const thead = within(table).getAllByRole('rowgroup')[0]
-    const headRows = within(thead).getAllByRole("row")
+    const headRows = within(thead).getAllByRole("rowheader")
     const headCols = within(headRows[0]).getAllByRole("columnheader")
 
     expect(headCols).toHaveLength(5)
@@ -59,7 +59,7 @@ describe("the fight list", () => {
       render(<FightList fights={[fight]}/>)
     })
 
-    const table = screen.getByRole("table")
+    const table = screen.getByRole("grid")
     const tbody = within(table).getAllByRole('rowgroup')[1];
     const bodyRows = within(tbody).getAllByRole('row');
     const rowCols = within(bodyRows[0]).getAllByRole("cell")

ui-super-heroes/src/main/webui/src/app/fight/Fight.test.js

@@ -3,7 +3,7 @@ import {fireEvent, render, screen} from "@testing-library/react"
 import "@testing-library/jest-dom"
 import Fight from "./Fight"
 import {generateImage, getRandomFighters, getRandomLocation, narrateFight, startFight} from "../shared/api/fight-service"
-import {act} from "react-dom/test-utils"
+import {act} from "react"
 
 jest.mock("../shared/api/fight-service")
 

ui-super-heroes/src/test/java/io/quarkus/sample/superheroes/ui/AllWebUITest.java

@@ -10,8 +10,8 @@
 @QuarkusTest
 @TestProfile(QuinoaTestProfiles.EnableAndRunTests.class)
 class AllWebUITest {
-  @Test
-  void runTest() {
-    // we don't need anything here, it will run the package.json "test"
-  }
+    @Test
+    void runTest() {
+        // we don't need anything here, it will run the package.json "test"
+    }
 }

ui-super-heroes/src/test/java/io/quarkus/sample/superheroes/ui/EnvResourceIT.java

@@ -6,6 +6,6 @@
  * Tests the resource layer ({@link EnvResource}).
  */
 @QuarkusIntegrationTest
-public class EnvResourceIT extends EnvResourceTests {
+class EnvResourceIT extends EnvResourceTests {
 
 }

ui-super-heroes/src/test/java/io/quarkus/sample/superheroes/ui/EnvResourceTests.java

@@ -2,8 +2,12 @@
 
 import static io.restassured.RestAssured.get;
 import static jakarta.ws.rs.core.Response.Status.OK;
+import static org.assertj.core.api.Assertions.assertThat;
 import static org.hamcrest.Matchers.is;
 
+import java.util.Optional;
+
+import org.eclipse.microprofile.config.ConfigProvider;
 import org.junit.jupiter.api.Test;
 
 import io.quarkus.test.junit.QuarkusTest;
@@ -12,21 +16,26 @@
  * Tests the resource layer ({@link EnvResource}).
  */
 @QuarkusTest
-public class EnvResourceTests {
-
-  /**
-   * Checks that the react app would be able to do
-   * <script src="env.js"></script>
-   * and get something sensible back
-   */
-	@Test
-	public void javascriptEndpoint() {
-		get("/env.js")
-			.then()
-			.statusCode(OK.getStatusCode())
-			.body(is("window.APP_CONFIG={\"API_BASE_URL\":\"http://localhost:8082\",\"CALCULATE_API_BASE_URL\":false}"));
-    // This content is javascript, not json. Doing a simple equality check like this
-    // is brittle, but we can update it to something more flexible if we start to see issues
-	}
+class EnvResourceTests {
+
+    /**
+     * Checks that the react app would be able to do <script src="env.js"></script> and get something sensible back
+     */
+    @Test
+    void javascriptEndpoint() {
+        var baseUrl = getApiBaseUrl();
+
+        assertThat(baseUrl).isNotBlank();
+
+        get("/env.js").then().statusCode(OK.getStatusCode()).body(
+                is("window.APP_CONFIG={\"API_BASE_URL\":\"%s\",\"CALCULATE_API_BASE_URL\":false}".formatted(baseUrl)));
+        // This content is javascript, not json. Doing a simple equality check like this
+        // is brittle, but we can update it to something more flexible if we start to see issues
+    }
 
+    protected String getApiBaseUrl() {
+        return Optional.ofNullable(ConfigProvider.getConfig())
+                .flatMap(config -> config.getOptionalValue("api.base.url", String.class))
+                .orElse("http://localhost:8082");
+    }
 }

ui-super-heroes/src/test/java/io/quarkus/sample/superheroes/ui/WebUIIT.java

@@ -6,6 +6,6 @@
  * Tests the resource layer ({@link EnvResource}).
  */
 @QuarkusIntegrationTest
-public class WebUIIT extends WebUITests {
+class WebUIIT extends WebUITests {
 
 }