Skip to content

Replace Vue Redux with Pinia - #112

Open
crookedneighbor wants to merge 19 commits into
mainfrom
pinia-with-tests
Open

Replace Vue Redux with Pinia#112
crookedneighbor wants to merge 19 commits into
mainfrom
pinia-with-tests

Conversation

@crookedneighbor

Copy link
Copy Markdown
Collaborator

This is a spike, so I only converted the config store, not the game store. If we like this approach, happy to convert over the game store as well. I've PR'd this into the add-testing-library branch so we can see more easily how much easier it is to work with this system as the store in the testing environment.

First time using pinia, overall, I like a ton better then the store we're currently using. I find it much easier to reason what's going on with it.

Functional changes:

  • updated the default config to set the theme to Dark if the value in local storage does not correspond to light or dark mode
  • update the autocomplete setting to false if the value in local storage is anything other than "true"

^ Users who are not messing with local storage should never see any difference

@scarletcs
scarletcs self-requested a review May 3, 2025 18:43
Comment thread package.json Outdated
Comment thread src/App.vue Outdated
@crookedneighbor crookedneighbor changed the title Spike: try out pinia with config store Replace Vue Redux with Pinia May 9, 2025
Comment thread src/store/__test__/game.test.ts
Comment on lines +110 to +134
it("manages card state for successful queries", async () => {
const game = useGameStore();

vi.mocked(ScryfallApiInstance.getRandomArt).mockImplementation(() => {
return new Promise((resolve) => {
finishApiCall = resolve;
});
});
game.query = { search: "query" };
game.card = CardBank.ArborElf;

const fetchPromise = game.fetchNextCard();
await nextTick();

expect(game.nextCardStatus).toEqual(LoadingStatus.Pending);
expect(game.previousCard).toEqual(CardBank.ArborElf);
expect(game.card).toEqual(CardBank.ArborElf);

finishApiCall(CardBank.Jolene);
await fetchPromise;

expect(game.nextCardStatus).toEqual(LoadingStatus.Success);
expect(game.previousCard).toEqual(CardBank.ArborElf);
expect(game.card).toEqual(CardBank.Jolene);
});

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don't love how this pattern of delaying the api response this way, but it was the best way I could figure out to assert on the state of the store before the api call finished. Open to suggestions though.

@crookedneighbor
crookedneighbor changed the base branch from add-testing-library to main May 10, 2025 12:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants