fix(testing): allow writable pinia getters in Vue 2

[heykc]

Description:

This allows Pinia store getters in Vue 2 apps to be reassigned as shown in the test here.

Related Issues:

Close #1200

Testing Notes:

I wasn't able to write a test for this directly into the pinia/testing repo due to the fact that I would need to use the vue-demi switch 2 vue2 npm script, which requires me to install vue/composition api, which then causes a number of peer dependency issues. I talk about this further in the Issue attached.

Code Notes:

I'm not married to the nested ternary, and I don't know if there's a precedence for optional chaining, so I'm happy to adjust any of these.

[netlify]

✅ Deploy Preview for pinia-official canceled.

Name	Link
🔨 Latest commit	5be65eb
🔍 Latest deploy log	https://app.netlify.com/sites/pinia-official/deploys/624b60d5fd577800099404fd

[posva]

shouldn't this be

Suggested change

	return internalValue !== undefined ? internalValue : (isVue2Getter ? value : value.value)
	return internalValue !== undefined ? internalValue : (isVue2Getter ? store[key] : value.value)

I haven't tested it but I don't think reading value will be reactive

[heykc]

@posva ah, you're right, the reactivity isn't retained with just value. though using store[key] causes an infinite get loop 😅 I think the correct move here would be to call the function from options.getters, no?

Suggested change

	return internalValue !== undefined ? internalValue : (isVue2Getter ? value : value.value)
	return internalValue !== undefined ? internalValue : (isVue2Getter ? options.getters: value.value)

[posva]

Ah true about the infinite loop! The problem with options is that it’s not always there eg setup stores. I think there is an open issue in composition api regarding the detection of computed properties. We will likely need to push that forward instead

[heykc]

Hmmm I think I see what you're saying. Are you referring to someone using setup stores in vue 2? I wasn't aware that was possible. If that's the case then yeah, you're right. this wouldn't work for that particular scenario.

[posva]

Yes

[heykc]

@posva I was looking into the vue/composition-api plugin docs a little more and it looks like you merged a PR that does differentiate computed properties in composition. Since you're looking for effect in your isComputed function and I'm looking for options.getters?.[key] in isVue2Getter, that tells me that all bases are covered here. isVue2Getters couldn't be true if there were no options.getters object in the store.

I'm going to add another test to the mock project I'm using to test vue2 with the vue/composition-api plugin to confirm, but does this sound right to you?

[posva]

The problem is toRaw() doesn't work in composition-api

[heykc]

Hey @posva sorry about the radio silence, got busy these last couple weeks. Based on your feedback it sounds like we should close this PR but maybe leave the issue? Would you agree?

[posva]

It’s up to you: it’s okay if you want to keep it open for later

[MisterIsaak]

So is there a known workaround to mock getters in Vue2? So far I've been resorting to supplying the required state data to have the getters return as expected. But it's fairly verbose at times for complex getters.

[rhysv96]

also interested in mocking getters in vue 2. if i mock the state then that means im also testing store code, which isnt ideal for component unit tests.

[heykc]

This is how I've been getting around it IF you're writing getters in pinia with Options API. I mocked the utilization to be fairly similar to how initialState is structured (storeId key, an object of getters as value). Example below it.

/**
 * A Pinia plugin for mocking getters in component tests.
 *
 * @param {object} gettersMap
 * @returns {Function}
 */
export const initialGetters = (gettersMap) => ({ store, options }) => {
  if (gettersMap[store.$id]) {
    Object.keys(options.getters).forEach((getter) => {
      Object.defineProperty(store, getter, {
        get: () => gettersMap[store.$id][getter] || options.getters[getter],
      });
    });
  }
};

// Example.spec.js

mount(Example, {
  pinia: createTestingPinia({
    plugins: [
      initialGetters({
        myStore: {
          someGetter: jest.fn(),
          anotherGetter: jest.fn(() => 12),
        },
      }),
    ],
  }),
});

[Graphmaxer]

Any news ?