fix(picker): append to body

packages/taro-components/__tests__/audio.spec.js

@@ -1,4 +1,3 @@
-import './polyfill'
 import React from 'react'
 import { Audio } from '../h5/react'
 import { mount } from './test-tools'

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()
 

packages/taro-components/__tests__/polyfill.js → packages/taro-components/__tests__/setup.js

@@ -3,11 +3,7 @@ import '../dist/taro-components/taro-components.css'
 
 // eslint-disable-next-line no-undef
 jasmine.DEFAULT_TIMEOUT_INTERVAL = 20000
-let applied = false
-if (!applied) {
-  // 此文件只要 import 一次即可
-  applyPolyfills().then(() => {
-    defineCustomElements(window)
-    applied = true
-  })
-}
+
+applyPolyfills().then(() => {
+  defineCustomElements(window)
+})

packages/taro-components/__tests__/video.spec.js

@@ -1,4 +1,3 @@
-import './polyfill'
 import React from 'react'
 import * as assert from 'assert'
 // import simulant from 'simulant'

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__/setup.js,__tests__/**.spec.js' --coverage false",
+    "test:ci": "karmatic --files '__tests__/setup.js,__tests__/**.spec.js' --coverage false",
+    "test:debug": "karmatic debug --files '__tests__/setup.js,__tests__/**.spec.js' --coverage false",
+    "test:coverage": "karmatic --files '__tests__/setup.js,__tests__/**.spec.js'"
   },
   "repository": {
     "type": "git",

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
 
@@ -78,6 +78,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')
@@ -476,19 +486,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>
     )