chore(e2e): create test for hiding player's screens

Makefile

@@ -62,12 +62,14 @@ dev-down:
 	docker compose -p famf -f ./docker/${COMPOSE_FILE} down
 
 e2e: dev-background
+	npm install
 	cd e2e
 	npx playwright test
 	cd -
 	$(MAKE) dev-down
 
 e2e-ui: dev-background
+	npm install
 	cd e2e	
 	npx playwright test --ui
 	cd -

components/Admin/players.js

@@ -32,6 +32,7 @@ export default function Players(props) {
               {/* Toggle visibility button */}
               <button
                 className={`border-4 ${x.hidden ? 'bg-secondary-300' : 'bg-success-300'} hover:opacity-80 p-2 rounded-lg`}
+                id={`player${i}Team${teamNumber}HideGameButton`}
                 onClick={() => {
                   game.registeredPlayers[x.id].hidden = !game.registeredPlayers[x.id].hidden;
                   props.setGame((prv) => ({ ...prv }));

components/buzzer.js

@@ -121,7 +121,7 @@ export default function Buzzer(props) {
   const currentPlayer = game.registeredPlayers[props.id];
   if (currentPlayer?.hidden) return (
     <div className="flex flex-col justify-center items-center min-h-screen">
-      <h1>{t("You have been blindfolded...")}</h1>
+      <h1 id="playerBlindFoldedText">{t("You have been blindfolded...")}</h1>
     </div>
   );
 

e2e/tests/admin.spec.js

@@ -288,3 +288,17 @@ test("can track points between rounds", async ({ browser }) => {
     expect (await gamePage.roundPointsTeamtotal.textContent()).toBe(pointsTotal.toString())
   }).toPass({ timeout: 2000 });
 });
+
+test('can hide game board from player', async ({ browser }) => {
+  const s = new Setup(browser);
+  const host = await s.host();
+  const player1 = await s.addPlayer();
+  const buzzerPage1 = new BuzzerPage(player1.page);
+
+  const adminPage = new AdminPage(host.page);
+  await adminPage.gameSelector.selectOption({ index: 1 });
+  await adminPage.startRoundOneButton.click();
+  expect(buzzerPage1.playerBlindFoldedText).not.toBeVisible();
+  await adminPage.player0Team1HideGameButton.click();
+  expect(buzzerPage1.playerBlindFoldedText).toBeVisible();
+});

e2e/tests/models/AdminPage.js

@@ -146,6 +146,16 @@ class AdminPage {
     this.player2Team2QuitButton = page.getByTestId("player2Team2QuitButton")
     this.player3Team2QuitButton = page.getByTestId("player3Team2QuitButton")
 
+    this.player0Team1HideGameButton = page.getByTestId("player0Team1HideGameButton")
+    this.player1Team1HideGameButton = page.getByTestId("player1Team1HideGameButton")
+    this.player2Team1HideGameButton = page.getByTestId("player2Team1HideGameButton")
+    this.player3Team1HideGameButton = page.getByTestId("player3Team1HideGameButton")
+
+    this.player0Team2HideGameButton = page.getByTestId("player0Team2HideGameButton")
+    this.player1Team2HideGameButton = page.getByTestId("player1Team2HideGameButton")
+    this.player2Team2HideGameButton = page.getByTestId("player2Team2HideGameButton")
+    this.player3Team2HideGameButton = page.getByTestId("player3Team2HideGameButton")
+
     this.team0MistakeButton = page.getByTestId("team0MistakeButton")
     this.team1MistakeButton = page.getByTestId("team1MistakeButton")
     this.team0GivePointsButton = page.getByTestId("team0GivePointsButton")

e2e/tests/models/BuzzerPage.js

@@ -49,6 +49,7 @@ class BuzzerPage {
     this.titleLogoUserUploaded = page.getByTestId("titleLogoUserUploaded");
     this.waitingForHostText = page.getByTestId("waitingForHostText");
     this.xImg = page.getByTestId("xImg");
+    this.playerBlindFoldedText = page.getByTestId("playerBlindFoldedText")
   }
 }