-
Notifications
You must be signed in to change notification settings - Fork 10.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
test(gatsby-script): Off main thread e2e (#35665)
* test(gatsby-script): e2e off-main-thread develop runtime * Test in CI * Production runtime * Update load plugins snapshots again * Post install Chromium for Playwright * Fix tests
- Loading branch information
Showing
19 changed files
with
324 additions
and
31 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -76,3 +76,6 @@ cypress/videos | |
| __history__.json | ||
|
|
||
| src/gatsby-types.d.ts | ||
| /test-results/ | ||
| /playwright-report/ | ||
| /playwright/.cache/ | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -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`], | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 |
27 changes: 27 additions & 0 deletions
27
e2e-tests/development-runtime/playwright/gatsby-script-off-main-thread.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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`) | ||
| }) | ||
| }) |
44 changes: 44 additions & 0 deletions
44
e2e-tests/development-runtime/src/pages/gatsby-script-off-main-thread.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -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`], | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.