test(searchbar): update (#3070)

src/packages/__VUE/searchbar/__tests__/__snapshots__/searchbar.spec.ts.snap → 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-->

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')
+})

src/packages/__VUE/searchbar/index.vue

@@ -254,4 +254,3 @@ export default create({
   }
 })
 </script>
-./types