diff --git a/package.json b/package.json index dbd2af0..9209fb0 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "clean": "rimraf .cache && rimraf coverage && rimraf dist && rimraf node_modules", "prebuild": "rimraf dist", "build": "parcel build index.html --public-url ./", - "format": "prettier --write \"src/**/*.js\" \"styles/**/*.css\" \"test/**/*.js\"", + "format": "prettier --write \"src/**/*.js\" \"styles/**/*.scss\" \"test/**/*.js\"", "start:dev": "parcel -p 8765 watch index.html", "test": "jest", "test:watch": "jest --watch", diff --git a/src/app/App.js b/src/app/App.js index ba824eb..f714019 100644 --- a/src/app/App.js +++ b/src/app/App.js @@ -1,3 +1,4 @@ + import { isAnswerCorrect } from './components/isAnswerCorrect' import { gameMode } from './gameMode' import { redButton } from './redButton' @@ -5,18 +6,89 @@ import { imageRecognizer } from './imageRecognizer' import { mainMenu } from './components/mainMenu' import { startTime } from './logic/timer' import { generateQuestion } from './logic/generatingQuestions/generateQuestion' +import { modalGameOver } from './components/modalGameOver'; + +const testDataHuman = { + q1: { + answer: 'Test', + correct: 'Test', + isCorrect: true, + img: '../../static/assets/img/modes/people/1.jpg', + }, + q2: { + answer: 'Test', + correct: 'Test', + isCorrect: true, + img: '../../static/assets/img/modes/people/10.jpg', + }, + q3: { + answer: 'Test', + correct: 'Test', + isCorrect: true, + img: '../../static/assets/img/modes/people/10.jpg', + }, + q4: { + answer: 'Test', + correct: 'Test', + isCorrect: true, + img: '../../static/assets/img/modes/people/10.jpg', + }, + correct: 1, + total: 2, +}; + + +const testDataComputer = { + q1: { + answer: 'Test2', + correct: 'Test', + isCorrect: false, + img: '../../static/assets/img/modes/people/1.jpg', + }, + q2: { + answer: 'Test2', + correct: 'Test', + isCorrect: false, + img: '../../static/assets/img/modes/people/10.jpg', + }, + q3: { + answer: 'Test', + correct: 'Test', + isCorrect: true, + img: '../../static/assets/img/modes/people/10.jpg', + }, + q4: { + answer: 'Test', + correct: 'Test', + isCorrect: true, + img: '../../static/assets/img/modes/people/10.jpg', + }, + correct: 0, + total: 2, +}; -export const App = ({options}) => { - gameMode('Who is this Character?') - redButton('play the game'); - imageRecognizer('c3RhdGljL2Fzc2V0cy9pbWcvbW9kZXMvcGVvcGxlLzM2LmpwZw==') - const getData = (element) => { - return element; - }; - mainMenu(document.querySelector('.swquiz-header'), getData); - startTime(options.quizMaxTime) - generateQuestion('people').then(res=> console.log(res)) +const getData = (element) => { + return element; +}; -} +const modalSubmitCallback = (e) => { + e.preventDefault(); + console.log('MAY THE FORCE BE WITH YOU!'); + document.querySelector('.swquiz-modal').style.display = 'none'; +}; +export const App = ({ options }) => { + gameMode('Who is this Character?'); + redButton('play the game'); + imageRecognizer('c3RhdGljL2Fzc2V0cy9pbWcvbW9kZXMvcGVvcGxlLzM2LmpwZw=='); + mainMenu(document.querySelector('.swquiz-header'), getData); + modalGameOver( + document.querySelector('#swquiz-app'), + testDataHuman, + testDataComputer, + modalSubmitCallback, + ); + startTime(options.quizMaxTime) + generateQuestion('people').then(res=> console.log(res)) +}; diff --git a/src/app/components/isAnswerCorrect.js b/src/app/components/isAnswerCorrect.js index f5bd547..9ee245a 100644 --- a/src/app/components/isAnswerCorrect.js +++ b/src/app/components/isAnswerCorrect.js @@ -1,11 +1,11 @@ -const isAnswerCorrect = (guess, answer) =>{ - if(typeof guess !== "string"){ - throw new TypeError("Guessed answer isn't string"); - } - if(typeof answer !== "string"){ - throw new TypeError("Guessed answer isn't string"); - } - return guess.toLowerCase() === answer.toLowerCase(); -} +const isAnswerCorrect = (guess, answer) => { + if (typeof guess !== 'string') { + throw new TypeError("Guessed answer isn't string"); + } + if (typeof answer !== 'string') { + throw new TypeError("Guessed answer isn't string"); + } + return guess.toLowerCase() === answer.toLowerCase(); +}; -export {isAnswerCorrect}; +export { isAnswerCorrect }; diff --git a/src/app/components/mainMenu.js b/src/app/components/mainMenu.js index 4369998..5a1489c 100644 --- a/src/app/components/mainMenu.js +++ b/src/app/components/mainMenu.js @@ -17,10 +17,10 @@ const createButton = (className, textContent, callback) => { const mainMenu = (parent, callback) => { if (typeof parent !== 'object') { - throw new Error("First argument isn't an object!"); + throw new TypeError("First argument isn't an object!"); } if (typeof callback !== 'function') { - throw new Error("Callback argument isn't a function!"); + throw new TypeError("Callback argument isn't a function!"); } //Created nav container diff --git a/src/app/components/modalGameOver.js b/src/app/components/modalGameOver.js new file mode 100644 index 0000000..6afedb7 --- /dev/null +++ b/src/app/components/modalGameOver.js @@ -0,0 +1,173 @@ +const createHeader = (parent, textContent) => { + const h1 = document.createElement('h1'); + h1.textContent = textContent; + h1.className = `${parent.className}--header`; + parent.appendChild(h1); +}; + +const createSummaryP = (parent, playerAnswers, computerAnswers) => { + const p = document.createElement('p'); + p.className = `${parent.className}--paragraph`; + p.textContent = `The force is strong in you young Padawan! + During 1 minute you have answered ${playerAnswers.correct} / ${playerAnswers.total} questions. + And Google quessed ${computerAnswers.correct} / ${computerAnswers.total}.`; + parent.appendChild(p); +}; + +const createContainer = (parent, classHTML) => { + const container = document.createElement('div'); + container.className = `${parent.className}--${classHTML}`; + return container; +}; + +const createMidImage = (url, parent) => { + const div = document.createElement('div'); + const img = document.createElement('img'); + div.className = `${parent.className}--photoContainer`; + img.className = `${parent.className}--photo`; + img.src = url; + img.alt = 'Middle Photo'; + div.appendChild(img); + return div; +}; + +const createDetailedAnswerSection = (parent, textContent) => { + const div = document.createElement('div'); + div.className = `${parent.className}--detailedAnswers`; + const p = document.createElement('p'); + p.textContent = textContent; + div.appendChild(p); + return div; +}; + +const isCorrect = (arg) => { + return arg ? 'success' : 'danger'; +}; + +const createDataTable = (parent, playerAnswers, computerAnswers) => { + const table = document.createElement('table'); + const tbody = document.createElement('tbody'); + table.className = `${parent.className}--table`; + const titleRow = ` + + You + Computer + Answer + `; + table.innerHTML = titleRow; + for (let ans in playerAnswers) { + if ( + typeof playerAnswers[ans] === 'object' && + typeof computerAnswers[ans] === 'object' + ) { + const row = ` + QuestionPhoto + ${ + playerAnswers[ans].answer + } + ${ + computerAnswers[ans].answer + } + ${computerAnswers[ans].correct} + `; + tbody.innerHTML += row; + } + } + table.appendChild(tbody); + return table; +}; + +const mergeAndDisplayMiddleSection = ( + parent, + playerAnswers, + computerAnswers, +) => { + const container = createContainer(parent, 'middleContainer'); + const img = createMidImage( + '../../../static/assets/ui/MasterYodaLeft.png', + parent, + ); + const detailedAnswersSection = createDetailedAnswerSection( + parent, + 'Detailed answers', + ); + const table = createDataTable(parent, playerAnswers, computerAnswers); + container.appendChild(img); + detailedAnswersSection.appendChild(table); + container.appendChild(detailedAnswersSection); + + parent.appendChild(container); +}; + +const createForm = (parent, callback) => { + const form = document.createElement('form'); + form.addEventListener('submit', callback); + form.className = `${parent.className}--form`; + return form; +}; + +const createInput = (parent) => { + const input = document.createElement('input'); + input.className = `${parent.className}--nameInput`; + input.id = 'name'; + input.setAttribute('required', ''); + return input; +}; + +const createLabel = (parent, target) => { + const label = document.createElement('label'); + label.className = `${parent.className}--label`; + label.setAttribute('for', target); + label.textContent = + 'Please fill your name in order to recive eternal glory in whole Galaxy!'; + return label; +}; + +const createButton = (parent) => { + const btn = document.createElement('button'); + btn.className = `${parent.className}--button`; + btn.setAttribute('type', 'submit'); + btn.textContent = 'MAY THE FORCE BE WITH YOU!'; + return btn; +}; + +const mergeAndDisplayBottomSection = (parent, callback) => { + const container = createContainer(parent, 'bottomContainer'); + const form = createForm(parent, callback); + const input = createInput(parent); + const label = createLabel(parent, input.id); + const submitButton = createButton(parent); + + container.appendChild(form); + form.appendChild(input); + form.appendChild(label); + form.appendChild(submitButton); + + parent.appendChild(container); +}; + +const modalGameOver = (parent, playerAnswers, computerAnswers, callback) => { + if (typeof playerAnswers !== 'object') { + throw new TypeError("Second argument isn't an object!"); + } + if (typeof computerAnswers !== 'object') { + throw new TypeError("Third argument isn't an object!"); + } + if (typeof callback !== 'function') { + throw new TypeError("Fourth argument isn't a function!"); + } + if (typeof parent !== 'object') { + throw new TypeError("First argument isn't an object!"); + } + const modal = document.createElement('section'); + modal.classList.add('swquiz-modal'); + modal.setAttribute('data-testid', 'gameOverModal'); + + parent.appendChild(modal); + createHeader(modal, 'Game Over'); + createSummaryP(modal, playerAnswers, computerAnswers); + mergeAndDisplayMiddleSection(modal, playerAnswers, computerAnswers); + mergeAndDisplayBottomSection(modal, callback); +}; + +export { modalGameOver }; diff --git a/src/app/components/ranking.js b/src/app/components/ranking.js index 42aa5c1..e71b7d3 100644 --- a/src/app/components/ranking.js +++ b/src/app/components/ranking.js @@ -60,7 +60,7 @@ function ranking(scoreList) { places.forEach((place, index) => { placeholders.push(createEntry(place, scoreList[index])); - }) + }); parent.appendChild(createHeader()); parent.appendChild(createRankingHeader()); diff --git a/src/app/imageRecognizer.js b/src/app/imageRecognizer.js index 5f0c01f..b806d34 100644 --- a/src/app/imageRecognizer.js +++ b/src/app/imageRecognizer.js @@ -1,11 +1,11 @@ export const imageRecognizer = (img) => { - const app = document.querySelector('#swquiz-app') - const imageDiv = document.createElement('div') - //btoa('string') - encode a string - //function decodes a string of data which has been encoded using Base64 encoding. - let image = atob(img) - imageDiv.classList.add('swquiz-app__image') - imageDiv.setAttribute('data-testid', 'imgRecognizer') - imageDiv.style.backgroundImage = `url(${image})` - app.appendChild(imageDiv) -} \ No newline at end of file + const app = document.querySelector('#swquiz-app'); + const imageDiv = document.createElement('div'); + //btoa('string') - encode a string + //function decodes a string of data which has been encoded using Base64 encoding. + let image = atob(img); + imageDiv.classList.add('swquiz-app__image'); + imageDiv.setAttribute('data-testid', 'imgRecognizer'); + imageDiv.style.backgroundImage = `url(${image})`; + app.appendChild(imageDiv); +}; diff --git a/src/app/logic/playerHuman.js b/src/app/logic/playerHuman.js index ab41a15..1778be3 100644 --- a/src/app/logic/playerHuman.js +++ b/src/app/logic/playerHuman.js @@ -1,17 +1,17 @@ export class PlayerHuman { - askQuestion(question, askedQuestion) { - if(askedQuestion) { - return askedQuestion(question); - } else { - throw new TypeError('Player should get question'); - } + askQuestion(question, askedQuestion) { + if (askedQuestion) { + return askedQuestion(question); + } else { + throw new TypeError('Player should get question'); } + } - answerOnQuestion(answer, answerdOnQuestion) { - if(answerdOnQuestion) { - answerdOnQuestion(answer); - } else { - throw new TypeError('Player should answer on asked question'); - } + answerOnQuestion(answer, answerdOnQuestion) { + if (answerdOnQuestion) { + answerdOnQuestion(answer); + } else { + throw new TypeError('Player should answer on asked question'); } -} \ No newline at end of file + } +} diff --git a/styles/App.scss b/styles/App.scss index cc7e4d2..b451333 100644 --- a/styles/App.scss +++ b/styles/App.scss @@ -3,6 +3,7 @@ @import './components/mainMenu.scss'; @import './components/image.scss'; @import './components/redButton.scss'; +@import './components/modalGameOver.scss'; @import './components/ranking.scss'; @import './components/timeLeftText.scss'; diff --git a/styles/components/gameMode.scss b/styles/components/gameMode.scss index 81adc56..c8e3e2b 100644 --- a/styles/components/gameMode.scss +++ b/styles/components/gameMode.scss @@ -1,14 +1,14 @@ -.question{ - width: 100%; - background-color: var(--base-white, white); - color: var(--base-black, black); - padding: 18px 0px; - font-weight: 600; - font-size: 1.5em; - display: flex; - justify-content: center; - border-radius: var(--border-radius, 16px); - -webkit-box-shadow: var(--box-shadow-property); - -moz-box-shadow: var(--box-shadow-property); - box-shadow: var(--box-shadow-property); -} \ No newline at end of file +.question { + width: 100%; + background-color: var(--base-white, white); + color: var(--base-black, black); + padding: 18px 0px; + font-weight: 600; + font-size: 1.5em; + display: flex; + justify-content: center; + border-radius: var(--border-radius, 16px); + -webkit-box-shadow: var(--box-shadow-property); + -moz-box-shadow: var(--box-shadow-property); + box-shadow: var(--box-shadow-property); +} diff --git a/styles/components/image.scss b/styles/components/image.scss index a25e6fc..b5d3e0d 100644 --- a/styles/components/image.scss +++ b/styles/components/image.scss @@ -1,10 +1,10 @@ .swquiz-app__image { - background-repeat: no-repeat; - background-size: cover; - width: 400px; - height: 600px; - -webkit-box-shadow: var(--box-shadow-property); - -moz-box-shadow: var(--box-shadow-property); - box-shadow: var(--box-shadow-property); - border-radius: var(--border-radius, 16px); -} \ No newline at end of file + background-repeat: no-repeat; + background-size: cover; + width: 400px; + height: 600px; + -webkit-box-shadow: var(--box-shadow-property); + -moz-box-shadow: var(--box-shadow-property); + box-shadow: var(--box-shadow-property); + border-radius: var(--border-radius, 16px); +} diff --git a/styles/components/modalGameOver.scss b/styles/components/modalGameOver.scss new file mode 100644 index 0000000..e147db4 --- /dev/null +++ b/styles/components/modalGameOver.scss @@ -0,0 +1,103 @@ +.swquiz-modal { + width: 60vw; + height: 90vh; + background: var(--base-white); + border-radius: var(--border-radius); + box-shadow: var(--box-shadow-property); + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-evenly; + font-size: 1.5em; + padding: 3vw; + &--paragraph { + font-weight: 600; + } + + &--middleContainer { + width: 100%; + display: grid; + grid-template-columns: 1fr 3fr; + max-height: 70%; + font-weight: 600; + margin-top: 20px; + } + &--photoContainer { + display: flex; + justify-content: center; + align-items: flex-end; + } + &--photo { + max-height: 300px; + } + &--detailedAnswers { + max-height: 300px; + overflow-y: scroll; + } + &--table { + width: 100%; + img { + max-height: 100px; + box-shadow: var(--box-shadow-property); + border-radius: var(--border-radius); + } + tbody { + width: 100%; + } + tr { + width: 100%; + display: flex; + justify-content: space-evenly; + margin: 20px 0 20px; + td { + width: 25%; + display: flex; + justify-content: center; + align-items: center; + } + } + } + &--form { + display: grid; + grid-template-columns: 1fr 2fr; + grid-template-areas: + 'input label' + 'button button'; + + .swquiz-modal { + &--nameInput { + grid-area: input; + font-size: 1em; + border-radius: var(--border-radius); + border: 2px solid gray; + } + &--label { + grid-area: label; + padding: 5px; + font-weight: 600; + } + &--button { + grid-area: button; + font-size: 1.2em; + width: 70%; + height: 6vh; + justify-self: center; + color: white; + border-radius: var(--border-radius); + background-color: red; + box-shadow: var(--box-shadow-simple), 4px 4px 40px rgba(255, 0, 0, 0.9); + margin-top: 3vw; + cursor: pointer; + border: none; + } + } + } +} + +.success { + color: rgb(58, 114, 14); +} + +.danger { + color: rgb(159, 6, 6); +} diff --git a/styles/components/ranking.scss b/styles/components/ranking.scss index 8328789..01d69a9 100644 --- a/styles/components/ranking.scss +++ b/styles/components/ranking.scss @@ -1,44 +1,44 @@ .ranking-box { - background-color: white; - font-size: 1.5rem; - border-radius: var(--border-radius); - width: 100%; - height: 100%; - padding: 2rem; - box-shadow: var(--box-shadow-simple); + background-color: white; + font-size: 1.5rem; + border-radius: var(--border-radius); + width: 100%; + height: 100%; + padding: 2rem; + box-shadow: var(--box-shadow-simple); } .icon-header { - width: 100%; - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - font-weight: bold; - font-size: 2rem; + width: 100%; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + font-weight: bold; + font-size: 2rem; } .icon-header > p { - margin-left: 2rem; + margin-left: 2rem; } .ranking-row { - background-color: white; - grid-column-gap: 10px; - margin-bottom: 10px; - display: grid; - grid-template-columns: 0.15fr 0.7fr 0.15fr; - grid-template-areas: "place nickname score"; + background-color: white; + grid-column-gap: 10px; + margin-bottom: 10px; + display: grid; + grid-template-columns: 0.15fr 0.7fr 0.15fr; + grid-template-areas: 'place nickname score'; } -.place { - grid-area: place; +.place { + grid-area: place; } -.nickname { - grid-area: nickname; +.nickname { + grid-area: nickname; } -.score { - grid-area: score; -} \ No newline at end of file +.score { + grid-area: score; +} diff --git a/styles/components/redButton.scss b/styles/components/redButton.scss index 93295d3..b53e774 100644 --- a/styles/components/redButton.scss +++ b/styles/components/redButton.scss @@ -1,18 +1,18 @@ .button { - border-radius: 16px; - font-size: 42px; - font-weight: 500; - height: 100px; - line-height: 51.2px; - width: 600px; + border-radius: 16px; + font-size: 42px; + font-weight: 500; + height: 100px; + line-height: 51.2px; + width: 600px; } .button--red { - background: rgba(255, 0, 0, 0.8); - box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); - color: #fff; + background: rgba(255, 0, 0, 0.8); + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + color: #fff; } .button--uppercase { - text-transform: uppercase; + text-transform: uppercase; } diff --git a/test/app/components/modalGameOver.test.js b/test/app/components/modalGameOver.test.js new file mode 100644 index 0000000..c93e6b8 --- /dev/null +++ b/test/app/components/modalGameOver.test.js @@ -0,0 +1,48 @@ +import { modalGameOver } from '../../../src/app/components/modalGameOver'; +import { screen } from '@testing-library/dom'; +import '@testing-library/jest-dom/extend-expect'; + +test('Adding Game over modal to DOM', () => { + const callback = () => true; + const firstArg = {}; + const secondArg = {}; + modalGameOver(document.body, firstArg, secondArg, callback); + expect(screen.getByTestId('gameOverModal')).toHaveClass('swquiz-modal'); + expect(screen.getByTestId('gameOverModal')).toBeInstanceOf(HTMLElement); +}); + +test('Throw error when provided invalid first argument', () => { + const callback = () => true; + const firstArg = {}; + const secondArg = {}; + expect(function () { + modalGameOver(document.bodysss, firstArg, secondArg, callback); + }).toThrow(new TypeError("First argument isn't an object!")); +}); + +test('Throw error when provided invalid second argument', () => { + const callback = () => true; + const secondArg = 3; + const thirdArg = {}; + expect(function () { + modalGameOver(document.body, secondArg, thirdArg, callback); + }).toThrow(new TypeError("Second argument isn't an object!")); +}); + +test('Throw error when provided invalid third argument', () => { + const callback = () => true; + const secondArg = {}; + const thirdArg = 3; + expect(function () { + modalGameOver(document.body, secondArg, thirdArg, callback); + }).toThrow(new TypeError("Third argument isn't an object!")); +}); + +test('Throw error when provided invalid callback', () => { + const callback = 'functiion'; + const secondArg = {}; + const thirdArg = {}; + expect(function () { + modalGameOver(document.body, secondArg, thirdArg, callback); + }).toThrow(new TypeError("Fourth argument isn't a function!")); +}); diff --git a/test/app/logic/playerHuman.test.js b/test/app/logic/playerHuman.test.js index 9cb6274..c001faa 100644 --- a/test/app/logic/playerHuman.test.js +++ b/test/app/logic/playerHuman.test.js @@ -1,35 +1,35 @@ import { PlayerHuman } from '../../../src/app/logic/playerHuman'; -describe("playerHuman logic checking", () => { - const player = new PlayerHuman(); - let question; - let answer; +describe('playerHuman logic checking', () => { + const player = new PlayerHuman(); + let question; + let answer; - it("Player got a question, then askedQuestion should be called with question as parameter", () => { - const askedQuestion = jest.fn(); - player.askQuestion(question, askedQuestion); - expect(askedQuestion).toBeCalledWith(question); - }); + it('Player got a question, then askedQuestion should be called with question as parameter', () => { + const askedQuestion = jest.fn(); + player.askQuestion(question, askedQuestion); + expect(askedQuestion).toBeCalledWith(question); + }); - it("Player didn't got a question, throw err - Player should get question", () => { - try { - expect(player.askQuestion()).toBeCalledWith(question); - } catch (error) { - expect(error.message).toBe('Player should get question'); - } - }); + it("Player didn't got a question, throw err - Player should get question", () => { + try { + expect(player.askQuestion()).toBeCalledWith(question); + } catch (error) { + expect(error.message).toBe('Player should get question'); + } + }); - it("Player should answered on question, then answerdOnQuestion should be called with answer as parameter", () => { - const answerdOnQuestion = jest.fn(); - player.answerOnQuestion(answer, answerdOnQuestion); - expect(answerdOnQuestion).toBeCalledWith(answer); - }); + it('Player should answered on question, then answerdOnQuestion should be called with answer as parameter', () => { + const answerdOnQuestion = jest.fn(); + player.answerOnQuestion(answer, answerdOnQuestion); + expect(answerdOnQuestion).toBeCalledWith(answer); + }); - it("Player didn't answered on question, throw err - Player should answer on asked question", () => { - try { - expect(player.answerOnQuestion()).toBeCalledWith(answer); - } catch (error) { - expect(error.message).toBe('Player should answer on asked question'); - } - }); -}); \ No newline at end of file + it("Player didn't answered on question, throw err - Player should answer on asked question", () => { + try { + expect(player.answerOnQuestion()).toBeCalledWith(answer); + } catch (error) { + expect(error.message).toBe('Player should answer on asked question'); + } + }); +}); diff --git a/test/imageRecognizer.spec.js b/test/imageRecognizer.spec.js index abfd434..f5d212d 100644 --- a/test/imageRecognizer.spec.js +++ b/test/imageRecognizer.spec.js @@ -1,26 +1,29 @@ -import {imageRecognizer} from '../src/app/imageRecognizer' -import { screen } from '@testing-library/dom' +import { imageRecognizer } from '../src/app/imageRecognizer'; +import { screen } from '@testing-library/dom'; import '@testing-library/jest-dom/extend-expect'; test('Should add div element to DOM, should have class sqwuiz-app__image', () => { - document.body.innerHTML = ` + document.body.innerHTML = `
- ` - imageRecognizer('c3RhdGljL2Fzc2V0cy9pbWcvbW9kZXMvcGVvcGxlLzM2LmpwZw==') + `; + imageRecognizer('c3RhdGljL2Fzc2V0cy9pbWcvbW9kZXMvcGVvcGxlLzM2LmpwZw=='); - expect(screen.getByTestId('imgRecognizer')).toHaveClass('swquiz-app__image') - expect(screen.getByTestId('imgRecognizer')).toBeInstanceOf(HTMLElement) -}) + expect(screen.getByTestId('imgRecognizer')).toHaveClass('swquiz-app__image'); + expect(screen.getByTestId('imgRecognizer')).toBeInstanceOf(HTMLElement); +}); test('should be empty div and have background-style', () => { - document.body.innerHTML = ` + document.body.innerHTML = `
- ` - imageRecognizer('c3RhdGljL2Fzc2V0cy9pbWcvbW9kZXMvcGVvcGxlLzM2LmpwZw==') - const imageBas64 = atob('c3RhdGljL2Fzc2V0cy9pbWcvbW9kZXMvcGVvcGxlLzM2LmpwZw==') - expect(screen.getByTestId('imgRecognizer')).toBeEmptyDOMElement() - expect(screen.getByTestId('imgRecognizer')).toHaveStyle(`background-image: url('${imageBas64}');`) - -}) \ No newline at end of file + `; + imageRecognizer('c3RhdGljL2Fzc2V0cy9pbWcvbW9kZXMvcGVvcGxlLzM2LmpwZw=='); + const imageBas64 = atob( + 'c3RhdGljL2Fzc2V0cy9pbWcvbW9kZXMvcGVvcGxlLzM2LmpwZw==', + ); + expect(screen.getByTestId('imgRecognizer')).toBeEmptyDOMElement(); + expect(screen.getByTestId('imgRecognizer')).toHaveStyle( + `background-image: url('${imageBas64}');`, + ); +}); diff --git a/test/isAnswerCorrect.test.js b/test/isAnswerCorrect.test.js index ea960cd..0be63b6 100644 --- a/test/isAnswerCorrect.test.js +++ b/test/isAnswerCorrect.test.js @@ -1,20 +1,24 @@ -import {isAnswerCorrect} from "../src/app/components/isAnswerCorrect"; +import { isAnswerCorrect } from '../src/app/components/isAnswerCorrect'; import '@testing-library/jest-dom/extend-expect'; -test("Throw error when guessed answer isn't string.",()=>{ - const foo = 2; - expect(function(){isAnswerCorrect(foo,"answer");}).toThrow(new TypeError("Guessed answer isn't string")); -}) +test("Throw error when guessed answer isn't string.", () => { + const foo = 2; + expect(function () { + isAnswerCorrect(foo, 'answer'); + }).toThrow(new TypeError("Guessed answer isn't string")); +}); -test("Throw error when correct answer isn't string.",()=>{ - const foo = 2; - expect(function(){isAnswerCorrect("guess",foo);}).toThrow(new TypeError("Guessed answer isn't string")); -}) +test("Throw error when correct answer isn't string.", () => { + const foo = 2; + expect(function () { + isAnswerCorrect('guess', foo); + }).toThrow(new TypeError("Guessed answer isn't string")); +}); -test("Function return true if answers match.",()=>{ - expect(isAnswerCorrect("correct","correct")).toBe(true); -}) +test('Function return true if answers match.', () => { + expect(isAnswerCorrect('correct', 'correct')).toBe(true); +}); -test("Function return false if answers match.",()=>{ - expect(isAnswerCorrect("incorrect","correct")).toBe(false); -}) +test('Function return false if answers match.', () => { + expect(isAnswerCorrect('incorrect', 'correct')).toBe(false); +}); diff --git a/test/mainMenu.test.js b/test/mainMenu.test.js index 39e713c..3c02af8 100644 --- a/test/mainMenu.test.js +++ b/test/mainMenu.test.js @@ -17,11 +17,11 @@ test('Throw error when provided invalid parent argument', () => { }; expect(function () { mainMenu(document.bodysss, getData); - }).toThrow(new Error("First argument isn't an object!")); + }).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 Error("Callback argument isn't a function!")); + }).toThrow(new TypeError("Callback argument isn't a function!")); });