feat: fixes tests.yaml_final_final; Updates readme and contributing for testing changes

Author: DBozhinovski

.github/workflows/tests.yml

@@ -27,7 +27,7 @@ jobs:
         run: pnpm i
 
       - name: Install Playwright Browsers
-        run: pnpm exec playwright install chromium
+        run: pnpm --filter tests exec playwright install chromium
 
       - name: Build SolidStart
         run: pnpm --filter @solidjs/start build

CONTRIBUTING.md

@@ -54,10 +54,23 @@ We recommend using the `create-solid` package with the **basic** setting.
 
 You can also fork this repository and go to `apps/tests`.
 There we have an app with all default configurations and many routes.
-Create a new route, a Cypress assertion to it and open a PR with the failing test-case.
+Create a new route, a Vitest or Playwright assertion (as appropriate) to it and open a PR with the failing test-case.
 
 Once the PR is there, **create an issue** and link the PR (mention the PR as you'd mention a person in the issue description and vice versa).
 
+##### On testing
+
+- If what you'd like to change needs e2e testing (i.e. you need a working build to test your feature), use playwright (see the `/app/tests/e2e` directory for examples).
+- If what you'd like to change is specific to a component, function (i.e. you need a unit test), use Vitest. You can find examples in the `/app/tests/` directory, look for the .tests.ts/.test.tsx files.
+    - Note: Vitest is also set-up to test individual components - have a look at `/app/tests/routes/(basic).browser.test.tsx` for an example.
+
+#### Testing conventions:
+
+- For e2e test, simply place them in the `apps/tests/e2e` directory. The project is configured to run anything found in that directory via playwright as an e2e test.
+- For unit tests, co-locate them in the same place as the component or function they test:
+    - E.g. If you're testing `/app/tests/MyComponent.tsx`, create a file named `/app/tests/MyComponent.test.browser.tsx` in the same directory. Note the `.browser` part - that's important to tell Vitest that this test should run in a browser environment.
+    - For server-side unit tests, use the same placement conventions as described for components, but create a file named `/app/tests/myfeature.test.server.ts` in the same directory. Using `.server` in the filename tells Vitest that this test should run in a node environment.
+
 > [!IMPORTANT]
 > Mark the **allow edit by the maintainers** so we can more easily investigate the failing test and propose a fix. Otherwise we may need to close your PR and cherry-pick your commit.
 

README.md

@@ -31,7 +31,7 @@ SolidStart is a pnpm-based monorepo with nested workspaces. Key directories incl
 
 - **`packages/start`**: The core `@solidjs/start` package.
 - **`apps/landing-page`**: The official landing page.
-- **`apps/tests`**: Unit and end-to-end (E2E) tests using Vitest and Cypress.
+- **`apps/tests`**: Unit and end-to-end (E2E) tests using Vitest and Playwright.
 - **`apps/fixtures`**: Fixture projects for testing.
 
 Use pnpm filters (e.g. `pnpm --filter @solidjs/start ...`) to target specific packages.
@@ -76,10 +76,10 @@ Then reinstall dependencies and rebuild.
 
 End-to-end tests are located in `apps/tests` projects. For manual testing and development use the `apps/fixtures` apps, and finally, integration and unit tests live inside their respective packages.
 
-1. Install the Cypress binary (required only once)
+1. Install the Chromium for Playwright binary (required only once)
 
    ```bash
-   pnpm --filter tests exec cypress install
+   pnpm --filter tests exec playwright install chromium
    ```
 
 2. For unit tests that check build artifacts, build the test app first
@@ -88,7 +88,7 @@ End-to-end tests are located in `apps/tests` projects. For manual testing and de
    pnpm --filter tests run build
    ```
 
-3. Run unit tests
+3. Run unit tests (puts vitest in watch mode)
 
    ```bash
    pnpm --filter tests run unit
@@ -100,11 +100,10 @@ End-to-end tests are located in `apps/tests` projects. For manual testing and de
 4. Run E2E tests
 
    ```bash
-   pnpm --filter tests run tests:run
+   pnpm --filter tests run e2e
    ```
 
-   - Interactive mode: `pnpm --filter tests run tests:open`
-   - With dev server: `pnpm --filter tests run tests`
+   - UI mode: `pnpm --filter tests run e2e:ui`
 
 5. Clean test artifacts
    ```bash