playwright: verify that the 404 page is styled

The 404 page is not only a place to tell the user that what they were looking for cannot be found, but also to guide them to what _can_ be found, including the search box and the navigation box. Signed-off-by: Johannes Schindelin <[email protected]>
git · Sep 26, 2024 · 63b2080 · 63b2080
1 parent 7f4e3a3
commit 63b2080
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git a/script/serve-public.js b/script/serve-public.js
@@ -41,9 +41,8 @@ const handler = (request, response) => {
         fileStream.pipe(response);
     } catch(e) {
         console.log(`Could not read ${filename}`);
-        response.writeHead(404, {'Content-Type': 'text/plain'});
-        response.write('404 Not Found\n');
-        response.end();
+        response.writeHead(404, {'Content-Type': 'text/html'});
+        fs.createReadStream(path.join(basePath, '404.html')).pipe(response);
         return;
     }
 };

diff --git a/tests/git-scm.spec.js b/tests/git-scm.spec.js
@@ -230,3 +230,18 @@ test('book', async ({ page }) => {
   }
   await expect(page.getByRole('document')).toHaveText(/Snapshot’lar, Fərqlər Yox/)
 })
+
+test('404', async ({ page }) => {
+  await page.goto(`${url}does-not.exist`)
+
+  await expect(page.locator('.inner h1')).toHaveText(`That page doesn't exist.`)
+
+  // the 404 page should be styled
+  await expect(page.locator('link[rel="stylesheet"]')).toHaveAttribute('href', /application(\.min)?\.css$/)
+
+  // the search box is shown
+  await expect(page.locator('#search-text')).toBeVisible()
+
+  // the usual navbar is shown
+  await expect(page.getByRole('link', { name: 'Community' })).toBeVisible()
+})