From 8fed8a7df94e7f464c11073cfa28fa426d6a4d73 Mon Sep 17 00:00:00 2001
From: caoxiangsong <caoxiangsong@oureman.com>
Date: Fri, 2 Sep 2022 10:27:29 +0800
Subject: [PATCH] =?UTF-8?q?=E9=80=9A=E8=BF=87=E4=BA=8B=E4=BB=B6=E4=BB=A3?=
 =?UTF-8?q?=E7=90=86=E5=AE=9E=E7=8E=B0=E4=B8=80=E4=B8=AA=E7=AE=80=E5=8D=95?=
 =?UTF-8?q?=E7=9A=84spm=E4=BF=A1=E6=81=AF=E6=94=B6=E9=9B=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/HelloWorld.vue | 72 +++++++++++++++++++++++++++++------
 tests/unit/example.spec.js    | 38 +++++++++---------
 2 files changed, 79 insertions(+), 31 deletions(-)

diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
index 5e4ce20..1fb2daf 100644
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -1,11 +1,16 @@
 <template>
-  <div class="hello" data-spma="aa">
+  <div
+    class="hello"
+    data-spma="aa"
+    @click="clickHandle"
+  >
     <span>show spm:{{spmText}}</span>
-    <div data-spmb="bb">
-      <button data-spmc="cc">Click it</button>
-    </div>
-    <div data-spmb="dd">
-      <button data-spmc="ff">Click it</button>
+    <div
+      v-for="spm in spms"
+      :key="spm.spmb"
+      :data-spmb="spm.spmb"
+    >
+      <button :data-spmc="spm.spmc">Click it</button>
     </div>
   </div>
 </template>
@@ -13,13 +18,56 @@
 <script>
 // TODO 利用事件代理实现一个简单的收集spm信息的方法，注意不是针对每一个按钮进行函数绑定。场景：考虑一下如果一个页面中有很多按钮，需要如何处理
 export default {
-  name: 'HelloWorld',
-  data: ()=>{
+  name: "HelloWorld",
+  data: () => {
     return {
-      spmText: 'xx.xx.xx'
-    }
-  }
-}
+      spmText: "xx.xx.xx",
+      spms: [
+        { spmb: "bb", spmc: "qq" },
+        { spmb: "cc", spmc: "pp" },
+        { spmb: "dd", spmc: "oo" },
+        { spmb: "ee", spmc: "nn" },
+        { spmb: "ff", spmc: "mm" },
+        { spmb: "gg", spmc: "ll" },
+        { spmb: "hh", spmc: "kk" },
+        { spmb: "ii", spmc: "jj" },
+      ],
+    };
+  },
+  methods: {
+    clickHandle(event) {
+      const spmLevelArray = ["c", "b", "a"];
+      let dom = event.target;
+      if (dom.tagName !== "BUTTON") {
+        return;
+      }
+      const spmArray = [];
+      for (let i = 0; i < spmLevelArray.length; i++) {
+        const key = spmLevelArray[i];
+        spmArray.unshift(dom.dataset["spm" + key]);
+        const spmLevel = spmLevelArray[i + 1];
+        if (!spmLevel) {
+          break;
+        }
+        dom = this.getParents(dom, spmLevel);
+        if (!dom) {
+          break;
+        }
+      }
+      this.spmText = spmArray.join(".");
+    },
+    getParents(dom, spmLevel) {
+      const parentElement = dom.parentElement;
+      if (parentElement.tagName === "BODY") {
+        return;
+      }
+      if (parentElement.dataset["spm" + spmLevel]) {
+        return parentElement;
+      }
+      return this.getParents(parentElement, spmLevel);
+    },
+  },
+};
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
diff --git a/tests/unit/example.spec.js b/tests/unit/example.spec.js
index 4bc26e0..f0463f4 100644
--- a/tests/unit/example.spec.js
+++ b/tests/unit/example.spec.js
@@ -1,21 +1,21 @@
-import { shallowMount, mount } from '@vue/test-utils'
-import HelloWorld from '@/components/HelloWorld.vue';
-import { warn } from 'vue';
+import { shallowMount, mount } from "@vue/test-utils";
+import HelloWorld from "@/components/HelloWorld.vue";
+import { warn } from "vue";
 
-jest.setTimeout(10000)
-describe('HelloWorld.vue', () => {
-  it('校验第一个按钮的spm是否为aa.bb.cc', async () => {
+jest.setTimeout(10000);
+describe("HelloWorld.vue", () => {
+  it("校验第一个按钮的spm是否为aa.bb.cc", async () => {
     const wrapper = shallowMount(HelloWorld, { attachTo: document.body });
-    const button = wrapper.findAll('button');
-    await button[0].trigger('click');
-    expect(wrapper.vm.spmText).toMatch('aa.bb.cc');
-  })
-})
-describe('HelloWorld.vue', () => {
-  it('校验第一个按钮的spm是否为aa.dd.ff', async () => {
-    const wrapper = shallowMount(HelloWorld, { attachTo: document.body })
-    const button = wrapper.findAll('button')
-    await button[1].trigger('click')
-    expect(wrapper.vm.spmText).toMatch('aa.dd.ff')
-  })
-})
\ No newline at end of file
+    const button = wrapper.findAll("button");
+    await button[0].trigger("click");
+    expect(wrapper.vm.spmText).toMatch("aa.bb.qq");
+  });
+});
+describe("HelloWorld.vue", () => {
+  it("校验第二个按钮的spm是否为aa.dd.pp", async () => {
+    const wrapper = shallowMount(HelloWorld, { attachTo: document.body });
+    const button = wrapper.findAll("button");
+    await button[1].trigger("click");
+    expect(wrapper.vm.spmText).toMatch("aa.cc.pp");
+  });
+});