@opentiny/vue-docs 2.2.20 → 2.2.21

package/demos/apis/select.js

@@ -81,6 +81,15 @@ export default {
           pcDemo: 'clearable',
           mfDemo: 'clearable'
         },
+        {
+          name: 'click-expend',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '点击可展开或收起显示不全的选项。仅用于多选',
+            'en-US': 'Click to expand or collapse options. Only applicable to multiple selections'
+          }
+        },
         {
           name: 'collapse-tags',
           type: 'boolean',
@@ -240,6 +249,18 @@ export default {
           pcDemo: 'remote-method',
           mfDemo: 'remote-method'
         },
+        {
+          name: 'max-visible-rows',
+          type: 'number',
+          defaultValue: '1',
+          desc: {
+            'zh-CN': '多行默认最大显示行数，超出后选项自动隐藏',
+            'en-US':
+              'Default maximum display lines for multiple lines, with automatic hiding option for exceeding lines'
+          },
+          mode: ['pc'],
+          pcDemo: 'collapse-tags'
+        },
         {
           name: 'modelValue / v-model',
           type: 'string | number | Array<string|number>',
@@ -571,6 +592,19 @@ export default {
           mode: ['pc', 'mobile-first'],
           pcDemo: 'binding-obj',
           mfDemo: 'binding-obj'
+        },
+        {
+          name: 'show-proportion',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否展示多选框选中条数和总条数的占比',
+            'en-US':
+              'Display the proportion of the number of selected items and the total number of items in the multiple-choice box'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'collapse-tags',
+          mfDemo: 'collapse-tags'
         }
       ],
       events: [

package/demos/apis/skeleton.js

@@ -6,7 +6,7 @@ export default {
       type: 'component',
       props: [
         {
-          name: 'active',
+          name: 'animated',
           type: 'boolean',
           defaultValue: 'true',
           desc: {
@@ -46,9 +46,8 @@ export default {
           type: 'number',
           defaultValue: '3',
           desc: {
-            'zh-CN': '默认排版，可配置段落显示行数',
-            'en-US':
-              'Customized interface. A Promise object is returned. This parameter is mandatory when the framework service is not used.'
+            'zh-CN': '默认样式，可配置段落显示行数',
+            'en-US': 'Default style. The number of lines displayed in a paragraph can be configured'
           },
           mode: ['pc'],
           pcDemo: 'custom-rows'
@@ -58,9 +57,10 @@ export default {
           type: 'number[] | string[]',
           defaultValue: '[]',
           desc: {
-            'zh-CN': '自定义段落每一行的宽度',
+            'zh-CN':
+              '自定义段落每一行的宽度，数组中的每一项可以为 number 或 string ，当为 number 时，组件会自动增加 px 单位',
             'en-US':
-              'Customized interface. A Promise object is returned. This parameter is mandatory when the framework service is not used.'
+              'Width of each line in a custom paragraph. Each item in the array can be a number or a string. If the value is a number, the component automatically increases the value by px'
           },
           mode: ['pc'],
           pcDemo: 'custom-paragraph-width'
@@ -74,7 +74,7 @@ export default {
           defaultValue: '',
           desc: {
             'zh-CN': '加载完成后显示的内容',
-            'en-US': 'Option default slot'
+            'en-US': 'Content displayed after the loading is complete'
           },
           mode: ['pc'],
           pcDemo: 'custom-layout'
@@ -84,7 +84,7 @@ export default {
           defaultValue: '',
           desc: {
             'zh-CN': '自定义骨架屏结构',
-            'en-US': 'Option default slot'
+            'en-US': 'Custom Skeleton Screen Structure'
           },
           mode: ['pc'],
           pcDemo: 'custom-layout'
@@ -99,7 +99,7 @@ export default {
           name: 'size',
           typeAnchorName: 'ISize',
           type: 'ISize',
-          defaultValue: 'medium',
+          defaultValue: "'medium'",
           desc: {
             'zh-CN': '针对 image 和 circle 形态，内置三种大小',
             'en-US':
@@ -112,7 +112,7 @@ export default {
           name: 'variant',
           typeAnchorName: 'IVariant',
           type: 'IVariant',
-          defaultValue: 'square',
+          defaultValue: "'square'",
           desc: {
             'zh-CN': '骨架屏形态',
             'en-US':

package/demos/apis/statistic.js

@@ -0,0 +1,144 @@
+export default {
+  mode: ['pc'],
+  apis: [
+    {
+      name: 'statistic',
+      type: 'component',
+      props: [
+        {
+          name: 'value',
+          type: 'number',
+          defaultValue: '0',
+          desc: {
+            'zh-CN': '数字显示内容',
+            'en-US': 'Digital display content'
+          },
+          mode: ['pc'],
+          pcDemo: 'basic-usage',
+          mfDemo: ''
+        },
+        {
+          name: 'precision',
+          type: 'number',
+          defaultValue: '0',
+          desc: {
+            'zh-CN': '精度值',
+            'en-US': 'Take precision value'
+          },
+          mode: ['pc'],
+          pcDemo: 'basic-usage',
+          mfDemo: ''
+        },
+        {
+          name: 'title',
+          type: 'string | array',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '设置数字内容标题',
+            'en-US': 'Set digital content titles'
+          },
+          mode: ['pc'],
+          pcDemo: 'basic-usage',
+          mfDemo: ''
+        },
+        {
+          name: 'group-separator',
+          type: 'string',
+          defaultValue: ',',
+          desc: {
+            'zh-CN': '设置千分位标志符',
+            'en-US': 'Set Millennial Flag'
+          },
+          mode: ['pc'],
+          pcDemo: 'basic-usage',
+          mfDemo: ''
+        },
+        {
+          name: 'prefix',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '设置数字内容前缀',
+            'en-US': 'Set numerical content prefix'
+          },
+          mode: ['pc'],
+          pcDemo: 'basic-usage',
+          mfDemo: ''
+        },
+        {
+          name: 'suffix',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '设置数字内容后缀',
+            'en-US': 'Set numeric content suffix'
+          },
+          mode: ['pc'],
+          pcDemo: 'basic-usage',
+          mfDemo: ''
+        },
+        {
+          name: 'formatter',
+          type: '(value) => {}',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '设置自定义数字格式化',
+            'en-US': 'Set custom number formatting'
+          },
+          mode: ['pc'],
+          pcDemo: 'basic-usage',
+          mfDemo: ''
+        },
+        {
+          name: 'value-style',
+          type: 'string | object | array',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '设置数字样式',
+            'en-US': 'Set Number Style'
+          },
+          mode: ['pc'],
+          pcDemo: 'basic-usage',
+          mfDemo: ''
+        }
+      ],
+      events: [],
+      methods: [],
+      slots: [
+        {
+          name: 'prefix',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '数字内容前置插槽',
+            'en-US': 'Digital content front slot'
+          },
+          mode: ['pc'],
+          mfDemo: ''
+        },
+        {
+          name: 'suffix',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '数字内容后置插槽',
+            'en-US': 'Digital content rear slot'
+          },
+          mode: ['pc'],
+          mfDemo: ''
+        },
+        {
+          name: 'title',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '数字内容标题插槽',
+            'en-US': 'Digital content title slot'
+          },
+          mode: ['pc'],
+          mfDemo: ''
+        }
+      ]
+    }
+  ]
+}

package/demos/apis/tag.js

@@ -30,16 +30,19 @@ export default {
         },
         {
           name: 'color',
-          type: 'string',
+          type: 'IColor | string[]',
+          typeAnchorName: 'IColor',
           defaultValue: '',
           desc: {
-            'zh-CN': '背景色：rgb,rgba,hex 三种格式',
-            'en-US': 'Background color: The value can be in rgb, rgba, or hex format'
+            'zh-CN':
+              '控制标签文本色和背景色，可使用 IColor 类型中的预设值，也可自定义值，若自定义值为字符串则只能设置标签的背景色；若为数组则第一个值设置背景色，第二个设置文本色；【注：3.15.0新增支持数组类型】',
+            'en-US':
+              'Control the text color and background color of the label. You can use the preset value in the IColor type or customize the value. If the customized value is a character string, you can only set the background color of the label. If it is an array, the first value sets the background color and the second sets the text color. [Note: The array type is supported in 3.15.0]'
           },
           mode: ['pc', 'mobile', 'mobile-first'],
           pcDemo: 'color3',
           mobileDemo: 'different-color',
-          mfDemo: ''
+          mfDemo: 'color3'
         },
         {
           name: 'custom-class',
@@ -164,8 +167,8 @@ export default {
             'zh-CN': '彩色标签，该属性的可选值为 pink、purple、cyan',
             'en-US': 'Color label. The value can be pink, purple, or cyan.'
           },
-          mode: ['mobile-first'],
-          mfDemo: 'colorful-tag'
+          mode: ['mobile'],
+          mfDemo: 'different-color'
         },
         {
           name: 'type',
@@ -238,6 +241,13 @@ export default {
     }
   ],
   types: [
+    {
+      name: 'IColor',
+      type: 'type',
+      code: `
+type IColor = 'red' | 'orange' | 'green' | 'blue' | 'purple' | 'brown' | 'grey' | string // 除了预设值，也可以是其他任意自定义颜色值
+`
+    },
     {
       name: 'IEffect',
       type: 'type',
@@ -256,7 +266,7 @@ type ISize = 'medium' | 'small' | 'mini' | ''
       name: 'IType',
       type: 'type',
       code: `
-type IType = 'success' | 'info' | 'mini' | 'warning' | 'danger'
+type IType = 'success' | 'info' | 'warning' | 'danger'
 `
     }
   ]

package/demos/apis/time-line.js

@@ -24,7 +24,7 @@ export default {
             'zh-CN': '显示组件二级标题内容，默认值为 autoColor',
             'en-US': 'Displays the level-2 title of the component. The default value is autoColor.'
           },
-          mode: ['mobile-first'],
+          mode: ['pc', 'mobile-first'],
           mfDemo: ''
         },
         {
@@ -351,6 +351,7 @@ export default {
       code: `
 interface ITimelineItem {
   name: string // 节点名称
+  activeColor: 'success' | 'warning' | 'error' | Component
   time?: string // 节点时间
   error?: boolean // 是否异常状态
   disabled?: boolean // 是否禁用

package/demos/mobile/app/alert/basic-usage.spec.ts

@@ -0,0 +1,36 @@
+import { test, expect } from '@playwright/test'
+
+test('基本用法', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('alert#base')
+
+  const alerts = page.locator('.demo-alert-base .tiny-mobile-alert')
+
+  // 背景色与图标色验证
+  await expect(alerts.first()).toHaveCSS('background-color', 'rgb(222, 236, 255)')
+  await expect(alerts.first().locator('.tiny-mobile-alert__icon').first()).toHaveCSS('fill', 'rgb(20, 118, 255)')
+  await expect(alerts.nth(1)).toHaveCSS('background-color', 'rgb(252, 227, 225)')
+  await expect(alerts.nth(1).locator('.tiny-mobile-alert__icon').first()).toHaveCSS('fill', 'rgb(242, 48, 48)')
+  await expect(alerts.nth(2)).toHaveCSS('background-color', 'rgb(230, 242, 213)')
+  await expect(alerts.nth(2).locator('.tiny-mobile-alert__icon').first()).toHaveCSS('fill', 'rgb(92, 179, 0)')
+  await expect(alerts.nth(3)).toHaveCSS('background-color', 'rgb(255, 235, 209)')
+  await expect(alerts.nth(3).locator('.tiny-mobile-alert__icon').first()).toHaveCSS('fill', 'rgb(255, 136, 0)')
+
+  // 警告可见
+  const alertSuccess = page.locator('.tiny-mobile-alert--success')
+  await expect(alertSuccess).toBeVisible()
+
+  // 状态图标存在
+  const icon = alertSuccess.locator('.tiny-mobile-alert__icon').first()
+  await expect(icon).toBeVisible()
+
+  // 提示内容存在
+  const content = alertSuccess.locator('.tiny-mobile-alert__content')
+  await expect(content).toBeVisible()
+
+  // 点击关闭按钮，警告消失
+  const close = alertSuccess.locator('.tiny-mobile-alert__close')
+  await expect(close).toBeVisible()
+  await close.click()
+  await expect(alertSuccess).toBeHidden()
+})

package/demos/mobile/app/alert/center.spec.ts

@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test'
+
+test('指定挂载节点', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('alert#target')
+
+  const target = page.locator('.alert-wrap')
+  const alert = target.locator('> .tiny-mobile-alert')
+
+  await expect(alert).toBeVisible()
+})

package/demos/mobile/app/alert/custom-close.spec.ts

@@ -0,0 +1,45 @@
+import { test, expect } from '@playwright/test'
+
+test.describe('自定义关闭', async (page) => {
+  test('隐藏关闭图标', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('alert#custom-close')
+
+    const alerts = page.locator('.tiny-mobile-alert')
+    const closeIcon = alerts.first().locator('.tiny-mobile-alert__close')
+
+    await expect(closeIcon).not.toBeVisible()
+  })
+
+  test('自动关闭', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('alert#custom-close')
+
+    const alerts = page.locator('.tiny-mobile-alert')
+    await page.locator('#custom-close span').first().click()
+    await expect(alerts.filter({ hasText: '2秒后将自动关闭' })).toBeVisible()
+    await page.waitForTimeout(2000)
+    await expect(alerts.filter({ hasText: '2秒后将自动关闭' })).not.toBeVisible()
+  })
+
+  test('自定义关闭按钮文本', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('alert#custom-close')
+
+    const alert = page.locator('.tiny-mobile-alert').nth(2)
+    const closeIcon = alert.locator('.tiny-mobile-alert__close')
+
+    await expect(closeIcon).not.toBeVisible()
+    await expect(alert.locator('span').filter({ hasText: '自定义关闭' })).toBeVisible()
+  })
+
+  test('关闭close事件', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('alert#custom-close')
+
+    const alert = page.locator('.tiny-mobile-alert').nth(3)
+    const toast = page.locator('.tiny-mobile-toast').filter({ hasText: 'close事件!' })
+    await alert.locator('.tiny-mobile-alert__close').click()
+    await expect(toast).toBeVisible()
+  })
+})

package/demos/mobile/app/alert/custom-close.vue

@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import { Alert, Switch } from '@opentiny/vue'
+import { Alert, Switch, Toast } from '@opentiny/vue'
 
 export default {
   components: {
@@ -29,12 +29,15 @@ export default {
   data() {
     return {
       autoHide: false,
-      closeText: '自定义关闭',
+      closeText: '自定义关闭'
     }
   },
   methods: {
     close() {
-      console.log('已关闭！')
+      Toast.service({
+        text: 'close事件!',
+        time: 100000
+      })
     }
   }
 }

package/demos/mobile/app/alert/icon.spec.ts

@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test'
+
+test('自定义图标', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull)
+  await page.goto('alert#icon')
+
+  const alert = page.locator('.tiny-mobile-alert')
+
+  await expect(alert.locator('.tiny-mobile-alert__icon').first()).toBeVisible()
+  await expect(alert.locator('.tiny-mobile-alert__content')).toContainText('自定义图标')
+})

package/demos/mobile/app/alert/size.spec.ts

@@ -0,0 +1,17 @@
+import { test, expect } from '@playwright/test'
+
+test('不同尺寸', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('alert#size')
+
+  const alerts = page.locator('#size .tiny-mobile-alert')
+  const normalAlert = alerts.first()
+  const { height: normalAlertHeight } = await normalAlert.boundingBox()
+  const largeAlert = alerts.nth(1)
+
+  await expect(normalAlert).toHaveClass(/tiny-mobile-alert--normal/)
+  await expect(normalAlert.locator('.tiny-mobile-alert__content')).toHaveCSS('font-size', '12px')
+  await expect(Math.round(normalAlertHeight)).toBe(36)
+  await expect(largeAlert).toHaveClass(/tiny-mobile-alert--large/)
+  await expect(largeAlert.locator('.tiny-mobile-alert__content')).toHaveCSS('font-size', '16px')
+})

package/demos/mobile/app/alert/size.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="alert-wrap">
-    <tiny-alert>默认大小</tiny-alert>
-    <tiny-alert size="normal">size 为 normal</tiny-alert>
+    <tiny-alert size="normal">size 为 normal (默认)</tiny-alert>
     <tiny-alert size="large">size 为 large</tiny-alert>
   </div>
 </template>

package/demos/mobile/app/alert/slot-default.spec.ts

@@ -0,0 +1,12 @@
+import { test, expect } from '@playwright/test'
+
+test('自定义提示内容', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('alert#slot-default')
+
+  const alert = page.locator('.tiny-mobile-alert')
+
+  await expect(alert).toBeVisible()
+  await expect(page.getByText('配置详细信息请点击')).toBeVisible()
+  await expect(page.getByRole('link', { name: '默认配置说明' })).toBeVisible()
+})

package/demos/mobile/app/alert/target.spec.ts

@@ -0,0 +1,8 @@
+import { test, expect } from '@playwright/test'
+
+test('文字居中', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('alert#target')
+
+  const alert = page.locator('#target .tiny-mobile-alert')
+})

package/demos/mobile/app/alert/webdoc/alert.js

@@ -79,12 +79,12 @@ export default {
     {
       demoId: 'slot-default',
       name: {
-        'zh-CN': '自定义提示内容',
-        'en-US': 'slot-default'
+        'zh-CN': '内容插槽',
+        'en-US': 'Content slot'
       },
       desc: {
-        'zh-CN': '<p>自定义提示内容</p>',
-        'en-US': '<p>button click</p>'
+        'zh-CN': '<p>通过默认插槽自定义提示内容。</p>',
+        'en-US': '<p>Customize prompt messages through default slot.</p>'
       },
       codeFiles: ['slot-default.vue']
     }

package/demos/mobile/app/input/basic-usage.spec.ts

@@ -0,0 +1,25 @@
+import { test, expect } from '@playwright/test'
+
+test('输入框基本用法', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('input#base')
+
+  const input = page.locator('.demo-input .tiny-mobile-input')
+  const textarea = page.locator('.demo-input .tiny-mobile-textarea')
+
+  await expect(input).toBeVisible()
+  await expect(textarea).toBeVisible()
+
+  await input.click()
+  await expect(input).toHaveClass(/is-focus/)
+  await textarea.click()
+  await expect(textarea).toHaveClass(/is-focus/)
+
+  await expect(input).toHaveAttribute('placeholder', '请输入内容')
+  await expect(textarea).toHaveAttribute('placeholder', '用作文本框')
+
+  await input.locator('input').fill('123')
+  await expect(input.locator('input')).toHaveValue('123')
+  await textarea.locator('textarea').fill('abc')
+  await expect(textarea.locator('textarea')).toHaveValue('abc')
+})

package/demos/mobile/app/input/clearable.spec.ts

@@ -0,0 +1,13 @@
+import { test, expect } from '@playwright/test'
+
+test('可一键清空', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('input#clearable')
+
+  const input = page.locator('.demo-input .tiny-mobile-input')
+
+  await input.click()
+  await expect(input.locator('input')).toHaveValue('可一键清空')
+  await input.locator('.tiny-mobile-input__clear').click()
+  await expect(input.locator('input')).toHaveValue('')
+})

package/demos/mobile/app/input/counter.spec.ts

@@ -0,0 +1,19 @@
+import { test, expect } from '@playwright/test'
+
+test('输入长度限制与计数', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('input#counter')
+
+  const input = page.locator('.demo-input .tiny-mobile-input')
+  const textarea = page.locator('.demo-input .tiny-mobile-textarea')
+
+  await input.locator('input').fill('12345')
+  await expect(input.locator('.tiny-mobile-input__count-inner')).toContainText('5')
+  await input.locator('input').fill('1234567890123')
+  await expect(input.locator('input')).toHaveValue('1234567890')
+
+  await textarea.locator('textarea').fill('1234567890')
+  await expect(textarea.locator('.tiny-mobile-textarea__count')).toContainText('10/20')
+  await textarea.locator('textarea').fill('12345678901234567890123')
+  await expect(textarea.locator('textarea')).toHaveValue('12345678901234567890')
+})

package/demos/mobile/app/input/counter.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="demo-input">
-    <tiny-input v-model="input1" counter :maxlength="20"></tiny-input>
+    <tiny-input v-model="input1" counter :maxlength="10"></tiny-input>
 
     <tiny-input v-model="input2" type="textarea" show-word-limit :maxlength="20"></tiny-input>
   </div>

package/demos/mobile/app/input/disabled.spec.ts

@@ -0,0 +1,17 @@
+import { test, expect } from '@playwright/test'
+
+test('输入框禁用', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('input#disabled')
+
+  const input = page.locator('.demo-input .tiny-mobile-input')
+  const textarea = page.locator('.demo-input .tiny-mobile-textarea')
+
+  await expect(input).toHaveClass(/is-disabled/)
+  await input.click()
+  await expect(input).not.toHaveClass(/is-focus/)
+
+  await expect(textarea).toHaveClass(/is-disabled/)
+  await textarea.click()
+  await expect(textarea).not.toHaveClass(/is-focus/)
+})

package/demos/mobile/app/input/events.spec.ts

@@ -0,0 +1,24 @@
+import { test, expect } from '@playwright/test'
+
+test('输入框事件', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  page.goto('input#events')
+
+  const inputs = page.locator('.demo-input-events .tiny-mobile-input input')
+
+  await inputs.first().fill('123')
+  await expect(page.locator('.tiny-mobile-modal').filter({ hasText: 'input' })).toBeVisible()
+
+  await inputs.nth(1).fill('change')
+  await inputs.first().click()
+  await expect(page.locator('.tiny-mobile-modal').filter({ hasText: 'change' })).toBeVisible()
+
+  await inputs.nth(2).click()
+  await expect(page.locator('.tiny-mobile-modal').filter({ hasText: 'focus' })).toBeVisible()
+  await inputs.nth(3).click()
+  await expect(page.locator('.tiny-mobile-modal').filter({ hasText: 'blur' })).toBeVisible()
+
+  await page.locator('.demo-input-events .tiny-mobile-input').nth(3).locator('.tiny-mobile-input__clear').click()
+  await expect(page.locator('.tiny-mobile-modal').filter({ hasText: 'clear' })).toBeVisible()
+  await expect(inputs.nth(3)).toHaveValue('')
+})