feat: add vitest for testing, update pnpm workspace, and implement component tests

Author: wangshunnn

.github/workflows/test.yml

@@ -0,0 +1,44 @@
+name: Test
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+permissions:
+  contents: read
+
+concurrency:
+  group: test-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4.1.0
+
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 24
+          cache: 'pnpm'
+
+      - run: pnpm install --frozen-lockfile
+
+      - name: Build
+        run: pnpm build
+
+      - name: Lint
+        run: pnpm lint
+
+      - name: Test
+        run: pnpm test

package.json

@@ -6,7 +6,8 @@
     "watch": "pnpm run \"/^watch:.*/\"",
     "watch:base": "tsc -b -w",
     "watch:vscode": "pnpm -F mpx-official run watch",
-    "test": "vitest",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "lint": "eslint --cache .",
     "format": "prettier --write --cache .",
     "clean": "rimraf -g .eslintcache \"**/*.tsbuildinfo\" && pnpm clean:out",
@@ -44,6 +45,7 @@
     "rimraf": "^6.0.1",
     "simple-git-hooks": "^2.9.0",
     "tsx": "^4.19.3",
-    "typescript": "catalog:"
+    "typescript": "catalog:",
+    "vitest": "catalog:"
   }
 }

packages/language-core/__tests__/README.md

@@ -0,0 +1,18 @@
+# Tests
+
+Run all tests once with `pnpm test`, or keep Vitest running with
+`pnpm test:watch`.
+
+The test suite has three layers:
+
+- `language-core` fixtures create the real Mpx/Volar/TypeScript language
+  service and assert generated code, diagnostics, hover information, and
+  definitions.
+- `language-service` tests isolate request concurrency and mock only the HTML
+  service and template lookup boundary.
+- `inspect-extension` remains the manual integration project for validating
+  the final editor UI and extension packaging.
+
+Feature fixtures live under `fixtures/`. Keep them small and local to the
+behavior under test; do not make unit tests depend on generated `out` files or
+the mutable `inspect-extension` project.

packages/language-core/__tests__/fixtures/reference-type-props/component-candidate-options.mpx

@@ -0,0 +1,16 @@
+<script lang="ts">
+import { createComponent } from '@mpxjs/core'
+
+createComponent({
+  properties: {
+    value: String,
+    optionsText: String,
+  },
+})
+</script>
+
+<script name="json">
+module.exports = {
+  component: true,
+}
+</script>

packages/language-core/__tests__/fixtures/reference-type-props/component-candidate-setup.mpx

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+defineProps<{
+  value: number
+  setupCount?: number
+}>()
+defineExpose({})
+</script>
+
+<script name="json">
+module.exports = {
+  component: true,
+}
+</script>

packages/language-core/__tests__/fixtures/reference-type-props/component-index/index.mpx

@@ -0,0 +1,15 @@
+<script lang="ts">
+import { createComponent } from '@mpxjs/core'
+
+createComponent({
+  properties: {
+    directoryCount: Number,
+  },
+})
+</script>
+
+<script name="json">
+module.exports = {
+  component: true,
+}
+</script>

packages/language-core/__tests__/fixtures/reference-type-props/component-options-inference-conflict.mpx

@@ -0,0 +1,42 @@
+<template>
+  <view>{{ stableText.toUpperCase() }}</view>
+  <view>{{ isV80 ? formatCount(localCount) : 'legacy' }}</view>
+  <view>{{ homeVersion.toFixed(0) }}</view>
+</template>
+
+<script lang="ts">
+import { createComponent } from '@mpxjs/core'
+
+const mappedGetters = {
+  isV80() {
+    return true
+  },
+} as {
+  isV80(): boolean
+  homeVersion(): 'homepagemarketing' | 'homepageonestop'
+}
+
+createComponent({
+  data: {
+    localCount: 1,
+  },
+  properties: {
+    stableText: String,
+    homeVersion: Number,
+  },
+  computed: {
+    ...mappedGetters,
+  },
+  methods: {
+    formatCount(value: number) {
+      return value.toFixed(0)
+    },
+  },
+})
+</script>
+
+<script name="json">
+module.exports = {
+  component: true,
+}
+</script>

packages/language-core/__tests__/fixtures/reference-type-props/component-options-js.mpx

@@ -0,0 +1,15 @@
+<script>
+import { createComponent } from '@mpxjs/core'
+
+createComponent({
+  properties: {
+    jsText: String,
+  },
+})
+</script>
+
+<script name="json">
+module.exports = {
+  component: true,
+}
+</script>

packages/language-core/__tests__/fixtures/reference-type-props/component-options.mpx

@@ -0,0 +1,55 @@
+<template>
+  <view>{{ parentText }}</view>
+</template>
+
+<script lang="ts">
+import { createComponent, type PropType } from '@mpxjs/core'
+
+interface UserProfile {
+  /** 用户唯一 ID。 */
+  id: number
+
+  /** 用户展示名称。 */
+  name: string
+}
+
+createComponent({
+  properties: {
+    /**
+     * 旧版简短文案。
+     *
+     * @deprecated 请改用 parentText。
+     */
+    shortText: String,
+
+    /**
+     * 父组件传入的主文案。
+     *
+     * @default 'hello'
+     */
+    parentText: {
+      type: String,
+      value: 'hello',
+    },
+
+    /** 用于演示 Number 属性的数值。 */
+    name: {
+      type: Number,
+    },
+
+    /** 当前用户资料。 */
+    profile: {
+      type: Object as PropType<UserProfile>,
+    },
+
+    /** 组件显示主题。 */
+    theme: String as PropType<'light' | 'dark'>,
+  },
+})
+</script>
+
+<script name="json">
+module.exports = {
+  component: true,
+}
+</script>

packages/language-core/__tests__/fixtures/reference-type-props/index.mpx

@@ -0,0 +1,49 @@
+<template>
+  <component-options
+    parentText="{{ 123 }}"
+    shortText="{{ 123 }}"
+    name="{{ 'hello' }}"
+    profile="{{ 'invalid-profile' }}"
+  />
+  <component-options
+    name@ios|android|harmony="{{ 'hello' }}"
+    parentText@_wx="{{ 123 }}"
+  />
+  <component-options
+    name@ios="{{ 'hello' }}"
+    name@android="{{ 2 }}"
+  />
+  <component-options
+    bindtap="handleTap"
+    catchtap="handleTap"
+    catch:tap="handleTap"
+  />
+  <component-options profile="{{ {  } }}" />
+  <component-options-js jsText="{{ 123 }}" />
+  <component-index directoryCount="{{ 'hello' }}" />
+  <component-options-inference-conflict stableText="{{ 123 }}" />
+</template>
+
+<script lang="ts">
+import ComponentOptions, { createComponent } from '@mpxjs/core'
+
+void ComponentOptions
+
+createComponent({
+  methods: {
+    handleTap() {},
+  },
+})
+</script>
+
+<script type="application/json">
+  {
+    "component": true,
+    "usingComponents": {
+      "component-options": "./component-options",
+      "component-index": "./component-index",
+      "component-options-inference-conflict": "./component-options-inference-conflict.mpx",
+      "component-options-js": "./component-options-js.mpx"
+    }
+  }
+</script>