From cd6f44d9dd19a5f5939779892dcb7e22009438e4 Mon Sep 17 00:00:00 2001 From: Aria Minaei Date: Thu, 3 Aug 2023 10:53:33 +0200 Subject: [PATCH] Upgrade the e2e test setup --- .../playground/devEnv/playwright.config.ts | 24 +- packages/playground/package.json | 13 +- .../src/home/ItemSectionWithPreviews.tsx | 61 +- .../playground/src/home/PlaygroundPage.tsx | 2 + .../tests/setting-static-props/test.e2e.ts | 19 +- packages/playground/vite.config.ts | 14 +- yarn.lock | 2033 +---------------- 7 files changed, 110 insertions(+), 2056 deletions(-) diff --git a/packages/playground/devEnv/playwright.config.ts b/packages/playground/devEnv/playwright.config.ts index 6de841e..3f7ba0d 100644 --- a/packages/playground/devEnv/playwright.config.ts +++ b/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, }, } diff --git a/packages/playground/package.json b/packages/playground/package.json index c422fd9..81c022c 100644 --- a/packages/playground/package.json +++ b/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" } } diff --git a/packages/playground/src/home/ItemSectionWithPreviews.tsx b/packages/playground/src/home/ItemSectionWithPreviews.tsx index 2f19cd2..4ee5e6a 100644 --- a/packages/playground/src/home/ItemSectionWithPreviews.tsx +++ b/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 (
- {groupName} - - {modules.map((moduleName) => { - const href = `/${groupName}/${moduleName}/` - return ( - - - {/* -