From 8c442946d3adbe9891f876d119eb7fe2d227a456 Mon Sep 17 00:00:00 2001
From: Jason Zhu <jasonzhuyq@outlook.com>
Date: Mon, 15 May 2023 21:21:45 +1000
Subject: [PATCH] Fixed PokemonCard render issue for single type, by using unit
 test

---
 src/components/PokemonCard/PokemonCard.stories.tsx | 10 ++++++++++
 src/components/utils.test.ts                       |  7 +++++++
 src/components/utils.ts                            | 10 +++++-----
 3 files changed, 22 insertions(+), 5 deletions(-)
 create mode 100644 src/components/utils.test.ts

diff --git a/src/components/PokemonCard/PokemonCard.stories.tsx b/src/components/PokemonCard/PokemonCard.stories.tsx
index fea7236..9fc395c 100644
--- a/src/components/PokemonCard/PokemonCard.stories.tsx
+++ b/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'],
+  },
+};
diff --git a/src/components/utils.test.ts b/src/components/utils.test.ts
new file mode 100644
index 0000000..7724a2f
--- /dev/null
+++ b/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']);
+  });
+});
diff --git a/src/components/utils.ts b/src/components/utils.ts
index a32761b..9c65860 100644
--- a/src/components/utils.ts
+++ b/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;
   }