test: add e2e test

babel.config.js

@@ -0,0 +1,13 @@
+// babel-preset-taro 更多选项和默认值：
+// https://github.com/NervJS/taro/blob/next/packages/babel-preset-taro/README.md
+module.exports = {
+    presets: [
+        [
+            'taro',
+            {
+                framework: 'react',
+                ts: true,
+            },
+        ],
+    ],
+}

babel.js

@@ -0,0 +1,10 @@
+const path = require('path')
+const pkg = require('./package.json')
+
+module.exports = [
+    'import',
+    {
+        libraryName: pkg.name,
+        customName: path.resolve(__dirname, './customName.js'),
+    },
+]

config/index.ts

@@ -0,0 +1,25 @@
+import WebpackChain from 'webpack-chain'
+import { IProjectConfig } from '@tarojs/taro/types/compile'
+import { TaroProvidePlugin } from '@tarojsx/polyfill/dist/plugins'
+
+const config: IProjectConfig = {
+    projectName: 'test',
+    date: '2020-2-22',
+    designWidth: 750,
+    deviceRatio: { 750: 1 },
+    sourceRoot: 'test/src',
+    outputRoot: 'test/dist',
+    framework: 'react',
+    mini: {
+        webpackChain(chain: WebpackChain) {
+            chain.plugin('taroProvidePlugin').use(TaroProvidePlugin)
+        },
+    },
+}
+
+export default function (merge) {
+    if (process.env.NODE_ENV === 'development') {
+        return merge({}, config, { env: { NODE_ENV: '"development"' } })
+    }
+    return merge({}, config, { env: { NODE_ENV: '"production"' } })
+}

customName.js

@@ -0,0 +1,14 @@
+const path = require('path')
+const fs = require('fs')
+const glob = require('glob')
+const pkg = require('./package.json')
+
+const prefix = path.join(pkg.name, 'dist')
+
+const files = glob.sync('**/*.js', { cwd: path.join(__dirname, 'dist') })
+
+console.log(files)
+
+module.exports = function customName(name) {
+    return `antd/lib/${name}`
+}

package.json

@@ -39,12 +39,19 @@
         "start": "tsc -w --preserveWatchOutput",
         "prebuild": "rimraf dist tsconfig.tsbuildinfo",
         "build": "tsc",
+        "pretest": "npm run build && taro build --type weapp",
+        "test": "jest",
+        "test:watch": "jest --watch",
         "prepublishOnly": "npm run build",
         "release": "np"
     },
     "dependencies": {
+        "@antv/f2": "^3.7.0",
+        "@tarojsx/polyfill": "^0.16.0",
         "@types/react-window": "^1.8.2",
         "@types/react-window-infinite-loader": "^1.0.3",
+        "async-retry": "^1.3.1",
+        "fast-deep-equal": "^3.1.3",
         "react-spring": "^9.0.0-rc.3",
         "react-use-gesture": "^7.0.15",
         "react-vtree": "^1.0.2",
@@ -53,16 +60,38 @@
         "tslib": "^2.0.0"
     },
     "devDependencies": {
-        "@commitlint/cli": "^8.3.5",
-        "@commitlint/config-conventional": "^8.3.4",
-        "@tarojs/components": "^3.0.0-rc.0",
-        "@tarojs/taro": "^3.0.0-rc.0",
-        "@types/react": "^16.9.35",
-        "np": "^6.2.3",
+        "@babel/preset-typescript": "^7.10.4",
+        "@minapp/wx": "^2.2.1",
+        "@commitlint/cli": "^9.0.1",
+        "@commitlint/config-conventional": "^9.0.1",
+        "@tarojs/mini-runner": "^3.0.2",
+        "@tarojs/react": "^3.0.2",
+        "@tarojs/runtime": "^3.0.2",
+        "@tarojs/components": "^3.0.2",
+        "@tarojs/taro": "^3.0.2",
+        "@tarojs/webpack-runner": "^3.0.2",
+        "@types/async-retry": "^1.4.2",
+        "@types/classnames": "^2.2.10",
+        "@types/jest": "^26.0.3",
+        "@types/react": "^16.9.41",
+        "babel-preset-taro": "^3.0.0-rc.6",
+        "jest": "^26.1.0",
+        "miniprogram-automator": "^0.9.1",
+        "np": "^6.3.1",
+        "react": "^16.13.1",
         "react-calendar": "^3.1.0",
         "rimraf": "^3.0.2",
         "taro-ui": "^2.3.4",
-        "typescript": "^3.9.3"
+        "typescript": "^3.9.6",
+        "webpack": "^4.43.0",
+        "webpack-chain": "^6.4.0"
+    },
+    "jest": {
+        "testRegex": "/test/.*\\.test\\.[t]sx?$",
+        "watchPathIgnorePatterns": [
+            ".+\\.js(on)$",
+            "/config|dist|src/"
+        ]
     },
     "husky": {
         "hooks": {

project.config.json

@@ -0,0 +1,80 @@
+{
+	"miniprogramRoot": "test/dist/",
+	"projectname": "tarojsx-library-test",
+	"appid": "touristappid",
+	"compileType": "miniprogram",
+	"simulatorType": "wechat",
+	"simulatorPluginLibVersion": {},
+	"setting": {
+		"urlCheck": false,
+		"es6": false,
+		"enhance": false,
+		"postcss": false,
+		"preloadBackgroundData": false,
+		"minified": false,
+		"newFeature": true,
+		"coverView": true,
+		"nodeModules": false,
+		"autoAudits": false,
+		"showShadowRootInWxmlPanel": true,
+		"scopeDataCheck": false,
+		"uglifyFileName": false,
+		"checkInvalidKey": true,
+		"checkSiteMap": false,
+		"uploadWithSourceMap": true,
+		"compileHotReLoad": false,
+		"babelSetting": {
+			"ignore": [],
+			"disablePlugins": [],
+			"outputPath": ""
+		},
+		"useIsolateContext": true,
+		"useCompilerModule": false,
+		"userConfirmedUseCompilerModuleSwitch": false
+	},
+	"condition": {
+		"search": {
+			"current": -1,
+			"list": []
+		},
+		"conversation": {
+			"current": -1,
+			"list": []
+		},
+		"plugin": {
+			"current": -1,
+			"list": []
+		},
+		"game": {
+			"current": -1,
+			"list": []
+		},
+		"gamePlugin": {
+			"current": -1,
+			"list": []
+		},
+		"miniprogram": {
+			"current": -1,
+			"list": [
+				{
+					"id": -1,
+					"name": "AntV F2",
+					"pathName": "pages/antv-f2",
+					"scene": null
+				},
+				{
+					"id": 0,
+					"name": "React Spring",
+					"pathName": "pages/react-spring",
+					"scene": null
+				},
+				{
+					"id": 0,
+					"name": "React Use Gesture",
+					"pathName": "pages/react-use-gesture",
+					"scene": null
+				}
+			]
+		}
+	}
+}

test/src/app.config.ts

@@ -0,0 +1,5 @@
+import { AppConfig } from '@tarojs/taro'
+
+export default {
+    pages: ['pages/index', 'pages/antv-f2', 'pages/react-spring', 'pages/react-use-gesture'],
+} as AppConfig

test/src/app.ts

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default class App extends React.Component {
+    render() {
+        return this.props.children
+    }
+}

test/src/pages/antv-f2.tsx

@@ -0,0 +1,74 @@
+import React, { useState, useEffect } from 'react'
+import { View } from '@tarojs/components'
+import { F2 } from '../../../src/antv'
+
+const f2style: React.CSSProperties = { width: '100vw', height: '50vh' }
+
+export default () => {
+    const [data1, setData1] = useState([
+        { genre: 'Sports', sold: 275 },
+        { genre: 'Strategy', sold: 115 },
+        { genre: 'Action', sold: 120 },
+        { genre: 'Shooter', sold: 350 },
+        { genre: 'Other', sold: 150 },
+    ])
+    const [data2, setData2] = useState([
+        { year: '2001', population: 41.8 },
+        { year: '2002', population: 25.8 },
+        { year: '2003', population: 31.7 },
+        { year: '2004', population: 46 },
+        { year: '2005', population: 28 },
+    ])
+
+    useEffect(() => {
+        const timer = setInterval(() => {
+            setData1((prev) => prev.map(({ genre }) => ({ genre, sold: Math.round(Math.random() * 100) })))
+            setData2((prev) => prev.map(({ year }) => ({ year, population: Math.round(Math.random() * 10) })))
+        }, 2000)
+
+        return () => clearInterval(timer)
+    }, [])
+
+    return (
+        <View style={{ display: 'flex', flexWrap: 'wrap' }}>
+            <F2
+                style={f2style}
+                // F2 对数据源格式的要求，仅仅是 JSON 数组，数组的每个元素是一个标准 JSON 对象。
+                data={data1}
+            >
+                {
+                    // Step 1: 接收 Chart 对象
+                    ({ chart, data }) => {
+                        // Step 2: 载入数据源
+                        chart.source(data)
+
+                        // Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
+                        chart.interval().position('genre*sold').color('genre')
+
+                        // Step 4: 渲染图表
+                        chart.render()
+                    }
+                }
+            </F2>
+
+            <F2
+                style={f2style}
+                data={data2}
+            >
+                {({ chart, data }) => {
+                    chart.source(data)
+                    chart.coord('polar')
+                    chart.legend({
+                        position: 'right',
+                    })
+                    chart.axis(false)
+                    chart.interval().position('year*population').color('year').style({
+                        lineWidth: 1,
+                        stroke: '#fff',
+                    })
+                    chart.render()
+                }}
+            </F2>
+        </View>
+    )
+}

test/src/pages/index.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import Taro from '@tarojs/taro'
+import { View, Button } from '@tarojs/components'
+
+const btnStyle: React.CSSProperties = { margin: 30 }
+
+export default () => (
+    <View>
+        <Button style={btnStyle} onClick={() => Taro.navigateTo({ url: '/pages/antv-f2' })}>
+            AntV F2
+        </Button>
+        <Button style={btnStyle} onClick={() => Taro.navigateTo({ url: '/pages/react-spring' })}>
+            React Spring
+        </Button>
+        <Button style={btnStyle} onClick={() => Taro.navigateTo({ url: '/pages/react-use-gesture' })}>
+            React Use Gesture
+        </Button>
+    </View>
+)

test/src/pages/react-spring.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import { View } from '@tarojs/components'
+import { useSpring, animated } from 'react-spring'
+import { a } from '../../../src/react-spring'
+
+const AnimatedView = animated(View)
+
+export default () => {
+    const numberSpring = useSpring({ number: 1, from: { number: 0 } })
+
+    const opacitySpring = useSpring({ opacity: 1, from: { opacity: 0 } })
+
+    const scriptSpring = useSpring({
+        from: {
+            position: 'relative',
+            willChange: 'width, height, left, top',
+            left: '0%',
+            top: '0%',
+            width: '0%',
+            height: '0%',
+            background: 'lightgreen',
+        },
+        to: async (next) => {
+            while (1) {
+                await next({ left: '0%', top: '0%', width: '100%', height: '100%', background: 'lightblue' })
+                await next({ height: '50%', background: 'lightgreen' })
+                await next({ width: '50%', left: '50%', background: 'lightgoldenrodyellow' })
+                await next({ top: '0%', height: '100%', background: 'lightpink' })
+                await next({ top: '50%', height: '50%', background: 'lightsalmon' })
+                await next({ width: '100%', left: '0%', background: 'lightcoral' })
+                await next({ width: '50%', background: 'lightseagreen' })
+                await next({ top: '0%', height: '100%', background: 'lightskyblue' })
+                await next({ width: '100%', background: 'lightslategrey' })
+            }
+        },
+    })
+
+    return (
+        <View>
+            <AnimatedView id="number">{numberSpring.number}</AnimatedView>
+
+            <AnimatedView style={opacitySpring}>我闪现至此</AnimatedView>
+
+            <View
+                style={{
+                    position: 'relative',
+                    overflow: 'hidden',
+                    width: '100vw',
+                    height: '100vw',
+                    backgroundColor: '#f0f0f0',
+                }}
+            >
+                <a.View style={scriptSpring as any} />
+            </View>
+        </View>
+    )
+}