From 395a4c96ce05ee6d29eccc1b77015ca1c201f37e Mon Sep 17 00:00:00 2001
From: OneNail <31649110+OneNail@users.noreply.github.com>
Date: Wed, 25 Aug 2021 06:14:51 +0800
Subject: [PATCH] test: test using vue sfcs as custom elements (#4717)

---
 packages/playground/vue/CustomElement.ce.vue  | 26 +++++++++++++++++++
 packages/playground/vue/__tests__/vue.spec.ts |  8 ++++++
 packages/playground/vue/index.html            |  5 +++-
 3 files changed, 38 insertions(+), 1 deletion(-)
 create mode 100644 packages/playground/vue/CustomElement.ce.vue

diff --git a/packages/playground/vue/CustomElement.ce.vue b/packages/playground/vue/CustomElement.ce.vue
new file mode 100644
index 00000000000000..c8c33c02f74d1f
--- /dev/null
+++ b/packages/playground/vue/CustomElement.ce.vue
@@ -0,0 +1,26 @@
+<template>
+  <h2>Custom Element</h2>
+  <button class="custom-element" type="button" @click="state.count++">
+    {{ label }}: {{ state.count }}
+  </button>
+</template>
+
+<script setup>
+import { defineProps, reactive, onBeforeMount } from 'vue'
+
+defineProps({
+  label: String
+})
+
+const state = reactive({ count: 0 })
+
+onBeforeMount(() => {
+  state.count = 1
+})
+</script>
+
+<style scoped>
+.custom-element {
+  color: green;
+}
+</style>
diff --git a/packages/playground/vue/__tests__/vue.spec.ts b/packages/playground/vue/__tests__/vue.spec.ts
index 052439bf9663d5..99cd923cf1f35c 100644
--- a/packages/playground/vue/__tests__/vue.spec.ts
+++ b/packages/playground/vue/__tests__/vue.spec.ts
@@ -211,3 +211,11 @@ describe('ref transform', () => {
     expect(await page.textContent('.ref-transform')).toMatch('1')
   })
 })
+
+describe('custom element', () => {
+  test('should work', async () => {
+    await page.click('.custom-element')
+    expect(await page.textContent('.custom-element')).toMatch('count: 2')
+    expect(await getColor('.custom-element')).toBe('green')
+  })
+})
diff --git a/packages/playground/vue/index.html b/packages/playground/vue/index.html
index 57f325518a2c25..fc5f3762d6b36e 100644
--- a/packages/playground/vue/index.html
+++ b/packages/playground/vue/index.html
@@ -1,7 +1,10 @@
 <div id="app"></div>
 <script type="module">
-  import { createApp } from 'vue'
+  import { createApp, defineCustomElement } from 'vue'
   import Main from './Main.vue'
+  import CustomElement from './CustomElement.ce.vue'
 
   createApp(Main).mount('#app')
+  customElements.define('custom-element', defineCustomElement(CustomElement))
 </script>
+<custom-element label="count"></custom-element>