Add Laravel Dusk for e2e browser testing

Dockerfile

@@ -69,6 +69,7 @@ RUN if [ "$DEVELOPMENT_BUILD" = '1' ]; then \
     apt-get install -y \
         cmake \
         rsync \
+        libzip-dev `# needed for Laravel Dusk/Selenium` \
         && \
     `# Cypress dependencies` \
     apt-get install -y \
@@ -89,7 +90,8 @@ RUN if [ "$DEVELOPMENT_BUILD" = '1' ]; then \
     chown root /tmp/.X11-unix/ && \
     mkdir -p /var/www/.cache/mesa_shader_cache && \
     pecl install xdebug && \
-    docker-php-ext-enable xdebug; \
+    docker-php-ext-enable xdebug && \
+    docker-php-ext-install zip; \
 fi
 
 # Create an npm cache directory for www-data

app/cdash/tests/CMakeLists.txt

@@ -222,8 +222,11 @@ set_tests_properties(/Feature/GraphQL/CoverageTypeTest PROPERTIES DEPENDS /Featu
 add_laravel_test(/Feature/PurgeUnusedProjectsCommand)
 set_tests_properties(/Feature/PurgeUnusedProjectsCommand PROPERTIES DEPENDS "/Feature/GraphQL/TestTypeTest;/Feature/GraphQL/TestMeasurementTypeTest;/Feature/GraphQL/NoteTypeTest;/Feature/GraphQL/BuildMeasurementTypeTest;/Feature/GraphQL/CoverageTypeTest")
 
+add_laravel_test(/Browser/Pages/ProjectSitesPageTest)
+set_tests_properties(/Browser/Pages/ProjectSitesPageTest PROPERTIES DEPENDS /Feature/PurgeUnusedProjectsCommand)
+
 add_laravel_test(/Feature/MeasurementPositionMigration)
-set_tests_properties(/Feature/MeasurementPositionMigration PROPERTIES DEPENDS /Feature/PurgeUnusedProjectsCommand)
+set_tests_properties(/Feature/MeasurementPositionMigration PROPERTIES DEPENDS /Browser/Pages/ProjectSitesPageTest)
 
 add_laravel_test(/Feature/RemoveMeasurementCheckboxesMigration)
 set_tests_properties(/Feature/RemoveMeasurementCheckboxesMigration PROPERTIES DEPENDS /Feature/MeasurementPositionMigration)

composer.json

@@ -50,9 +50,11 @@
     "ext-dom": "*",
     "ext-gd": "*",
     "ext-xdebug": "*",
+    "ext-zip": "*",
     "fakerphp/faker": "1.23.1",
     "friendsofphp/php-cs-fixer": "3.64.0",
     "larastan/larastan": "^2.7",
+    "laravel/dusk": "8.2.11",
     "mockery/mockery": "1.6.12",
     "phpstan/extension-installer": "1.4.3",
     "phpstan/phpstan": "1.12.7",

docker/docker-compose.dev.yml

@@ -12,6 +12,7 @@ services:
       - ..:/cdash_src:ro
     links:
       - ldap
+      - selenium
 
   # Used for testing LDAP authentication
   ldap:
@@ -26,3 +27,19 @@ services:
       LDAP_USERS: ldapuser01,ldapuser02
       LDAP_PASSWORDS: password1,password2
       LDAP_PORT_NUMBER: 389
+
+  # Used for live browser testing
+  selenium:
+    image: selenium/standalone-chromium
+    container_name: selenium
+    volumes:
+      - /dev/shm:/dev/shm
+    ports:
+      - 4444:4444
+      - 7900:7900
+    environment:
+      # Allows developers to view running jobs via browser-based VNC at localhost:7900
+      VNC_NO_PASSWORD: true
+      # Selenium takes a long time to detect idle+clean up, so allow a large number of sessions to exist at once if needed.
+      SE_NODE_OVERRIDE_MAX_SESSIONS: true
+      SE_NODE_MAX_SESSIONS: 500

phpstan-baseline.neon

@@ -32355,11 +32355,6 @@ parameters:
 			count: 5
 			path: tests/Feature/GraphQL/ProjectTypeTest.php
 
-		-
-			message: "#^Binary operation \"\\.\" between mixed and '_' results in an error\\.$#"
-			count: 1
-			path: tests/Feature/GraphQL/SiteTypeTest.php
-
 		-
 			message: "#^Cannot access offset 'edges' on mixed\\.$#"
 			count: 3

resources/js/vue/components/ProjectSitesPage.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div data-test="all-sites-table">
     <loading-indicator :is-loading="!allSites">
       <data-table
         :column-groups="[

resources/js/vue/components/shared/DataTable.vue

@@ -3,6 +3,7 @@
     class="tabb striped"
     :class="{ 'full-width': fullWidth }"
     data-cy="data-table"
+    data-test="data-table"
   >
     <thead>
       <tr
@@ -38,12 +39,14 @@
       <tr
         v-for="row in (sortable ? sortedRows : rows)"
         data-cy="data-table-row"
+        data-test="data-table-row"
       >
         <td
           v-for="column in columns"
           :class="(row[column.name]?.classes ?? []).concat(column.expand ? [] : ['shrink'])"
           class="table-cell"
           data-cy="data-table-cell"
+          data-test="data-table-cell"
         >
           <!--
             Display a custom template for each table cell, or a default template

tests/Browser/Pages/ProjectSitesPageTest.php

@@ -0,0 +1,94 @@
+<?php
+
+namespace Tests\Browser\Pages;
+
+use Illuminate\Support\Str;
+use Laravel\Dusk\Browser;
+use Tests\BrowserTestCase;
+use Tests\Traits\CreatesProjects;
+use Tests\Traits\CreatesSites;
+
+class ProjectSitesPageTest extends BrowserTestCase
+{
+    use CreatesProjects;
+    use CreatesSites;
+
+    public function testSiteDisplaysLatestInformation(): void
+    {
+        $project = $this->makePublicProject();
+        $site = $this->makeSite();
+        $site->information()->createMany([
+            [
+                'totalphysicalmemory' => 5678,
+                'numberphysicalcpus' => 2,
+            ],
+            [
+                'totalphysicalmemory' => 8765,
+                'numberphysicalcpus' => 4,
+            ],
+        ]);
+        $project->builds()->create([
+            'name' => 'build1',
+            'uuid' => Str::uuid()->toString(),
+            'siteid' => $site->id,
+        ]);
+
+        $this->browse(function (Browser $browser) use ($project) {
+            $browser->visit("/projects/{$project->id}/sites")
+                ->whenAvailable('@all-sites-table > @data-table', function (Browser $browser) {
+                    self::assertEquals('4', $browser->elements('@data-table-cell')[1]->getText());
+                    self::assertEquals('8.56 GiB', $browser->elements('@data-table-cell')[2]->getText());
+                });
+        });
+    }
+
+    public function testSiteListPagination(): void
+    {
+        $project = $this->makePublicProject();
+        $sites = [];
+        for ($i = 0; $i < 120; $i++) {
+            $sites[$i] = $this->makeSite();
+        }
+
+        // No submissions to the project yet, so we shouldn't see any sites
+        $this->browse(function (Browser $browser) use ($project) {
+            $browser->visit("/projects/{$project->id}/sites")
+                ->whenAvailable('@all-sites-table > @data-table', function (Browser $browser) {
+                    self::assertCount(0, collect($browser->elements('@data-table-row')));
+                });
+        });
+
+        // Submit a build for the first 110 sites so we have enough data to verify that pagination works
+        for ($i = 0; $i < 110; $i++) {
+            $project->builds()->create([
+                'name' => 'build1',
+                'uuid' => Str::uuid()->toString(),
+                'siteid' => $sites[$i]->id,
+            ]);
+        }
+
+        // Submit a second build for a few sites to verify that the sites displayed actually correspond to unique sites
+        for ($i = 0; $i < 5; $i++) {
+            $project->builds()->create([
+                'name' => 'build1',
+                'uuid' => Str::uuid()->toString(),
+                'siteid' => $sites[$i]->id,
+            ]);
+        }
+
+        $this->browse(function (Browser $browser) use ($sites, $project) {
+            $browser->visit("/projects/{$project->id}/sites")
+                ->whenAvailable('@all-sites-table > @data-table', function (Browser $browser) use ($sites) {
+                    // We have to add a brief pause to let Vue render both parts of the table
+                    // This should be replaced with a more robust solution in the future.
+                    $browser->pause(500);
+
+                    self::assertCount(110, collect($browser->elements('@data-table-row')));
+
+                    for ($i = 0; $i < 110; $i++) {
+                        $browser->assertSee($sites[$i]->name);
+                    }
+                });
+        });
+    }
+}