test(adapters-e2e): deploy to platform instead of ntl serve (#38643) (#38662)

* test(adapters-e2e): deploy to platform instead of ntl serve

* test: clear browser cache for interception tests

* test: delete deploy after the test

* test: how about not caching things to begin with?

* chore: update comment, only disable caching for webpack asset, restore previous assertions

(cherry picked from commit 5bc0992)

Co-authored-by: Michal Piechowiak <[email protected]>

Author: gatsbybot

e2e-tests/adapters/cypress/configs/netlify.ts

@@ -2,12 +2,12 @@ import { defineConfig } from "cypress"
 
 export default defineConfig({
   e2e: {
-    baseUrl: `http://localhost:8888`,
+    baseUrl: process.env.DEPLOY_URL || `http://localhost:8888`,
     // Netlify doesn't handle trailing slash behaviors really, so no use in testing it
-    excludeSpecPattern: [`cypress/e2e/trailing-slash.cy.ts`,],
+    excludeSpecPattern: [`cypress/e2e/trailing-slash.cy.ts`],
     projectId: `4enh4m`,
     videoUploadOnPasses: false,
     experimentalRunAllSpecs: true,
     retries: 2,
   },
-})
+})

e2e-tests/adapters/cypress/e2e/basics.cy.ts

@@ -1,44 +1,49 @@
 import { title } from "../../constants"
 
-describe('Basics', () => {
+describe("Basics", () => {
   beforeEach(() => {
     cy.intercept("/gatsby-icon.png").as("static-folder-image")
-    cy.intercept("/static/astro-**.png").as("img-import")
+    cy.intercept("/static/astro-**.png", req => {
+      req.on("before:response", res => {
+        // this generally should be permamently cached, but that cause problems with intercepting
+        // see https://docs.cypress.io/api/commands/intercept#cyintercept-and-request-caching
+        // so we disable caching for this response
+        // tests for cache-control headers should be done elsewhere
 
-    cy.visit('/').waitForRouteChange()
+        res.headers["cache-control"] = "no-store"
+      })
+    }).as("img-import")
+
+    cy.visit("/").waitForRouteChange()
   })
 
-  it('should display index page', () => {
-    cy.get('h1').should('have.text', title)
-    cy.title().should('eq', 'Adapters E2E')
+  it("should display index page", () => {
+    cy.get("h1").should("have.text", title)
+    cy.title().should("eq", "Adapters E2E")
   })
   // If this test fails, run "gatsby build" and retry
   it('should serve assets from "static" folder', () => {
     cy.wait("@static-folder-image").should(req => {
       expect(req.response.statusCode).to.be.gte(200).and.lt(400)
     })
 
-    cy.get('[alt="Gatsby Monogram Logo"]').should('be.visible')
+    cy.get('[alt="Gatsby Monogram Logo"]').should("be.visible")
   })
-  it('should serve assets imported through webpack', () => {
+  it("should serve assets imported through webpack", () => {
     cy.wait("@img-import").should(req => {
       expect(req.response.statusCode).to.be.gte(200).and.lt(400)
     })
 
-    cy.get('[alt="Gatsby Astronaut"]').should('be.visible')
+    cy.get('[alt="Gatsby Astronaut"]').should("be.visible")
   })
   it(`should show custom 404 page on invalid URL`, () => {
     cy.visit(`/non-existent-page`, {
       failOnStatusCode: false,
     })
 
-    cy.get('h1').should('have.text', 'Page not found')
+    cy.get("h1").should("have.text", "Page not found")
   })
-  it('should apply CSS', () => {
-    cy.get(`h1`).should(
-      `have.css`,
-      `color`,
-      `rgb(21, 21, 22)`
-    )
+  it("should apply CSS", () => {
+    cy.get(`h1`).should(`have.css`, `color`, `rgb(21, 21, 22)`)
   })
-})
+})

e2e-tests/adapters/package.json

@@ -16,8 +16,8 @@
     "test:template": "cross-env-shell CYPRESS_GROUP_NAME=$ADAPTER TRAILING_SLASH=$TRAILING_SLASH node ../../scripts/cypress-run-with-conditional-record-flag.js --browser chrome --e2e --config-file \"cypress/configs/$ADAPTER.ts\" --env TRAILING_SLASH=$TRAILING_SLASH",
     "test:template:debug": "cross-env-shell CYPRESS_GROUP_NAME=$ADAPTER TRAILING_SLASH=$TRAILING_SLASH npm run cy:open -- --config-file \"cypress/configs/$ADAPTER.ts\" --env TRAILING_SLASH=$TRAILING_SLASH",
     "test:debug": "npm-run-all -s build:debug ssat:debug",
-    "test:netlify": "start-server-and-test 'cross-env TRAILING_SLASH=always BROWSER=none ntl serve --port 8888' http://localhost:8888 'cross-env ADAPTER=netlify TRAILING_SLASH=always npm run test:template'",
-    "test:netlify:debug": "start-server-and-test 'cross-env TRAILING_SLASH=always BROWSER=none ntl serve --port 8888' http://localhost:8888 'cross-env ADAPTER=netlify TRAILING_SLASH=always npm run test:template:debug'",
+    "test:netlify": "cross-env TRAILING_SLASH=always node scripts/deploy-and-run/netlify.mjs test:template",
+    "test:netlify:debug": "cross-env TRAILING_SLASH=always node scripts/deploy-and-run/netlify.mjs test:template:debug",
     "test": "npm-run-all -c -s test:netlify"
   },
   "dependencies": {

e2e-tests/adapters/scripts/deploy-and-run/netlify.mjs

@@ -0,0 +1,58 @@
+// @ts-check
+
+import { execa } from "execa"
+
+process.env.NETLIFY_SITE_ID = process.env.E2E_ADAPTERS_NETLIFY_SITE_ID
+process.env.ADAPTER = "netlify"
+
+const deployTitle = process.env.CIRCLE_SHA1 || "N/A"
+
+const npmScriptToRun = process.argv[2] || "test:netlify"
+
+const deployResults = await execa(
+  "ntl",
+  ["deploy", "--build", "--json", "--message", deployTitle],
+  {
+    reject: false,
+  }
+)
+
+if (deployResults.exitCode !== 0) {
+  if (deployResults.stdout) {
+    console.log(deployResults.stdout)
+  }
+  if (deployResults.stderr) {
+    console.error(deployResults.stderr)
+  }
+
+  process.exit(deployResults.exitCode)
+}
+
+const deployInfo = JSON.parse(deployResults.stdout)
+
+process.env.DEPLOY_URL = deployInfo.deploy_url
+
+try {
+  await execa(`npm`, [`run`, npmScriptToRun], { stdio: `inherit` })
+} finally {
+  if (!process.env.GATSBY_TEST_SKIP_CLEANUP) {
+    console.log(`Deleting project with deploy_id ${deployInfo.deploy_id}`)
+
+    const deleteResponse = await execa("ntl", [
+      "api",
+      "deleteDeploy",
+      "--data",
+      `{ "deploy_id": "${deployInfo.deploy_id}" }`,
+    ])
+
+    if (deleteResponse.exitCode !== 0) {
+      throw new Error(
+        `Failed to delete project ${deleteResponse.stdout} ${deleteResponse.stderr} (${deleteResponse.exitCode})`
+      )
+    }
+
+    console.log(
+      `Successfully deleted project with deploy_id ${deployInfo.deploy_id}`
+    )
+  }
+}