ci(frontend): Add frontend workflow (#12)

* ci: Add frontend workflow

* test: fix game-card.test.tsx

* feat: update rating.tsx

---------

Co-authored-by: joaoGabriel55 <j.quaresmasantos_98@hotmail.com>

.github/workflows/nextjs.yml

@@ -0,0 +1,27 @@
+# Based off of https://gist.github.com/alexng353/80f4457738b9f312f18ed6f5772ffeac
+
+name: "Next.js CI"
+on:
+  push:
+    branches: ["main"]
+  pull_request:
+    branches: ["main"]
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: "20"
+
+      - name: Install dependencies
+        run: npm install
+        working-directory: ./frontend
+
+      - name: Run tests
+        run: npm test
+        working-directory: ./frontend

frontend/src/shared/components/rating/rating.tsx

@@ -9,11 +9,11 @@ export default function Rating({ stars, size }: Props) {
   const starSize = size ?? 24
 
   return (
-    <div className='flex'>
+    <div className="flex gap-1">
       {Array.from({ length: stars }).map((_, index) => (
         <StarIcon
           key={index}
-          className="mx-1"
+          data-testid='rating-star'
           width={starSize}
           height={starSize}
         />

frontend/src/views/home/components/game-card/game-card.test.tsx

@@ -15,7 +15,7 @@ describe('GameCard', () => {
 
     expect(screen.getByText('The Witcher 3: Wild Hunt')).to.exist
     expect(screen.getByAltText('The Witcher 3: Wild Hunt')).to.exist
-    expect(screen.getAllByAltText('Media rating star').length).to.be.equal(5)
+    expect(screen.getAllByTestId('rating-star').length).to.be.equal(5)
     expect(screen.getByText('2021')).to.exist
   })