chore: Auto UI test based on cypress (#2668)

* chore: save

* chore: delete sth

cypress.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  e2e: {
+    baseUrl: 'http://localhost:10086/#/',
+    specPattern: 'cypress/e2e/**/*.js',
+  },
+  viewportWidth: 414,
+  viewportHeight: 896,
+})

cypress/component/Actionsheet.cy.jsx

@@ -0,0 +1,67 @@
+import React from 'react'
+import { mount } from 'cypress/react18'
+import { ActionSheet } from '../../src/packages/actionsheet/actionsheet'
+
+const menulist = [
+  {
+    name: '选项一',
+    description: '选项一的描述信息',
+    danger: true,
+  },
+  {
+    name: '选项二',
+    disabled: true,
+  },
+  {
+    name: '必填',
+    name1: '选项三',
+  },
+]
+
+it('props test options ', () => {
+  mount(
+    <ActionSheet
+      visible
+      title="弹层标题"
+      description="弹层描述信息"
+      cancelText="关闭弹层"
+      options={menulist}
+    />
+  )
+  cy.get('.nut-actionsheet-list .nut-actionsheet-item').should('have.length', 3)
+})
+
+it('props test cancelText ', async () => {
+  mount(
+    <ActionSheet
+      visible
+      title="弹层标题"
+      description="弹层描述信息"
+      cancelText="关闭弹层"
+      options={menulist}
+    />
+  )
+  cy.get('.nut-actionsheet-cancel').then(($el) => {
+    const el = cy.wrap($el)
+    el.should('have.text', '关闭弹层')
+  })
+})
+
+it('props test has value ', async () => {
+  mount(
+    <ActionSheet
+      visible
+      title="弹层标题"
+      description="弹层描述信息"
+      cancelText="关闭弹层"
+      options={menulist}
+    />
+  )
+  cy.get('.nut-actionsheet-list .nut-actionsheet-item')
+    .eq(0)
+    .then(($el) => {
+      const el = cy.wrap($el)
+      el.should('have.text', '选项一选项一的描述信息')
+      el.should('have.class', 'danger')
+    })
+})

cypress/component/Button.cy.jsx

@@ -0,0 +1,6 @@
+import React from 'react'
+import { Button } from '../../src/packages/button/button'
+
+it('playground', () => {
+  cy.mount(<Button type="primary">123</Button>)
+})

cypress/component/Cell.cy.jsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { Cell } from '../../src/packages/cell/cell.taro'
+import { Switch } from '../../src/packages/switch/switch.taro'
+
+it('prop title extra description test', () => {
+  cy.mount(
+    <Cell
+      data-testid="prop"
+      title="我是标题"
+      description="我是描述"
+      extra="描述文字"
+    />
+  )
+  cy.get('.nut-cell-title').should('contain.text', '我是标题')
+  cy.get('.nut-cell-description').should('contain.text', '我是描述')
+  cy.get('.nut-cell-extra').should('contain.text', '描述文字')
+})
+it('prop ', () => {
+  cy.mount(<Cell title="URL 跳转" extra="https://m.jd.com/" />)
+  cy.get('.nut-cell-extra').should('be.visible')
+})
+
+it('emit click event', () => {
+  const testClick = () => {}
+  cy.mount(<Cell data-testid="emit-click" onClick={() => testClick()} />)
+  cy.get('[data-testid="emit-click"]').click().trigger('testClick')
+})
+
+it('slot default test', () => {
+  cy.mount(<Cell title={<div>自定义内容</div>} extra="描述文字" />)
+  cy.root().should('contain.html', '<div>自定义内容</div>')
+})
+
+it('slot extra', () => {
+  cy.mount(<Cell title="Switch" extra={<Switch defaultChecked />} />)
+  cy.get('.nut-switch').should('be.visible')
+})

cypress/e2e/index.cy.js

@@ -0,0 +1,8 @@
+import './taro/base.cy'
+import './taro/layout.cy'
+import './taro/nav.cy'
+import './taro/dentry.cy'
+
+Cypress.on('uncaught:exception', (err, runnable) => {
+  return false
+})

cypress/e2e/taro/base.cy.js

@@ -0,0 +1,116 @@
+const getPath = (component) => `base/pages/${component}/index`
+
+describe('base components test', () => {
+  it('button successfully passes', () => {
+    cy.visit(getPath('button'))
+    cy.get('.applets-demo-header').contains('Button')
+    // Click Loading Test and loading icon shows
+    cy.contains('button', 'Click me').scrollIntoView().click()
+    cy.contains('button', 'Click me')
+      .parent()
+      .find('i.nut-icon-Loading')
+      .should('exist')
+    cy.wait(500)
+  })
+
+  it('cell successfully passes', () => {
+    cy.visit(getPath('cell'))
+    cy.get('.applets-demo-header').contains('Cell')
+    // Click Switch
+    cy.contains('自定义右侧区域').scrollIntoView()
+    cy.get('.nut-switch-button').click()
+    cy.get('.nut-switch-button')
+      .parent()
+      .should('have.class', 'nut-switch-close')
+    cy.get('.nut-switch-button').click()
+    cy.get('.nut-switch-button')
+      .parent()
+      .should('have.class', 'nut-switch-open')
+    // Jump URL
+    cy.contains('链接 | 分组用法').scrollIntoView()
+    cy.contains('/pages/index/index').click()
+    cy.wait(500)
+    cy.window().then((location) => {
+      expect(location.location.pathname).to.equal('/')
+    })
+    cy.wait(400)
+  })
+
+  it('ConfigProvider successfully passes', () => {
+    cy.visit(getPath('configprovider'))
+    cy.get('.applets-demo-header').contains('ConfigProvider')
+    // Expected Rate
+    cy.get('.nut-rate')
+      .first()
+      .find('.nut-rate-item')
+      .eq(-2)
+      .find('.nut-rate-item-icon')
+      .click()
+    cy.get('.nut-rate')
+      .first()
+      .find('.nut-rate-item .nut-rate-item-icon')
+      .filter('.nut-rate-item-icon-disabled')
+      .should('have.length', 1)
+    cy.get('.nut-rate')
+      .first()
+      .find('.nut-rate-item')
+      .first()
+      .find('.nut-rate-item-icon')
+      .click()
+    cy.get('.nut-rate')
+      .first()
+      .find('.nut-rate-item .nut-rate-item-icon')
+      .filter('.nut-rate-item-icon-disabled')
+      .should('have.length', 4)
+    cy.wait(400)
+  })
+
+  it('Icon successfully passes', () => {
+    cy.visit(getPath('icon'))
+    cy.get('.applets-demo-header').contains('Icon')
+    // V12 Icon Click Test
+    cy.contains('V12 Icon').scrollIntoView()
+    cy.get('i.nut-icon-thumbs-up').click()
+    cy.contains('<ThumbsUp />')
+    cy.get(
+      'i.nut-icon-heart-fill.nut-icon-am-breathe.nut-icon-am-infinite'
+    ).click()
+    cy.contains(
+      `<HeartFill className='nut-icon-am-breathe nut-icon-am-infinite' />`
+    )
+    cy.wait(400)
+  })
+  it('Image successfully passes', () => {
+    cy.visit(getPath('image'))
+    cy.get('.applets-demo-header').contains('Image')
+    cy.wait(500)
+    // Lazy Load Scroll
+    cy.contains('图片懒加载').scrollIntoView()
+    cy.get('.taro-scroll-view__scroll-y .taro-img__mode-scaletofill')
+      .filter('[src]')
+      .should('have.length', 3)
+    cy.get('.taro-scroll-view__scroll-y').scrollTo('bottom', { duration: 1000 })
+    cy.get('.taro-scroll-view__scroll-y .taro-img__mode-scaletofill')
+      .filter('[src]')
+      .should('have.length.greaterThan', 3)
+    cy.wait(400)
+  })
+  it('Overlay successfully passes', () => {
+    cy.visit(getPath('overlay'))
+    cy.get('.applets-demo-header').contains('Overlay')
+    // Display Overlay
+    cy.contains('嵌套内容').scrollIntoView()
+    cy.get('.nut-button-success').click()
+    cy.contains('这里是正文')
+    cy.contains('这里是正文')
+      .parent()
+      .parent()
+      .should('have.class', 'nut-overlay')
+      .click()
+    cy.contains('这里是正文').should('not.exist')
+    cy.get('nut-overlay').should('not.exist')
+  })
+})
+Cypress.on('uncaught:exception', (err, runnable) => {
+  return false
+})

cypress/e2e/taro/dentry.cy.js

@@ -0,0 +1,45 @@
+const componentTest = (comName, fn) => {
+  const dentryArr = [
+    'Address',
+    'Calendar',
+    'CalendarCard',
+    'Cascader',
+    'Checkbox',
+    'DatePicker',
+    'Form',
+    'Input',
+    'InputNumber',
+  ]
+  const getPath = (component) =>
+    `${dentryArr.includes(component) ? 'dentry' : 'dentry1'}/pages/${component.toLowerCase()}/index`
+
+  it(`${comName} successfully passes`, () => {
+    cy.visit(getPath(comName))
+    cy.get('.applets-demo-header').contains(comName)
+    cy.wait(400)
+    fn()
+  })
+}
+describe('layout components test', () => {
+  componentTest('Address', () => {})
+  componentTest('Calendar', () => {})
+  componentTest('CalendarCard', () => {})
+  componentTest('Cascader', () => {})
+  componentTest('Checkbox', () => {})
+  componentTest('DatePicker', () => {})
+  componentTest('Form', () => {})
+  componentTest('Input', () => {})
+  componentTest('InputNumber', () => {})
+  componentTest('Menu', () => {})
+  componentTest('NumberKeyboard', () => {})
+  componentTest('Picker', () => {})
+  componentTest('Radio', () => {})
+  componentTest('Range', () => {})
+  componentTest('Rate', () => {})
+  componentTest('SearchBar', () => {})
+  componentTest('ShortPassword', () => {})
+  componentTest('Signature', () => {})
+  componentTest('Switch', () => {})
+  componentTest('TextArea', () => {})
+  componentTest('Uploader', () => {})
+})

cypress/e2e/taro/layout.cy.js

@@ -0,0 +1,78 @@
+const getPath = (component) => `layout/pages/${component}/index`
+
+describe('layout components test', () => {
+  it('divider successfully passes', () => {
+    cy.visit(getPath('divider'))
+    cy.get('.applets-demo-header').contains('Divider')
+    // Click URL
+    cy.contains('垂直分割线').scrollIntoView()
+    cy.contains('链接').click()
+    cy.window().then((win) => {
+      const currentPath = win.location.pathname
+      expect(currentPath).to.equal('/')
+    })
+    cy.wait(400)
+  })
+
+  it('grid successfully passes', () => {
+    cy.visit(getPath('grid'))
+    cy.get('.applets-demo-header').contains('Grid')
+    // GridItem Click
+    cy.contains('点击子项事件').scrollIntoView()
+    cy.get('h2').then((element) => {
+      if (element.has('点击子项事件')) {
+        cy.wrap(element)
+          .next()
+          .then((nextElement) => {
+            // 在这里对下一个节点进行操作
+            nextElement.find('.nut-grid-item').eq(-2).click()
+            cy.contains('点击了文字，第2个')
+          })
+      }
+    })
+    cy.wait(400)
+  })
+
+  it('layout successfully passes', () => {
+    cy.visit(getPath('layout'))
+    cy.get('.applets-demo-header').contains('Layout')
+    // layout test
+    cy.contains('span:24').parent().children().should('have.length', 1)
+    cy.contains('span:12').parent().parent().children().should('have.length', 2)
+    cy.contains('span:8').parent().parent().children().should('have.length', 3)
+    cy.contains('span:6').parent().parent().children().should('have.length', 4)
+    cy.wait(400)
+  })
+
+  it('space successfully passes', () => {
+    cy.visit(getPath('space'))
+    cy.get('.applets-demo-header').contains('Space')
+    // Space Test
+    cy.contains('垂直')
+      .next()
+      .find('.nut-space')
+      .should('have.class', 'nut-space-vertical')
+    cy.wait(400)
+  })
+
+  it('sticky successfully passes', () => {
+    cy.visit(getPath('sticky'))
+    cy.get('.applets-demo-header').contains('Sticky')
+    // Scroll Sticky
+    cy.get('.demo').scrollTo('bottom')
+    cy.contains('距离顶部120px').parent().should('have.css', 'top', '120px')
+    cy.get('.demo').scrollTo('top')
+    cy.contains('距离底部0px').parent().should('have.css', 'bottom', '0px')
+    cy.wait(400)
+  })
+
+  it('safearea successfully passes', () => {
+    cy.visit(getPath('safearea'))
+    cy.get('.applets-demo-header').contains('SafeArea')
+    // SafeArea Class
+    cy.get('.demo').scrollTo('bottom')
+    cy.get('.nut-safe-area').should('exist')
+    cy.get('.nut-safe-area-position-bottom').should('exist')
+    cy.wait(400)
+  })
+})