fix(frontend): update skills section

src/components/SkillItem/index.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import toCamelCase from '@frontend/utils/toCamelCase';
 import { useTheme } from 'next-themes';
 import { useEffect } from 'react';
 import type { IconType } from 'react-icons';
@@ -24,7 +25,7 @@ const SkillItem = ({ icon, text }: SkillItemProps) => {
 
   return (
     <li>
-      <span className={styles.bg} data-testid={`${text}-icon`}>
+      <span className={styles.bg} data-testid={`${toCamelCase(text)}-icon`}>
         {icon({
           size: 30,
           className: styles.skillIcon,

src/components/Skills/index.tsx

@@ -86,7 +86,7 @@ export const skills: SkillItemProps[] = [
   },
   {
     icon: SiStyledComponents,
-    text: 'Styled component',
+    text: 'CSS in JS',
   },
   {
     icon: BiTestTube,

src/utils/__tests__/toCamelCase.test.ts

@@ -1,21 +1,15 @@
 import toCamelCase from '../toCamelCase';
 
 describe('toCamelCase', () => {
-  test('should convert a string to camel case', () => {
+  test('converts string to camel-case', () => {
     const str = 'Hello World';
     const result = toCamelCase(str);
-    expect(result).toBe('HelloWorld');
+    expect(result).toEqual('HelloWorld');
   });
 
-  test('should convert a string to camel case', () => {
-    const str = 'Hello World';
-    const result = toCamelCase(str);
-    expect(result).toBe('HelloWorld');
-  });
-
-  test('should convert a string to camel case', () => {
-    const str = 'Hello World';
+  test('multiple gaps get converted to camel-case', () => {
+    const str = 'AWS Azure Vercel';
     const result = toCamelCase(str);
-    expect(result).toBe('HelloWorld');
+    expect(result).toEqual('AWSAzureVercel');
   });
 });