Upgrade the e2e test setup

packages/playground/devEnv/playwright.config.ts

@@ -1,6 +1,9 @@
 import type {PlaywrightTestConfig} from '@playwright/test'
 import {devices} from '@playwright/test'
 
+const port = 8082
+const url = `http://localhost:${port}`
+
 /**
  * Read environment variables from file.
  * https://github.com/motdotla/dotenv
@@ -14,13 +17,13 @@ const config: PlaywrightTestConfig = {
   testDir: '../src',
   testMatch: /.*\.e2e\.ts/,
   /* Maximum time one test can run for. */
-  timeout: 100000,
+  timeout: 4000,
   expect: {
     /**
      * Maximum time expect() should wait for the condition to be met.
      * For example in `await expect(locator).toHaveText();`
      */
-    timeout: 10000,
+    timeout: 1000,
   },
   /* Fail the build on CI if you accidentally left test.only in the source code. */
   forbidOnly: !!process.env.CI,
@@ -39,6 +42,7 @@ const config: PlaywrightTestConfig = {
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
+    baseURL: url,
   },
 
   /* Configure projects for major browsers */
@@ -50,12 +54,12 @@ const config: PlaywrightTestConfig = {
       },
     },
 
-    {
-      name: 'firefox',
-      use: {
-        ...devices['Desktop Firefox'],
-      },
-    },
+    // {
+    //   name: 'firefox',
+    //   use: {
+    //     ...devices['Desktop Firefox'],
+    //   },
+    // },
   ],
 
   /* Folder for test artifacts such as screenshots, videos, traces, etc. */
@@ -68,9 +72,9 @@ const config: PlaywrightTestConfig = {
   TODO 👆
   */
   webServer: {
-    command: 'yarn run serve:ci --port 8080',
-    port: 8080,
+    command: `yarn run serve:ci --port ${port}`,
     reuseExistingServer: !process.env.CI,
+    url: url,
   },
 }
 

packages/playground/package.json

@@ -19,7 +19,7 @@
   "devDependencies": {
     "@percy/cli": "^1.16.0",
     "@percy/playwright": "^1.0.4",
-    "@playwright/test": "^1.29.1",
+    "@playwright/test": "^1.36.2",
     "@react-three/drei": "^7.2.2",
     "@react-three/fiber": "^7.0.6",
     "@rollup/plugin-virtual": "^3.0.1",
@@ -32,17 +32,8 @@
     "@types/react": "^17.0.9",
     "@vitejs/plugin-react": "^4.0.0",
     "@vitejs/plugin-react-swc": "^3.3.2",
-    "esbuild": "^0.17.6",
-    "esbuild-register": "^3.4.2",
-    "parcel": "^2.9.3",
     "three": "^0.130.1",
     "typescript": "^4.4.2",
-    "vite": "^4.3.9",
-    "vite-plugin-commonjs": "^0.8.0",
-    "vite-plugin-html-template": "^1.2.0",
-    "vite-plugin-mpa": "^1.2.0"
-  },
-  "dependencies": {
-    "@originjs/vite-plugin-commonjs": "^1.0.3"
+    "vite": "^4.3.9"
   }
 }

packages/playground/src/home/ItemSectionWithPreviews.tsx

@@ -4,34 +4,49 @@ import styled from 'styled-components'
 export const ItemSectionWithPreviews = (props: {
   groupName: string
   modules: string[]
+  collapsedByDefault: boolean
+  collapsible: boolean
 }) => {
-  let {groupName, modules} = props
+  const {groupName, modules, collapsedByDefault, collapsible} = props
+  console.log(groupName)
+
+  const [collapsed, setCollapsed] = React.useState(
+    collapsible && collapsedByDefault,
+  )
+
+  const toggleCollapse = () => {
+    if (!collapsible) return
+    setCollapsed(!collapsed)
+  }
+
   return (
     <section>
-      <SectionHeader>{groupName}</SectionHeader>
-      <ItemListContainer>
-        {modules.map((moduleName) => {
-          const href = `/${groupName}/${moduleName}/`
-          return (
-            <ItemContainer key={`li-${moduleName}`}>
-              <ItemLink href={href}>
-                {/* <PreviewContainer>
-                  <iframe src={href} frameBorder="0" tabIndex={-1} />
-                </PreviewContainer> */}
-                <ItemDesc>
-                  <h3>{moduleName}</h3>
-                  <p>{href}</p>
-                </ItemDesc>
-              </ItemLink>
-            </ItemContainer>
-          )
-        })}
-      </ItemListContainer>
+      <SectionHeader collapsible={collapsible} onClick={toggleCollapse}>
+        {groupName}
+      </SectionHeader>
+
+      {!collapsed && (
+        <ItemListContainer>
+          {modules.map((moduleName) => {
+            const href = `/${groupName}/${moduleName}/`
+            return (
+              <ItemContainer key={`li-${moduleName}`}>
+                <ItemLink href={href}>
+                  <ItemDesc>
+                    <h3>{moduleName}</h3>
+                    <p>{href}</p>
+                  </ItemDesc>
+                </ItemLink>
+              </ItemContainer>
+            )
+          })}
+        </ItemListContainer>
+      )}
     </section>
   )
 }
 
-const SectionHeader = styled.h3`
+const SectionHeader = styled.h3<{collapsible: boolean}>`
   font-family: 'Inter', sans-serif;
   font-style: normal;
   font-weight: 400;
@@ -42,6 +57,10 @@ const SectionHeader = styled.h3`
 
   /* White/White50 */
   color: rgba(255, 255, 255, 0.5);
+
+  text-decoration: ${({collapsible}) => (collapsible ? 'underline' : 'none')};
+  cursor: ${({collapsible}) => (collapsible ? 'pointer' : 'default')};
+  user-select: none;
 `
 
 const ItemDesc = styled.div`

packages/playground/src/home/PlaygroundPage.tsx

@@ -55,6 +55,8 @@ export const PlaygroundPage = ({
               key={`group-${groupName}`}
               groupName={groupName}
               modules={modules}
+              collapsedByDefault={groupName === 'tests'}
+              collapsible={groupName === 'tests'}
             />
           ))}
         </ContentContainer>

packages/playground/src/tests/setting-static-props/test.e2e.ts

@@ -7,25 +7,8 @@ const delay = (dur: number) =>
   new Promise((resolve) => setTimeout(resolve, dur))
 
 test.describe('setting-static-props', () => {
-  test.beforeEach(async ({page}) => {
-    // TODO This is a temporary hack that re-tries navigating to the url in case the server isn't ready yet.
-    // Ideally we should wait running the e2e tests until the server has signalled that it's ready to serve.
-    // For now, let's use this hack, otherwise, the e2e test may _randomly_ break on the CI with "ERRConnectionRefused"
-    const maxRetries = 3
-    for (let i = 1; i <= maxRetries; i++) {
-      try {
-        await page.goto('http://localhost:8080/tests/setting-static-props')
-      } catch (error) {
-        if (i === maxRetries) {
-          throw error
-        } else {
-          await delay(1000)
-        }
-      }
-    }
-  })
-
   test('Undo/redo', async ({page}) => {
+    await page.goto('./tests/setting-static-props/')
     // https://github.com/microsoft/playwright/issues/12298
     // The div does in fact intercept pointer events, but it is meant to 🤦‍
     await page

packages/playground/vite.config.ts

@@ -1,19 +1,11 @@
 import {defineConfig} from 'vite'
-// import react from '@vitejs/plugin-react'
 import react from '@vitejs/plugin-react-swc'
 import path from 'path'
-// import {mapValues} from 'lodash-es'
-// import {PlaygroundPage} from './devEnv/home/PlaygroundPage'
 import fg from 'fast-glob'
 import {getAliasesFromTsConfigForRollup} from '../../devEnv/getAliasesFromTsConfig'
 import {definedGlobals} from '../../theatre/devEnv/definedGlobals'
-import devCommonJS from 'vite-plugin-commonjs'
-// import {viteCommonjs as productionCommonJS} from '@originjs/vite-plugin-commonjs'
-// import mpa from 'vite-plugin-mpa'
-// import htmlTemplatePlugin from 'vite-plugin-html-template'
 
 const fromPlaygroundDir = (folder: string) => path.resolve(__dirname, folder)
-// const buildDir = playgroundDir('build')
 const srcDir = fromPlaygroundDir('src')
 const sharedDir = fromPlaygroundDir('src/shared')
 const personalDir = fromPlaygroundDir('src/personal')
@@ -48,12 +40,10 @@ const config = defineConfig(async ({command}) => {
 
   return {
     root: srcDir,
-    plugins: [
-      react(),
-      dev ? devCommonJS() : /*productionCommonJS()*/ undefined,
-    ],
+    plugins: [react()],
     appType: 'mpa',
     server: {
+      port: 8082,
       // base: '/playground/',
     },