From fd2e8d0fb23556344cd962325d1a2bb85d8c6769 Mon Sep 17 00:00:00 2001 From: Eduardo San Martin Morote Date: Thu, 8 Apr 2021 15:31:41 +0200 Subject: [PATCH] refactor: adapt v1 changes --- __tests__/mapHelpers.spec.ts | 35 +++++++++++++---------------------- src/mapHelpers.ts | 17 ++++++++++------- 2 files changed, 23 insertions(+), 29 deletions(-) diff --git a/__tests__/mapHelpers.spec.ts b/__tests__/mapHelpers.spec.ts index e39c8508..1215b591 100644 --- a/__tests__/mapHelpers.spec.ts +++ b/__tests__/mapHelpers.spec.ts @@ -5,14 +5,10 @@ import { mapGetters, mapState, mapStores, - PiniaPlugin, setMapStoreSuffix, } from '../src' -import { createLocalVue, mount } from '@vue/test-utils' -import VueCompositionAPI, { - nextTick, - defineComponent, -} from '@vue/composition-api' +import { mount } from '@vue/test-utils' +import { nextTick, defineComponent } from 'vue' describe('Map Helpers', () => { const useCartStore = defineStore({ id: 'cart' }) @@ -41,10 +37,6 @@ describe('Map Helpers', () => { }, }) - const localVue = createLocalVue() - localVue.use(VueCompositionAPI) - localVue.use(PiniaPlugin) - describe('mapStores', () => { it('mapStores computes only once when mapping one store', async () => { const pinia = createPinia() @@ -60,7 +52,7 @@ describe('Map Helpers', () => { }, }) - const wrapper = mount(Component, { localVue, pinia }) + const wrapper = mount(Component, { global: { plugins: [pinia] } }) // const store = useStore() // const other = useCartStore() expect(wrapper.vm.mainStore).toBeDefined() @@ -90,19 +82,17 @@ describe('Map Helpers', () => { }, }) - const wrapper = mount(Component, { localVue, pinia }) + const wrapper = mount(Component, { global: { plugins: [pinia] } }) expect(wrapper.text()).toBe('0 0 cart') await nextTick() - // NOTE: it seems to be the same as the number of stores, probably because - // we use Vue.set - expect(fromStore).toHaveBeenCalledTimes(2) + expect(fromStore).toHaveBeenCalledTimes(1) await wrapper.trigger('click') expect(wrapper.text()).toBe('1 1 cart') - expect(fromStore).toHaveBeenCalledTimes(2) + expect(fromStore).toHaveBeenCalledTimes(1) await wrapper.trigger('click') expect(wrapper.text()).toBe('2 2 cart') - expect(fromStore).toHaveBeenCalledTimes(2) + expect(fromStore).toHaveBeenCalledTimes(1) }) it('can set custom suffix', async () => { @@ -115,9 +105,10 @@ describe('Map Helpers', () => { }, }) - const wrapper = mount(Component, { localVue, pinia }) + const wrapper = mount(Component, { global: { plugins: [pinia] } }) // const store = useStore() // const other = useCartStore() + // @ts-expect-error: by default this shouldn't exist expect(wrapper.vm.main).toBeDefined() expect(wrapper.vm.mainStore).not.toBeDefined() expect(wrapper.text()).toBe('0') @@ -148,7 +139,7 @@ describe('Map Helpers', () => { }, }) - const wrapper = mount(Component, { localVue, pinia }) + const wrapper = mount(Component, { global: { plugins: [pinia] } }) expect(wrapper.text()).toBe(expectedText) } @@ -192,7 +183,7 @@ describe('Map Helpers', () => { }, }) - const wrapper = mount(Component, { localVue, pinia }) + const wrapper = mount(Component, { global: { plugins: [pinia] } }) expect(vm).toBe(wrapper.vm) }) @@ -228,7 +219,7 @@ describe('Map Helpers', () => { }, }) - const wrapper = mount(Component, { localVue, pinia }) + const wrapper = mount(Component, { global: { plugins: [pinia] } }) expect(wrapper.vm.increment()).toBe(undefined) expect(wrapper.vm.setN(4)).toBe(4) @@ -243,7 +234,7 @@ describe('Map Helpers', () => { }, }) - const wrapper = mount(Component, { localVue, pinia }) + const wrapper = mount(Component, { global: { plugins: [pinia] } }) expect(wrapper.vm.inc()).toBe(undefined) expect(wrapper.vm.set(4)).toBe(4) diff --git a/src/mapHelpers.ts b/src/mapHelpers.ts index 42158fad..e9b6de65 100644 --- a/src/mapHelpers.ts +++ b/src/mapHelpers.ts @@ -1,4 +1,4 @@ -import type Vue from 'vue' +import { ComponentInstance } from '@vue/devtools-api' import { GenericStore, GenericStoreDefinition, @@ -51,8 +51,11 @@ function getCachedStore< S extends StateTree = StateTree, G = Record, A = Record ->(vm: Vue, useStore: StoreDefinition): Store { - const cache = vm._pStores || (vm._pStores = {}) +>( + vm: ComponentInstance, + useStore: StoreDefinition +): Store { + const cache = '_pStores' in vm ? vm._pStores : (vm._pStores = {}) const id = useStore.$id return (cache[id] || (cache[id] = useStore(vm.$pinia))) as Store } @@ -228,13 +231,13 @@ export function mapState< ): MapStateReturn | MapStateObjectReturn { return Array.isArray(keysOrMapper) ? keysOrMapper.reduce((reduced, key) => { - reduced[key] = function (this: Vue) { + reduced[key] = function (this: ComponentInstance) { return getCachedStore(this, useStore)[key] } as () => any return reduced }, {} as MapStateReturn) : Object.keys(keysOrMapper).reduce((reduced, key: keyof KeyMapper) => { - reduced[key] = function (this: Vue) { + reduced[key] = function (this: ComponentInstance) { const store = getCachedStore(this, useStore) const storeKey = keysOrMapper[key] // for some reason TS is unable to infer the type of storeKey to be a @@ -342,13 +345,13 @@ export function mapActions< ): MapActionsReturn | MapActionsObjectReturn { return Array.isArray(keysOrMapper) ? keysOrMapper.reduce((reduced, key) => { - reduced[key] = function (this: Vue, ...args: any[]) { + reduced[key] = function (this: ComponentInstance, ...args: any[]) { return (getCachedStore(this, useStore)[key] as Method)(...args) } as Store[keyof A] return reduced }, {} as MapActionsReturn) : Object.keys(keysOrMapper).reduce((reduced, key: keyof KeyMapper) => { - reduced[key] = function (this: Vue, ...args: any[]) { + reduced[key] = function (this: ComponentInstance, ...args: any[]) { return getCachedStore(this, useStore)[keysOrMapper[key]](...args) } as Store[keyof KeyMapper[]] return reduced -- 2.47.3