Upgrade the e2e test setup

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