[#77] #35 review follow-up (#78)

skwirowski · Jan 17, 2021 · 00eb18b · 00eb18b
1 parent 6446ed5
commit 00eb18b
Show file tree

Hide file tree

Showing 7 changed files with 19 additions and 20 deletions.
diff --git a/src/app/components/gameRules.js b/src/app/components/gameRules.js
@@ -29,7 +29,7 @@ function renderRules(mode) {
   attachRankingButtonCallback();
 
   // Remove children of swquiz-game-body
-  let gameBodyElement = document.getElementById('swquiz-game-body');
+  let gameBodyElement = document.querySelector('#swquiz-game-body');
   gameBodyElement.innerHTML = '';
 
   // Render rules for selected mode

diff --git a/src/app/components/mainWindow.js b/src/app/components/mainWindow.js
@@ -11,7 +11,7 @@ import { getImage } from '../logic/generatingQuestions/gettingImage'
 export const playerAnswers = [];
 export const computerAnswers = [];
 function fillMainWindowHTML() {
-  let quizBody = document.getElementById('swquiz-body');
+  let quizBody = document.querySelector('#swquiz-body');
 
   let quizGame = createDiv('swquiz-game', 'swquiz-game');
   let quizGameHeader = createDiv('swquiz-game-header', 'swquiz-game-header');
@@ -40,7 +40,7 @@ function fillMainWindowHTML() {
 async function mainWindow(maxTime) {
   fillMainWindowHTML();
 
-  mainMenu(document.getElementById('swquiz-header'), setGameMode);
+  mainMenu(document.querySelector('#swquiz-header'), setGameMode);
 
   redButton('play the game');
   whiteButton('Hall of fame');

diff --git a/src/app/components/ranking.js b/src/app/components/ranking.js
@@ -48,7 +48,7 @@ function createRankingHeader() {
 }
 
 function ranking(scoreList) {
-  let parent = document.getElementById('swquiz-game-body');
+  let parent = document.querySelector('#swquiz-game-body');
 
   let ranking = createDiv('box', 'ranking-box');
 
@@ -77,7 +77,7 @@ function renderRanking(mode) {
   attachRulesButtonCallback();
 
   // Remove children of swquiz-game-body
-  let gameBodyElement = document.getElementById('swquiz-game-body');
+  let gameBodyElement = document.querySelector('#swquiz-game-body');
   gameBodyElement.innerHTML = '';
 
   // Render ranking for selected mode

diff --git a/src/app/gameMode.js b/src/app/gameMode.js
@@ -7,7 +7,7 @@ export const STARSHIPS_MODE_QUESTION_STRING =
   'MODE: Do you recognize this starship?';
 
 export const gameMode = (text) => {
-  const app = document.getElementById('swquiz-game-header');
+  const app = document.querySelector('#swquiz-game-header');
   const questionDiv = document.createElement('div');
 
   questionDiv.id = 'question';

diff --git a/src/app/imageRecognizer.js b/src/app/imageRecognizer.js
@@ -1,5 +1,5 @@
 export const imageRecognizer = (img) => {
-  const app = document.getElementById('swquiz-body');
+  const app = document.querySelector('#swquiz-body');
   const imageElement = document.createElement('img');
   //btoa('string') - encode a string
   //function decodes a string of data which has been encoded using Base64 encoding.

diff --git a/src/app/modes.js b/src/app/modes.js
@@ -23,7 +23,7 @@ export function getGameMode() {
 }
 
 function changeRules(mode) {
-  let ruleBox = document.getElementById('game-rules-box');
+  let ruleBox = document.querySelector('#game-rules-box');
 
   if (ruleBox) {
     let p = ruleBox.getElementsByTagName('p')[1]; // first one is header
@@ -32,15 +32,15 @@ function changeRules(mode) {
 }
 
 function changeRanking(mode) {
-  let rankingBox = document.getElementById('ranking-box');
+  let rankingBox = document.querySelector('#ranking-box');
 
   if (rankingBox) {
     renderRanking(mode);
   }
 }
 
 function changeQuestion(mode) {
-  let questionElement = document.getElementById('question');
+  let questionElement = document.querySelector('#question');
 
   if (questionElement) {
     questionElement.innerHTML = getGameModeQuestion(mode);

diff --git a/test/app/components/mainWindow.test.js b/test/app/components/mainWindow.test.js
@@ -12,26 +12,25 @@ test('screen shows main window with rules', () => {
 
   mainWindow();
   // Test against menu
-  expect(document.getElementById('swquiz-header')).toBeTruthy();
-  expect(document.getElementById('menuContainer')).toBeTruthy();
+  expect(document.querySelector('#menuContainer')).toBeTruthy();
 
   // Test against game body
-  expect(document.getElementById('swquiz-body')).toBeTruthy();
+  expect(document.querySelector('#swquiz-body')).toBeTruthy();
 
   // Game question
-  expect(document.getElementById('swquiz-game-header')).toBeTruthy();
-  expect(document.getElementById('question')).toBeTruthy();
+  expect(document.querySelector('#swquiz-game-header')).toBeTruthy();
+  expect(document.querySelector('#question')).toBeTruthy();
 
   // Game rules
-  expect(document.getElementById('swquiz-game-body')).toBeTruthy();
+  expect(document.querySelector('#swquiz-game-body')).toBeTruthy();
 
   // Game white button
-  expect(document.getElementById('swquiz-game-footer-left')).toBeTruthy();
-  expect(document.getElementById('white-button')).toBeTruthy();
+  expect(document.querySelector('#swquiz-game-footer-left')).toBeTruthy();
+  expect(document.querySelector('#white-button')).toBeTruthy();
 
   // Game red button
-  expect(document.getElementById('swquiz-game-footer-right')).toBeTruthy();
-  expect(document.getElementById('red-button')).toBeTruthy();
+  expect(document.querySelector('#swquiz-game-footer-right')).toBeTruthy();
+  expect(document.querySelector('#red-button')).toBeTruthy();
 
   // Left Image
   expect(screen.getByTestId('imgRecognizer')).toBeTruthy();