test: add user journey e2e tests for main features (#348)

* test: add user journey e2e tests for main features

We'll be adding a few more around caching in a subsequent PR and that
should be it.

* chore: remove multi-browser e2e testing

It doesn't provide much value and it triples the runtime.

Author: serhalp

playwright.config.ts

@@ -26,22 +26,4 @@ export default defineConfig({
       'x-nf-debug-logging': '1',
     },
   },
-
-  /* Configure projects for major browsers */
-  projects: [
-    {
-      name: 'chromium',
-      use: { ...devices['Desktop Chrome'] },
-    },
-
-    {
-      name: 'firefox',
-      use: { ...devices['Desktop Firefox'] },
-    },
-
-    {
-      name: 'webkit',
-      use: { ...devices['Desktop Safari'] },
-    },
-  ],
 })

tests/e2e/fixtures/edge-site/app/routes/about.tsx

@@ -1,8 +1,22 @@
+import { Await, defer, useLoaderData } from "@remix-run/react";
+import { Suspense } from "react";
+
+export async function loader() {
+  const messagePromise = new Promise<string>((resolve) => {
+    setTimeout(() => {
+      resolve("This is an about page streamed from the server.");
+    }, 2000);
+  });
+  return defer({ message: messagePromise });
+}
 export default function About() {
+  const { message } = useLoaderData<typeof loader>();
   return (
     <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.4" }}>
       <h1>About</h1>
-      <p>This is an about page.</p>
+      <Suspense fallback={"Loading..."}>
+        <Await resolve={message}>{(message) => <p>{message}</p>}</Await>
+      </Suspense>
     </div>
   );
 }

tests/e2e/fixtures/edge-site/netlify/edge-functions/pong.ts

@@ -0,0 +1,11 @@
+import type { Config } from "@netlify/edge-functions";
+
+const handler = async (): Promise<Response> => {
+  return new Response("Pong!");
+};
+
+export default handler;
+
+export const config: Config = {
+  path: "/ping",
+};

tests/e2e/fixtures/edge-site/netlify/functions/blorble.ts

@@ -0,0 +1,11 @@
+import type { Config } from "@netlify/functions";
+
+const handler = async (): Promise<Response> => {
+  return new Response("gurble");
+};
+
+export default handler;
+
+export const config: Config = {
+  path: "/please-blorble",
+};

tests/e2e/fixtures/serverless-site/app/routes/about.tsx

@@ -1,8 +1,22 @@
+import { Await, defer, useLoaderData } from "@remix-run/react";
+import { Suspense } from "react";
+
+export async function loader() {
+  const messagePromise = new Promise<string>((resolve) => {
+    setTimeout(() => {
+      resolve("This is an about page streamed from the server.");
+    }, 2000);
+  });
+  return defer({ message: messagePromise });
+}
 export default function About() {
+  const { message } = useLoaderData<typeof loader>();
   return (
     <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.4" }}>
       <h1>About</h1>
-      <p>This is an about page.</p>
+      <Suspense fallback={"Loading..."}>
+        <Await resolve={message}>{(message) => <p>{message}</p>}</Await>
+      </Suspense>
     </div>
   );
 }

tests/e2e/fixtures/serverless-site/app/routes/blobs.tsx

@@ -0,0 +1,19 @@
+import { json, useLoaderData } from "@remix-run/react";
+import { getStore } from "@netlify/blobs";
+
+export async function loader() {
+  const store = getStore({ name: "favorites", consistency: "strong" });
+  await store.set("cereal", "Raisin Bran");
+  const favCereal = await store.get("cereal");
+  return json({ favCereal });
+}
+
+export default function BlobsDemo() {
+  const { favCereal } = useLoaderData<typeof loader>();
+  return (
+    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.4" }}>
+      <h1>Netlify Blobs demo page</h1>
+      <p>My favorite breakfast cereal is {favCereal}</p>
+    </div>
+  );
+}

tests/e2e/fixtures/serverless-site/app/routes/images.tsx

@@ -0,0 +1,11 @@
+export default function ImagesDemo() {
+  return (
+    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.4" }}>
+      <h1>Netlify Image CDN demo page</h1>
+      <img
+        src={`/.netlify/images?url=/camel.jpg&fit=cover&w=300&h=300&position=left`}
+        alt="A camel"
+      />
+    </div>
+  );
+}

tests/e2e/fixtures/serverless-site/netlify/edge-functions/pong.ts

@@ -0,0 +1,11 @@
+import type { Config } from "@netlify/edge-functions";
+
+const handler = async (): Promise<Response> => {
+  return new Response("Pong!");
+};
+
+export default handler;
+
+export const config: Config = {
+  path: "/ping",
+};

tests/e2e/fixtures/serverless-site/netlify/functions/blorble.ts

@@ -0,0 +1,11 @@
+import type { Config } from "@netlify/functions";
+
+const handler = async (): Promise<Response> => {
+  return new Response("gurble");
+};
+
+export default handler;
+
+export const config: Config = {
+  path: "/please-blorble",
+};

tests/e2e/fixtures/serverless-site/package.json

@@ -11,6 +11,7 @@
     "typecheck": "tsc"
   },
   "dependencies": {
+    "@netlify/blobs": "^7.3.0",
     "@netlify/remix-adapter": "*",
     "@remix-run/node": "^2.9.2",
     "@remix-run/react": "^2.9.2",
@@ -20,6 +21,7 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@netlify/functions": "^2.7.0",
     "@remix-run/dev": "^2.9.2",
     "@types/react": "^18.2.20",
     "@types/react-dom": "^18.2.7",

tests/e2e/fixtures/serverless-site/public/camel.jpg

@@ -4,15 +4,102 @@ test.describe('User journeys', () => {
   test('serves a response from the origin when using @netlify/remix-adapter', async ({ page, serverlessSite }) => {
     const response = await page.goto(serverlessSite.url)
     await expect(page.getByRole('heading', { name: /Welcome to Remix/i })).toBeVisible()
+    expect(response?.status()).toBe(200)
     expect(response?.headers()['x-nf-function-type']).toBe('request')
   })
 
   test('serves a response from the edge when using @netlify/remix-edge-adapter', async ({ page, edgeSite }) => {
     const response = await page.goto(edgeSite.url)
+    expect(response?.status()).toBe(200)
     await expect(page.getByRole('heading', { name: /Welcome to Remix/i })).toBeVisible()
     expect(response?.headers()['x-nf-edge-functions']).toBe('remix-server')
   })
 
+  test('serves a 404 for a request to a URL matching no routes', async ({ page, serverlessSite }) => {
+    const response = await page.goto(`${serverlessSite.url}/not-a-real-path`)
+    expect(response?.status()).toBe(404)
+    await expect(page.getByRole('heading', { name: /404 Not Found/i })).toBeVisible()
+  })
+
+  test('serves a response from a user-defined Netlify Function on a custom path when using origin SSR', async ({
+    page,
+    serverlessSite,
+  }) => {
+    const response = await page.goto(`${serverlessSite.url}/please-blorble`)
+    expect(response?.status()).toBe(200)
+    await expect(page.getByText('gurble')).toBeVisible()
+  })
+
+  test('serves a response from a user-defined Netlify Function on a custom path when using edge SSR', async ({
+    page,
+    edgeSite,
+  }) => {
+    const response = await page.goto(`${edgeSite.url}/please-blorble`)
+    expect(response?.status()).toBe(200)
+    await expect(page.getByText('gurble')).toBeVisible()
+  })
+
+  test('serves a response from a user-defined Netlify Edge Function on a custom path when using origin SSR', async ({
+    page,
+    serverlessSite,
+  }) => {
+    const response = await page.goto(`${serverlessSite.url}/ping`)
+    expect(response?.status()).toBe(200)
+    await expect(page.getByText('Pong!')).toBeVisible()
+  })
+
+  test('serves a response from a user-defined Netlify Edge Function on a custom path when using edge SSR', async ({
+    page,
+    edgeSite,
+  }) => {
+    const response = await page.goto(`${edgeSite.url}/ping`)
+    expect(response?.status()).toBe(200)
+    await expect(page.getByText('Pong!')).toBeVisible()
+  })
+
+  test('streams a response from the origin as it is rendered and renders postponed nodes afterward', async ({
+    page,
+    serverlessSite,
+  }) => {
+    const response = await page.goto(`${serverlessSite.url}/about`)
+    expect(response?.status()).toBe(200)
+    await expect(page.getByRole('heading', { name: /About/i })).toBeVisible()
+    // This page has an artificial 2s delay on the server
+    await expect(page.getByText('This is an about page streamed from the server.')).toBeVisible({
+      timeout: 3000,
+    })
+  })
+
+  test('streams a response from the edge as it is rendered and renders postponed nodes afterward', async ({
+    page,
+    edgeSite,
+  }) => {
+    const response = await page.goto(`${edgeSite.url}/about`)
+    expect(response?.status()).toBe(200)
+    await expect(page.getByRole('heading', { name: /About/i })).toBeVisible()
+    // This page has an artificial 2s delay on the server
+    await expect(page.getByText('This is an about page streamed from the server.')).toBeVisible({
+      timeout: 3000,
+    })
+  })
+
+  test('can use Netlify Blobs in Remix loaders', async ({ page, serverlessSite }) => {
+    const response = await page.goto(`${serverlessSite.url}/blobs`)
+    expect(response?.status()).toBe(200)
+    await expect(page.getByRole('heading', { name: /Netlify Blobs/i })).toBeVisible()
+    await expect(page.getByText('My favorite breakfast cereal is Raisin Bran')).toBeVisible()
+  })
+
+  test('can use the Netlify Image CDN with manually constructed URLs', async ({ page, serverlessSite }) => {
+    const response = await page.goto(`${serverlessSite.url}/images`)
+    expect(response?.status()).toBe(200)
+    await expect(page.getByRole('heading', { name: /Netlify Image CDN/i })).toBeVisible()
+    await expect(page.getByRole('img')).toBeVisible()
+    // We've dynamically requested these dimensions from the Image CDN, so this proves that it works
+    await expect(page.getByRole('img')).toHaveJSProperty('width', 300)
+    await expect(page.getByRole('img')).toHaveJSProperty('height', 300)
+  })
+
   test.describe('classic Remix compiler', () => {
     test('serves a response from the origin when using @netlify/remix-adapter', async ({
       page,