Merge pull request #18 from OmkarKirpan/feature/update-test-cases

update test case to only pick color buttons

.github/workflows/node.js.yml

@@ -11,7 +11,7 @@ on:
 
 jobs:
   build:
-
+    name: node test
     runs-on: ubuntu-latest
 
     strategy:

README.md

@@ -1,4 +1,4 @@
-# Guess the Colors Game
+# Guess the Colors Game [![Node.js CI](https://github.com/OmkarKirpan/GuessColors/actions/workflows/node.js.yml/badge.svg?branch=main)](https://github.com/OmkarKirpan/GuessColors/actions/workflows/node.js.yml)
 
 This is a simple color guessing game built with React.js and Vite.js. The game is deployed on GitHub Pages and can be played [here](https://omkarkirpan.github.io/GuessColors/).
 

src/__tests__/app.test.js

@@ -2,6 +2,8 @@ import { render, fireEvent } from "@testing-library/react";
 import '@testing-library/jest-dom'
 import App, { generateRandomColor } from "../App";
 
+const buttonColorRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
+
 // Helper function to convert RGB to Hex
 function rgbToHex(rgb) {
   // Choose correct separator
@@ -49,10 +51,10 @@ test("checks for correct answer", () => {
 });
 
 test("checks for wrong answer", () => {
-  const { getByTestId, getByText, queryByText, getAllByRole} = render(<App />);
+  const { getByTestId, getByText, queryByText, getAllByText} = render(<App />);
   const guessMe = getByTestId("guess-me");
   const color = guessMe.style.background;
-  const answers = getAllByRole('button')
+  const answers = getAllByText(buttonColorRegex)
   const incorrectAnswer = Array.from(answers).find(
     (ans) => ans.innerHTML.toUpperCase() !== rgbToHex(color).toUpperCase()
   );