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]>

Author: dscho

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;
     }
 };

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()
+})