From db45f31726b95a37d3dd92c895c31d708638d248 Mon Sep 17 00:00:00 2001
From: SyMind <dacongsama@live.com>
Date: Sat, 20 Feb 2021 10:55:41 +0000
Subject: [PATCH 1/2] fix(picker): append to body

---
 .../taro-components/__tests__/picker.spec.js  | 109 ++++++++----------
 .../src/components/picker/picker.tsx          |  39 +++++--
 2 files changed, 76 insertions(+), 72 deletions(-)

diff --git a/packages/taro-components/__tests__/picker.spec.js b/packages/taro-components/__tests__/picker.spec.js
index 743a2fc415b2..97a53425279f 100644
--- a/packages/taro-components/__tests__/picker.spec.js
+++ b/packages/taro-components/__tests__/picker.spec.js
@@ -6,7 +6,6 @@ import { Picker } from '../h5/react'
 import { mount } from './test-tools'
 import { waitForChange } from './utils'
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const h = React.createElement
 
 describe('Picker', () => {
@@ -25,10 +24,10 @@ describe('Picker', () => {
     scratch = null
   })
 
-  async function srcollToNextItem (wrapper, columnIndex = 0) {
-    const content = wrapper.find('.weui-picker__content')
-    const column = wrapper.findAll('.weui-picker__group')[columnIndex]
-    const cur = wrapper.find('.weui-picker__indicator')
+  async function srcollToNextItem (columnIndex = 0) {
+    const content = document.querySelector('.weui-picker__content')
+    const column = document.querySelectorAll('.weui-picker__group')[columnIndex]
+    const cur = document.querySelector('.weui-picker__indicator')
     const curRect = cur.getBoundingClientRect()
     const startY = curRect.top + curRect.height / 2
     const endY = curRect.top - curRect.height / 2
@@ -72,34 +71,30 @@ describe('Picker', () => {
         <div ref={domRef}>Picker</div>
       </Picker>
     )
-    const wrapper = await mount(app, scratch)
-    const mask = wrapper.find('.weui-mask')
-    const slider = wrapper.find('.weui-picker')
-    const [cancel] = wrapper.findAll('.weui-picker__action')
+    await mount(app, scratch)
+    const overlay = document.querySelector('.weui-picker__overlay')
+    const mask = document.querySelector('.weui-mask')
+    const cancel = document.querySelectorAll('.weui-picker__action')[0]
 
-    assert(mask.style.display === 'none')
-    assert(slider.style.display === 'none')
+    assert(overlay.style.display === 'none')
 
     // 成功打开
     domRef.current.click()
-    await waitForChange(slider)
-    assert(mask.style.display !== 'none')
-    assert(slider.style.display !== 'none')
+    await waitForChange(overlay)
+    assert(overlay.style.display !== 'none')
 
     // 点击蒙层可以关闭
     mask.click()
-    await waitForChange(slider)
-    assert(mask.style.display === 'none')
-    assert(slider.style.display === 'none')
+    await waitForChange(overlay)
+    assert(overlay.style.display === 'none')
     assert(onCancel.callCount === 1)
 
     // 点击取消按钮可以关闭
     domRef.current.click()
-    await waitForChange(slider)
+    await waitForChange(overlay)
     cancel.click()
-    await waitForChange(slider)
-    assert(mask.style.display === 'none')
-    assert(slider.style.display === 'none')
+    await waitForChange(overlay)
+    assert(overlay.style.display === 'none')
     assert(onCancel.callCount === 2)
   })
 
@@ -118,17 +113,16 @@ describe('Picker', () => {
         <div ref={domRef}>Picker</div>
       </Picker>
     )
-    const wrapper = await mount(app, scratch)
-    const { node } = wrapper
-    const slider = wrapper.find('.weui-picker')
-    const [, confirm] = wrapper.findAll('.weui-picker__action')
+    const { node } = await mount(app, scratch)
+    const slider = document.querySelector('.weui-picker')
+    const confirm = document.querySelectorAll('.weui-picker__action')[1]
 
     assert(node.value === selected)
 
     domRef.current.click()
     await waitForChange(slider)
 
-    await srcollToNextItem(wrapper)
+    await srcollToNextItem()
 
     confirm.click()
 
@@ -170,17 +164,16 @@ describe('Picker', () => {
         <div ref={domRef}>Picker</div>
       </Picker>
     )
-    const wrapper = await mount(app, scratch)
-    const { node } = wrapper
-    const slider = wrapper.find('.weui-picker')
-    const [, confirm] = wrapper.findAll('.weui-picker__action')
+    const { node } = await mount(app, scratch)
+    const slider = document.querySelector('.weui-picker')
+    const confirm = document.querySelectorAll('.weui-picker__action')[1]
 
     assert(node.value === selected)
 
     domRef.current.click()
     await waitForChange(slider)
 
-    await srcollToNextItem(wrapper)
+    await srcollToNextItem()
 
     assert(onColumnChange.calledOnceWith({ column: 0, value: 1 }))
 
@@ -204,17 +197,16 @@ describe('Picker', () => {
         <div ref={domRef}>Picker</div>
       </Picker>
     )
-    const wrapper = await mount(app, scratch)
-    const { node } = wrapper
-    const slider = wrapper.find('.weui-picker')
-    const [, confirm] = wrapper.findAll('.weui-picker__action')
+    const { node } = await mount(app, scratch)
+    const slider = document.querySelector('.weui-picker')
+    const confirm = document.querySelectorAll('.weui-picker__action')[1]
 
     assert(node.value === selected)
 
     domRef.current.click()
     await waitForChange(slider)
 
-    await srcollToNextItem(wrapper)
+    await srcollToNextItem()
 
     confirm.click()
 
@@ -236,17 +228,16 @@ describe('Picker', () => {
         <div ref={domRef}>Picker</div>
       </Picker>
     )
-    const wrapper = await mount(app, scratch)
-    const { node } = wrapper
-    const slider = wrapper.find('.weui-picker')
-    const [, confirm] = wrapper.findAll('.weui-picker__action')
+    const { node } = await mount(app, scratch)
+    const slider = document.querySelector('.weui-picker')
+    const confirm = document.querySelectorAll('.weui-picker__action')[1]
 
     assert(node.value === selected)
 
     domRef.current.click()
     await waitForChange(slider)
 
-    await srcollToNextItem(wrapper, 1)
+    await srcollToNextItem(1)
 
     confirm.click()
 
@@ -272,17 +263,16 @@ describe('Picker', () => {
         <div ref={domRef}>Picker</div>
       </Picker>
     )
-    const wrapper = await mount(app, scratch)
-    const { node } = wrapper
-    const slider = wrapper.find('.weui-picker')
-    const [, confirm] = wrapper.findAll('.weui-picker__action')
+    const { node } = await mount(app, scratch)
+    const slider = document.querySelector('.weui-picker')
+    const confirm = document.querySelectorAll('.weui-picker__action')[1]
 
     assert(node.value === selected)
 
     domRef.current.click()
     await waitForChange(slider)
 
-    await srcollToNextItem(wrapper)
+    await srcollToNextItem()
 
     confirm.click()
 
@@ -308,17 +298,16 @@ describe('Picker', () => {
         <div ref={domRef}>Picker</div>
       </Picker>
     )
-    const wrapper = await mount(app, scratch)
-    const { node } = wrapper
-    const slider = wrapper.find('.weui-picker')
-    const [, confirm] = wrapper.findAll('.weui-picker__action')
+    const { node } = await mount(app, scratch)
+    const slider = document.querySelector('.weui-picker')
+    const confirm = document.querySelectorAll('.weui-picker__action')[1]
 
     assert(node.value === selected)
 
     domRef.current.click()
     await waitForChange(slider)
 
-    await srcollToNextItem(wrapper, 1)
+    await srcollToNextItem(1)
 
     confirm.click()
 
@@ -341,17 +330,16 @@ describe('Picker', () => {
         <div ref={domRef}>Picker</div>
       </Picker>
     )
-    const wrapper = await mount(app, scratch)
-    const { node } = wrapper
-    const slider = wrapper.find('.weui-picker')
-    const [, confirm] = wrapper.findAll('.weui-picker__action')
+    const { node } = await mount(app, scratch)
+    const slider = document.querySelector('.weui-picker')
+    const confirm = document.querySelectorAll('.weui-picker__action')[1]
 
     assert(node.value === '2016-09')
 
     domRef.current.click()
     await waitForChange(slider)
 
-    await srcollToNextItem(wrapper)
+    await srcollToNextItem()
 
     confirm.click()
 
@@ -374,17 +362,16 @@ describe('Picker', () => {
         <div ref={domRef}>Picker</div>
       </Picker>
     )
-    const wrapper = await mount(app, scratch)
-    const { node } = wrapper
-    const slider = wrapper.find('.weui-picker')
-    const [, confirm] = wrapper.findAll('.weui-picker__action')
+    const { node } = await mount(app, scratch)
+    const slider = document.querySelector('.weui-picker')
+    const confirm = document.querySelectorAll('.weui-picker__action')[1]
 
     assert(node.value === '2016')
 
     domRef.current.click()
     await waitForChange(slider)
 
-    await srcollToNextItem(wrapper)
+    await srcollToNextItem()
 
     confirm.click()
 
diff --git a/packages/taro-components/src/components/picker/picker.tsx b/packages/taro-components/src/components/picker/picker.tsx
index fb3455ecb61e..a88ac37f37cf 100644
--- a/packages/taro-components/src/components/picker/picker.tsx
+++ b/packages/taro-components/src/components/picker/picker.tsx
@@ -1,4 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { Component, h, ComponentInterface, Prop, Event, EventEmitter, Host, State, Watch, Element } from '@stencil/core'
 import classNames from 'classnames'
 import {
@@ -36,6 +35,7 @@ export interface PickerDate {
 export class Picker implements ComponentInterface {
   private index: number[] = []
   private pickerDate: PickerDate
+  private overlay?: HTMLElement
 
   @Element() el: HTMLElement
 
@@ -76,6 +76,16 @@ export class Picker implements ComponentInterface {
       set: val => (this.value = val),
       configurable: true
     })
+
+    if (this.overlay) {
+      document.body.appendChild(this.overlay)
+    }
+  }
+
+  disconnectedCallback () {
+    if (this.overlay) {
+      this.overlay.parentNode?.removeChild(this.overlay)
+    }
   }
 
   @Watch('mode')
@@ -473,19 +483,26 @@ export class Picker implements ComponentInterface {
       <Host>
         <div onClick={this.showPicker}>
           <slot />
+          <input type='hidden' name={name} value={formatValue(this.pickerValue)} />
         </div>
-        <div style={shouldDivHidden} class={clsMask} onClick={this.handleCancel} />
-        <div style={shouldDivHidden} class={clsSlider}>
-          <div class='weui-picker__hd'>
-            <div class='weui-picker__action' onClick={this.handleCancel}>
-              取消
-            </div>
-            <div class='weui-picker__action' onClick={this.handleChange}>
-              确定
+        <div
+          class='weui-picker__overlay'
+          style={shouldDivHidden}
+          ref={el => { this.overlay = el }}
+        >
+          <div class={clsMask} onClick={this.handleCancel} />
+          <div class={clsSlider}>
+            <div class='weui-picker__hd'>
+              <div class='weui-picker__action' onClick={this.handleCancel}>
+                取消
+              </div>
+              <div class='weui-picker__action' onClick={this.handleChange}>
+                确定
+              </div>
             </div>
+            <div class='weui-picker__bd'>{pickerGroup}</div>
+            <input type='hidden' name={name} value={formatValue(this.pickerValue)} />
           </div>
-          <div class='weui-picker__bd'>{pickerGroup}</div>
-          <input type='hidden' name={name} value={formatValue(this.pickerValue)} />
         </div>
       </Host>
     )

From 0d709a82a0710addffa0eb51c9fe08d96dfc2a34 Mon Sep 17 00:00:00 2001
From: SyMind <dacongsama@live.com>
Date: Mon, 22 Feb 2021 07:36:15 +0000
Subject: [PATCH 2/2] =?UTF-8?q?refactor:=20karmatic=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/taro-components/__tests__/audio.spec.js    |  1 -
 .../__tests__/{polyfill.js => setup.js}             | 13 +++++--------
 packages/taro-components/package.json               |  8 ++++----
 3 files changed, 9 insertions(+), 13 deletions(-)
 rename packages/taro-components/__tests__/{polyfill.js => setup.js} (51%)

diff --git a/packages/taro-components/__tests__/audio.spec.js b/packages/taro-components/__tests__/audio.spec.js
index 8f50d8185551..c22deac48f9d 100644
--- a/packages/taro-components/__tests__/audio.spec.js
+++ b/packages/taro-components/__tests__/audio.spec.js
@@ -1,4 +1,3 @@
-import './polyfill'
 import React from 'react'
 import ReactDOM from 'react-dom'
 import { Audio } from '../h5/react'
diff --git a/packages/taro-components/__tests__/polyfill.js b/packages/taro-components/__tests__/setup.js
similarity index 51%
rename from packages/taro-components/__tests__/polyfill.js
rename to packages/taro-components/__tests__/setup.js
index 3c0dcc058b17..b8727baabba0 100644
--- a/packages/taro-components/__tests__/polyfill.js
+++ b/packages/taro-components/__tests__/setup.js
@@ -2,11 +2,8 @@ import { applyPolyfills, defineCustomElements } from '../loader/index.es2017.mjs
 import '../dist/taro-components/taro-components.css'
 
 jasmine.DEFAULT_TIMEOUT_INTERVAL = 20000
-let applied = false
-if (!applied) {
-  // 此文件只要 import 一次即可
-  applyPolyfills().then(() => {
-    defineCustomElements(window)
-    applied = true
-  })
-}
+
+applyPolyfills().then(() => {
+  defineCustomElements(window)
+  applied = true
+})
diff --git a/packages/taro-components/package.json b/packages/taro-components/package.json
index 43ccc576c7d0..db03ac918cbb 100644
--- a/packages/taro-components/package.json
+++ b/packages/taro-components/package.json
@@ -24,10 +24,10 @@
     "build-h5": "babel -d dist-h5 h5",
     "build": "npm run build-h5 & stencil build --config stencil.config.ts",
     "dev": "stencil build --config stencil.config.ts --watch",
-    "test": "karmatic --files '__tests__/**.spec.js' --coverage false",
-    "test:ci": "karmatic --files '__tests__/**.spec.js' --coverage false",
-    "test:debug": "karmatic debug --files '__tests__/**.spec.js' --coverage false",
-    "test:coverage": "karmatic --files '__tests__/**.spec.js'"
+    "test": "karmatic --files '__tests__/polyfill.js,__tests__/**.spec.js' --coverage false",
+    "test:ci": "karmatic --files '__tests__/polyfill.js,__tests__/**.spec.js' --coverage false",
+    "test:debug": "karmatic debug --files '__tests__/polyfill.js,__tests__/**.spec.js' --coverage false",
+    "test:coverage": "karmatic --files '__tests__/polyfill.js,__tests__/**.spec.js'"
   },
   "repository": {
     "type": "git",