From b9aa89c11380d3dd060ba2492af61f26cac30fd2 Mon Sep 17 00:00:00 2001
From: Eiinu <eiinu@qq.com>
Date: Fri, 10 May 2024 16:44:13 +0800
Subject: [PATCH] test(searchbar): update (#3070)

---
 ...r.spec.ts.snap => searchbar.spec.tsx.snap} |   2 +-
 .../searchbar/__tests__/searchbar.spec.ts     | 139 ------------------
 .../searchbar/__tests__/searchbar.spec.tsx    | 116 +++++++++++++++
 src/packages/__VUE/searchbar/index.vue        |   1 -
 4 files changed, 117 insertions(+), 141 deletions(-)
 rename src/packages/__VUE/searchbar/__tests__/__snapshots__/{searchbar.spec.ts.snap => searchbar.spec.tsx.snap} (90%)
 delete mode 100644 src/packages/__VUE/searchbar/__tests__/searchbar.spec.ts
 create mode 100644 src/packages/__VUE/searchbar/__tests__/searchbar.spec.tsx

diff --git a/src/packages/__VUE/searchbar/__tests__/__snapshots__/searchbar.spec.ts.snap b/src/packages/__VUE/searchbar/__tests__/__snapshots__/searchbar.spec.tsx.snap
similarity index 90%
rename from src/packages/__VUE/searchbar/__tests__/__snapshots__/searchbar.spec.ts.snap
rename to src/packages/__VUE/searchbar/__tests__/__snapshots__/searchbar.spec.tsx.snap
index a4a2622a25..d9617bde8c 100644
--- a/src/packages/__VUE/searchbar/__tests__/__snapshots__/searchbar.spec.ts.snap
+++ b/src/packages/__VUE/searchbar/__tests__/__snapshots__/searchbar.spec.tsx.snap
@@ -10,7 +10,7 @@ exports[`Searchbar: basic usage 1`] = `
       <form class="nut-searchbar__input-form" action="#"><input class="nut-searchbar__input-bar nut-searchbar__input-bar_clear" type="text" maxlength="9999" placeholder="请输入" style="text-align: left;"></form>
     </view>
     <view class="nut-searchbar__input-inner-icon">
-      <view class="nut-searchbar__search-icon nut-searchbar__input-clear" style="display: none;"><svg class="nut-icon nut-icon-circle-close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" role="presentation">
+      <view class="nut-searchbar__search-icon nut-searchbar__input-clear"><svg class="nut-icon nut-icon-circle-close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" role="presentation">
           <path d="M511.492 73.063a438.425 438.425 0 0 1 310.545 748.953 439.16 439.16 0 1 1-621.09-621.073A435.695 435.695 0 0 1 511.492 73.046m0-73.063C267.49.018 57.468 172.408 9.87 411.717-37.713 651.042 90.39 890.658 315.823 984.03c225.45 93.355 485.444 14.472 621.005-188.416 135.543-202.906 108.885-473.293-63.659-645.82A509.645 509.645 0 0 0 511.492.002zm-175.7 635.495 299.673-299.674c12.049-12.049 24.115-12.049 36.164 0l15.496 15.497c12.05 12.066 12.05 24.115 0 36.18L387.47 687.122c-12.066 12.05-24.115 12.05-36.181 0l-15.497-15.496c-12.049-12.066-12.049-24.115 0-36.182zm0-284.177 15.496-15.497c12.066-12.049 24.115-12.049 36.18 0l299.64 299.674c12.05 12.049 12.05 24.098 0 36.164l-15.496 15.496c-12.05 12.05-24.115 12.05-36.182 0L335.808 387.465c-12.049-12.05-12.049-24.098 0-36.164z" fill="currentColor" fill-opacity="0.9"></path>
         </svg></view>
       <!--v-if-->
diff --git a/src/packages/__VUE/searchbar/__tests__/searchbar.spec.ts b/src/packages/__VUE/searchbar/__tests__/searchbar.spec.ts
deleted file mode 100644
index 80bbaa87f4..0000000000
--- a/src/packages/__VUE/searchbar/__tests__/searchbar.spec.ts
+++ /dev/null
@@ -1,139 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { Searchbar } from '@nutui/nutui'
-
-test('Searchbar: basic usage', () => {
-  const wrapper = mount(Searchbar, {
-    props: {
-      modelValue: ''
-    }
-  })
-
-  expect(wrapper.find('.nut-searchbar').html()).toMatchSnapshot()
-})
-
-test('Searchbar: should limit maxlength of input value when using maxlength prop', async () => {
-  const wrapper = mount(Searchbar, {
-    props: {
-      maxLength: 3,
-      modelValue: '9999'
-    }
-  })
-
-  const input = wrapper.find('input')
-  input.trigger('input')
-  expect((wrapper.emitted('change') as any)[0][0]).toEqual('999')
-  input.element.value = '9999'
-})
-
-test('Searchbar: should format input value when type is number', () => {
-  const wrapper = mount(Searchbar, {
-    props: {
-      type: 'number',
-      modelValue: ''
-    }
-  })
-  const input = wrapper.find('input')
-  input.trigger('input')
-  expect((wrapper.emitted('change') as any)[0][0]).toEqual('')
-  input.element.value = '9999'
-})
-
-test('Searchbar: should format input value when type is number', () => {
-  const wrapper = mount(Searchbar, {
-    props: {
-      type: 'number',
-      modelValue: ''
-    }
-  })
-  const input = wrapper.find('input')
-  input.element.value = '1'
-  input.trigger('input')
-  expect((wrapper.emitted('change') as any)[0][0]).toEqual('1')
-
-  input.element.value = '12'
-  input.trigger('input')
-  expect((wrapper.emitted('change') as any)[1][0]).toEqual('12')
-})
-
-test('Searchbar: backgrounds prop test', () => {
-  const wrapper = mount(Searchbar, {
-    props: {
-      modelValue: '',
-      background: 'red',
-      inputBackground: 'green'
-    }
-  })
-  const outer: any = wrapper.find('.nut-searchbar')
-  const inner: any = wrapper.find('.nut-searchbar__search-input')
-  expect(outer.element.style.backgroundColor).toEqual('red')
-  expect(inner.element.style.backgroundColor).toEqual('green')
-})
-
-test('Searchbar: change event test', async () => {
-  const wrapper = mount(Searchbar, {
-    props: {
-      modelValue: ''
-    }
-  })
-
-  const input = wrapper.find('input')
-  await input.trigger('input')
-  expect(wrapper.emitted('change')).toBeTruthy()
-})
-
-test('Searchbar: change event test', async () => {
-  const wrapper = mount(Searchbar, {
-    props: {
-      modelValue: ''
-    }
-  })
-
-  const input = wrapper.find('input')
-  await input.trigger('input')
-  expect(wrapper.emitted('change')).toBeTruthy()
-})
-
-test('Searchbar: focus event focus', async () => {
-  const wrapper = mount(Searchbar, {
-    props: {
-      modelValue: ''
-    }
-  })
-
-  const input = wrapper.find('input')
-  await input.trigger('focus')
-  expect(wrapper.emitted('focus')).toBeTruthy()
-})
-
-test('Searchbar: blur event test', async () => {
-  const wrapper = mount(Searchbar, {
-    props: {
-      modelValue: ''
-    }
-  })
-
-  const input = wrapper.find('input')
-  await input.trigger('blur')
-  expect(wrapper.emitted('blur')).toBeTruthy()
-})
-
-test('Searchbar: clear event test', async () => {
-  const wrapper = mount(Searchbar, { props: { modelValue: 3 } })
-  const input = wrapper.find('input')
-  const clear = wrapper.find('.nut-searchbar__input-clear')
-  wrapper.find('input').trigger('input')
-  expect(input.element.value).toBe('3')
-  await clear.trigger('click')
-  // 修改update:modelValue
-  expect((wrapper.emitted('update:modelValue') as any)[1][0]).toEqual('')
-  expect(clear.exists()).toBe(true)
-})
-
-test('Searchbar: props shape', async () => {
-  const wrapper1 = mount(Searchbar, { props: { shape: 'square' } })
-  const wrapper2 = mount(Searchbar)
-  const input1 = wrapper1.find('.nut-searchbar__search-input')
-  const input2 = wrapper2.find('.nut-searchbar__search-input')
-  expect(input1.html()).includes('square')
-  expect(input2.html()).includes('round')
-})
diff --git a/src/packages/__VUE/searchbar/__tests__/searchbar.spec.tsx b/src/packages/__VUE/searchbar/__tests__/searchbar.spec.tsx
new file mode 100644
index 0000000000..78a70b7838
--- /dev/null
+++ b/src/packages/__VUE/searchbar/__tests__/searchbar.spec.tsx
@@ -0,0 +1,116 @@
+import { mount } from '@vue/test-utils'
+import { Searchbar } from '@nutui/nutui'
+import { ref } from 'vue'
+
+test('Searchbar: basic usage', () => {
+  const wrapper = mount(() => <Searchbar modelValue="123" />)
+  expect(wrapper.find('.nut-searchbar').html()).toMatchSnapshot()
+})
+
+test('Searchbar: should limit maxlength of input value when using maxlength prop', async () => {
+  const val = ref('9999')
+  const wrapper = mount(() => <Searchbar maxLength={3} v-model={val.value} />)
+
+  const input = wrapper.find('input')
+  input.trigger('input')
+  expect(val.value).toBe('999')
+})
+
+test('Searchbar: should format input value when type is number', () => {
+  const val = ref('')
+  const wrapper = mount(() => <Searchbar inputType="number" v-model={val.value} />)
+  const input = wrapper.find('input')
+  input.element.value = '1'
+  input.trigger('input')
+  expect(val.value).toBe('1')
+
+  input.element.value = '12'
+  input.trigger('input')
+  expect(val.value).toBe('12')
+})
+
+test('Searchbar: backgrounds prop test', () => {
+  const wrapper = mount(() => {
+    return <Searchbar modelValue="" background="red" inputBackground="green" />
+  })
+  const outer = wrapper.find('.nut-searchbar')
+  const inner = wrapper.find('.nut-searchbar__search-input')
+  expect(outer.attributes('style')).includes('background: red')
+  expect(inner.attributes('style')).includes('background: green')
+})
+
+test('Searchbar: change event test', async () => {
+  const change = vi.fn()
+  const wrapper = mount(() => <Searchbar modelValue="" onChange={change} />)
+
+  const input = wrapper.find('input')
+  await input.trigger('input')
+  expect(change).toBeCalled()
+})
+
+test('Searchbar: focus event focus', async () => {
+  const focus = vi.fn()
+  const wrapper = mount(() => {
+    return <Searchbar modelValue="" onFocus={focus} />
+  })
+
+  const input = wrapper.find('input')
+  await input.trigger('focus')
+  expect(focus).toBeCalled()
+})
+
+test('Searchbar: blur event test', async () => {
+  const blur = vi.fn()
+  const wrapper = mount(() => {
+    return <Searchbar modelValue="" onBlur={blur} />
+  })
+
+  const input = wrapper.find('input')
+  await input.trigger('blur')
+  expect(blur).toBeCalled()
+})
+
+test('Searchbar: clear event test', async () => {
+  const val = ref('3')
+  const wrapper = mount(() => <Searchbar v-model={val.value} />)
+  const input = wrapper.find('input')
+  const clear = wrapper.find('.nut-searchbar__input-clear')
+  wrapper.find('input').trigger('input')
+  expect(input.element.value).toBe('3')
+  await clear.trigger('click')
+  expect(val.value).toBe('')
+  expect(clear.exists()).toBe(true)
+})
+
+test('Searchbar: props shape', async () => {
+  const wrapper1 = mount(() => <Searchbar shape="square" />)
+  const wrapper2 = mount(() => <Searchbar />)
+  const input1 = wrapper1.find('.nut-searchbar__search-input')
+  const input2 = wrapper2.find('.nut-searchbar__search-input')
+  expect(input1.html()).includes('square')
+  expect(input2.html()).includes('round')
+})
+
+test('Searchbar: slots', async () => {
+  const wrapper = mount(() => (
+    <Searchbar>
+      {{
+        leftout: 'slot leftout',
+        leftin: 'slot leftin',
+        rightout: 'slot rightout',
+        rightin: 'slot rightin'
+      }}
+    </Searchbar>
+  ))
+  const leftout = wrapper.find('.nut-searchbar__left-search-icon')
+  expect(leftout.html()).includes('slot leftout')
+
+  const leftin = wrapper.find('.nut-searchbar__iptleft-search-icon')
+  expect(leftin.html()).includes('slot leftin')
+
+  const rightout = wrapper.find('.nut-searchbar__right-search-icon')
+  expect(rightout.html()).includes('slot rightout')
+
+  const rightin = wrapper.find('.nut-searchbar__iptright-search-icon')
+  expect(rightin.html()).includes('slot rightin')
+})
diff --git a/src/packages/__VUE/searchbar/index.vue b/src/packages/__VUE/searchbar/index.vue
index 4ecd06f16b..0cb26190f7 100644
--- a/src/packages/__VUE/searchbar/index.vue
+++ b/src/packages/__VUE/searchbar/index.vue
@@ -254,4 +254,3 @@ export default create({
   }
 })
 </script>
-./types