fix: #34 render nested components declared with absolute usingComponents paths

docs/detail.md

@@ -56,7 +56,7 @@ simulate.load('/comp', 'custom-comp') // 渲染出来的结果是 <comp><wx-view
 }
 ```
 
-这种绝对路径写法的，它会从我们提供的根路径开始寻找对应组件；但是使用相对路径写法，则无需做任何处理：
+这种绝对路径写法的，它会从我们提供的根路径开始寻找对应组件；未指定 rootPath 时（默认取 load 传入组件所在目录）如果从该目录找不到，则会从组件所在目录逐级往上查找，取最近的一个存在的组件路径，此时编译根路径也会同步调整为二者的公共父路径；但是使用相对路径写法，则无需做任何处理：
 
 ```json
 {

docs/update.md

@@ -1,5 +1,9 @@
 # 更新日志
 
+## 1.6.3
+
+* 修复 usingComponents 中绝对路径引入的嵌套组件在未指定 rootPath 时渲染为空节点的问题
+
 ## 1.6.2 & 依赖 j-component 更新 1.4.10
 
 * 修复 setData 触发事件重新监听进而导致逻辑陷入死循环的问题

package.json

@@ -1,6 +1,6 @@
 {
   "name": "miniprogram-simulate",
-  "version": "1.6.2",
+  "version": "1.6.3",
   "description": "tools for miniprogram custom component unit test",
   "main": "index.js",
   "types": "index.d.ts",

src/index.js

@@ -62,6 +62,55 @@ function behavior(definition) {
   return jComponent.behavior(definition)
 }
 
+/**
+ * 获取两个路径的公共父路径
+ */
+function getCommonAncestorPath(pathA, pathB) {
+  const listA = path.resolve(pathA).split(path.sep)
+  const listB = path.resolve(pathB).split(path.sep)
+  const commonList = []
+
+  for (let i = 0, len = Math.min(listA.length, listB.length); i < len; i++) {
+    if (listA[i] !== listB[i]) break
+    commonList.push(listA[i])
+  }
+
+  return commonList.join(path.sep) || path.sep
+}
+
+/**
+ * 计算 usingComponents 中某个依赖组件对应的路径
+ */
+function resolveUsingComponentsPath(value, componentPath, cache) {
+  if (!_.isAbsolute(value)) {
+    // 相对路径，以当前组件所在目录为基准
+    return path.join(path.dirname(componentPath), value)
+  }
+
+  // 绝对路径，以 rootPath 为基准
+  const rootPath = cache.options.rootPath
+  const usingPath = path.join(rootPath, value)
+  if (_.readFile(`${usingPath}.json`)) return usingPath
+  if (!cache.rootPathIsDefault) return usingPath
+
+  // rootPath 未指定时其默认值为当前组件所在目录，此时无法得知项目根路径，
+  // 对于以项目根路径为基准书写的绝对路径会解析失败，导致该组件被当作空节点渲染，
+  // 因此再从组件所在目录逐级向上查找，取最近的一个存在的组件路径
+  let dir = path.dirname(componentPath)
+  while (dir !== path.dirname(dir)) {
+    const dirPath = path.join(dir, value)
+    if (_.readFile(`${dirPath}.json`)) {
+      // 找到的组件可能不在原 rootPath 下，需要同步扩大编译根路径，否则无法编译其模板
+      cache.options.rootPath = getCommonAncestorPath(cache.options.rootPath, dirPath)
+      return dirPath
+    }
+
+    dir = path.dirname(dir)
+  }
+
+  return usingPath
+}
+
 /* eslint-disable complexity */
 /**
  * 注册自定义组件
@@ -102,7 +151,6 @@ function register(componentPath, tagName, cache, hasRegisterCache) {
   }
 
   // 先加载 using components
-  const rootPath = cache.options.rootPath
   const usingComponents = component.json.usingComponents || {}
   const overrideUsingComponents = cache.options.usingComponents || {}
   Object.assign(usingComponents, overrideUsingComponents)
@@ -111,7 +159,7 @@ function register(componentPath, tagName, cache, hasRegisterCache) {
     const key = usingComponentKeys[i]
 
     const value = usingComponents[key]
-    const usingPath = _.isAbsolute(value) ? path.join(rootPath, value) : path.join(path.dirname(componentPath), value)
+    const usingPath = resolveUsingComponentsPath(value, componentPath, cache)
 
     if (_.readFile(`${usingPath}.json`)) {
       // 文件路径
@@ -145,6 +193,8 @@ function load(componentPath, tagName, options = {}) {
     tagName = ''
   }
 
+  const rootPathIsDefault = !(options && options.rootPath)
+
   if (typeof componentPath === 'string') {
     options = Object.assign({
       compiler: 'official', // official - 官方编译器、simulate - 纯 js 实现的模拟编译器
@@ -161,6 +211,7 @@ function load(componentPath, tagName, options = {}) {
     wxss: [],
     options,
     needRunJsList: [],
+    rootPathIsDefault: typeof componentPath === 'string' && rootPathIsDefault,
   }
   const hasRegisterCache = {}
   const id = register(componentPath, tagName, cache, hasRegisterCache)

test/comp12/components/main-status/index.js

@@ -0,0 +1,8 @@
+Component({
+  properties: {
+    msg: {
+      type: String,
+      value: '',
+    },
+  },
+})

test/comp12/components/main-status/index.json

@@ -0,0 +1,6 @@
+{
+    "component": true,
+    "usingComponents": {
+        "u-icon": "/components/u-icon/index"
+    }
+}

test/comp12/components/main-status/index.wxml

@@ -0,0 +1,4 @@
+<view class="main--status">
+    <u-icon name="star"></u-icon>
+    <view class="main--msg">{{msg}}</view>
+</view>

test/comp12/components/main-status/index.wxss

@@ -0,0 +1,4 @@
+.main--status {
+    color: #1e6bb8;
+    font-size: 16px;
+}

test/comp12/components/u-icon/index.js

@@ -0,0 +1,8 @@
+Component({
+  properties: {
+    name: {
+      type: String,
+      value: 'icon',
+    },
+  },
+})

test/comp12/components/u-icon/index.json

@@ -0,0 +1,3 @@
+{
+    "component": true
+}

test/comp12/components/u-icon/index.wxml

@@ -0,0 +1 @@
+<view class="u-icon">[{{name}}]</view>

test/comp12/components/u-icon/index.wxss

@@ -0,0 +1,4 @@
+.u-icon {
+    color: #e64340;
+    font-weight: bold;
+}

test/comp12/index.test.js

@@ -0,0 +1,35 @@
+const path = require('path')
+const simulate = require('../../index')
+
+function runTest(id) {
+  const comp = simulate.render(id)
+
+  const parent = document.createElement('parent-wrapper')
+  comp.attach(parent)
+
+  // 嵌套的自定义组件需要渲染出自身模板，而不是停留在空节点
+  expect(simulate.match(comp.dom, `
+        <wx-view class="page--page">
+            <main-status>
+                <wx-view class="main-status--main--status">
+                    <u-icon>
+                        <wx-view class="u-icon--u-icon">[star]</wx-view>
+                    </u-icon>
+                    <wx-view class="main-status--main--msg">这是测试文案</wx-view>
+                </wx-view>
+            </main-status>
+        </wx-view>
+    `)).toBe(true)
+  expect(comp.dom.querySelector('main-status').innerHTML).toBeTruthy()
+  expect(comp.dom.querySelector('u-icon').innerHTML).toBeTruthy()
+}
+
+test('comp12', () => {
+  let id = simulate.load(path.resolve(__dirname, './page/index'), 'page')
+  runTest(id)
+
+  jest.resetModules() // https://github.com/facebook/jest/issues/5120
+
+  id = simulate.load(path.resolve(__dirname, './page/index'), 'page', {compiler: 'simulate'})
+  runTest(id)
+})

test/comp12/page/index.js

@@ -0,0 +1,5 @@
+Component({
+  data: {
+    msg: '这是测试文案',
+  },
+})

test/comp12/page/index.json

@@ -0,0 +1,6 @@
+{
+    "component": true,
+    "usingComponents": {
+        "main-status": "/components/main-status/index"
+    }
+}

test/comp12/page/index.wxml

@@ -0,0 +1,3 @@
+<view class="page">
+    <main-status msg="{{msg}}"></main-status>
+</view>

test/comp12/page/index.wxss

@@ -0,0 +1,3 @@
+.page {
+    padding: 10px;
+}