test(context): provideStore + injectStore

Author: nickmessing

package.json

@@ -3,15 +3,23 @@
   "version": "0.3.1",
   "author": "Nicolai Moraru <[email protected]>",
   "license": "MIT",
+  "type": "module",
   "scripts": {
     "dev:todolist-ts-example": "cd packages/examples/todolist-ts && pnpm run dev",
     "dev:vue-tinybase": "cd packages/public/vue-tinybase && pnpm run dev",
     "dev": "run-p dev:*",
-    "docs:build": "cd packages/private/docs && pnpm run build"
+    "docs:build": "cd packages/private/docs && pnpm run build",
+    "test": "vitest",
+    "coverage": "vitest run --coverage"
   },
   "devDependencies": {
+    "@vitest/coverage-v8": "^1.6.0",
+    "@vue/test-utils": "^2.4.6",
+    "happy-dom": "^14.12.3",
     "npm-run-all2": "^6.2.2",
+    "tinybase": "^5.0.0",
     "vite": "^5.3.3",
-    "vitest": "^1.6.0"
+    "vitest": "^1.6.0",
+    "vue": "^3.4.31"
   }
 }

packages/public/vue-tinybase/src/context/context.test.ts

@@ -0,0 +1,45 @@
+import { InjectionKey, defineComponent, h } from 'vue'
+import { expect, test } from 'vitest'
+import { createStore } from 'tinybase'
+import { mount } from '@vue/test-utils'
+import { provideStore } from './provideStore.js'
+import { injectStore } from './injectStore.js'
+
+test('[default-store/context] (provideStore + injectStore) happy-path', () => {
+  const store = createStore().setValue('foo', 'bar')
+
+  const ChildComponent = defineComponent({
+    setup() {
+      const store = injectStore()
+
+      const value = store.getValue('foo')
+
+      return () => h('div', null, `${value}`)
+    },
+  })
+
+  const ParentComponent = defineComponent({
+    setup() {
+      provideStore(store as any)
+
+      return () => h(ChildComponent)
+    },
+  })
+
+  const wrapper = mount(ParentComponent)
+
+  expect(wrapper.text()).toBe('bar')
+})
+
+test('[default-store/context] (injectStore) missing store in context', () => {
+  const ChildComponent = defineComponent({
+    setup() {
+      injectStore()
+      return () => h('div')
+    },
+  })
+
+  const fn = () => mount(ChildComponent)
+
+  expect(fn).toThrowError('[tinybase-vue] (injectStore): Could not find store with key Symbol(DefaultStoreKey)')
+})

packages/public/vue-tinybase/src/custom-store/context/context.test.ts

@@ -0,0 +1,53 @@
+import { InjectionKey, defineComponent, h } from 'vue'
+import { expect, test } from 'vitest'
+import { createStore } from 'tinybase'
+import { mount } from '@vue/test-utils'
+import { provideStore } from './provideStore.js'
+import { injectStore } from './injectStore.js'
+
+test('[custom-store/context] (provideStore + injectStore) happy-path', () => {
+  const store1 = createStore().setValue('foo', 'bar')
+  const store2 = createStore().setValue('foo', 'baz')
+  const store1Key = Symbol('store1') as InjectionKey<typeof store1>
+  const store2Key = Symbol('store2') as InjectionKey<typeof store2>
+
+  const ChildComponent = defineComponent({
+    setup() {
+      const store1 = injectStore(store1Key)
+      const store2 = injectStore(store2Key)
+
+      const value1 = store1.getValue('foo')
+      const value2 = store2.getValue('foo')
+
+      return () => h('div', null, `${value1} ${value2}`)
+    },
+  })
+
+  const ParentComponent = defineComponent({
+    setup() {
+      provideStore(store1Key, store1)
+      provideStore(store2Key, store2)
+
+      return () => h(ChildComponent)
+    },
+  })
+
+  const wrapper = mount(ParentComponent)
+
+  expect(wrapper.text()).toBe('bar baz')
+})
+
+test('[custom-store/context] (injectStore) missing store in context', () => {
+  const storeKey = Symbol('store1')
+
+  const ChildComponent = defineComponent({
+    setup() {
+      injectStore(storeKey)
+      return () => h('div')
+    },
+  })
+
+  const fn = () => mount(ChildComponent)
+
+  expect(fn).toThrowError('[tinybase-vue] (injectStore): Could not find store with key Symbol(store1)')
+})

packages/public/vue-tinybase/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "extends": "@tsconfig/node20/tsconfig.json",
   "include": ["src/**/*"],
+  "exclude": ["src/**/*.test.ts"],
   "compilerOptions": {
     "composite": true,
     "rootDir": "src",