test: 补充自定义组件中使用 class 定制另一个自定义组件根节点样式测试

jest-setup.js

+const { toMatchImageSnapshot } = require('jest-image-snapshot')
+
+expect.extend({ toMatchImageSnapshot })

jest.config.js

 module.exports = {
-    testTimeout: 10000,
-    reporters: [
-        'default'
-    ],
-    watchPathIgnorePatterns: ['/node_modules/', '/dist/', '/.git/'],
-    moduleFileExtensions: ['js', 'json'],
-    rootDir: __dirname,
-    testMatch: ["<rootDir>/pages/**/**/*.test.js"],
-    testPathIgnorePatterns: ['/node_modules/']
+  testTimeout: 10000,
+  reporters: ['default'],
+  watchPathIgnorePatterns: ['/node_modules/', '/dist/', '/.git/'],
+  moduleFileExtensions: ['js', 'json'],
+  rootDir: __dirname,
+  testMatch: ['<rootDir>/pages/**/**/*.test.js'],
+  testPathIgnorePatterns: ['/node_modules/'],
+  setupFilesAfterEnv: ['<rootDir>/jest-setup.js'],
 }

pages.json

 {
-  "pages": [{
+  "pages": [
+    {
       "path": "pages/index",
       "style": {
         "navigationBarTitleText": "hello uvue"
@@ -205,19 +206,22 @@
         "navigationBarTitleText": "",
         "enablePullDownRefresh": false
       }
-    }, {
+    },
+    {
       "path": "pages/state/props/props",
       "style": {
         "navigationBarTitleText": "",
         "enablePullDownRefresh": false
       }
-    }, {
+    },
+    {
       "path": "pages/state/computed/computed",
       "style": {
         "navigationBarTitleText": "",
         "enablePullDownRefresh": false
       }
-    }, {
+    },
+    {
       "path": "pages/state/watch/watch",
       "style": {
         "navigationBarTitleText": "",
@@ -244,6 +248,13 @@
         "navigationBarTitleText": "嵌套组件通信",
         "enablePullDownRefresh": false
       }
+    },
+    {
+      "path": "pages/examples/set-custom-child-component-root-node-class/set-custom-child-component-root-node-class",
+      "style": {
+        "navigationBarTitleText": "自定义组件中使用 class 定制另一个自定义组件根节点样式",
+        "enablePullDownRefresh": false
+      }
     }
   ],
   "globalStyle": {
@@ -261,12 +272,15 @@
     }
   },
   "uniIdRouter": {},
-  "condition": { //模式配置，仅开发期间生效
+  "condition": {
+    //模式配置，仅开发期间生效
     "current": 0, //当前激活的模式(list 的索引项)
-    "list": [{
-      "name": "", //模式名称
-      "path": "", //启动页面，必选
-      "query": "" //启动参数，在页面的onLoad函数里面得到
-    }]
+    "list": [
+      {
+        "name": "", //模式名称
+        "path": "", //启动页面，必选
+        "query": "" //启动参数，在页面的onLoad函数里面得到
+      }
+    ]
   }
 }
\ No newline at end of file

pages/examples/set-custom-child-component-root-node-class/child.uvue

+<template>
+  <view>
+    <button class="btn-child bg-orange">button in child page</button>
+  </view>
+</template>
+
+<style>
+.btn-child {
+  width: 300px;
+  color: rgb(83, 156, 234);
+}
+.bg-orange{
+  background-color: rgb(214, 154, 50);
+}
+</style>

pages/examples/set-custom-child-component-root-node-class/set-custom-child-component-root-node-class.test.js

+const PAGE_PATH =
+  '/pages/examples/set-custom-child-component-root-node-class/set-custom-child-component-root-node-class'
+
+describe('自定义组件中使用 class 定制另一个自定义组件根节点样式', () => {
+  let page
+  beforeAll(async () => {
+    page = await program.reLaunch(PAGE_PATH)
+    await page.waitFor('view')
+  })
+
+  it('screenshot', async () => {
+    const image = await program.screenshot()
+    expect(image).toMatchImageSnapshot()
+  })
+})

pages/examples/set-custom-child-component-root-node-class/set-custom-child-component-root-node-class.uvue

+<template>
+  <view>
+    <button class="btn-page bg-green">button in parent page</button>
+    <Child />
+  </view>
+</template>
+
+<script lang='uts'>
+import Child from "./child.uvue";
+export default {
+  components: {
+    Child
+  }
+}
+</script>
+
+<style>
+.btn-page {
+  width: 280px;
+  color: rgb(209, 51, 51);
+}
+.bg-green{
+  background-color: rgb(105, 154, 105);
+}
+</style>

pages/index.uvue

@@ -16,7 +16,7 @@
           </view>
         </view>
       </view>
-    </view>
+    </view>
     <!-- #ifdef APP -->
   </scroll-view>
   <!-- #endif -->
@@ -325,6 +325,10 @@
                 name: '嵌套组件通信',
                 url: 'nested-component-communication',
                 enable: true,
+              },{
+                name: '自定义组件中使用 class 定制另一个自定义组件根节点样式',
+                url: 'set-custom-child-component-root-node-class',
+                enable: true,
               }
             ] as PageItem[],
           },
@@ -353,14 +357,14 @@
       setLifeCycleNum(num : number) {
         setLifeCycleNum(num)
       },
-      // 自动化测试
-      getLifeCycleNum() : number {
-        return state.lifeCycleNum
-      },
-			// 自动化测试
-			checkLaunchPath() : boolean {
-				const app = getApp()
-			  return app.checkLaunchPath()
+      // 自动化测试
+      getLifeCycleNum() : number {
+        return state.lifeCycleNum
+      },
+			// 自动化测试
+			checkLaunchPath() : boolean {
+				const app = getApp()
+			  return app.checkLaunchPath()
 			},
     },
   }