Jason
/
pokertk
1
0
Fork 0
Code Issues Pull Requests Projects 1 Releases Wiki Activity

Implemented functional Pokedex.stories.tsx by using decorator to connect Pokedex component with redux store

develop
Jason Zhu 2023-05-15 20:30:11 +10:00
parent 05d31c55a9
commit 50e64b5197
1 changed files with 29 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/features/Pokedex/Pokedex.stories.tsx
View File

@ -1,16 +1,15 @@
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
import { configureStore, createSlice } from '@reduxjs/toolkit'; import { configureStore, createSlice } from '@reduxjs/toolkit';
import type { Meta } from '@storybook/react';
import Pokedex, { PokedexProps } from './Pokedex'; import Pokedex from './Pokedex';
import * as PokemonCardStories from 'components/PokemonCard/PokemonCard.stories';
import { initialState } from './pokedexSlice'; import { initialState } from './pokedexSlice';
import { PokedexStateProps } from './types/slice'; import { PokedexStateProps } from './types/slice';
import { ComponentStory } from '@storybook/react';
const Mockstate = { const MockedState = {
// Copied from Redux DevTools from browser // Copied from Redux DevTools from browser
pokedex: { pokedex: {
isLoadingPokemons: true, isLoadingPokemons: false,
pokemonCardList: [ pokemonCardList: [
{ {
id: 1, id: 1,
@ -54,6 +53,13 @@ const Mockstate = {
'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/6.svg', 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/6.svg',
types: ['fire', 'flying'], types: ['fire', 'flying'],
}, },
{
id: 7,
name: 'squirtle',
image:
'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/7.svg',
types: ['water'],
},
], ],
}, },
filter: { filter: {
@ -88,6 +94,7 @@ interface MockStoreProps {
children: React.ReactNode; children: React.ReactNode;
} }
// Create a mock store
const mockSlice = (pokedexState: PokedexStateProps) => { const mockSlice = (pokedexState: PokedexStateProps) => {
return createSlice({ return createSlice({
name: 'pokedex', name: 'pokedex',
@ -99,7 +106,6 @@ const mockSlice = (pokedexState: PokedexStateProps) => {
}, },
}); });
}; };
const mockStore = (pokedexState: PokedexStateProps) => { const mockStore = (pokedexState: PokedexStateProps) => {
return configureStore({ return configureStore({
reducer: { reducer: {
@ -107,13 +113,11 @@ const mockStore = (pokedexState: PokedexStateProps) => {
}, },
}); });
}; };
// A super-simple mock of a redux store
const Mockstore: React.FC<MockStoreProps> = ({ pokedexState, children }) => ( const Mockstore: React.FC<MockStoreProps> = ({ pokedexState, children }) => (
<Provider store={mockStore(pokedexState)}>{children}</Provider> <Provider store={mockStore(pokedexState)}>{children}</Provider>
); );
export default { const meta: Meta<typeof Pokedex> = {
component: Pokedex, component: Pokedex,
title: 'features/Pokedex', title: 'features/Pokedex',
decorators: [ decorators: [
@ -125,7 +129,9 @@ export default {
excludeStories: /.*MockedState$/, excludeStories: /.*MockedState$/,
}; };
export const Default = { export default meta;
export const Loding = {
decorators: [ decorators: [
(story: () => React.ReactNode) => ( (story: () => React.ReactNode) => (
<Mockstore pokedexState={initialState}>{story()}</Mockstore> <Mockstore pokedexState={initialState}>{story()}</Mockstore>
@ -133,14 +139,16 @@ export const Default = {
], ],
}; };
// const Template: ComponentStory<typeof Pokedex> = (args: PokedexProps) => ( export const Primary = {
// <Pokedex {...args} /> decorators: [
// ); (story: () => React.ReactNode) => (
// <Mockstore pokedexState={MockedState.pokedex}>{story()}</Mockstore>
// export const Primary = Template.bind({}); ),
// Primary.args = { ],
// selectedRegion: 'kanto', args: {
// selectedType: 'All Types', selectedRegion: 'kanto',
// selectedSort: 'id', selectedType: 'All Types',
// searchInput: '', selectedSort: 'id',
// }; searchInput: '',
},
};