Fixed PokemonCard render issue for single type, by using unit test

.storybook/main.ts

@@ -1,6 +1,9 @@
+import { StorybookConfig } from '@storybook/react-webpack5';
+
 const path = require('path');
 const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
-module.exports = {
+
+const config: StorybookConfig = {
   stories: ['../src/**/*.stories.tsx'],
   addons: [
     '@storybook/addon-links',
@@ -13,6 +16,9 @@ module.exports = {
     options: {},
   },
   webpackFinal: async config => {
+    if (!config.resolve) {
+      config.resolve = {};
+    }
     config.resolve.plugins = config.resolve.plugins || [];
     config.resolve.plugins.push(
       new TsconfigPathsPlugin({
@@ -25,3 +31,5 @@ module.exports = {
     autodocs: true,
   },
 };
+
+export default config;

.storybook/preview.js

@@ -1,11 +0,0 @@
-import 'index.css';
-
-export const parameters = {
-  actions: { argTypesRegex: '^on[A-Z].*' },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
-};

.storybook/preview.ts

@@ -0,0 +1,7 @@
+import 'index.css';
+
+import { Preview } from '@storybook/react';
+
+const preview: Preview = {};
+
+export default preview;

src/components/EvolutionSpecies/EvolutionSpecies.stories.tsx

@@ -1,35 +1,29 @@
-import EvolutionSpecies, { EvolutionSpeciesProps } from './EvolutionSpecies';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
-export default {
+import EvolutionSpecies from './EvolutionSpecies';
+
+const meta: Meta<typeof EvolutionSpecies> = {
   title: 'Component/EvolutionSpecies',
   component: EvolutionSpecies,
-} as ComponentMeta<typeof EvolutionSpecies>;
-
-const Template: ComponentStory<typeof EvolutionSpecies> = (
-  args: EvolutionSpeciesProps,
-) => <EvolutionSpecies {...args} />;
-
-export const Primary = Template.bind({});
-Primary.args = {
-  types: ['grass', 'poison'],
-  image_url:
-    'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/1.svg',
-  name: 'Bulbasaur',
 };
 
-export const Bulbasaur = Template.bind({});
-Bulbasaur.args = {
-  types: ['grass', 'poison'],
-  image_url:
-    'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/1.svg',
-  name: 'Bulbasaur',
+export default meta;
+type Story = StoryObj<typeof EvolutionSpecies>;
+
+export const Bulbasaur: Story = {
+  args: {
+    types: ['grass', 'poison'],
+    image_url:
+      'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/1.svg',
+    name: 'Bulbasaur',
+  },
 };
 
-export const Magneton = Template.bind({});
-Magneton.args = {
-  types: ['electric', 'steel'],
-  image_url:
-    'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/82.svg',
-  name: 'Magneton',
+export const Magneton: Story = {
+  args: {
+    types: ['electric', 'steel'],
+    image_url:
+      'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/82.svg',
+    name: 'Magneton',
+  },
 };

src/components/GenderRate/GenderRate.stories.tsx

@@ -1,22 +1,23 @@
-import GenderRate, { GenderRateProps } from './GenderRate';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
-export default {
+import GenderRate from './GenderRate';
+
+const meta: Meta<typeof GenderRate> = {
   title: 'Component/GenderRate',
   component: GenderRate,
-} as ComponentMeta<typeof GenderRate>;
-
-const Template: ComponentStory<typeof GenderRate> = (args: GenderRateProps) => (
-  <GenderRate {...args} />
-);
-
-export const Primary = Template.bind({});
-
-Primary.args = {
-  genderRatio: 0,
 };
 
-export const Option1 = Template.bind({});
-Option1.args = {
-  genderRatio: 1,
+export default meta;
+type Story = StoryObj<typeof GenderRate>;
+
+export const Option1: Story = {
+  args: {
+    genderRatio: 1,
+  },
+};
+
+export const Option2: Story = {
+  args: {
+    genderRatio: 2,
+  },
 };

src/components/InfoDialogComponent/InfoDialogComponent.stories.tsx

@@ -1,52 +1,51 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import InfoDialogComponent, {
-  InfoDialogComponentProps,
-} from './InfoDialogComponent';
+import type { Meta, StoryObj } from '@storybook/react';
 
-export default {
+import InfoDialogComponent from './InfoDialogComponent';
+
+const meta: Meta<typeof InfoDialogComponent> = {
   title: 'Component/InfoDialogComponent',
   component: InfoDialogComponent,
-} as ComponentMeta<typeof InfoDialogComponent>;
-
-const Template: ComponentStory<typeof InfoDialogComponent> = (
-  args: InfoDialogComponentProps,
-) => <InfoDialogComponent {...args} />;
-
-export const Primary = Template.bind({});
-Primary.args = {
-  openDialog: true,
-  id: 84,
-  name: 'Doduo',
-  genera: 'Twin Bird Pokémon',
-  image:
-    'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/84.svg',
-  types: ['normal', 'flying'],
-  height: 14,
-  weight: 392,
-  genderRatio: 4,
-  description:
-    'A bird that makes up for its poor flying with its fast foot speed. Leaves giant footprints.',
-  abilities: ['run-away', 'early-bird', 'tangled-feet'],
-  stats: [
-    { stat__name: 'hp', stat__value: 35 },
-    { stat__name: 'attack', stat__value: 85 },
-    { stat__name: 'defense', stat__value: 45 },
-    { stat__name: 'special-attack', stat__value: 35 },
-    { stat__name: 'special-defense', stat__value: 35 },
-    { stat__name: 'speed', stat__value: 75 },
-  ],
-  evolutionChain: [
-    {
-      types: ['normal', 'flying'],
-      image:
-        'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/84.svg',
-      name: 'Doduo',
-    },
-    {
-      name: 'Dodrio',
-      types: ['normal', 'flying'],
-      image:
-        'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/85.svg',
-    },
-  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof InfoDialogComponent>;
+
+export const Duduo: Story = {
+  args: {
+    openDialog: true,
+    id: 84,
+    name: 'Doduo',
+    genera: 'Twin Bird Pokémon',
+    image:
+      'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/84.svg',
+    types: ['normal', 'flying'],
+    height: 14,
+    weight: 392,
+    genderRatio: 4,
+    description:
+      'A bird that makes up for its poor flying with its fast foot speed. Leaves giant footprints.',
+    abilities: ['run-away', 'early-bird', 'tangled-feet'],
+    stats: [
+      { stat__name: 'hp', stat__value: 35 },
+      { stat__name: 'attack', stat__value: 85 },
+      { stat__name: 'defense', stat__value: 45 },
+      { stat__name: 'special-attack', stat__value: 35 },
+      { stat__name: 'special-defense', stat__value: 35 },
+      { stat__name: 'speed', stat__value: 75 },
+    ],
+    evolutionChain: [
+      {
+        types: ['normal', 'flying'],
+        image:
+          'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/84.svg',
+        name: 'Doduo',
+      },
+      {
+        name: 'Dodrio',
+        types: ['normal', 'flying'],
+        image:
+          'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/85.svg',
+      },
+    ],
+  },
 };

src/components/PokemonCard/PokemonCard.stories.tsx

@@ -1,43 +1,42 @@
-import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-
-import PokemonCard, { PokemonCardProps } from './PokemonCard';
+import PokemonCard from './PokemonCard';
 
 import charizard_svg from './assets/stories/charizard.svg';
 import charizard_info from './assets/stories/charizard.json';
 
-export default {
+const meta: Meta<typeof PokemonCard> = {
   title: 'Component/PokemonCard',
   component: PokemonCard,
-} as ComponentMeta<typeof PokemonCard>;
+};
+export default meta;
+type Story = StoryObj<typeof PokemonCard>;
 
-const Template: ComponentStory<typeof PokemonCard> = (
-  args: PokemonCardProps,
-) => <PokemonCard {...args} />;
-
-export const Primary = Template.bind({});
-
-Primary.args = {
-  id: 6,
-  name: charizard_info.name,
-  image: charizard_svg,
-  types: ['fire', 'flying'],
+export const Charizard: Story = {
+  args: {
+    id: 6,
+    name: charizard_info.name,
+    image: charizard_svg,
+    types: ['fire', 'flying'],
+  },
 };
 
-export const Charizard = Template.bind({});
-Charizard.args = {
-  id: 6,
-  name: charizard_info.name,
-  image: charizard_svg,
-  types: ['fire', 'flying'],
+export const Bulbasaur: Story = {
+  args: {
+    id: 1,
+    name: 'bulbasaur',
+    image:
+      'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/1.svg',
+    types: ['grass', 'poison'],
+  },
 };
 
-export const Bulbasaur = Template.bind({});
-Bulbasaur.args = {
-  id: 1,
-  name: 'bulbasaur',
-  image:
-    'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/1.svg',
-  types: ['grass', 'poison'],
+export const Pikachu: Story = {
+  args: {
+    id: 25,
+    name: 'pikachu',
+    image:
+      'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/25.svg',
+    types: ['electric'],
+  },
 };

src/components/PokemonTypes/PokemonTypes.stories.tsx

@@ -1,35 +1,39 @@
-import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import PokemonTypes from './PokemonTypes';
 
-import PokemonTypes, { PokemonTypesProps } from './PokemonTypes';
-
-export default {
+const meta: Meta<typeof PokemonTypes> = {
   title: 'Component/PokemonTypes',
   component: PokemonTypes,
-} as ComponentMeta<typeof PokemonTypes>;
-
-const Template: ComponentStory<typeof PokemonTypes> = (
-  args: PokemonTypesProps,
-) => <PokemonTypes {...args} />;
-
-export const Primary = Template.bind({});
-
-Primary.args = {
-  types: ['fire'],
 };
 
-export const bulbasaur = Template.bind({});
-bulbasaur.args = {
-  types: ['grass', 'poison'],
+export default meta;
+type Story = StoryObj<typeof PokemonTypes>;
+
+export const fireOnly: Story = {
+  name: 'Fire only',
+  args: {
+    types: ['fire'],
+  },
 };
 
-export const charizard = Template.bind({});
-charizard.args = {
-  types: ['fire', 'flying'],
+export const grassAndPoinson: Story = {
+  name: 'Grass and Poison',
+  args: {
+    types: ['grass', 'poison'],
+  },
 };
 
-export const threetypes = Template.bind({});
-threetypes.args = {
-  types: ['fire', 'flying', 'grass'],
+export const fireAndFlying: Story = {
+  name: 'Fire and Flying',
+  args: {
+    types: ['fire', 'flying'],
+  },
+};
+
+export const threeTypes: Story = {
+  name: 'Fire, Flying and Grass',
+  args: {
+    types: ['fire', 'flying', 'grass'],
+  },
 };

src/components/utils.test.ts

@@ -0,0 +1,7 @@
+import { colorTypeGradients } from './utils';
+
+describe('Test utility functions', () => {
+  it('should return correct color for each type', () => {
+    expect(colorTypeGradients(['grass'])).toBe(['#a8ff98', '#a8ff98']);
+  });
+});

src/components/utils.ts

@@ -1,4 +1,4 @@
-const getColor = (type: string) => {
+const getColor = (type: string): string => {
   let returnColor: string;
   switch (type) {
     case 'grass':
@@ -63,13 +63,13 @@ const getColor = (type: string) => {
   return returnColor;
 };
 
-export const colorTypeGradients = (types: string[]) => {
-  let color2;
-  const color1 = getColor(types[0]);
+export const colorTypeGradients = (types: string[]): string[] => {
+  const color1: string = getColor(types[0]);
+  let color2: string = color1;
 
   if (types.length === 2) {
     color2 = getColor(types[1]);
-  } else if (length === 1) {
+  } else if (types.length === 1) {
     color2 = color1;
   }
 

src/features/Pokedex/Pokedex.stories.tsx

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