From cc8480541a4bd2806d3cabfc74ea3fa9061fdb84 Mon Sep 17 00:00:00 2001
From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Wed, 17 May 2023 10:40:13 +0200
Subject: [PATCH] chore: add playground tests

---
 packages/playground/src/App.vue               |  4 ++-
 packages/playground/src/main.ts               |  6 ++++-
 .../playground/src/stores/counterSetup.ts     |  5 +++-
 .../src/views/CounterSetupStore.vue           | 26 +++++++++++++------
 4 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/packages/playground/src/App.vue b/packages/playground/src/App.vue
index 3f0e3f8c..28712067 100644
--- a/packages/playground/src/App.vue
+++ b/packages/playground/src/App.vue
@@ -25,12 +25,14 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue'
+import { computed, provide } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
 const router = useRouter()
 const route = useRoute()
 
+provide('hello', 'from component')
+
 const pages = router
   .getRoutes()
   .filter((route) => !route.meta.hide)
diff --git a/packages/playground/src/main.ts b/packages/playground/src/main.ts
index bae664bc..2d9209d8 100644
--- a/packages/playground/src/main.ts
+++ b/packages/playground/src/main.ts
@@ -60,6 +60,10 @@ if (import.meta.hot) {
   //   }
 }
 
-const app = createApp(App).use(pinia).use(router)
+const app = createApp(App)
+  .use(pinia)
+  .use(router)
+  // used in counter setup for tests
+  .provide('injected', 'global')
 
 app.mount('#app')
diff --git a/packages/playground/src/stores/counterSetup.ts b/packages/playground/src/stores/counterSetup.ts
index 4c5330da..99e36aad 100644
--- a/packages/playground/src/stores/counterSetup.ts
+++ b/packages/playground/src/stores/counterSetup.ts
@@ -1,4 +1,4 @@
-import { computed, toRefs, reactive } from 'vue'
+import { computed, toRefs, reactive, inject } from 'vue'
 import { acceptHMRUpdate, defineStore } from 'pinia'
 
 const delay = (t: number) => new Promise((r) => setTimeout(r, t))
@@ -11,6 +11,9 @@ export const useCounter = defineStore('counter-setup', () => {
     numbers: [] as number[],
   })
 
+  const injected = inject('injected', 'fallback value')
+  console.log('injected (should be global)', injected)
+
   const double = computed(() => state.n * 2)
 
   function increment(amount = 1) {
diff --git a/packages/playground/src/views/CounterSetupStore.vue b/packages/playground/src/views/CounterSetupStore.vue
index c06656b6..5f2b7c23 100644
--- a/packages/playground/src/views/CounterSetupStore.vue
+++ b/packages/playground/src/views/CounterSetupStore.vue
@@ -1,3 +1,21 @@
+<script lang="ts" setup>
+import { ref, inject } from 'vue'
+import { useCounter } from '../stores/counterSetup'
+
+console.log(
+  '(1) injected (within component should be from component)',
+  inject('hello')
+)
+
+const counter = useCounter()
+
+console.log(
+  '(2) injected (within component should be from component)',
+  inject('hello')
+)
+const n = ref(0)
+</script>
+
 <template>
   <h2>Local variables</h2>
 
@@ -40,11 +58,3 @@
 
   <pre>{{ counter.$state }}</pre>
 </template>
-
-<script lang="ts" setup>
-import { ref } from 'vue'
-import { useCounter } from '../stores/counterSetup'
-
-const counter = useCounter()
-const n = ref(0)
-</script>
-- 
2.47.2