add unit test (#379)

* test(alert): add alert unit test (#369)

* test(alert): add alert unit test

* test(alert): add close event unit test

* docs: add Zz-ZzzZ as a contributor for test (#371)

* docs: update README.md [skip ci]

* docs: update .all-contributorsrc [skip ci]

---------

Co-authored-by: allcontributors[bot] <46447321+allcontributors[bot]@users.noreply.github.com>

* fix(carousel): adjust arrow circle width to 28px (#376)

* docs: add lyx-jay as a contributor for code (#377)

* docs: update README.md [skip ci]

* docs: update .all-contributorsrc [skip ci]

---------

Co-authored-by: allcontributors[bot] <46447321+allcontributors[bot]@users.noreply.github.com>

---------

Co-authored-by: Zz-ZzzZ <48228016+Zz-ZzzZ@users.noreply.github.com>
Co-authored-by: allcontributors[bot] <46447321+allcontributors[bot]@users.noreply.github.com>
Co-authored-by: Lyx <lyxjay1005@163.com>

.all-contributorsrc

@@ -293,6 +293,24 @@
       "contributions": [
         "test"
       ]
+    },
+    {
+      "login": "Zz-ZzzZ",
+      "name": "Zz-ZzzZ",
+      "avatar_url": "https://avatars.githubusercontent.com/u/48228016?v=4",
+      "profile": "https://zz-zzzz.github.io/",
+      "contributions": [
+        "test"
+      ]
+    },
+    {
+      "login": "lyx-jay",
+      "name": "Lyx",
+      "avatar_url": "https://avatars.githubusercontent.com/u/39766860?v=4",
+      "profile": "https://github.com/lyx-jay",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "contributorsPerLine": 8,

README.md

@@ -124,6 +124,10 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
       <td align="center" valign="top" width="12.5%"><a href="https://github.com/Caesar-ch"><img src="https://avatars.githubusercontent.com/u/74941512?v=4?s=100" width="100px;" alt="Caesar-ch"/><br /><sub><b>Caesar-ch</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=Caesar-ch" title="Code">💻</a></td>
       <td align="center" valign="top" width="12.5%"><a href="https://github.com/chenqifeng66"><img src="https://avatars.githubusercontent.com/u/97503755?v=4?s=100" width="100px;" alt="chenqifeng66"/><br /><sub><b>chenqifeng66</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=chenqifeng66" title="Tests">⚠️</a></td>
     </tr>
+    <tr>
+      <td align="center" valign="top" width="12.5%"><a href="https://zz-zzzz.github.io/"><img src="https://avatars.githubusercontent.com/u/48228016?v=4?s=100" width="100px;" alt="Zz-ZzzZ"/><br /><sub><b>Zz-ZzzZ</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=Zz-ZzzZ" title="Tests">⚠️</a></td>
+      <td align="center" valign="top" width="12.5%"><a href="https://github.com/lyx-jay"><img src="https://avatars.githubusercontent.com/u/39766860?v=4?s=100" width="100px;" alt="Lyx"/><br /><sub><b>Lyx</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=lyx-jay" title="Code">💻</a></td>
+    </tr>
   </tbody>
 </table>
 

packages/theme/src/base/basic-var.less

@@ -482,7 +482,6 @@
   --ti-common-size-width-large: var(--ti-common-size-33x); // NewCssVar
   --ti-common-size-width-medium: var(--ti-common-size-30x); // NewCssVar
   --ti-common-size-width-normal: var(--ti-common-size-20x); // NewCssVar
-  --ti-common-size-width-minor: 30px; // NewCssVar 待删除
 
   --ti-common-size-height-large: var(--ti-common-size-12x); // NewCssVar
   --ti-common-size-height-medium: var(--ti-common-size-10x); // NewCssVar

packages/theme/src/carousel/vars.less

@@ -14,7 +14,7 @@
   // 箭头按钮背景高度
   --ti-carousel-arrow-height: var(--ti-common-size-height-normal);
   // 箭头按钮背景宽度
-  --ti-carousel-arrow-width: var(--ti-common-size-width-minor);
+  --ti-carousel-arrow-width: var(--ti-common-size-7x);
   // 左右箭头的字号
   --ti-carousel-arrow-font-size: var(--ti-common-font-size-base);
   // 左右箭头按钮悬浮背景色
@@ -67,4 +67,4 @@
   --ti-carousel-labels-button-font-size: var(--ti-common-font-size-base);
   // 幻灯片悬浮时的透明度(hide)
   --ti-carousel-hover-opacity: 0.6;
-}
+}

packages/vue/src/alert/__tests__/alert.test.tsx

@@ -1,5 +1,5 @@
 import { mountPcMode } from '@opentiny-internal/vue-test-utils'
-import { describe, expect, test } from 'vitest'
+import { describe, expect, test, vi } from 'vitest'
 import Alert from '@opentiny/vue-alert'
 import { iconBoat } from '@opentiny/vue-icon'
 
@@ -22,15 +22,35 @@ describe('PC Mode', () => {
     expect(wrapper.find('.tiny-alert__icon').exists()).toBe(true)
   })
 
-  test.todo('closable ,默认为true,设置后,警告不可关闭')
+  test('closable', () => {
+    const wrapper = mount(() => <Alert closable={false}/>)
+    expect(wrapper.find('.tiny-alert__close').exists()).toBeFalsy()
+  })
 
-  test.todo('title , 设置警告的标题,在size为large时有效,默认根据 type 自动设置')
+  test('title', () => {
+    const title = 'mock title when size is large'
+    const wrapper = mount(() => <Alert size='large' title={title}/>)
+    expect(wrapper.find('.tiny-alert__title').text()).toEqual(title)
+  })
 
-  test.todo('center ,默认为false ,设置后文字居中')
+  test('center', () => {
+    const wrapper = mount(() => <Alert center={true}/>)
+    expect(wrapper.find('.is-center').exists()).toBeTruthy()
+  })
 
-  test.todo('close-text , 关闭按钮自定义文本,设置后关闭图标被文本替换')
+  test('close-text', () => {
+    const closeText = 'close'
+    const wrapper = mount(() => <Alert closeText={closeText}/>)
+    expect(wrapper.find('.tiny-alert__close').exists()).toBeFalsy()
+    expect(wrapper.find('.is-custom').exists()).toBeTruthy()
+    expect(wrapper.find('.is-custom').text()).toEqual(closeText)
+  })
 
-  test.todo('show-icon , 默认值为true,是否显示图标')
+  test('show-icon', () => {
+    const wrapper = mount(() => <Alert showIcon={false}/>)
+    // close icon and alert icon use the same class
+    expect(wrapper.findAll('.tiny-alert__icon').length).toEqual(1)
+  })
 
   // slots
   test('title slot', async () => {
@@ -48,7 +68,28 @@ describe('PC Mode', () => {
     expect(wrapper.find('.tiny-alert__title').text()).toEqual(text)
   })
 
-  test.todo('default slot,设置警告的提示内容')
+  test('default slot', () => {
+    const text = 'default slot'
+    const wrapper = mount(() => (
+      <Alert size='large' v-slots={{ default: () => text }}/>
+    ))
+    expect(wrapper.find('.tiny-alert__opration').text()).toEqual(text)
+  })
 
-  test.todo('description slot,设置自定义提示内容,size为large时生效')
+  test('description slot', () => {
+    const text = 'description slot'
+    const wrapper = mount(() => (
+      <Alert size='large' v-slots={{ description: () => text }}/>
+    ))
+    expect(wrapper.find('.tiny-alert__description').text()).toEqual(text)
+  })
+
+  test('close event', async () => {
+    const handleClose = vi.fn()
+    const wrapper = mount(() => (
+      <Alert size='large' onClose={handleClose}/>
+    ))
+    await wrapper.find('.tiny-alert__close').trigger('click')
+    expect(handleClose).toHaveBeenCalled()
+  })
 })