Add cypress server-function test (#1719)

birkskyum · web-flow · commit 7f4a7d148b57 · 2025-01-23T13:55:20.000+01:00
* add cypress server-function test

* add workflow

* pick node from .nvmrc

* path

* split install

* use pnpm filter

* use quotes

* use cypress wd

* back to filter

* debug github action

* debug tests dir

* add pwd

* debug

* don't echo package.json

* split cypress, because lacking pnpm support

* try to keep wd at root

* move cypress to test repo

* cy install in test dir

* pnpm ignore workspace

* cypress run don't install

* test:server-function

* start server and test

* move cypress to root

* port 3456

* start only once the server

* move cy to test

* add cypress deps to

* build

* try to not ignore-workspace

* use cypress action

* remove cypress from root

* cleanup

* cypress root

* use workspace instead of relative path

* use prod build

* build command
diff --git a/.github/workflows/server-function.yml b/.github/workflows/server-function.yml
@@ -0,0 +1,50 @@
+name: ci
+
+on:
+  pull_request:
+    branches: [ main ]
+  push:
+    branches: [ main ]
+
+jobs:
+ 
+  e2e-tests:
+    name: "E2E tests using ${{ matrix.browser }}"
+    strategy:
+      fail-fast: false
+      matrix:
+        browser: [chrome, firefox]
+
+    runs-on: ubuntu-22.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 9
+
+      - name: Install project dependencies
+        run: pnpm i
+      
+      - name: Install project dependencies
+        run: pnpm run build
+
+      - name: Install dependencies
+        uses: cypress-io/github-action@v6
+        with:
+          working-directory: .
+          runTests: false
+
+      - name: Cypress test
+        uses: cypress-io/github-action@v6
+        with:
+          install: false
+          working-directory: tests/server-function
+          build: pnpm run build
+          start: pnpm run start
+          browser: ${{ matrix.browser }}
+      
diff --git a/package.json b/package.json
@@ -32,6 +32,7 @@
     "@cloudflare/kv-asset-handler": "^0.2.0",
     "citty": "^0.1.5",
     "coveralls": "^3.1.1",
+    "cypress": "^14.0.0",
     "debug": "^4.3.4",
     "rimraf": "^3.0.2",
     "tinyglobby": "^0.2.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
@@ -2,6 +2,7 @@ packages:
   # all packages in subdirs of packages/ and examples/
   - "packages/*"
   - "examples/*"
+  - "tests/*"
   - "docs"
   - "!**/.tmp/**"
 options:
diff --git a/tests/server-function/README.md b/tests/server-function/README.md
@@ -0,0 +1,30 @@
+# SolidStart
+
+Everything you need to build a Solid project, powered by [`solid-start`](https://start.solidjs.com);
+
+## Creating a project
+
+```bash
+# create a new project in the current directory
+npm init solid@latest
+
+# create a new project in my-app
+npm init solid@latest my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+Solid apps are built with _presets_, which optimise your project for deployment to different environments.
+
+By default, `npm run build` will generate a Node app that you can run with `npm start`. To use a different preset, add it to the `devDependencies` in `package.json` and specify in your `app.config.js`.
diff --git a/tests/server-function/app.config.ts b/tests/server-function/app.config.ts
@@ -0,0 +1,5 @@
+import { defineConfig } from "@solidjs/start/config";
+
+export default defineConfig({
+  ssr: false
+});
diff --git a/tests/server-function/cypress.config.ts b/tests/server-function/cypress.config.ts
@@ -0,0 +1,24 @@
+import { defineConfig } from "cypress";
+
+// import { createRequire } from "module";
+// const require = createRequire(import.meta.url);
+
+export default defineConfig({
+  env: {
+    codeCoverage: {
+      exclude: "cypress/**/*.*",
+    },
+  },
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+      // require("@cypress/code-coverage/task")(on, config);
+      return config;
+    },
+    baseUrl: "http://localhost:3000",
+    retries: {
+      runMode: 2,
+      openMode: 0,
+    },
+  },
+});
diff --git a/tests/server-function/cypress/e2e/server-function.cy.ts b/tests/server-function/cypress/e2e/server-function.cy.ts
@@ -0,0 +1,6 @@
+describe("server-function", () => {
+  it("should isServer false on the client and true in the server function", () => {
+    cy.visit("/");
+    cy.get("#server-fn-test").contains(`{"client":false,"serverFn":true}`);
+  })
+});
diff --git a/tests/server-function/cypress/support/e2e.ts b/tests/server-function/cypress/support/e2e.ts
@@ -0,0 +1,21 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import "@cypress/code-coverage/support";
+import "cypress-plugin-tab";
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
diff --git a/tests/server-function/package.json b/tests/server-function/package.json
@@ -0,0 +1,39 @@
+{
+  "name": "server-function-test",
+  "type": "module",
+  "scripts": {
+    "dev": "vinxi dev",
+    "build": "vinxi build",
+    "start": "vinxi start",
+    "vitest": "vitest run",
+    "test-watch": "vitest",
+    "test-ui": "vitest --ui",
+    "cy:open": "cypress open",
+    "cy:run": "cypress run",
+    "test": "pnpm run dev & cypress run"
+  },
+  "dependencies": {
+    "@solidjs/start": "workspace:*",
+    "@solidjs/testing-library": "^0.8.10",
+    "@testing-library/jest-dom": "^6.6.2",
+    "@testing-library/user-event": "^14.5.2",
+    "@vitest/ui": "^2.1.4",
+    "jsdom": "^25.0.1",
+    "solid-js": "^1.9.2",
+    "vinxi": "^0.4.3",
+    "vite-plugin-solid": "^2.10.2",
+    "vitest": "^3.0.0"
+  },
+  "overrides": {
+    "vite": "5.4.10"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "devDependencies": {
+    "cypress-vite": "^1.6.0",
+    "@cypress/code-coverage": "^3.13.10",
+    "cypress": "^14.0.0",
+    "cypress-plugin-tab": "^1.0.5"
+  }
+}
diff --git a/tests/server-function/public/favicon.ico b/tests/server-function/public/favicon.ico
diff --git a/tests/server-function/src/app.css b/tests/server-function/src/app.css
@@ -0,0 +1,61 @@
+body {
+  font-family: Gordita, Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+}
+
+a {
+  margin-right: 1rem;
+}
+
+main {
+  text-align: center;
+  padding: 1em;
+  margin: 0 auto;
+}
+
+h1 {
+  color: #335d92;
+  text-transform: uppercase;
+  font-size: 4rem;
+  font-weight: 100;
+  line-height: 1.1;
+  margin: 4rem auto;
+  max-width: 14rem;
+}
+
+p {
+  max-width: 14rem;
+  margin: 2rem auto;
+  line-height: 1.35;
+}
+
+@media (min-width: 480px) {
+  h1 {
+    max-width: none;
+  }
+
+  p {
+    max-width: none;
+  }
+}
+
+.increment {
+  font-family: inherit;
+  font-size: inherit;
+  padding: 1em 2em;
+  color: #335d92;
+  background-color: rgba(68, 107, 158, 0.1);
+  border-radius: 2em;
+  border: 2px solid rgba(68, 107, 158, 0);
+  outline: none;
+  width: 200px;
+  font-variant-numeric: tabular-nums;
+  cursor: pointer;
+}
+
+.increment:focus {
+  border: 2px solid #335d92;
+}
+
+.increment:active {
+  background-color: rgba(68, 107, 158, 0.2);
+}
diff --git a/tests/server-function/src/app.test.tsx b/tests/server-function/src/app.test.tsx
@@ -0,0 +1,27 @@
+import { render } from "@solidjs/testing-library";
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import App from "./App";
+
+const serverLogs: any[] = [];
+const originalConsoleLog = console.log;
+
+describe("<App />", () => {
+  beforeEach(() => {
+    serverLogs.length = 0;
+    console.log = (...args: any[]) => {
+      serverLogs.push(args);
+      originalConsoleLog(...args);
+    };
+  });
+
+  afterEach(() => {
+    console.log = originalConsoleLog;
+  });
+
+  it("increments value", async () => {
+    render(() => <App />);
+    
+    expect(serverLogs).toContainEqual(["Server Function", true]);
+    expect(serverLogs).toContainEqual(["App Component", true]);
+  });
+});
diff --git a/tests/server-function/src/app.tsx b/tests/server-function/src/app.tsx
@@ -0,0 +1,25 @@
+import { createEffect, createSignal } from "solid-js";
+import { isServer } from "solid-js/web";
+import "./app.css";
+
+function useServer() {
+  "use server";
+  return isServer;
+}
+export default function App() {
+  const [output, setOutput] = createSignal<{ client?: boolean; serverFn?: boolean }>({});
+
+  setOutput(prev => ({ ...prev, client: isServer }));
+
+  createEffect(async () => {
+    const restult = await useServer();
+    setOutput(prev => ({ ...prev, serverFn: restult }));
+  });
+
+  return (
+    <main>
+      <h1>Hello world!</h1>
+      <span id="server-fn-test">{JSON.stringify(output())}</span>
+    </main>
+  );
+}
diff --git a/tests/server-function/src/entry-client.tsx b/tests/server-function/src/entry-client.tsx
@@ -0,0 +1,4 @@
+// @refresh reload
+import { mount, StartClient } from "@solidjs/start/client";
+
+mount(() => <StartClient />, document.getElementById("app")!);
diff --git a/tests/server-function/src/entry-server.tsx b/tests/server-function/src/entry-server.tsx
@@ -0,0 +1,21 @@
+// @refresh reload
+import { createHandler, StartServer } from "@solidjs/start/server";
+
+export default createHandler(() => (
+  <StartServer
+    document={({ assets, children, scripts }) => (
+      <html lang="en">
+        <head>
+          <meta charset="utf-8" />
+          <meta name="viewport" content="width=device-width, initial-scale=1" />
+          <link rel="icon" href="/favicon.ico" />
+          {assets}
+        </head>
+        <body>
+          <div id="app">{children}</div>
+          {scripts}
+        </body>
+      </html>
+    )}
+  />
+));
diff --git a/tests/server-function/src/global.d.ts b/tests/server-function/src/global.d.ts
@@ -0,0 +1 @@
+/// <reference types="@solidjs/start/env" />
diff --git a/tests/server-function/tsconfig.json b/tests/server-function/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+    "allowJs": true,
+    "strict": true,
+    "noEmit": true,
+    "types": ["vinxi/types/client"],
+    "isolatedModules": true,
+    "paths": {
+      "~/*": ["./src/*"]
+    }
+  }
+}
diff --git a/tests/server-function/vitest.config.ts b/tests/server-function/vitest.config.ts
@@ -0,0 +1,21 @@
+import solid from "vite-plugin-solid";
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  plugins: [solid()],
+  
+  test: {
+environment: "node",   
+    browser: {
+
+      provider: "playwright",
+
+      enabled: true,
+      // at least one instance is required
+      instances: [
+        { browser: 'chromium' },
+      ],
+    }
+  }
+  
+});
