fix(tabs): [tabs] modify tabs demo bug (#2274)

* fix: modify tabs bug * fix: modify e2e-test
opentiny · Oct 16, 2024 · d22c32d · d22c32d
1 parent 95854ea
commit d22c32d
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 7 deletions.
diff --git a/examples/sites/demos/pc/app/tabs/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/tabs/basic-usage-composition-api.vue
@@ -13,7 +13,7 @@
 import { ref } from 'vue'
 import { Tabs as TinyTabs, TabItem as TinyTabItem } from '@opentiny/vue'
 
-const activeName = ref('second')
+const activeName = ref('first')
 </script>
 
 <style scoped>

diff --git a/examples/sites/demos/pc/app/tabs/basic-usage.spec.ts b/examples/sites/demos/pc/app/tabs/basic-usage.spec.ts
@@ -13,10 +13,15 @@ test('基本用法', async ({ page }) => {
   const activeBar = tabs.locator('.tiny-tabs__active-bar')
 
   await expect(tabItems).toHaveCount(4)
-  await expect(tabItems).toHaveClass([/is-top/, /is-top is-active/, /is-top/, /is-top/])
-  await expect(content).toHaveText(/数据组件/)
+  await expect(tabItems).toHaveClass([
+    /tiny-tabs__item is-top is-active/,
+    /tiny-tabs__item is-top is-disabled/,
+    /tiny-tabs__item is-top/,
+    /tiny-tabs__item is-top/
+  ])
+  await expect(content).toHaveText(/表单组件/)
   await expect(activeBar).toHaveCSS('width', '64px')
-  await expect(activeBar).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 96, 0)')
+  await expect(activeBar).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, 0)')
   await item1.click()
   await expect(item1).toHaveClass(/is-active/)
   await expect(activeBar).toHaveCSS('width', '64px')

diff --git a/examples/sites/demos/pc/app/tabs/basic-usage.vue b/examples/sites/demos/pc/app/tabs/basic-usage.vue
@@ -19,7 +19,7 @@ export default {
   },
   data() {
     return {
-      activeName: 'second'
+      activeName: 'first'
     }
   }
 }

diff --git a/examples/sites/demos/pc/app/tabs/tabs-separator-composition-api.vue b/examples/sites/demos/pc/app/tabs/tabs-separator-composition-api.vue
@@ -24,7 +24,7 @@
       <tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集。 </tiny-tab-item>
     </tiny-tabs>
     <br /><br /><br /><br />
-    <tiny-tabs separator :editable="false" :with-add="true" @add="handleadd" style="width: 500px" show-more-tabs>
+    <tiny-tabs separator :editable="false" :with-add="true" @add="handleadd" style="width: 500px">
       <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name">
         {{ item.content }}
       </tiny-tab-item>

diff --git a/examples/sites/demos/pc/app/tabs/tabs-separator.vue b/examples/sites/demos/pc/app/tabs/tabs-separator.vue
@@ -24,7 +24,7 @@
       <tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集。 </tiny-tab-item>
     </tiny-tabs>
     <br /><br /><br /><br />
-    <tiny-tabs separator :editable="false" :with-add="true" @add="handleadd" style="width: 500px" show-more-tabs>
+    <tiny-tabs separator :editable="false" :with-add="true" @add="handleadd" style="width: 500px">
       <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name">
         {{ item.content }}
       </tiny-tab-item>