From e35d38fc077ef379f20e3266f19be18c1efb0a7d Mon Sep 17 00:00:00 2001
From: panyongxu <panyx_1002@163.com>
Date: Mon, 29 Nov 2021 02:05:40 +0800
Subject: [PATCH 1/4] =?UTF-8?q?test(readTip):=20=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E5=8D=95=E5=85=83=E6=B5=8B=E8=AF=95=EF=BC=8C=E5=B9=B6=E6=9B=B4?=
 =?UTF-8?q?=E6=96=B0=E7=BB=84=E4=BB=B6=E7=8A=B6=E6=80=81=E4=B8=BA=E5=B7=B2?=
 =?UTF-8?q?=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../__tests__/__snapshots__/card.spec.ts.snap |  39 +++++
 packages/devui-vue/devui/package.json         |   6 +
 .../__tests__/read-tip-template.spec.ts       | 160 ++++++++++++++++++
 .../devui/read-tip/__tests__/read-tip.spec.ts |  92 +++++++++-
 packages/devui-vue/devui/read-tip/index.ts    |   2 +-
 .../devui/read-tip/src/read-tip-template.tsx  |   3 +-
 .../devui-vue/devui/read-tip/src/read-tip.tsx |   3 +-
 .../docs/components/read-tip/index.md         |   9 +-
 packages/devui-vue/package.json               |   2 +-
 9 files changed, 303 insertions(+), 13 deletions(-)
 create mode 100644 packages/devui-vue/devui/card/__tests__/__snapshots__/card.spec.ts.snap
 create mode 100644 packages/devui-vue/devui/package.json
 create mode 100644 packages/devui-vue/devui/read-tip/__tests__/read-tip-template.spec.ts

diff --git a/packages/devui-vue/devui/card/__tests__/__snapshots__/card.spec.ts.snap b/packages/devui-vue/devui/card/__tests__/__snapshots__/card.spec.ts.snap
new file mode 100644
index 00000000..76e8d750
--- /dev/null
+++ b/packages/devui-vue/devui/card/__tests__/__snapshots__/card.spec.ts.snap
@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`card should render correctly 1`] = `
+<div
+  class="card-container devui-card"
+>
+  <!---->
+  <div
+    class="devui-card-header"
+  >
+    
+    <div
+      class="devui-card-header-title-area"
+    >
+      <div
+        class="devui-card-title"
+      >
+        <!---->
+      </div>
+      <div
+        class="devui-card-subtitle"
+      >
+        <!---->
+      </div>
+    </div>
+  </div>
+  
+  <div
+    class="devui-card-content"
+  >
+    <!---->
+  </div>
+  <div
+    class="d-card-actions devui-card-actions"
+  >
+    
+  </div>
+</div>
+`;
diff --git a/packages/devui-vue/devui/package.json b/packages/devui-vue/devui/package.json
new file mode 100644
index 00000000..a82d3d1f
--- /dev/null
+++ b/packages/devui-vue/devui/package.json
@@ -0,0 +1,6 @@
+{
+  "devDependencies": {
+    "@types/jest": "^27.0.3",
+    "@types/mocha": "^9.0.0"
+  }
+}
diff --git a/packages/devui-vue/devui/read-tip/__tests__/read-tip-template.spec.ts b/packages/devui-vue/devui/read-tip/__tests__/read-tip-template.spec.ts
new file mode 100644
index 00000000..aaab9d60
--- /dev/null
+++ b/packages/devui-vue/devui/read-tip/__tests__/read-tip-template.spec.ts
@@ -0,0 +1,160 @@
+import { mount } from '@vue/test-utils';
+import { ReadTip, } from '../index';
+import { nextTick } from 'vue'
+import TipsTemplate from '../src/read-tip-template';
+
+
+describe('read-tip test', () => {
+
+  beforeEach(() => {
+    // create teleport target
+    const el = document.createElement('div')
+    el.id = 'readtip-target'
+    document.body.appendChild(el)
+  })
+
+  afterEach(() => {
+    // clean up
+    document.body.outerHTML = ''
+  })
+  it('read-tip init render', async () => {
+    // 基础用法
+
+    const defaultTemplateProps = {
+      position: 'top',
+      appendToBody: false,
+      selector: '#readtip-target',
+      title: 'Name: Jack',
+      content: 'This is Jack\'s profile',
+    }
+    const wrapper = mount(TipsTemplate, {
+      props: {
+        defaultTemplateProps
+      }
+    })
+
+    expect(document.querySelector(defaultTemplateProps.selector).innerHTML).toContain(defaultTemplateProps.title)
+
+    expect(document.querySelector(defaultTemplateProps.selector).innerHTML).toContain(defaultTemplateProps.content)
+
+
+  })
+
+  const position = ['top', 'left', 'right', 'bottom']
+
+  position.forEach(pos => {
+    it(`read-tip position ${pos}`, async () => {
+      // 基础用法
+
+      const defaultTemplateProps = {
+        position: pos,
+        appendToBody: false,
+        selector: '#readtip-target',
+        title: 'Name: Jack',
+        content: 'This is Jack\'s profile',
+      }
+      const wrapper = mount(TipsTemplate, {
+        props: {
+          defaultTemplateProps
+        }
+      })
+
+      expect(document.querySelector(defaultTemplateProps.selector).innerHTML).toContain('read-tip-container ' + defaultTemplateProps.position)
+
+    })
+  })
+
+  it('read-tip appendToBody = true', async () => {
+    // 基础用法
+
+    const defaultTemplateProps = {
+      position: 'top',
+      appendToBody: true,
+      selector: '#readtip-target',
+      title: 'Name: Jack',
+      content: 'This is Jack\'s profile',
+    }
+    const wrapper = mount(TipsTemplate, {
+      props: {
+        defaultTemplateProps
+      }
+    })
+
+    expect(document.querySelector(defaultTemplateProps.selector).innerHTML).toBe('')
+
+    expect(document.querySelector(defaultTemplateProps.selector).innerHTML).not.toContain(defaultTemplateProps.title)
+
+    expect(document.querySelector(defaultTemplateProps.selector).innerHTML).not.toContain(defaultTemplateProps.content)
+
+
+  })
+
+  it('read-tip contentTemplate', async () => {
+    // 基础用法
+
+    const defaultTemplateProps = {
+      position: 'top',
+      appendToBody: false,
+      selector: '#readtip-target',
+      contentTemplate: true
+    }
+    const wrapper = mount(TipsTemplate, {
+      props: {
+        defaultTemplateProps
+      },
+      slots: {
+        default: `<div> I am test </div>`
+      }
+    })
+
+    expect(document.querySelector(defaultTemplateProps.selector).innerHTML).toContain('<div> I am test </div>')
+
+
+  })
+
+  it('read-tip dataFn', async () => {
+    // 基础用法
+
+    const defaultTemplateProps = {
+      appendToBody: false,
+      selector: '#readtip-target',
+      dataFn: getDataFromDB,
+      key: 'GetData'
+    }
+    function getDataFromDB({ element, rule }) {
+      return { content: element.innerHTML, title: rule.key }
+    }
+    const wrapper = mount(TipsTemplate, {
+      props: {
+        defaultTemplateProps
+      },
+
+    })
+
+    expect(document.querySelector(defaultTemplateProps.selector).innerHTML).toContain('GetData')
+  })
+
+  it('read-tip overlayClassName', async () => {
+    // 基础用法
+    const defaultTemplateProps = {
+      appendToBody: false,
+      selector: '#readtip-target',
+      dataFn: getDataFromDB,
+      key: 'GetData',
+      overlayClassName: 'red'
+    }
+    function getDataFromDB({ element, rule }) {
+      return { content: element.innerHTML, title: rule.key }
+    }
+    const wrapper = mount(TipsTemplate, {
+      props: {
+        defaultTemplateProps
+      },
+
+    })
+
+    expect(document.querySelector(defaultTemplateProps.selector).innerHTML).toContain(defaultTemplateProps.overlayClassName)
+  })
+})
+
+
diff --git a/packages/devui-vue/devui/read-tip/__tests__/read-tip.spec.ts b/packages/devui-vue/devui/read-tip/__tests__/read-tip.spec.ts
index fae43c0e..e6bb1048 100644
--- a/packages/devui-vue/devui/read-tip/__tests__/read-tip.spec.ts
+++ b/packages/devui-vue/devui/read-tip/__tests__/read-tip.spec.ts
@@ -1,8 +1,96 @@
 import { mount } from '@vue/test-utils';
-import { ReadTip, ReadTipDirective } from '../index';
+import { ReadTip, } from '../index';
+import { nextTick } from 'vue'
+import Template from '../src/read-tip-template';
 
 describe('read-tip test', () => {
+  beforeEach(() => {
+    // create teleport target
+    const el = document.createElement('div')
+    el.className = 'readtip-target'
+    document.body.appendChild(el)
+  })
+
+  afterEach(() => {
+    // clean up
+    document.body.outerHTML = ''
+  })
+  it('read-tip init render', async () => {
+    // 基础用法
+    const readTipOptions = {
+      trigger: 'hover',
+      rules: {
+        trigger: 'click',
+        position: 'top',
+        appendToBody: false,
+        selector: '.readtip-target',
+        title: 'Name: Jack',
+        content: 'This is Jack\'s profile',
+      },
+    };
+    const wrapper = mount(ReadTip, {
+      props: {
+        readTipOptions
+      },
+      slots: {
+        default: `<span class="readtip-target">@Jack</span>`
+      }
+    })
+    
+    expect(wrapper.find('.readtip-target').classes()).toContain('readtip-target')
+    
+    // dom元素被点击 template会进行展示
+    await wrapper.find('.readtip-target').trigger('click')
+    await nextTick()
+    
+    let template = wrapper.findComponent(Template)
+
+    expect(template.exists()).toBe(true)
+    expect(wrapper.findAll('[data-test="todo"]')).toHaveLength(1)
+
+     // body元素被点击 template会消失
+    await document.body.click()
+    await nextTick()
+
+    template = wrapper.findComponent(Template)
+    expect(template.exists()).toBe(false)
+    expect(wrapper.findAll('[data-test="todo"]')).toHaveLength(1)
+  })
+
   it('read-tip init render', async () => {
-    // todo
+    // 基础用法
+    const readTipOptions = {
+      trigger: 'hover',
+      rules: {
+        trigger: 'hover',
+        selector: '.readtip-target',
+        title: 'Name: Jack',
+        content: 'This is Jack\'s profile',
+      },
+    };
+    const wrapper = mount(ReadTip, {
+      props: {
+        readTipOptions
+      },
+      slots: {
+        default: `
+        <span class="readtip-target">@Jack</span>
+        <span class="readtip-target">@Mary</span>
+        `
+      }
+    })
+    
+    
+    // dom元素被移入 template会进行展示
+    await wrapper.find('.readtip-target').trigger('mouseover')
+    
+    expect(wrapper.findAll('[data-test="todo"]')).toHaveLength(2)
+
+     // dom元素被移出 template会消失
+    await wrapper.find('.readtip-target').trigger('mouseout')
+    await nextTick()
+
+    expect(wrapper.findAll('[data-test="todo"]')).toHaveLength(2)
+
   })
 })
diff --git a/packages/devui-vue/devui/read-tip/index.ts b/packages/devui-vue/devui/read-tip/index.ts
index 877133f1..4ccae88c 100644
--- a/packages/devui-vue/devui/read-tip/index.ts
+++ b/packages/devui-vue/devui/read-tip/index.ts
@@ -10,7 +10,7 @@ export { ReadTip, }
 export default {
   title: 'ReadTip 阅读提示',
   category: '反馈',
-  status: '50%', // TODO: 组件若开发完成则填入"已完成"，并删除该注释
+  status: '已完成', 
   install(app: App): void {
     app.use(ReadTip as any)
   }
diff --git a/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx b/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx
index 10aa734e..ab725c8a 100644
--- a/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx
+++ b/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx
@@ -20,7 +20,8 @@ export default defineComponent({
     const temp = ref(null);
     onMounted(() => {
       const domBounding = document.querySelector(query).getBoundingClientRect();
-      const distance = 10;
+      
+      const distance = 10; 
       let positionTop = 0;
       let positionLeft = 0;
       const targetDom = document.querySelector('.read-tip-container').getBoundingClientRect();
diff --git a/packages/devui-vue/devui/read-tip/src/read-tip.tsx b/packages/devui-vue/devui/read-tip/src/read-tip.tsx
index cc9ad63f..0ba6cce6 100644
--- a/packages/devui-vue/devui/read-tip/src/read-tip.tsx
+++ b/packages/devui-vue/devui/read-tip/src/read-tip.tsx
@@ -19,7 +19,6 @@ export default defineComponent({
       appendToBody: true,
       rules: { selector: null },
     };
-    const tempTop = ref(0)
     // 合并基础配置
     const options = { ...defaultOptions, ...props.readTipOptions }
     const defaultSlot = ref(null)
@@ -148,7 +147,7 @@ export default defineComponent({
 
           {(refRules).map(rule => (
             <div
-
+              data-test="todo"
             >
               {rule.status && (<TipsTemplate defaultTemplateProps={{ ...rule }} >
                 {
diff --git a/packages/devui-vue/docs/components/read-tip/index.md b/packages/devui-vue/docs/components/read-tip/index.md
index 19fe559b..7742abd8 100644
--- a/packages/devui-vue/docs/components/read-tip/index.md
+++ b/packages/devui-vue/docs/components/read-tip/index.md
@@ -22,7 +22,6 @@
 </template>
 
 <script setup>
-import { defineComponent } from 'vue'
 const readTipOptions =  {
     trigger: 'hover',
     rules: {
@@ -75,7 +74,6 @@ const readTipOptions =  {
 </template>
 
 <script setup>
-import { defineComponent } from 'vue'
 const readTipOptions =  {
     trigger: 'click',
     showAnimate: false,
@@ -101,14 +99,14 @@ const readTipOptions =  {
         overlayClassName:'red',
       },
       {
-        trigger: 'click',
+        trigger: 'hover',
         selector: '.third-content',
         position: 'bottom',
         title: 'This Is the Third Title',
         content: 'Aenean libero urna, scelerisque tincidunt',
       }, 
       {
-        trigger: 'click',
+        trigger: 'hover',
         selector: '.four-content',
         position: 'right',
         title: 'This Is the Third Title',
@@ -206,7 +204,6 @@ const readTipOptions =  {
 </template>
 
 <script setup>
-import { defineComponent } from 'vue'
 const readTipOptions =  {
     trigger: 'click',    
     rules: {
@@ -275,10 +272,10 @@ const readTipOptions =  {
   <p class="readtip-content">Using function fullElement to pass data</p>
   <p>The following is the target you want to show readtip</p>
   <h4 class="readtip-target">Display readtip</h4>
+  </d-read-tip>
 </template>
 
 <script setup>
-import { defineComponent } from 'vue'
 const readTipOptions =   {
     trigger: 'click',
     rules: { 
diff --git a/packages/devui-vue/package.json b/packages/devui-vue/package.json
index 4a44e5b5..47df29fa 100644
--- a/packages/devui-vue/package.json
+++ b/packages/devui-vue/package.json
@@ -28,7 +28,7 @@
     "app:dev": "vite",
     "app:build": "vite build",
     "build:lib": "yarn predev && yarn build:components && yarn copy",
-    "test": "jest --config jest.config.js",
+    "test": "jest --config jest.config.js " ,
     "ls-lint": "ls-lint",
     "lint": "eslint \"{src,devui}/**/*.{vue,js,ts,jsx,tsx}\"",
     "lint:fix": "eslint --fix \"{src,devui}/**/*.{vue,js,ts,jsx,tsx}\"",
-- 
Gitee


From 779328658d2f3756d7b23d2be846f0f6eca33013 Mon Sep 17 00:00:00 2001
From: panyongxu <panyx_1002@163.com>
Date: Mon, 29 Nov 2021 02:10:45 +0800
Subject: [PATCH 2/4] =?UTF-8?q?docs(readTip):=20=E6=B5=8B=E8=AF=95?=
 =?UTF-8?q?=E7=94=A8=E4=BE=8B=E5=90=8D=E7=A7=B0=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/devui-vue/devui/read-tip/__tests__/read-tip.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/devui-vue/devui/read-tip/__tests__/read-tip.spec.ts b/packages/devui-vue/devui/read-tip/__tests__/read-tip.spec.ts
index e6bb1048..3b5e72e1 100644
--- a/packages/devui-vue/devui/read-tip/__tests__/read-tip.spec.ts
+++ b/packages/devui-vue/devui/read-tip/__tests__/read-tip.spec.ts
@@ -57,7 +57,7 @@ describe('read-tip test', () => {
     expect(wrapper.findAll('[data-test="todo"]')).toHaveLength(1)
   })
 
-  it('read-tip init render', async () => {
+  it('read-tip more show tip', async () => {
     // 基础用法
     const readTipOptions = {
       trigger: 'hover',
-- 
Gitee


From 5841e7eacb98f5b396d7cf80b41c500b4fc0f879 Mon Sep 17 00:00:00 2001
From: panyongxu <panyx_1002@163.com>
Date: Tue, 30 Nov 2021 00:13:35 +0800
Subject: [PATCH 3/4] =?UTF-8?q?fix(readTip):=20=E5=88=A0=E9=99=A4=E6=96=B0?=
 =?UTF-8?q?=E5=8A=A0=E7=9A=84=E4=BE=9D=E8=B5=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/devui-vue/devui/package.json | 6 ------
 packages/devui-vue/package.json       | 2 +-
 2 files changed, 1 insertion(+), 7 deletions(-)
 delete mode 100644 packages/devui-vue/devui/package.json

diff --git a/packages/devui-vue/devui/package.json b/packages/devui-vue/devui/package.json
deleted file mode 100644
index a82d3d1f..00000000
--- a/packages/devui-vue/devui/package.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "devDependencies": {
-    "@types/jest": "^27.0.3",
-    "@types/mocha": "^9.0.0"
-  }
-}
diff --git a/packages/devui-vue/package.json b/packages/devui-vue/package.json
index 47df29fa..4a44e5b5 100644
--- a/packages/devui-vue/package.json
+++ b/packages/devui-vue/package.json
@@ -28,7 +28,7 @@
     "app:dev": "vite",
     "app:build": "vite build",
     "build:lib": "yarn predev && yarn build:components && yarn copy",
-    "test": "jest --config jest.config.js " ,
+    "test": "jest --config jest.config.js",
     "ls-lint": "ls-lint",
     "lint": "eslint \"{src,devui}/**/*.{vue,js,ts,jsx,tsx}\"",
     "lint:fix": "eslint --fix \"{src,devui}/**/*.{vue,js,ts,jsx,tsx}\"",
-- 
Gitee


From 4c2e38079b22ec8f8c9edecb6977d868e5b7944e Mon Sep 17 00:00:00 2001
From: panyongxu <panyx_1002@163.com>
Date: Tue, 30 Nov 2021 00:15:39 +0800
Subject: [PATCH 4/4] =?UTF-8?q?fix(card):=20=E5=88=A0=E9=99=A4=E6=97=A0?=
 =?UTF-8?q?=E6=84=8F=E6=96=B0=E5=A2=9E=E7=9A=84card=20test=E6=96=87?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../__tests__/__snapshots__/card.spec.ts.snap | 39 -------------------
 1 file changed, 39 deletions(-)
 delete mode 100644 packages/devui-vue/devui/card/__tests__/__snapshots__/card.spec.ts.snap

diff --git a/packages/devui-vue/devui/card/__tests__/__snapshots__/card.spec.ts.snap b/packages/devui-vue/devui/card/__tests__/__snapshots__/card.spec.ts.snap
deleted file mode 100644
index 76e8d750..00000000
--- a/packages/devui-vue/devui/card/__tests__/__snapshots__/card.spec.ts.snap
+++ /dev/null
@@ -1,39 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`card should render correctly 1`] = `
-<div
-  class="card-container devui-card"
->
-  <!---->
-  <div
-    class="devui-card-header"
-  >
-    
-    <div
-      class="devui-card-header-title-area"
-    >
-      <div
-        class="devui-card-title"
-      >
-        <!---->
-      </div>
-      <div
-        class="devui-card-subtitle"
-      >
-        <!---->
-      </div>
-    </div>
-  </div>
-  
-  <div
-    class="devui-card-content"
-  >
-    <!---->
-  </div>
-  <div
-    class="d-card-actions devui-card-actions"
-  >
-    
-  </div>
-</div>
-`;
-- 
Gitee