[#68] Tests renamed .spec. into .test. (#89)

* Fixed modal background
* Test backported
* Times set to 2 sec
* Word wrap + metadata

index.html

@@ -6,7 +6,7 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
     <title>CodersCamp2020 | Star Wars API QUIZ</title>
     <link rel="stylesheet" href="styles/App.scss"/>
-
+    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
     <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
           rel="stylesheet">
 </head>

src/app/App.js

@@ -1,69 +1,5 @@
 import { doc } from 'prettier';
-import { startTime } from './logic/timer';
-import { generateQuestion } from './logic/generatingQuestions/generateQuestion';
-import { modalGameOver } from './components/modalGameOver';
-import { computerAnswers, mainWindow, playerAnswers } from './components/mainWindow';
-
-const testDataHuman = [
-  {
-    answer: 'Test',
-    correct: 'Test',
-    isCorrect: true,
-    img: '../../static/assets/img/modes/people/1.jpg',
-  },
-  {
-    answer: 'Test',
-    correct: 'Test',
-    isCorrect: true,
-    img: '../../static/assets/img/modes/people/10.jpg',
-  },
-  {
-    answer: 'Test',
-    correct: 'Test',
-    isCorrect: true,
-    img: '../../static/assets/img/modes/people/10.jpg',
-  },
-  {
-    answer: 'Test',
-    correct: 'Test',
-    isCorrect: true,
-    img: '../../static/assets/img/modes/people/10.jpg',
-  },  
-];
-
-const testDataComputer = [
-  {
-    answer: 'Test2',
-    correct: 'Test',
-    isCorrect: false,
-    img: '../../static/assets/img/modes/people/1.jpg',
-  },
-  {
-    answer: 'Test2',
-    correct: 'Test',
-    isCorrect: false,
-    img: '../../static/assets/img/modes/people/10.jpg',
-  },
-  {
-    answer: 'Test',
-    correct: 'Test',
-    isCorrect: true,
-    img: '../../static/assets/img/modes/people/10.jpg',
-  },
-  {
-    answer: 'Test',
-    correct: 'Test',
-    isCorrect: true,
-    img: '../../static/assets/img/modes/people/10.jpg',
-  },
-];
-
-
-const modalSubmitCallback = (e) => {
-  e.preventDefault();
-  console.log('MAY THE FORCE BE WITH YOU!');
-  document.querySelector('.swquiz-modal').style.display = 'none';
-};
+import { mainWindow } from './components/mainWindow';
 
 export const App = ({ options }) => {
   mainWindow(options.quizMaxTime);

src/app/components/mainWindow.js

@@ -27,7 +27,7 @@ function fillMainWindowHTML() {
   );
   let quizGameFooter = createDiv(
     'swquiz-game-footer'
-  )
+  );
 
   quizGame.appendChild(quizGameHeader);
   quizGame.appendChild(quizGameBody);
@@ -46,11 +46,11 @@ async function mainWindow(maxTime) {
   redButton('play the game');
   whiteButton('static/assets/icons/contacts_24px.svg', 'Hall of fame');
   gameMode('Who is this Character?');
-  const default64Image = await getImage('people', 36)
-  imageRecognizer(default64Image)
+  const default64Image = await getImage('people', 36);
+  imageRecognizer(default64Image);
   renderRules(getGameMode());
 
-  quiz(15000) // pass maxTime - this is only for testing
+  quiz(maxTime);
 }
 
 export { mainWindow };

src/app/components/modalGameOver.js

@@ -180,7 +180,9 @@ const modalGameOver = (parent, playerAnswers, computerAnswers, callback) => {
   modal.setAttribute('data-testid', 'gameOverModal');
   if (modal) {
     const appContainer = document.querySelector('#swquiz-app');
-    appContainer.classList.add('modal-overlay');
+    let modalOverlay = document.createElement('div');
+    modalOverlay.classList.add('modal-overlay');
+    appContainer.appendChild(modalOverlay);
   }
   parent.appendChild(modal);
   createHeader(modal, 'Game Over');

src/app/components/whiteButton.js

@@ -1,5 +1,4 @@
 export const whiteButton = (icone , text) => {
-    console.log(`${icone} ${text}`);
     const app = document.getElementById('swquiz-game-footer-left');
     const button = document.createElement('button');
     const paragraph = document.createElement("p");

styles/components/modalGameOver.scss

@@ -13,9 +13,6 @@
   justify-content: space-evenly;
   font-size: 1.5em;
   padding: 3vw;
-  position: fixed;
-  top: 50%;
-  left: 50%;
   transform: translate(-50%, -50%);
   z-index: 1050;
 
@@ -66,6 +63,7 @@
       justify-content: space-evenly;
       margin: 20px 0 20px;
       td {
+        word-wrap: anywhere;
         width: 25%;
         display: flex;
         justify-content: center;
@@ -131,7 +129,7 @@
 
 @media screen and (max-width:1023px){
   .swquiz-modal{
-    height: 90vh;
+
     font-size:2.5vw;
     justify-content: space-between;
     &--middleContainer{

test/mainMenu.test.js

@@ -0,0 +1,27 @@
+import { mainMenu } from '../src/app/components/mainMenu';
+import { screen } from '@testing-library/dom';
+import '@testing-library/jest-dom/extend-expect';
+
+test('Adding nav element to DOM.', () => {
+  const getData = (element) => {
+    return element;
+  };
+  mainMenu(document.body, getData);
+  expect(screen.getByTestId('menuContainer')).toHaveClass('swquiz-menu');
+  expect(screen.getByTestId('menuContainer')).toBeInstanceOf(HTMLElement);
+});
+
+test('Throw error when provided invalid parent argument', () => {
+  const getData = (element) => {
+    return element;
+  };
+  expect(function () {
+    mainMenu(document.bodysss, getData);
+  }).toThrow(new TypeError("First argument isn't an object!"));
+});
+
+test('Throw error when provided invalid callback argument', () => {
+  expect(function () {
+    mainMenu(document.body, 'getData');
+  }).toThrow(new TypeError("Callback argument isn't a function!"));
+});