Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

WritableComputed doesn't find getters for Vue2 testing #1200

Open
heykc opened this issue Apr 4, 2022 · 8 comments · May be fixed by #1201
Open

WritableComputed doesn't find getters for Vue2 testing #1200

heykc opened this issue Apr 4, 2022 · 8 comments · May be fixed by #1201
Labels
bug Something isn't working 🧪 pkg:testing Related to the @pinia/testing package vue 2.x Specific to Vue 2 usage

Comments

@heykc
Copy link

heykc commented Apr 4, 2022 •
edited

Reproduction

https://github.com/heykc/pinia-test

Steps to reproduce the bug

  1. pull down the repo above
  2. run the test
  3. notice test fails with a warning of [Vue warn]: Write operation failed: computed value is readonly.

Expected behavior

The test should successfully reassign the double getter to a new value, and the expectation following should pass.

This test is nearly identical to the test inside of @pinia/testing called allows overriding computed properties but runs with a Vue 2 instance instead.

Actual behavior

The test fails with a warning of [Vue warn]: Write operation failed: computed value is readonly.

Additional information

I believe this is due to the fact that the WritableComputed function in @pinia/testing/testing.ts only looks for refs when checking for computed properties. In Vue 2, there are no refs and therefore none of the getters within a given store are spotted within this function.

I have a proposed solution which is to check for Vue2 specifically and confirm there are getters within the options of the store. The code below is an example of my solution:

function WritableComputed({ store, options }: PiniaPluginContext) {
  const rawStore = toRaw(store)
  for (const key in rawStore) {
    const value = rawStore[key]
    // Vue 2 pinia getters are not refs and have to be found a different way than isComputed()
    const isVue2Getter = isVue2 && options.getters?.[key]
    if (isComputed(value) || isVue2Getter) {
      rawStore[key] = customRef((track, trigger) => {
        let internalValue: any
        return {
          get: () => {
            track()
            // since Vue2 getters are just functions and not refs, they don't have a value property
            return internalValue !== undefined ? internalValue : (isVue2Getter ? value : value.value)
          },
          set: (newValue) => {
            internalValue = newValue
            trigger()
          },
        }
      })
    }
  }
}

I'd be happy to put in a pull request but I couldn't figure out a way to reproduce this test directly in the pinia/testing repo. It would have required a way to switch vue-demi to vue2 which caused a lot of peer dependency conflicts. I'd love to find out the best way to write a test for this particular instance to go along with this code fix.

I'm also not married to the isVue2Getter variable name or the nested ternary. Open to code suggestions on this.
@heykc heykc changed the title WritableComputed doesn't find getters for Vue2 WritableComputed doesn't find getters for Vue2 testing Apr 4, 2022
@heykc heykc linked a pull request Apr 4, 2022 that will close this issue
Open
@posva posva added bug Something isn't working 🧪 pkg:testing Related to the @pinia/testing package labels Apr 7, 2022
@kingyue737
Copy link

Currently, is there a way to mock getters in Vue 2?

@frsimond
Copy link

frsimond commented Sep 7, 2022

Since Vue2.7, any news on this matter ?

@posva posva added the vue 2.x Specific to Vue 2 usage label Oct 8, 2022
@stephanos-square
Copy link

Is there a workaround?

@dennybiasiolli
Copy link

@stephanos-square you need to set the state instead, in order to make the getter generate the value you want

@vate
Copy link

vate commented Apr 20, 2023

@stephanos-square you need to set the state instead, in order to make the getter generate the value you want

Didn't work for me, the state was changed, but the related getters didn't react to that change

@dennybiasiolli
Copy link

@stephanos-square you need to set the state instead, in order to make the getter generate the value you want

Didn't work for me, the state was changed, but the related getters didn't react to that change

Do you have an example repo? It could be something related to the lifecycle of your test case. If you could share the code I can check it

@vate
Copy link

vate commented Apr 20, 2023

@stephanos-square you need to set the state instead, in order to make the getter generate the value you want

Didn't work for me, the state was changed, but the related getters didn't react to that change

Do you have an example repo? It could be something related to the lifecycle of your test case. If you could share the code I can check it

Here is an abridged version of what I have:

I have a factory:

const factory = () => {
	return mount(myComponent, {
		pinia: createTestingPinia(),
		localVue
	});
};

Then in the tests:

it("Shows the footer button as disabled when loading", async () => {
		wrapper = factory({});
		const loadingStore = useLoadingStore();
		loadingStore._loadingStack = ["loadingContext"];
		console.log(loadingStore._loadingStack , loadingStore.isLoading ) // logs "["loadingContext"], false"
		const footer = wrapper.find('[data-testid="footer"]');
		expect(footer.findComponent(ButtonComponent).classes("disabled")).toBe(true);
});

The console log I inserted yields the _loadingStack state which I can effectively modify, but the resulting computed isLoading checks for the length > 0 of the _loadingStack array, but, as you see, it still returns false. I have tried inserting some nexTicks in the process, but with no results.

@dennybiasiolli
Copy link

What about the code in your component and in the loadingStore? Maybe there's something strange there. Can you share the repo or a (not)working example?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working 🧪 pkg:testing Related to the @pinia/testing package vue 2.x Specific to Vue 2 usage
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(testing): allow writable pinia getters in Vue 2 heykc/pinia
7 participants
@posva @vate @frsimond @heykc @dennybiasiolli @kingyue737 @stephanos-square