test(gatsby-script): Off main thread e2e

e2e-tests/development-runtime/.gitignore

@@ -76,3 +76,6 @@ cypress/videos
 __history__.json
 
 src/gatsby-types.d.ts
+/test-results/
+/playwright-report/
+/playwright/.cache/

e2e-tests/development-runtime/cypress/integration/gatsby-script/gatsby-script-inline-scripts.js

@@ -94,8 +94,8 @@ for (const { descriptor, inlineScriptType } of typesOfInlineScripts) {
       })
 
       it(`should load only once after the page is refreshed`, () => {
-        cy.visit(page.target)
-        cy.reload()
+        cy.visit(page.target).waitForRouteChange()
+        cy.reload().url().should(`contain`, page.target)
 
         cy.get(`table[id=script-mark-records] tbody`)
           .children()
@@ -131,8 +131,9 @@ for (const { descriptor, inlineScriptType } of typesOfInlineScripts) {
       })
 
       it(`should load only once if the page is revisited via browser back/forward buttons after anchor link navigation`, () => {
-        cy.visit(page.navigation)
+        cy.visit(page.navigation).waitForRouteChange()
         cy.get(`a[href="${page.target}"][id=anchor-link]`).click()
+        cy.get(`table[id=script-mark-records] tbody`) // Make sure history has time to change
         cy.go(`back`)
         cy.go(`forward`)
 

e2e-tests/development-runtime/cypress/integration/gatsby-script/gatsby-script-scripts-with-sources.js

@@ -78,7 +78,7 @@ describe(`scripts with sources`, () => {
 
       cy.get(`table[id=script-resource-records] tbody`)
         .children()
-        .should(`have.length`, 3)
+        .should(`have.length`, 5)
       cy.getRecord(script.three, `strategy`, true).should(
         `equal`,
         `post-hydrate`
@@ -92,7 +92,7 @@ describe(`scripts with sources`, () => {
 
       cy.get(`table[id=script-resource-records] tbody`)
         .children()
-        .should(`have.length`, 3)
+        .should(`have.length`, 5)
       cy.getRecord(script.three, `strategy`, true).should(
         `equal`,
         `post-hydrate`
@@ -107,7 +107,7 @@ describe(`scripts with sources`, () => {
 
       cy.get(`table[id=script-resource-records] tbody`)
         .children()
-        .should(`have.length`, 3)
+        .should(`have.length`, 5)
       cy.getRecord(script.three, `strategy`, true).should(
         `equal`,
         `post-hydrate`
@@ -123,7 +123,7 @@ describe(`scripts with sources`, () => {
 
       cy.get(`table[id=script-resource-records] tbody`)
         .children()
-        .should(`have.length`, 3)
+        .should(`have.length`, 5)
       cy.getRecord(script.three, `strategy`, true).should(
         `equal`,
         `post-hydrate`
@@ -138,7 +138,7 @@ describe(`scripts with sources`, () => {
 
       cy.get(`table[id=script-resource-records] tbody`)
         .children()
-        .should(`have.length`, 3)
+        .should(`have.length`, 5)
       cy.getRecord(script.three, `strategy`, true).should(
         `equal`,
         `post-hydrate`
@@ -154,7 +154,7 @@ describe(`scripts with sources`, () => {
 
       cy.get(`table[id=script-resource-records] tbody`)
         .children()
-        .should(`have.length`, 3)
+        .should(`have.length`, 5)
       cy.getRecord(script.three, `strategy`, true).should(
         `equal`,
         `post-hydrate`

e2e-tests/development-runtime/gatsby-config.js

@@ -36,10 +36,7 @@ module.exports = {
     {
       resolve: `gatsby-transformer-remark`,
       options: {
-        plugins: [
-          `gatsby-remark-subcache`,
-          `gatsby-remark-images`
-        ],
+        plugins: [`gatsby-remark-subcache`, `gatsby-remark-images`],
       },
     },
     `gatsby-plugin-sharp`,
@@ -63,4 +60,5 @@ module.exports = {
     // To learn more, visit: https://gatsby.dev/offline
     // 'gatsby-plugin-offline',
   ],
+  partytownProxiedURLs: [`https://unpkg.com/[email protected]/build/three.js`],
 }

e2e-tests/development-runtime/package.json

@@ -49,12 +49,19 @@
     "update:webhook": "node scripts/webhook.js",
     "update:cms-webhook": "node scripts/cms-webhook.js",
     "update:preview": "curl -X POST -d \"{ \\\"fake-data-update\\\": true }\" -H \"Content-Type: application/json\" http://localhost:8000/__refresh",
-    "start-server-and-test": "start-server-and-test develop http://localhost:8000 cy:run",
+    "start-server-and-test": "start-server-and-test develop http://localhost:8000 combined",
     "start-server-and-test:locally": "start-server-and-test develop http://localhost:8000 cy:open",
     "cy:open": "cypress open",
-    "cy:run": "node ../../scripts/cypress-run-with-conditional-record-flag.js --browser chrome"
+    "cy:run": "node ../../scripts/cypress-run-with-conditional-record-flag.js --browser chrome",
+    "playwright": "playwright test --project=chromium",
+    "playwright:debug": "playwright test --project=chromium --debug",
+    "start-server-and-test:playwright": "start-server-and-test develop http://localhost:8000 playwright",
+    "start-server-and-test:playwright-debug": "start-server-and-test develop http://localhost:8000 playwright:debug",
+    "combined": "npm run playwright && npm run cy:run",
+    "postinstall": "playwright install chromium"
   },
   "devDependencies": {
+    "@playwright/test": "^1.22.0",
     "@testing-library/cypress": "^7.0.0",
     "cross-env": "^5.2.0",
     "cypress": "6.1.0",

e2e-tests/development-runtime/playwright.config.ts

@@ -0,0 +1,57 @@
+import type { PlaywrightTestConfig } from "@playwright/test"
+import { devices } from "@playwright/test"
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+const config: PlaywrightTestConfig = {
+  testDir: "./playwright",
+  /* Maximum time one test can run for. */
+  timeout: 30 * 1000,
+  expect: {
+    /**
+     * Maximum time expect() should wait for the condition to be met.
+     * For example in `await expect(locator).toHaveText();`
+     */
+    timeout: 5000,
+  },
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: "html",
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
+    actionTimeout: 0,
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: "http://localhost:8000",
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: "on-first-retry",
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: "chromium",
+      use: {
+        ...devices["Desktop Chrome"],
+      },
+    },
+  ],
+
+  /* Folder for test artifacts such as screenshots, videos, traces, etc. */
+  // outputDir: 'test-results/',
+}
+
+export default config

e2e-tests/development-runtime/playwright/gatsby-script-off-main-thread.spec.ts

@@ -0,0 +1,27 @@
+import { test, expect } from "@playwright/test"
+
+const id = {
+  templateLiteral: `inline-script-template-literal-mutation`,
+  dangerouslySet: `inline-script-dangerously-set-mutation`,
+}
+
+test.describe(`off-main-thread scripts`, () => {
+  test(`should load successfully`, async ({ page }) => {
+    await page.goto(`/gatsby-script-off-main-thread/`)
+
+    // @ts-ignore
+    const scriptWithSrc = await page.evaluate(() => typeof THREE === `function`)
+
+    const templateLiteral = await page
+      .locator(`[id=${id.templateLiteral}]`)
+      .textContent()
+
+    const dangerouslySet = await page
+      .locator(`[id=${id.dangerouslySet}]`)
+      .textContent()
+
+    await expect(scriptWithSrc).toBeTruthy()
+    await expect(templateLiteral).toEqual(`${id.templateLiteral}: success`)
+    await expect(dangerouslySet).toEqual(`${id.dangerouslySet}: success`)
+  })
+})

e2e-tests/development-runtime/src/pages/gatsby-script-off-main-thread.js

@@ -0,0 +1,44 @@
+import * as React from "react"
+import { Script } from "gatsby"
+import { scripts } from "../../gatsby-script-scripts"
+
+function OffMainThreadScripts() {
+  return (
+    <main style={{ margin: `1em` }}>
+      <h1>Script component e2e test</h1>
+
+      <br />
+      <h2>Scripts with sources</h2>
+
+      <Script
+        src={scripts.three}
+        strategy="off-main-thread"
+        forward={[`THREE`]}
+      />
+
+      <Script id="inline-script-template-literal" strategy="off-main-thread">
+        {createScript(`inline-script-template-literal`)}
+      </Script>
+
+      <Script
+        id="inline-script-dangerously-set"
+        strategy="off-main-thread"
+        dangerouslySetInnerHTML={{
+          __html: createScript(`inline-script-dangerously-set`),
+        }}
+      />
+    </main>
+  )
+}
+
+function createScript(id) {
+  return `
+    const main = document.querySelector('main');
+    const elem = document.createElement('div');
+    elem.id = '${id}-mutation';
+    elem.textContent = '${id}-mutation: success';
+    main.appendChild(elem);
+  `
+}
+
+export default OffMainThreadScripts

e2e-tests/development-runtime/src/pages/gatsby-script-scripts-with-sources.js

@@ -18,7 +18,7 @@ function ScriptsWithSourcesPage() {
         check={record =>
           scriptUrls.has(record.name) || record.name.includes(`framework`)
         }
-        count={3}
+        count={5} // Include scripts from ssr/browser APIs
       />
 
       <br />

e2e-tests/production-runtime/.gitignore

@@ -10,3 +10,8 @@ yarn-error.log
 # Cypress output
 cypress/videos/
 cypress/screenshots/
+
+# Playwright
+/test-results/
+/playwright-report/
+/playwright/.cache/

e2e-tests/production-runtime/cypress/integration/gatsby-script-inline-scripts.js

@@ -94,8 +94,8 @@ for (const { descriptor, inlineScriptType } of typesOfInlineScripts) {
       })
 
       it(`should load only once after the page is refreshed`, () => {
-        cy.visit(page.target)
-        cy.reload()
+        cy.visit(page.target).waitForRouteChange()
+        cy.reload().url().should(`contain`, page.target)
 
         cy.get(`table[id=script-mark-records] tbody`)
           .children()
@@ -131,8 +131,9 @@ for (const { descriptor, inlineScriptType } of typesOfInlineScripts) {
       })
 
       it(`should load only once if the page is revisited via browser back/forward buttons after anchor link navigation`, () => {
-        cy.visit(page.navigation)
+        cy.visit(page.navigation).waitForRouteChange()
         cy.get(`a[href="${page.target}"][id=anchor-link]`).click()
+        cy.get(`table[id=script-mark-records] tbody`) // Make sure history has time to change
         cy.go(`back`)
         cy.go(`forward`)
 

e2e-tests/production-runtime/cypress/integration/gatsby-script-scripts-with-sources.js

@@ -1,6 +1,8 @@
 import { script } from "../../gatsby-script-scripts"
 import { resourceRecord } from "../../gatsby-script-records"
 
+Cypress.config(`defaultCommandTimeout`, 30000) // Since we're asserting network requests
+
 const page = {
   target: `/gatsby-script-scripts-with-sources/`,
   navigation: `/gatsby-script-navigation/`,
@@ -78,7 +80,7 @@ describe(`scripts with sources`, () => {
 
       cy.get(`table[id=script-resource-records] tbody`)
         .children()
-        .should(`have.length`, 3)
+        .should(`have.length`, 5)
       cy.getRecord(script.three, `strategy`, true).should(
         `equal`,
         `post-hydrate`
@@ -92,7 +94,7 @@ describe(`scripts with sources`, () => {
 
       cy.get(`table[id=script-resource-records] tbody`)
         .children()
-        .should(`have.length`, 3)
+        .should(`have.length`, 5)
       cy.getRecord(script.three, `strategy`, true).should(
         `equal`,
         `post-hydrate`
@@ -107,7 +109,7 @@ describe(`scripts with sources`, () => {
 
       cy.get(`table[id=script-resource-records] tbody`)
         .children()
-        .should(`have.length`, 3)
+        .should(`have.length`, 5)
       cy.getRecord(script.three, `strategy`, true).should(
         `equal`,
         `post-hydrate`
@@ -123,7 +125,7 @@ describe(`scripts with sources`, () => {
 
       cy.get(`table[id=script-resource-records] tbody`)
         .children()
-        .should(`have.length`, 3)
+        .should(`have.length`, 5)
       cy.getRecord(script.three, `strategy`, true).should(
         `equal`,
         `post-hydrate`
@@ -138,7 +140,7 @@ describe(`scripts with sources`, () => {
 
       cy.get(`table[id=script-resource-records] tbody`)
         .children()
-        .should(`have.length`, 3)
+        .should(`have.length`, 5)
       cy.getRecord(script.three, `strategy`, true).should(
         `equal`,
         `post-hydrate`
@@ -154,7 +156,7 @@ describe(`scripts with sources`, () => {
 
       cy.get(`table[id=script-resource-records] tbody`)
         .children()
-        .should(`have.length`, 3)
+        .should(`have.length`, 5)
       cy.getRecord(script.three, `strategy`, true).should(
         `equal`,
         `post-hydrate`

e2e-tests/production-runtime/gatsby-config.js

@@ -27,4 +27,5 @@ module.exports = {
     `gatsby-plugin-less`,
     `gatsby-plugin-stylus`,
   ].concat(process.env.TEST_PLUGIN_OFFLINE ? [`gatsby-plugin-offline`] : []),
+  partytownProxiedURLs: [`https://unpkg.com/[email protected]/build/three.js`],
 }

e2e-tests/production-runtime/package.json

@@ -40,7 +40,7 @@
     "test": "npm run build && npm run start-server-and-test && npm run test-env-vars",
     "test:offline": "npm run build:offline && yarn start-server-and-test:offline && npm run test-env-vars",
     "test-env-vars": " node __tests__/env-vars.js",
-    "start-server-and-test": "start-server-and-test serve http://localhost:9000 cy:run",
+    "start-server-and-test": "start-server-and-test serve http://localhost:9000 combined",
     "start-server-and-test:locally": "start-server-and-test serve http://localhost:9000 cy:open",
     "start-server-and-test:offline": "start-server-and-test serve http://localhost:9000 cy:run:offline",
     "cy:open": "cypress open",
@@ -49,9 +49,16 @@
     "cy:run:offline": "npm run cy:run:normal -- --env TEST_PLUGIN_OFFLINE=y && npm run cy:run:slow -- --env TEST_PLUGIN_OFFLINE=y",
     "cy:run:normal": "node ../../scripts/cypress-run-with-conditional-record-flag.js --browser chrome",
     "cy:run:slow": "cross-env CYPRESS_CONNECTION_TYPE=slow cypress run --browser chrome --config testFiles=prefetching.js",
-    "cy:run:bot": "cross-env CYPRESS_CONNECTION_TYPE=bot cypress run --browser chrome --config testFiles=prefetching.js"
+    "cy:run:bot": "cross-env CYPRESS_CONNECTION_TYPE=bot cypress run --browser chrome --config testFiles=prefetching.js",
+    "playwright": "playwright test --project=chromium",
+    "playwright:debug": "playwright test --project=chromium --debug",
+    "start-server-and-test:playwright": "start-server-and-test serve http://localhost:9000 playwright",
+    "start-server-and-test:playwright-debug": "start-server-and-test serve http://localhost:9000 playwright:debug",
+    "combined": "npm run playwright && npm run cy:run",
+    "postinstall": "playwright install chromium"
   },
   "devDependencies": {
+    "@playwright/test": "^1.22.0",
     "cross-env": "^5.2.0",
     "fs-extra": "^7.0.1",
     "gatsby-core-utils": "^3.1.3",