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

src/components/PokemonCard/PokemonCard.stories.tsx

@@ -30,3 +30,13 @@ export const Bulbasaur: Story = {
     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/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[]) => {
+export const colorTypeGradients = (types: string[]): string[] => {
-  let color2;
+  const color1: string = getColor(types[0]);
-  const color1 = 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;
   }