test(useEllipsis): add unit test

package.json

@@ -36,6 +36,7 @@
     "@typescript-eslint/eslint-plugin": "^6.18.1",
     "@vitejs/plugin-vue": "^4.5.2",
     "@vitejs/plugin-vue-jsx": "^3.1.0",
+    "@vue/test-utils": "^2.4.3",
     "eslint": "^7.32.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-airbnb-typescript": "^17.1.0",

packages/core/useEllipsis/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,3 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`useEllipsis > should  1`] = `"<div>NOI is a h...</div>"`;

packages/core/useEllipsis/index.test.tsx

@@ -0,0 +1,71 @@
+import { ref, nextTick } from 'vue'
+import { describe, expect, it, test, beforeAll, afterAll } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { useEllipsis } from '.'
+// basic usage
+//
+/**
+ * 1. 正常渲染
+ * 3. content & ellipsisContent
+ * 4. custom ellipsisText
+ * 5. position
+ * 6. rows
+ * 7. 响应式，改变窗口resize，或者响应式容器，或者改变content
+ * 8. 不同的行号 & 不同的字体大小
+ */
+const originGetComputedStyle = window.getComputedStyle
+
+const lineHeight = 20
+
+const content = 'NOI is a hight performance/light weight headless UI library.'
+
+beforeAll(() => {
+  window.getComputedStyle = (el) => ({
+    ...originGetComputedStyle(el),
+    get lineHeight() {
+      return `${lineHeight}px`
+    },
+  })
+  Object.defineProperty(HTMLElement.prototype, 'offsetHeight', {
+    get() {
+      if (this.innerText.length < 10) {
+        return lineHeight
+      }
+      if (this.innerText.includes('...')) {
+        const row = Math.ceil(
+          (this.innerText.replace(/\.\.\./g, '中').length / content.length) * 4
+        )
+        return lineHeight * row
+      }
+      return lineHeight * 4
+    },
+    set() {},
+    configurable: true,
+  })
+})
+
+afterAll(() => {
+  window.getComputedStyle = originGetComputedStyle
+})
+
+describe('useEllipsis', () => {
+  it('should be defined', () => {
+    expect(useEllipsis).toBeDefined()
+  })
+
+  test('should ', async () => {
+    const wrapper = mount({
+      setup() {
+        const sourceContent = ref(content)
+        const ellipsisRef = ref<HTMLElement>()
+        const { content: ellipsisContent } = useEllipsis(ellipsisRef, {
+          content: sourceContent,
+        })
+        return () => <div ref={ellipsisRef}>{ellipsisContent.value}</div>
+      },
+    })
+
+    await nextTick()
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+})

packages/core/useEllipsis/index.ts

@@ -96,7 +96,7 @@ const calcEllipsisText = (
     const remain = content.slice(half.length)
 
     node.innerText = `${res}${half}`
-    if (node.clientHeight > lineHeight) {
+    if (node.offsetHeight > lineHeight) {
       node.innerText = res
       return calc(half, res, tail ?? remain)
     }
@@ -117,7 +117,7 @@ const calcEllipsisText = (
         node.innerText = content + ellipsisText
         break
     }
-    if (node.clientHeight > lineHeight) {
+    if (node.offsetHeight > lineHeight) {
       return withEllipsisText(newContent)
     }
     return node.innerText
@@ -128,7 +128,7 @@ const calcEllipsisText = (
     const dummyNode = document.createElement('div')
     render(actionNode, dummyNode)
     node.appendChild(dummyNode.firstChild)
-    if (node.clientHeight > lineHeight) {
+    if (node.offsetHeight > lineHeight) {
       let newContent
       switch (position) {
         case EllipsisPosition.Start:
@@ -186,6 +186,7 @@ export const useEllipsis = (
   }
 
   const reCalculate = () => {
+    if (!source.value) return
     clone.value = useCloneElement(source.value)
     ellipsisContent.value = calcEllipsisText(
       clone.value,
@@ -200,7 +201,6 @@ export const useEllipsis = (
   onMounted(reCalculate)
 
   const { width } = useWindowSize()
-
   watch([width, options.content, source], reCalculate)
 
   const content = computed(() =>