test: put test cases into fixtures (#191)

* test: put test cases into fixtures

* lint: fix

* fix: ci

* fix: update

* fix: lint

Author: himself65

e2e/async.spec.ts

@@ -0,0 +1,3 @@
+# RSC Basic
+
+Only RSC features, no SSR.

e2e/counter-dev.spec.ts

@@ -0,0 +1,27 @@
+{
+  "name": "rsc-basic",
+  "version": "0.1.0",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "waku dev",
+    "build": "waku build",
+    "start": "waku start"
+  },
+  "dependencies": {
+    "@hono/node-server": "^1.2.2",
+    "hono": "^3.10.0",
+    "react": "18.3.0-canary-6c7b41da3-20231123",
+    "react-dom": "18.3.0-canary-6c7b41da3-20231123",
+    "react-server-dom-webpack": "18.3.0-canary-6c7b41da3-20231123",
+    "waku": "0.17.1"
+  },
+  "devDependencies": {
+    "@swc/core": "1.3.96",
+    "@types/react": "^18.2.37",
+    "@types/react-dom": "^18.2.15",
+    "@vitejs/plugin-react": "4.1.1",
+    "typescript": "^5.2.2",
+    "vite": "4.5.0"
+  }
+}

e2e/counter.spec.ts

@@ -0,0 +1,18 @@
+/**
+ * no "use server" detective
+ */
+import { ClientCounter } from './ClientCounter.js';
+import { ServerPing } from './ServerPing/index.js';
+import { ServerBox } from './Box.js';
+
+const App = ({ name }: { name: string }) => {
+  return (
+    <ServerBox>
+      <p data-testid="app-name">{name}</p>
+      <ClientCounter />
+      <ServerPing />
+    </ServerBox>
+  );
+};
+
+export default App;

e2e/fixtures/rsc-basic/README.md

@@ -0,0 +1,30 @@
+import { PropsWithChildren, HTMLAttributes } from 'react';
+
+export const ServerBox = ({
+  children,
+  ...props
+}: PropsWithChildren<HTMLAttributes<HTMLDivElement>>) => {
+  return (
+    <div
+      {...props}
+      style={{ border: '3px red dashed', margin: '1em', padding: '1em' }}
+    >
+      {children}
+    </div>
+  );
+};
+
+// use div props
+export const ClientBox = ({
+  children,
+  ...props
+}: PropsWithChildren<HTMLAttributes<HTMLDivElement>>) => {
+  return (
+    <div
+      {...props}
+      style={{ border: '3px blue dashed', margin: '1em', padding: '1em' }}
+    >
+      {children}
+    </div>
+  );
+};

e2e/fixtures/rsc-basic/package.json

@@ -0,0 +1,15 @@
+'use client';
+import { useState } from 'react';
+import { ClientBox } from './Box.js';
+
+export const ClientCounter = () => {
+  const [count, setCount] = useState(0);
+  return (
+    <ClientBox data-testid="client-counter">
+      <p data-testid="count">{count}</p>
+      <button data-testid="increment" onClick={() => setCount((c) => c + 1)}>
+        Increment
+      </button>
+    </ClientBox>
+  );
+};

e2e/fixtures/rsc-basic/src/components/App.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import { useCallback, useState } from 'react';
+
+export type CounterProps = {
+  ping: () => Promise<string>;
+  increase: (value: number) => Promise<number>;
+};
+
+export function Counter({ increase, ping }: CounterProps) {
+  const [pong, setPong] = useState<string | null>(null);
+  const [counter, setCounter] = useState(0);
+  return (
+    <div>
+      <p data-testid="pong">{pong}</p>
+      <button
+        data-testid="ping"
+        onClick={() => {
+          ping().then((value) => {
+            setPong(value);
+          });
+        }}
+      >
+        ping
+      </button>
+      <p data-testid="counter">{counter}</p>
+      <button
+        data-testid="increase"
+        onClick={useCallback(() => {
+          increase(counter)
+            .then((value) => setCounter(value))
+            .catch(console.error);
+        }, [counter, increase])}
+      >
+        Increase
+      </button>
+    </div>
+  );
+}

e2e/fixtures/rsc-basic/src/components/Box.tsx

@@ -0,0 +1,9 @@
+'use server';
+
+export const ping = async () => {
+  return 'pong';
+};
+
+export const increase = async (value: number) => {
+  return value + 1;
+};

e2e/fixtures/rsc-basic/src/components/ClientCounter.tsx

@@ -0,0 +1,11 @@
+import { ServerBox } from '../Box.js';
+import { Counter } from './Counter.js';
+import { increase, ping } from './actions.js';
+
+export function ServerPing() {
+  return (
+    <ServerBox data-testid="server-ping">
+      <Counter ping={ping} increase={increase} />
+    </ServerBox>
+  );
+}

e2e/fixtures/rsc-basic/src/components/ServerPing/Counter.tsx

@@ -0,0 +1,34 @@
+import { lazy } from 'react';
+import { defineEntries } from 'waku/server';
+import { Slot } from 'waku/client';
+
+const App = lazy(() => import('./components/App.js'));
+
+export default defineEntries(
+  // renderEntries
+  async (input) => {
+    return {
+      App: <App name={input || 'Waku'} />,
+    };
+  },
+  // getBuildConfig
+  async () => {
+    return {
+      '/': {
+        entries: [['']],
+      },
+    };
+  },
+  // getSsrConfig
+  async (pathStr) => {
+    switch (pathStr) {
+      case '/':
+        return {
+          input: '',
+          unstable_render: () => <Slot id="App" />,
+        };
+      default:
+        return null;
+    }
+  },
+);

e2e/fixtures/rsc-basic/src/components/ServerPing/actions.ts

@@ -0,0 +1,37 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Waku example</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <style>
+      @keyframes spinner {
+        to {
+          transform: rotate(360deg);
+        }
+      }
+      .spinner {
+        width: 36px;
+        height: 36px;
+        margin: auto;
+        border: 2px solid #ddd;
+        border-top-color: #222;
+        border-radius: 50%;
+        animation: spinner 1s linear infinite;
+      }
+      #root > .spinner {
+        margin-top: calc(50% - 18px);
+      }
+    </style>
+  </head>
+  <body>
+    <!--placeholder1-->
+    <div id="root">
+      <div class="spinner"></div>
+    </div>
+    <!--/placeholder1-->
+    <script src="/main.tsx" async type="module"></script>
+    <!--placeholder2-->
+    <!--/placeholder2-->
+  </body>
+</html>

e2e/fixtures/rsc-basic/src/components/ServerPing/index.tsx

@@ -0,0 +1,13 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { Root, Slot } from 'waku/client';
+
+const rootElement = (
+  <StrictMode>
+    <Root>
+      <Slot id="App" />
+    </Root>
+  </StrictMode>
+);
+
+createRoot(document.getElementById('root')!).render(rootElement);

e2e/fixtures/rsc-basic/src/entries.tsx

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "strict": true,
+    "target": "esnext",
+    "downlevelIteration": true,
+    "esModuleInterop": true,
+    "module": "nodenext",
+    "skipLibCheck": true,
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true,
+    "jsx": "react-jsx",
+    "rootDir": "./src",
+    "outDir": "./dist"
+  }
+}