From 625880ea31c4821d74f2e7214aa955b6ac7af12c Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Tue, 7 Jan 2025 10:54:39 +0100
Subject: [PATCH] test: add test for server directives (#627)

---
 examples/server-actions/package.json          | 14 +++++++
 examples/server-actions/src/action.ts         |  5 +++
 examples/server-actions/src/client.tsx        |  7 ++++
 examples/server-actions/src/inline.tsx        | 11 +++++
 examples/server-actions/tsconfig.json         |  6 +++
 test/integration/mixed-directives/.gitignore  |  1 +
 .../mixed-directives.test.ts.snap             | 42 +++++++++++++++++++
 .../mixed-directives/mixed-directives.test.ts | 25 +++++++++++
 .../integration/mixed-directives/package.json | 12 ++++++
 .../mixed-directives/src/action.ts            |  5 +++
 .../mixed-directives/src/client.tsx           |  7 ++++
 .../mixed-directives/src/inline.tsx           | 11 +++++
 .../mixed-directives/tsconfig.json            |  6 +++
 13 files changed, 152 insertions(+)
 create mode 100644 examples/server-actions/package.json
 create mode 100644 examples/server-actions/src/action.ts
 create mode 100644 examples/server-actions/src/client.tsx
 create mode 100644 examples/server-actions/src/inline.tsx
 create mode 100644 examples/server-actions/tsconfig.json
 create mode 100644 test/integration/mixed-directives/.gitignore
 create mode 100644 test/integration/mixed-directives/__snapshots__/mixed-directives.test.ts.snap
 create mode 100644 test/integration/mixed-directives/mixed-directives.test.ts
 create mode 100644 test/integration/mixed-directives/package.json
 create mode 100644 test/integration/mixed-directives/src/action.ts
 create mode 100644 test/integration/mixed-directives/src/client.tsx
 create mode 100644 test/integration/mixed-directives/src/inline.tsx
 create mode 100644 test/integration/mixed-directives/tsconfig.json

diff --git a/examples/server-actions/package.json b/examples/server-actions/package.json
new file mode 100644
index 00000000..d9569791
--- /dev/null
+++ b/examples/server-actions/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "server-actions-example",
+  "type": "module",
+  "exports": {
+    "./inline": "./dist/inline.js",
+    "./client": "./dist/client.js"
+  },
+  "devDependencies": {
+    "@types/react": "*"
+  },
+  "dependencies": {
+    "react": "*"
+  }
+}
diff --git a/examples/server-actions/src/action.ts b/examples/server-actions/src/action.ts
new file mode 100644
index 00000000..68e5c17a
--- /dev/null
+++ b/examples/server-actions/src/action.ts
@@ -0,0 +1,5 @@
+'use server'
+
+export async function action1() {
+  return 'action1'
+}
diff --git a/examples/server-actions/src/client.tsx b/examples/server-actions/src/client.tsx
new file mode 100644
index 00000000..779fbda2
--- /dev/null
+++ b/examples/server-actions/src/client.tsx
@@ -0,0 +1,7 @@
+'use client'
+
+import { action1 } from './action'
+
+export default function Page() {
+  return <button onClick={action1}>Action 1</button>
+}
diff --git a/examples/server-actions/src/inline.tsx b/examples/server-actions/src/inline.tsx
new file mode 100644
index 00000000..32b5e382
--- /dev/null
+++ b/examples/server-actions/src/inline.tsx
@@ -0,0 +1,11 @@
+// @ts-ignore externals
+import ClientComponent from 'client-component'
+
+export default function Page() {
+  async function inlineAction() {
+    'use server'
+    return 'inline-action'
+  }
+
+  return <ClientComponent action={inlineAction} />
+}
diff --git a/examples/server-actions/tsconfig.json b/examples/server-actions/tsconfig.json
new file mode 100644
index 00000000..b5fcf8f5
--- /dev/null
+++ b/examples/server-actions/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "target": "ES2022"
+  }
+}
diff --git a/test/integration/mixed-directives/.gitignore b/test/integration/mixed-directives/.gitignore
new file mode 100644
index 00000000..b66bc617
--- /dev/null
+++ b/test/integration/mixed-directives/.gitignore
@@ -0,0 +1 @@
+!tsconfig.json
\ No newline at end of file
diff --git a/test/integration/mixed-directives/__snapshots__/mixed-directives.test.ts.snap b/test/integration/mixed-directives/__snapshots__/mixed-directives.test.ts.snap
new file mode 100644
index 00000000..f71e02f3
--- /dev/null
+++ b/test/integration/mixed-directives/__snapshots__/mixed-directives.test.ts.snap
@@ -0,0 +1,42 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`integration - mixed-directives should work with js only project 1`] = `
+{
+  "action-server-DOTFC6td.js": "'use server';
+async function action1() {
+    return 'action1';
+}
+
+export { action1 as a };
+",
+  "client.js": "'use client';
+import { jsx } from 'react/jsx-runtime';
+import { a as action1 } from './action-server-DOTFC6td.js';
+
+function Page() {
+    return /*#__PURE__*/ jsx("button", {
+        onClick: action1,
+        children: "Action 1"
+    });
+}
+
+export { Page as default };
+",
+  "inline.js": "import { jsx } from 'react/jsx-runtime';
+import ClientComponent from 'client-component';
+
+// @ts-ignore externals
+function Page() {
+    async function inlineAction() {
+        'use server';
+        return 'inline-action';
+    }
+    return /*#__PURE__*/ jsx(ClientComponent, {
+        action: inlineAction
+    });
+}
+
+export { Page as default };
+",
+}
+`;
diff --git a/test/integration/mixed-directives/mixed-directives.test.ts b/test/integration/mixed-directives/mixed-directives.test.ts
new file mode 100644
index 00000000..2e65f0c7
--- /dev/null
+++ b/test/integration/mixed-directives/mixed-directives.test.ts
@@ -0,0 +1,25 @@
+import { readFileSync } from 'fs'
+import { createIntegrationTest, getFileNamesFromDirectory } from '../utils'
+
+describe('integration - mixed-directives', () => {
+  it('should work with js only project', async () => {
+    await createIntegrationTest(
+      {
+        directory: __dirname,
+      },
+      async ({ distDir }) => {
+        const distFiles = await getFileNamesFromDirectory(distDir)
+        const fileContents = distFiles
+          .map((file) => [file, readFileSync(`${distDir}/${file}`, 'utf-8')])
+          .reduce((acc, pair) => {
+            return {
+              ...acc,
+              [pair[0]]: pair[1],
+            }
+          }, {})
+
+        expect(fileContents).toMatchSnapshot(``)
+      },
+    )
+  })
+})
diff --git a/test/integration/mixed-directives/package.json b/test/integration/mixed-directives/package.json
new file mode 100644
index 00000000..3df8f105
--- /dev/null
+++ b/test/integration/mixed-directives/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "mixed-directives",
+  "type": "module",
+  "exports": {
+    "./inline": "./dist/inline.js",
+    "./client": "./dist/client.js"
+  },
+  "dependencies": {
+    "react": "*",
+    "react-dom": "*"
+  }
+}
diff --git a/test/integration/mixed-directives/src/action.ts b/test/integration/mixed-directives/src/action.ts
new file mode 100644
index 00000000..68e5c17a
--- /dev/null
+++ b/test/integration/mixed-directives/src/action.ts
@@ -0,0 +1,5 @@
+'use server'
+
+export async function action1() {
+  return 'action1'
+}
diff --git a/test/integration/mixed-directives/src/client.tsx b/test/integration/mixed-directives/src/client.tsx
new file mode 100644
index 00000000..779fbda2
--- /dev/null
+++ b/test/integration/mixed-directives/src/client.tsx
@@ -0,0 +1,7 @@
+'use client'
+
+import { action1 } from './action'
+
+export default function Page() {
+  return <button onClick={action1}>Action 1</button>
+}
diff --git a/test/integration/mixed-directives/src/inline.tsx b/test/integration/mixed-directives/src/inline.tsx
new file mode 100644
index 00000000..32b5e382
--- /dev/null
+++ b/test/integration/mixed-directives/src/inline.tsx
@@ -0,0 +1,11 @@
+// @ts-ignore externals
+import ClientComponent from 'client-component'
+
+export default function Page() {
+  async function inlineAction() {
+    'use server'
+    return 'inline-action'
+  }
+
+  return <ClientComponent action={inlineAction} />
+}
diff --git a/test/integration/mixed-directives/tsconfig.json b/test/integration/mixed-directives/tsconfig.json
new file mode 100644
index 00000000..3e558e56
--- /dev/null
+++ b/test/integration/mixed-directives/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "target": "ES2022"
+  }
+}
\ No newline at end of file