test: setup for skew protection e2e tests and first test (server actions case)

Author: pieh

package-lock.json

@@ -65,10 +65,12 @@
     "@netlify/zip-it-and-ship-it": "^14.1.7",
     "@opentelemetry/api": "^1.8.0",
     "@playwright/test": "^1.43.1",
+    "@types/adm-zip": "^0.5.7",
     "@types/node": "^20.12.7",
     "@types/picomatch": "^3.0.0",
     "@types/uuid": "^10.0.0",
     "@vercel/nft": "^0.30.0",
+    "adm-zip": "^0.5.16",
     "cheerio": "^1.0.0-rc.12",
     "clean-package": "^2.2.0",
     "esbuild": "^0.25.0",

package.json

@@ -0,0 +1,250 @@
+import { expect } from '@playwright/test'
+import { execaCommand } from 'execa'
+import {
+  createE2EFixture,
+  createSite,
+  deleteSite,
+  getBuildFixtureVariantCommand,
+  publishDeploy,
+} from '../utils/create-e2e-fixture.js'
+import { test as baseTest } from '../utils/playwright-helpers.js'
+
+type ExtendedFixtures = {
+  skewProtection: {
+    siteId: string
+    url: string
+    deployA: Awaited<ReturnType<typeof createE2EFixture>>
+    deployB: Awaited<ReturnType<typeof createE2EFixture>>
+  }
+}
+
+const test = baseTest.extend<
+  { prepareSkewProtectionScenario: <T>(callback: () => T) => Promise<T> },
+  ExtendedFixtures
+>({
+  prepareSkewProtectionScenario: async ({ skewProtection }, use) => {
+    const fixture = async <T>(callback: () => T) => {
+      // first we will publish deployA
+      // then we call arbitrary callback to allow tests to load page using deployA
+      // and after that we will publish deployB so page loaded in browser is not using
+      // currently published deploy anymore, but still get results from initially published deploy
+
+      const pollURL = `${skewProtection.url}/variant.txt`
+
+      await publishDeploy(skewProtection.siteId, skewProtection.deployA.deployID)
+
+      // poll to ensure deploy was restored before continuing
+      while (true) {
+        const response = await fetch(pollURL)
+        const text = await response.text()
+        if (text.startsWith('A')) {
+          break
+        }
+        await new Promise((resolve) => setTimeout(resolve, 50))
+      }
+
+      const result = await callback()
+
+      await publishDeploy(skewProtection.siteId, skewProtection.deployB.deployID)
+
+      // https://netlify.slack.com/archives/C098NQ4DEF6/p1758207235732189
+      await new Promise((resolve) => setTimeout(resolve, 3000))
+
+      // poll to ensure deploy was restored before continuing
+      while (true) {
+        const response = await fetch(pollURL)
+        const text = await response.text()
+        if (text.startsWith('B')) {
+          break
+        }
+        await new Promise((resolve) => setTimeout(resolve, 50))
+      }
+
+      return result
+    }
+
+    await use(fixture)
+  },
+  skewProtection: [
+    async ({}, use) => {
+      // await use({
+      //   url: 'https://next-skew-tests-1758217746427.netlify.app',
+      //   siteId: 'bab7700f-68d8-4096-bf81-45b5160815e3',
+      //   deployA: {
+      //     deployID: '68cc461bc9e8be219baf99b6',
+      //     url: 'https://68cc461bc9e8be219baf99b6--bab7700f-68d8-4096-bf81-45b5160815e3.netlify.app',
+      //   },
+      //   deployB: {
+      //     deployID: '68cc462f7f7210026ec7a60c',
+      //     url: 'https://68cc462f7f7210026ec7a60c--bab7700f-68d8-4096-bf81-45b5160815e3.netlify.app',
+      //   },
+      // })
+
+      // return
+
+      const { siteId, url } = await createSite({
+        name: `next-skew-tests-${Date.now()}`,
+      })
+
+      let onBuildStart: () => void = () => {}
+      const waitForBuildStart = new Promise<void>((resolve) => {
+        onBuildStart = () => {
+          resolve()
+        }
+      })
+
+      const deployAPromise = createE2EFixture('skew-protection', {
+        siteId,
+        useBuildbot: true,
+        onBuildStart,
+        env: {
+          NETLIFY_NEXT_PLUGIN_SKEW_PROTECTION: 'true',
+        },
+      })
+
+      // we don't have to wait for deployA to finish completely before starting deployB, but we do have to wait a little bit
+      // to at least when build starts building, as otherwise whole deploy might be skipped and only second deploy happens
+      await waitForBuildStart
+
+      const deployBPromise = createE2EFixture('skew-protection', {
+        siteId,
+        useBuildbot: true,
+        env: {
+          NETLIFY_NEXT_PLUGIN_SKEW_PROTECTION: 'true',
+        },
+        onPreDeploy: async (fixtureRoot) => {
+          await execaCommand(
+            `${getBuildFixtureVariantCommand('variant-b')} --apply-file-changes-only`,
+            {
+              cwd: fixtureRoot,
+            },
+          )
+        },
+      })
+
+      const [deployA, deployB] = await Promise.all([deployAPromise, deployBPromise])
+
+      const fixture = {
+        url,
+        siteId,
+        deployA,
+        deployB,
+
+        cleanup: async () => {
+          if (process.env.E2E_PERSIST) {
+            console.log(
+              `💾 Fixture and deployed site have been persisted. To clean up automatically, run tests without the 'E2E_PERSIST' environment variable.`,
+            )
+
+            return
+          }
+
+          await deployA.cleanup()
+          await deployB.cleanup()
+          await deleteSite(siteId)
+        },
+      }
+
+      // for local iteration - this will print out snippet to allow to reuse previously deployed setup
+      // paste this at the top of `skewProtection` fixture function and this will avoid having to wait for redeploys
+      // keep in mind that if fixture itself require changes, you will have to redeploy
+      // uncomment console.log if you want to use same site/fixture and just iterate on test themselves
+      // and run a test with E2E_PERSIST=1 to keep site around for future runs
+      console.log(`await use(${JSON.stringify(fixture, null, 2)})\n\nreturn`)
+      await use(fixture)
+
+      await fixture.cleanup()
+    },
+    {
+      scope: 'worker',
+    },
+  ],
+})
+
+test.describe('Skew Protection', () => {
+  test.describe('App Router', () => {
+    test('should scope next/link navigation to initial deploy', async ({
+      page,
+      skewProtection,
+      prepareSkewProtectionScenario,
+    }) => {
+      await prepareSkewProtectionScenario(async () => {
+        return await page.goto(`${skewProtection.url}/app-router`)
+      })
+
+      // now that other deploy was published, we can show links
+      page.getByTestId('next-link-expand-button').click()
+
+      // wait for links to show
+      const element = await page.waitForSelector('[data-testid="next-link-linked-page"]')
+      element.click()
+
+      // ensure expected version of a page is rendered
+      await expect(page.getByTestId('linked-page-server-component-current-variant')).toHaveText(
+        '"A"',
+      )
+      await expect(page.getByTestId('linked-page-client-component-current-variant')).toHaveText(
+        '"A"',
+      )
+    })
+
+    test('should scope server actions to initial deploy', async ({
+      page,
+      skewProtection,
+      prepareSkewProtectionScenario,
+    }) => {
+      await prepareSkewProtectionScenario(async () => {
+        return await page.goto(`${skewProtection.url}/app-router`)
+      })
+
+      page.getByTestId('server-action-button').click()
+
+      const element = await page.waitForSelector('[data-testid="server-action-result"]')
+      const content = await element.textContent()
+
+      // if skew protection does not work, this will be either "B" (currently published deploy)
+      // or error about not finding server action - example of such error:
+      // "Error: Server Action "00a130b1673301d79679b22abb06a62c3125376d79" was not found on the server.
+      // Read more: https://nextjs.org/docs/messages/failed-to-find-server-action"
+      expect(content).toBe(`"A"`)
+    })
+
+    test('should scope route handler to initial deploy when manual fetch have X-Deployment-Id request header', async ({
+      page,
+      skewProtection,
+      prepareSkewProtectionScenario,
+    }) => {
+      await prepareSkewProtectionScenario(async () => {
+        return await page.goto(`${skewProtection.url}/app-router`)
+      })
+
+      page.getByTestId('scoped-route-handler-button').click()
+
+      const element = await page.waitForSelector('[data-testid="scoped-route-handler-result"]')
+      const content = await element.textContent()
+
+      // if skew protection does not work, this will be "B" (currently published deploy)
+      expect(content).toBe(`"A"`)
+    })
+
+    test('should NOT scope route handler to initial deploy when manual fetch does NOT have X-Deployment-Id request header', async ({
+      page,
+      skewProtection,
+      prepareSkewProtectionScenario,
+    }) => {
+      // this test doesn't really test skew protection, because in this scenario skew protection is not expected to kick in
+      // it's added here mostly to document this interaction
+      await prepareSkewProtectionScenario(async () => {
+        return await page.goto(`${skewProtection.url}/app-router`)
+      })
+
+      page.getByTestId('unscoped-route-handler-button').click()
+
+      const element = await page.waitForSelector('[data-testid="unscoped-route-handler-result"]')
+      const content = await element.textContent()
+
+      // when fetch in not scoped, it will use currently published deploy, so "B" is expected
+      expect(content).toBe(`"B"`)
+    })
+  })
+})

tests/e2e/skew-protection.test.ts

@@ -0,0 +1,5 @@
+"use server";
+
+export async function testAction() {
+  return process.env.SKEW_VARIANT;
+}

tests/fixtures/skew-protection/app/app-router/actions.js

@@ -0,0 +1,12 @@
+'use client'
+
+export function ClientComponent() {
+  return (
+    <p>
+      Client Component - variant:{' '}
+      <span data-testid="linked-page-client-component-current-variant">
+        {process.env.SKEW_VARIANT}
+      </span>
+    </p>
+  )
+}

tests/fixtures/skew-protection/app/app-router/linked/client-component.js

@@ -0,0 +1,16 @@
+import { ClientComponent } from './client-component'
+
+export default function Page() {
+  return (
+    <>
+      <h1>Skew Protection Testing - App Router - next/link navigation test</h1>
+      <p>
+        Current variant:{' '}
+        <span data-testid="linked-page-server-component-current-variant">
+          {process.env.SKEW_VARIANT}
+        </span>
+      </p>
+      <ClientComponent />
+    </>
+  )
+}