cbvirtua 1.0.105 → 1.0.107

package/better-scroll-dev/better-scroll-dev/tests/e2e/nested-scroll/triple-vertical.e2e.ts

@@ -0,0 +1,182 @@
+import { Page } from 'puppeteer'
+import extendTouch from '../../util/extendTouch'
+import getTranslate from '../../util/getTranslate'
+
+jest.setTimeout(10000000)
+
+describe('Nested triple-vertical scroll', () => {
+  let page = (global as any).page as Page
+  extendTouch(page)
+  beforeAll(async () => {
+    await page.goto('http://0.0.0.0:8932/#/nested-scroll/triple-vertical')
+  })
+  beforeEach(async () => {
+    await page.reload({
+      waitUntil: 'domcontentloaded',
+    })
+  })
+
+  it('should make outer BScroll scroll and others keep unmoved when manipulating outerBScroll', async () => {
+    await page.waitFor(300)
+
+    await page.dispatchScroll({
+      x: 160,
+      y: 150,
+      xDistance: 0,
+      yDistance: -70,
+      gestureSourceType: 'touch',
+    })
+
+    await page.waitFor(2500)
+
+    const outerTransformText = await page.$eval('.outer-content', (node) => {
+      return window.getComputedStyle(node).transform
+    })
+    const middleTransformText = await page.$eval('.middle-content', (node) => {
+      return window.getComputedStyle(node).transform
+    })
+    const innerTransformText = await page.$eval('.inner-content', (node) => {
+      return window.getComputedStyle(node).transform
+    })
+
+    const outerTranslateY = getTranslate(outerTransformText!, 'y')
+    const middleTranslateY = getTranslate(middleTransformText!, 'y')
+    const innerTranslateY = getTranslate(innerTransformText!, 'y')
+
+    expect(outerTranslateY).toBeLessThan(-30)
+    expect(middleTranslateY).toBeNaN()
+    expect(innerTranslateY).toBeNaN()
+  })
+
+  it('should only make middle scroll and others keep unmoved', async () => {
+    await page.waitFor(300)
+
+    await page.dispatchScroll({
+      x: 160,
+      y: 250,
+      xDistance: 0,
+      yDistance: -70,
+      gestureSourceType: 'touch',
+    })
+
+    await page.waitFor(1000)
+
+    const outerTransformText = await page.$eval('.outer-content', (node) => {
+      return window.getComputedStyle(node).transform
+    })
+    const outerTranslateY = getTranslate(outerTransformText!, 'y')
+
+    const middleTransformText = await page.$eval('.middle-content', (node) => {
+      return window.getComputedStyle(node).transform
+    })
+    const middleTranslateY = getTranslate(middleTransformText!, 'y')
+
+    const innerTransformText = await page.$eval('.inner-content', (node) => {
+      return window.getComputedStyle(node).transform
+    })
+    const innerTranslateY = getTranslate(innerTransformText!, 'y')
+
+    expect(innerTranslateY).toBeNaN()
+    expect(middleTranslateY).toBeLessThan(-30)
+    expect(outerTranslateY).toBe(0)
+  })
+
+  it('should only make inner scroll and others keep unmoved', async () => {
+    await page.waitFor(300)
+
+    await page.dispatchScroll({
+      x: 160,
+      y: 450,
+      xDistance: 0,
+      yDistance: -70,
+      gestureSourceType: 'touch',
+    })
+
+    await page.waitFor(1000)
+
+    const outerTransformText = await page.$eval('.outer-content', (node) => {
+      return window.getComputedStyle(node).transform
+    })
+    const outerTranslateY = getTranslate(outerTransformText!, 'y')
+
+    const middleTransformText = await page.$eval('.middle-content', (node) => {
+      return window.getComputedStyle(node).transform
+    })
+    const middleTranslateY = getTranslate(middleTransformText!, 'y')
+
+    const innerTransformText = await page.$eval('.inner-content', (node) => {
+      return window.getComputedStyle(node).transform
+    })
+    const innerTranslateY = getTranslate(innerTransformText!, 'y')
+
+    expect(innerTranslateY).toBeLessThan(-30)
+    expect(middleTranslateY).toBe(0)
+    expect(outerTranslateY).toBe(0)
+  })
+
+  it('should make parent BScroll scroll when innerScroll reached boundary', async () => {
+    await page.waitFor(300)
+
+    await page.dispatchScroll({
+      x: 160,
+      y: 450,
+      xDistance: 0,
+      yDistance: 50,
+      speed: 3000,
+      gestureSourceType: 'touch',
+    })
+
+    const outerTransformText = await page.$eval('.outer-content', (node) => {
+      return window.getComputedStyle(node).transform
+    })
+    const outerTranslateY = getTranslate(outerTransformText!, 'y')
+
+    const middleTransformText = await page.$eval('.middle-content', (node) => {
+      return window.getComputedStyle(node).transform
+    })
+    const middleTranslateY = getTranslate(middleTransformText!, 'y')
+
+    const innerTransformText = await page.$eval('.inner-content', (node) => {
+      return window.getComputedStyle(node).transform
+    })
+    const innerTranslateY = getTranslate(innerTransformText!, 'y')
+
+    expect(outerTranslateY).toBeGreaterThan(0)
+    expect(middleTranslateY).toBeNaN()
+    expect(innerTranslateY).toBeNaN()
+  })
+
+  it('click', async () => {
+    const mockOuterHandler = jest.fn()
+    const mockMiddleHandler = jest.fn()
+    const mockInnerHandler = jest.fn()
+
+    // outer click
+    page.once('dialog', async (dialog) => {
+      mockOuterHandler()
+      await dialog.dismiss()
+    })
+    await page.touchscreen.tap(150, 100)
+    expect(mockOuterHandler).toBeCalledTimes(1)
+
+    await page.waitFor(500)
+
+    // middle click
+    page.once('dialog', async (dialog) => {
+      mockMiddleHandler()
+      await dialog.dismiss()
+    })
+    await page.touchscreen.tap(150, 250)
+    expect(mockMiddleHandler).toBeCalledTimes(1)
+
+    await page.waitFor(500)
+
+    // inner click
+    page.once('dialog', async (dialog) => {
+      mockInnerHandler()
+      await dialog.dismiss()
+    })
+    await page.touchscreen.tap(150, 400)
+    expect(mockInnerHandler).toBeCalledTimes(1)
+  })
+})

package/better-scroll-dev/better-scroll-dev/tests/e2e/nested-scroll/vertical.e2e.ts

@@ -0,0 +1,127 @@
+import { Page } from 'puppeteer'
+import extendTouch from '../../util/extendTouch'
+import getTranslate from '../../util/getTranslate'
+
+jest.setTimeout(10000000)
+
+describe('Nested vertical scroll', () => {
+  let page = (global as any).page as Page
+  extendTouch(page)
+  beforeAll(async () => {
+    await page.goto('http://0.0.0.0:8932/#/nested-scroll/vertical')
+  })
+  beforeEach(async () => {
+    await page.reload({
+      waitUntil: 'domcontentloaded',
+    })
+  })
+
+  it('should make outer BScroll scroll when manipulating outerBScroll', async () => {
+    await page.waitFor(300)
+
+    await page.dispatchScroll({
+      x: 160,
+      y: 150,
+      xDistance: 0,
+      yDistance: -70,
+      gestureSourceType: 'touch',
+    })
+
+    await page.waitFor(2500)
+
+    const transformText = await page.$eval('.outer-content', (node) => {
+      return window.getComputedStyle(node).transform
+    })
+
+    const translateY = getTranslate(transformText!, 'y')
+    await expect(translateY).toBeLessThan(-30)
+  })
+
+  it('should only make innerBScroll scroll and outerBScroll stop', async () => {
+    await page.waitFor(300)
+
+    await page.dispatchScroll({
+      x: 160,
+      y: 300,
+      xDistance: 0,
+      yDistance: -70,
+      gestureSourceType: 'touch',
+    })
+
+    await page.waitFor(1000)
+
+    const outerTransformText = await page.$eval('.outer-content', (node) => {
+      return window.getComputedStyle(node).transform
+    })
+
+    const outerTranslateY = getTranslate(outerTransformText!, 'y')
+    await expect(outerTranslateY).toBe(0)
+
+    const innerTransformText = await page.$eval('.inner-content', (node) => {
+      return window.getComputedStyle(node).transform
+    })
+
+    const innerTranslateY = getTranslate(innerTransformText!, 'y')
+    await expect(innerTranslateY).toBeLessThan(-30)
+  })
+
+  it('should make outer BScroll scroll when innerScroll reached boundary', async () => {
+    await page.waitFor(300)
+
+    await page.dispatchScroll({
+      x: 160,
+      y: 300,
+      xDistance: 0,
+      yDistance: -300,
+      speed: 3000,
+      gestureSourceType: 'touch',
+    })
+
+    await page.waitFor(1000)
+
+    const innerTransformText = await page.$eval('.inner-content', (node) => {
+      return window.getComputedStyle(node).transform
+    })
+
+    const innerTranslateY = getTranslate(innerTransformText!, 'y')
+    await expect(innerTranslateY).toBeLessThan(-20)
+
+    await page.dispatchScroll({
+      x: 160,
+      y: 300,
+      xDistance: 0,
+      yDistance: -100,
+      gestureSourceType: 'touch',
+    })
+
+    const outerTransformText = await page.$eval('.outer-content', (node) => {
+      return window.getComputedStyle(node).transform
+    })
+    const outerTranslateY = getTranslate(outerTransformText!, 'y')
+    await expect(outerTranslateY).toBeLessThan(-50)
+  })
+
+  it('should support click handle when use nestedScroll plugin', async () => {
+    const mockOuterHandler = jest.fn()
+    const mockInnerHandler = jest.fn()
+    page.once('dialog', async (dialog) => {
+      mockOuterHandler()
+      await dialog.dismiss()
+    })
+
+    // outer click
+    await page.touchscreen.tap(300, 100)
+    expect(mockOuterHandler).toBeCalledTimes(1)
+
+    await page.waitFor(500)
+
+    page.once('dialog', async (dialog) => {
+      mockInnerHandler()
+      await dialog.dismiss()
+    })
+
+    // inner click
+    await page.touchscreen.tap(350, 500)
+    expect(mockInnerHandler).toBeCalledTimes(1)
+  })
+})

package/better-scroll-dev/better-scroll-dev/tests/e2e/observe-dom/observe-dom.e2e.ts

@@ -0,0 +1,51 @@
+import { Page } from 'puppeteer'
+import extendTouch from '../../util/extendTouch'
+import getTranslate from '../../util/getTranslate'
+
+jest.setTimeout(10000000)
+
+describe('ObserveDOM', () => {
+  let page = (global as any).page as Page
+  extendTouch(page)
+  beforeEach(async () => {
+    await page.goto('http://0.0.0.0:8932/#/observe-dom/')
+  })
+
+  it('should observe DOM change and auto refresh bs', async () => {
+    await page.waitFor(300)
+
+    const preItemsCounts = await page.$$eval(
+      '.scroll-item',
+      (element) => element.length
+    )
+
+    expect(preItemsCounts).toBe(10)
+
+    await page.click('.btn')
+
+    await page.waitFor(100)
+
+    const PostItemsCounts = await page.$$eval(
+      '.scroll-item',
+      (element) => element.length
+    )
+
+    expect(PostItemsCounts).toBe(12)
+
+    await page.dispatchScroll({
+      x: 100,
+      y: 120,
+      xDistance: -150,
+      yDistance: 0,
+      gestureSourceType: 'touch',
+    })
+    await page.waitFor(2600)
+
+    const transformText = await page.$eval('.scroll-content', (node) => {
+      return window.getComputedStyle(node).transform
+    })
+    const x = getTranslate(transformText, 'x')
+
+    expect(x).toBeLessThanOrEqual(-361)
+  })
+})

package/better-scroll-dev/better-scroll-dev/tests/e2e/observe-image/observe-image.e2e.ts

@@ -0,0 +1,32 @@
+import { Page } from 'puppeteer'
+import extendTouch from '../../util/extendTouch'
+import getTranslate from '../../util/getTranslate'
+
+jest.setTimeout(10000000)
+
+describe('ObserveImage', () => {
+  let page = (global as any).page as Page
+  extendTouch(page)
+  beforeEach(async () => {
+    await page.goto('http://0.0.0.0:8932/#/observe-image/')
+  })
+
+  it('should autorefresh when img loaded', async () => {
+    await page.waitFor(3000)
+
+    await page.dispatchScroll({
+      x: 100,
+      y: 120,
+      xDistance: 0,
+      yDistance: -50,
+      gestureSourceType: 'touch',
+    })
+
+    const transformText = await page.$eval('.scroll-content', (node) => {
+      return window.getComputedStyle(node).transform
+    })
+    const y = getTranslate(transformText, 'y')
+
+    expect(y).toBeLessThan(-30)
+  })
+})

package/better-scroll-dev/better-scroll-dev/tests/e2e/picker/double-column.e2e.ts

@@ -0,0 +1,91 @@
+import { Page } from 'puppeteer'
+import extendTouch from '../../util/extendTouch'
+import getTranslate from '../../util/getTranslate'
+
+jest.setTimeout(10000000)
+
+describe('Double column picker', () => {
+  let page = (global as any).page as Page
+  extendTouch(page)
+  beforeAll(async () => {
+    await page.goto('http://0.0.0.0:8932/#/picker/double-column')
+  })
+  beforeEach(async () => {
+    await page.reload({
+      waitUntil: 'domcontentloaded',
+    })
+  })
+
+  it('should render picker DOM correctly', async () => {
+    await page.waitFor(300)
+
+    await page.click('.open')
+
+    await page.waitFor(500)
+
+    const displayText = await page.$eval('.picker-panel', (node) => {
+      return window.getComputedStyle(node).display
+    })
+
+    await expect(displayText).toBe('block')
+  })
+
+  it('should get correct text when click "confirm" button', async () => {
+    await page.waitFor(300)
+
+    await page.click('.open')
+
+    await page.waitFor(1000)
+
+    const openBtn = await page.$('.open')
+
+    await page.click('.confirm')
+
+    // wait for transition ends
+    await page.waitFor(100)
+
+    const innerText = await page.$eval('.open', (node) => {
+      return node.textContent
+    })
+
+    await expect(innerText).toBe('Venomancer-0__Durable-0')
+  })
+
+  it('should scroll correctly when simulate touch event on each column', async () => {
+    await page.waitFor(300)
+
+    await page.click('.open')
+
+    await page.waitFor(1000)
+
+    // first column
+    await page.dispatchScroll({
+      x: 100,
+      y: 630,
+      xDistance: 0,
+      yDistance: -70,
+      gestureSourceType: 'touch',
+    })
+
+    // second column
+    await page.dispatchScroll({
+      x: 270,
+      y: 630,
+      xDistance: 0,
+      yDistance: -70,
+      gestureSourceType: 'touch',
+    })
+
+    // wait for transition ends
+    await page.waitFor(1000)
+
+    const transformTexts = await page.$$eval('.wheel-scroll', (nodes) => {
+      return nodes.map((node) => window.getComputedStyle(node).transform)
+    })
+
+    for (const transformText of transformTexts) {
+      const translateY = getTranslate(transformText, 'y')
+      await expect(translateY).toBeLessThan(-72)
+    }
+  })
+})

package/better-scroll-dev/better-scroll-dev/tests/e2e/picker/linkage-column.e2e.ts

@@ -0,0 +1,87 @@
+import { Page } from 'puppeteer'
+import extendTouch from '../../util/extendTouch'
+
+jest.setTimeout(10000000)
+
+describe('Linkage column picker', () => {
+  let page = (global as any).page as Page
+  extendTouch(page)
+  beforeAll(async () => {
+    await page.goto('http://0.0.0.0:8932/#/picker/linkage-column')
+  })
+  beforeEach(async () => {
+    await page.reload({
+      waitUntil: 'domcontentloaded',
+    })
+  })
+
+  it('should get correct text when click "confirm" button', async () => {
+    await page.waitFor(300)
+
+    await page.click('.open')
+
+    await page.waitFor(1000)
+
+    const openBtn = await page.$('.open')
+
+    await page.click('.confirm')
+
+    // wait for transition ends
+    await page.waitFor(100)
+
+    const innerText = await page.$eval('.open', (node) => {
+      return node.textContent
+    })
+
+    await expect(innerText).toBe('北京市-0__北京市-0')
+  })
+
+  it('should linkage correctly when click TianJin province', async () => {
+    await page.waitFor(300)
+
+    await page.click('.open')
+
+    await page.waitFor(1000)
+
+    const [firstWheelScroll] = await page.$$('.wheel-scroll')
+
+    const [, TianJinProvince] = await firstWheelScroll.$$('.wheel-item')
+
+    await TianJinProvince.tap()
+
+    // when transition ends
+    await page.waitFor(500)
+
+    const cityBtnText = await page.$$eval('.wheel-scroll', (nodes) => {
+      return nodes[1].querySelectorAll('.wheel-item')[0].textContent
+    })
+
+    await expect(cityBtnText).toBe('天津市')
+  })
+
+  it('should linkage correctly when dispatch touch event in first column', async () => {
+    await page.waitFor(300)
+
+    await page.click('.open')
+
+    await page.waitFor(1000)
+
+    // first column
+    await page.dispatchScroll({
+      x: 100,
+      y: 630,
+      xDistance: 0,
+      yDistance: -70,
+      gestureSourceType: 'touch',
+    })
+
+    // when transition ends
+    await page.waitFor(1000)
+
+    const cityBtnText = await page.$$eval('.wheel-scroll', (nodes) => {
+      return nodes[1].querySelectorAll('.wheel-item')[0].textContent
+    })
+
+    await expect(cityBtnText).not.toBe('北京市')
+  })
+})