├── 00_boilerplate ├── css │ └── style.css ├── index.html └── scripts │ ├── game.js │ └── tests │ └── game.test.js ├── 01_testing_first_function_1 ├── css │ └── style.css ├── index.html └── scripts │ ├── game.js │ └── tests │ └── game.test.js ├── 02_testing_first_function_2 ├── css │ └── style.css ├── index.html └── scripts │ ├── game.js │ └── tests │ └── game.test.js ├── 03_extending_functionality ├── css │ └── style.css ├── index.html └── scripts │ ├── game.js │ └── tests │ └── game.test.js ├── 04_advanced_tests_1 ├── css │ └── style.css ├── index.html └── scripts │ ├── game.js │ └── tests │ └── game.test.js ├── 05_advanced_tests_2 ├── css │ └── style.css ├── index.html └── scripts │ ├── game.js │ └── tests │ └── game.test.js ├── 06_Using_state ├── css │ └── style.css ├── index.html └── scripts │ ├── game.js │ └── tests │ └── game.test.js ├── 07_DOM_tests ├── css │ └── style.css ├── index.html └── scripts │ ├── game.js │ └── tests │ └── game.test.js ├── 08_Final_Codealong_1 ├── css │ └── style.css ├── index.html └── scripts │ ├── game.js │ └── tests │ └── game.test.js └── 09_Final_Codealong_2 ├── css └── style.css ├── index.html └── scripts ├── game.js └── tests └── game.test.js /00_boilerplate/css/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Montserrat, sans-serif; 3 | } 4 | 5 | h1 { 6 | font-weight: 300; 7 | margin-bottom: 10px; 8 | } 9 | 10 | h2 { 11 | font-weight: 200; 12 | margin-top: 10px; 13 | } 14 | 15 | .container { 16 | position: relative; 17 | width: 500px; 18 | margin-left: auto; 19 | margin-right: auto; 20 | margin-bottom: 35px; 21 | text-align: center; 22 | } 23 | .circle { 24 | border-radius: 50%; 25 | position: absolute; 26 | cursor: pointer; 27 | } 28 | .circle1 { 29 | height: 500px; 30 | width: 500px; 31 | background-color: #009FE3; 32 | } 33 | 34 | .circle2 { 35 | height: 400px; 36 | width: 400px; 37 | background-color: #445261; 38 | top: 50px; 39 | left: 50px; 40 | } 41 | .circle3 { 42 | height: 300px; 43 | width: 300px; 44 | background-color: #EFB920; 45 | top: 100px; 46 | left: 100px; 47 | } 48 | .circle4 { 49 | height: 200px; 50 | width: 200px; 51 | background-color: #23BBBB; 52 | top: 150px; 53 | left: 150px; 54 | } 55 | 56 | .scorebox { 57 | border-radius: 25%; 58 | box-sizing: border-box; 59 | position: absolute; 60 | background-color: #E6ECF0; 61 | height: 80px; 62 | width: 80px; 63 | top: 210px; 64 | left: 210px; 65 | text-align: center; 66 | color: #445261; 67 | font-size: 3em; 68 | padding-top: 10px; 69 | } 70 | 71 | .button { 72 | background-color: #FF5A60; 73 | color: #FFF; 74 | border: 0; 75 | height: 40px; 76 | width: 160px; 77 | border-radius: 5px; 78 | margin: 0 auto; 79 | display: block; 80 | top: 550px; 81 | position: relative; 82 | font-weight: 600; 83 | } 84 | 85 | .light { 86 | opacity: 0.4; 87 | } -------------------------------------------------------------------------------- /00_boilerplate/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Jest Simon Game 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |

simon

16 |

memory game

17 |
18 |
19 |
20 |
21 |
22 |
23 |
0
24 | 25 |
26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /00_boilerplate/scripts/game.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Code-Institute-Solutions/Jest_Testing_Part2/d223fb55233b9cd449c3cf74daedeac1ae37e2e5/00_boilerplate/scripts/game.js -------------------------------------------------------------------------------- /00_boilerplate/scripts/tests/game.test.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @jest-environment jsdom 3 | */ 4 | -------------------------------------------------------------------------------- /01_testing_first_function_1/css/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Montserrat, sans-serif; 3 | } 4 | 5 | h1 { 6 | font-weight: 300; 7 | margin-bottom: 10px; 8 | } 9 | 10 | h2 { 11 | font-weight: 200; 12 | margin-top: 10px; 13 | } 14 | 15 | .container { 16 | position: relative; 17 | width: 500px; 18 | margin-left: auto; 19 | margin-right: auto; 20 | margin-bottom: 35px; 21 | text-align: center; 22 | } 23 | .circle { 24 | border-radius: 50%; 25 | position: absolute; 26 | cursor: pointer; 27 | } 28 | .circle1 { 29 | height: 500px; 30 | width: 500px; 31 | background-color: #009FE3; 32 | } 33 | 34 | .circle2 { 35 | height: 400px; 36 | width: 400px; 37 | background-color: #445261; 38 | top: 50px; 39 | left: 50px; 40 | } 41 | .circle3 { 42 | height: 300px; 43 | width: 300px; 44 | background-color: #EFB920; 45 | top: 100px; 46 | left: 100px; 47 | } 48 | .circle4 { 49 | height: 200px; 50 | width: 200px; 51 | background-color: #23BBBB; 52 | top: 150px; 53 | left: 150px; 54 | } 55 | 56 | .scorebox { 57 | border-radius: 25%; 58 | box-sizing: border-box; 59 | position: absolute; 60 | background-color: #E6ECF0; 61 | height: 80px; 62 | width: 80px; 63 | top: 210px; 64 | left: 210px; 65 | text-align: center; 66 | color: #445261; 67 | font-size: 3em; 68 | padding-top: 10px; 69 | } 70 | 71 | .button { 72 | background-color: #FF5A60; 73 | color: #FFF; 74 | border: 0; 75 | height: 40px; 76 | width: 160px; 77 | border-radius: 5px; 78 | margin: 0 auto; 79 | display: block; 80 | top: 550px; 81 | position: relative; 82 | font-weight: 600; 83 | } 84 | 85 | .light { 86 | opacity: 0.4; 87 | } -------------------------------------------------------------------------------- /01_testing_first_function_1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Jest Simon Game 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |

simon

16 |

memory game

17 |
18 |
19 |
20 |
21 |
22 |
23 |
0
24 | 25 |
26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /01_testing_first_function_1/scripts/game.js: -------------------------------------------------------------------------------- 1 | let game = { 2 | currentGame: [], 3 | score: 0, 4 | }; 5 | 6 | 7 | module.exports = { game }; -------------------------------------------------------------------------------- /01_testing_first_function_1/scripts/tests/game.test.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @jest-environment jsdom 3 | */ 4 | 5 | const { game } = require("../game"); 6 | 7 | 8 | beforeAll(() => { 9 | let fs = require("fs"); 10 | let fileContents = fs.readFileSync("index.html", "utf-8"); 11 | document.open(); 12 | document.write(fileContents); 13 | document.close(); 14 | }); 15 | 16 | describe("game object contains correct keys", () => { 17 | test("score key exists", () => { 18 | expect("score" in game).toBe(true); 19 | }); 20 | test("currentGame key exists", () => { 21 | expect("currentGame" in game).toBe(true); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /02_testing_first_function_2/css/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Montserrat, sans-serif; 3 | } 4 | 5 | h1 { 6 | font-weight: 300; 7 | margin-bottom: 10px; 8 | } 9 | 10 | h2 { 11 | font-weight: 200; 12 | margin-top: 10px; 13 | } 14 | 15 | .container { 16 | position: relative; 17 | width: 500px; 18 | margin-left: auto; 19 | margin-right: auto; 20 | margin-bottom: 35px; 21 | text-align: center; 22 | } 23 | .circle { 24 | border-radius: 50%; 25 | position: absolute; 26 | cursor: pointer; 27 | } 28 | .circle1 { 29 | height: 500px; 30 | width: 500px; 31 | background-color: #009FE3; 32 | } 33 | 34 | .circle2 { 35 | height: 400px; 36 | width: 400px; 37 | background-color: #445261; 38 | top: 50px; 39 | left: 50px; 40 | } 41 | .circle3 { 42 | height: 300px; 43 | width: 300px; 44 | background-color: #EFB920; 45 | top: 100px; 46 | left: 100px; 47 | } 48 | .circle4 { 49 | height: 200px; 50 | width: 200px; 51 | background-color: #23BBBB; 52 | top: 150px; 53 | left: 150px; 54 | } 55 | 56 | .scorebox { 57 | border-radius: 25%; 58 | box-sizing: border-box; 59 | position: absolute; 60 | background-color: #E6ECF0; 61 | height: 80px; 62 | width: 80px; 63 | top: 210px; 64 | left: 210px; 65 | text-align: center; 66 | color: #445261; 67 | font-size: 3em; 68 | padding-top: 10px; 69 | } 70 | 71 | .button { 72 | background-color: #FF5A60; 73 | color: #FFF; 74 | border: 0; 75 | height: 40px; 76 | width: 160px; 77 | border-radius: 5px; 78 | margin: 0 auto; 79 | display: block; 80 | top: 550px; 81 | position: relative; 82 | font-weight: 600; 83 | } 84 | 85 | .light { 86 | opacity: 0.4; 87 | } -------------------------------------------------------------------------------- /02_testing_first_function_2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Jest Simon Game 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |

simon

16 |

memory game

17 |
18 |
19 |
20 |
21 |
22 |
23 |
0
24 | 25 |
26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /02_testing_first_function_2/scripts/game.js: -------------------------------------------------------------------------------- 1 | let game = { 2 | currentGame: [], 3 | playerMoves: [], 4 | score: 0, 5 | choices: ["button1", "button2", "button3", "button4"] 6 | }; 7 | 8 | 9 | module.exports = { game }; -------------------------------------------------------------------------------- /02_testing_first_function_2/scripts/tests/game.test.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @jest-environment jsdom 3 | */ 4 | 5 | const { game } = require("../game"); 6 | 7 | 8 | beforeAll(() => { 9 | let fs = require("fs"); 10 | let fileContents = fs.readFileSync("index.html", "utf-8"); 11 | document.open(); 12 | document.write(fileContents); 13 | document.close(); 14 | }); 15 | 16 | describe("game object contains correct keys", () => { 17 | test("score key exists", () => { 18 | expect("score" in game).toBe(true); 19 | }); 20 | test("currentGame key exists", () => { 21 | expect("currentGame" in game).toBe(true); 22 | }); 23 | test("playerMoves key exists", () => { 24 | expect("playerMoves" in game).toBe(true); 25 | }); 26 | test("choices key exists", () => { 27 | expect("choices" in game).toBe(true); 28 | }); 29 | test("choices contain correct ids", () => { 30 | expect(game.choices).toEqual(["button1", "button2", "button3", "button4"]); 31 | }); 32 | }); 33 | -------------------------------------------------------------------------------- /03_extending_functionality/css/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Montserrat, sans-serif; 3 | } 4 | 5 | h1 { 6 | font-weight: 300; 7 | margin-bottom: 10px; 8 | } 9 | 10 | h2 { 11 | font-weight: 200; 12 | margin-top: 10px; 13 | } 14 | 15 | .container { 16 | position: relative; 17 | width: 500px; 18 | margin-left: auto; 19 | margin-right: auto; 20 | margin-bottom: 35px; 21 | text-align: center; 22 | } 23 | .circle { 24 | border-radius: 50%; 25 | position: absolute; 26 | cursor: pointer; 27 | } 28 | .circle1 { 29 | height: 500px; 30 | width: 500px; 31 | background-color: #009FE3; 32 | } 33 | 34 | .circle2 { 35 | height: 400px; 36 | width: 400px; 37 | background-color: #445261; 38 | top: 50px; 39 | left: 50px; 40 | } 41 | .circle3 { 42 | height: 300px; 43 | width: 300px; 44 | background-color: #EFB920; 45 | top: 100px; 46 | left: 100px; 47 | } 48 | .circle4 { 49 | height: 200px; 50 | width: 200px; 51 | background-color: #23BBBB; 52 | top: 150px; 53 | left: 150px; 54 | } 55 | 56 | .scorebox { 57 | border-radius: 25%; 58 | box-sizing: border-box; 59 | position: absolute; 60 | background-color: #E6ECF0; 61 | height: 80px; 62 | width: 80px; 63 | top: 210px; 64 | left: 210px; 65 | text-align: center; 66 | color: #445261; 67 | font-size: 3em; 68 | padding-top: 10px; 69 | } 70 | 71 | .button { 72 | background-color: #FF5A60; 73 | color: #FFF; 74 | border: 0; 75 | height: 40px; 76 | width: 160px; 77 | border-radius: 5px; 78 | margin: 0 auto; 79 | display: block; 80 | top: 550px; 81 | position: relative; 82 | font-weight: 600; 83 | } 84 | 85 | .light { 86 | opacity: 0.4; 87 | } -------------------------------------------------------------------------------- /03_extending_functionality/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Jest Simon Game 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |

simon

16 |

memory game

17 |
18 |
19 |
20 |
21 |
22 |
23 |
0
24 | 25 |
26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /03_extending_functionality/scripts/game.js: -------------------------------------------------------------------------------- 1 | let game = { 2 | currentGame: [], 3 | playerMoves: [], 4 | score: 0, 5 | choices: ["button1", "button2", "button3", "button4"] 6 | }; 7 | 8 | function newGame() { 9 | game.currentGame = []; 10 | game.playerMoves = []; 11 | game.score = 0; 12 | showScore(); 13 | } 14 | 15 | function showScore() { 16 | document.getElementById("score").innerText = game.score; 17 | } 18 | 19 | module.exports = { game, newGame, showScore }; -------------------------------------------------------------------------------- /03_extending_functionality/scripts/tests/game.test.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @jest-environment jsdom 3 | */ 4 | 5 | const { game, newGame, showScore } = require("../game"); 6 | 7 | 8 | beforeAll(() => { 9 | let fs = require("fs"); 10 | let fileContents = fs.readFileSync("index.html", "utf-8"); 11 | document.open(); 12 | document.write(fileContents); 13 | document.close(); 14 | }); 15 | 16 | describe("game object contains correct keys", () => { 17 | test("score key exists", () => { 18 | expect("score" in game).toBe(true); 19 | }); 20 | test("currentGame key exists", () => { 21 | expect("currentGame" in game).toBe(true); 22 | }); 23 | test("playerMoves key exists", () => { 24 | expect("playerMoves" in game).toBe(true); 25 | }); 26 | test("choices key exists", () => { 27 | expect("choices" in game).toBe(true); 28 | }); 29 | test("choices contain correct ids", () => { 30 | expect(game.choices).toEqual(["button1", "button2", "button3", "button4"]); 31 | }); 32 | }); 33 | 34 | describe("newGame works correctly", () => { 35 | beforeAll(() => { 36 | game.score = 42; 37 | game.playerMoves = ["button1", "button2"]; 38 | game.currentGame = ["button1", "button2"]; 39 | document.getElementById("score").innerText = "42"; 40 | newGame(); 41 | }); 42 | test("should set game score to zero", () => { 43 | expect(game.score).toEqual(0); 44 | }); 45 | test("should display 0 for the element with id of score", () => { 46 | expect(document.getElementById("score").innerText).toEqual(0); 47 | }); 48 | test("should clear the player moves array", () => { 49 | expect(game.playerMoves.length).toBe(0); 50 | }); 51 | test("should clear the computer sequence array", () => { 52 | expect(game.currentGame.length).toBe(0); 53 | }); 54 | }); -------------------------------------------------------------------------------- /04_advanced_tests_1/css/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Montserrat, sans-serif; 3 | } 4 | 5 | h1 { 6 | font-weight: 300; 7 | margin-bottom: 10px; 8 | } 9 | 10 | h2 { 11 | font-weight: 200; 12 | margin-top: 10px; 13 | } 14 | 15 | .container { 16 | position: relative; 17 | width: 500px; 18 | margin-left: auto; 19 | margin-right: auto; 20 | margin-bottom: 35px; 21 | text-align: center; 22 | } 23 | .circle { 24 | border-radius: 50%; 25 | position: absolute; 26 | cursor: pointer; 27 | } 28 | .circle1 { 29 | height: 500px; 30 | width: 500px; 31 | background-color: #009FE3; 32 | } 33 | 34 | .circle2 { 35 | height: 400px; 36 | width: 400px; 37 | background-color: #445261; 38 | top: 50px; 39 | left: 50px; 40 | } 41 | .circle3 { 42 | height: 300px; 43 | width: 300px; 44 | background-color: #EFB920; 45 | top: 100px; 46 | left: 100px; 47 | } 48 | .circle4 { 49 | height: 200px; 50 | width: 200px; 51 | background-color: #23BBBB; 52 | top: 150px; 53 | left: 150px; 54 | } 55 | 56 | .scorebox { 57 | border-radius: 25%; 58 | box-sizing: border-box; 59 | position: absolute; 60 | background-color: #E6ECF0; 61 | height: 80px; 62 | width: 80px; 63 | top: 210px; 64 | left: 210px; 65 | text-align: center; 66 | color: #445261; 67 | font-size: 3em; 68 | padding-top: 10px; 69 | } 70 | 71 | .button { 72 | background-color: #FF5A60; 73 | color: #FFF; 74 | border: 0; 75 | height: 40px; 76 | width: 160px; 77 | border-radius: 5px; 78 | margin: 0 auto; 79 | display: block; 80 | top: 550px; 81 | position: relative; 82 | font-weight: 600; 83 | } 84 | 85 | .light { 86 | opacity: 0.4; 87 | } -------------------------------------------------------------------------------- /04_advanced_tests_1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Jest Simon Game 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |

simon

16 |

memory game

17 |
18 |
19 |
20 |
21 |
22 |
23 |
0
24 | 25 |
26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /04_advanced_tests_1/scripts/game.js: -------------------------------------------------------------------------------- 1 | let game = { 2 | currentGame: [], 3 | playerMoves: [], 4 | score: 0, 5 | choices: ["button1", "button2", "button3", "button4"] 6 | }; 7 | 8 | function newGame() { 9 | game.currentGame = []; 10 | game.playerMoves = []; 11 | game.score = 0; 12 | showScore(); 13 | addTurn(); 14 | } 15 | 16 | function addTurn() { 17 | game.playerMoves = []; 18 | game.currentGame.push(game.choices[(Math.floor(Math.random() * 4))]); 19 | // showTurns(); 20 | } 21 | 22 | function showScore() { 23 | document.getElementById("score").innerText = game.score; 24 | } 25 | 26 | module.exports = { game, newGame, showScore, addTurn, lightsOn }; -------------------------------------------------------------------------------- /04_advanced_tests_1/scripts/tests/game.test.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @jest-environment jsdom 3 | */ 4 | 5 | const { game, newGame, showScore, addTurn, lightsOn } = require("../game"); 6 | 7 | beforeAll(() => { 8 | let fs = require("fs"); 9 | let fileContents = fs.readFileSync("index.html", "utf-8"); 10 | document.open(); 11 | document.write(fileContents); 12 | document.close(); 13 | }); 14 | 15 | describe("game object contains correct keys", () => { 16 | test("score key exists", () => { 17 | expect("score" in game).toBe(true); 18 | }); 19 | test("currentGame key exists", () => { 20 | expect("currentGame" in game).toBe(true); 21 | }); 22 | test("playerMoves key exists", () => { 23 | expect("playerMoves" in game).toBe(true); 24 | }); 25 | test("choices key exists", () => { 26 | expect("choices" in game).toBe(true); 27 | }); 28 | test("choices contain correct ids", () => { 29 | expect(game.choices).toEqual(["button1", "button2", "button3", "button4"]); 30 | }); 31 | }); 32 | 33 | describe("newGame works correctly", () => { 34 | beforeAll(() => { 35 | game.score = 42; 36 | game.playerMoves = ["button1", "button2"]; 37 | game.currentGame = ["button1", "button2"]; 38 | document.getElementById("score").innerText = "42"; 39 | newGame(); 40 | }); 41 | test("should set game score to zero", () => { 42 | expect(game.score).toEqual(0); 43 | }); 44 | test("should display 0 for the element with id of score", () => { 45 | expect(document.getElementById("score").innerText).toEqual(0); 46 | }); 47 | test("should clear the player moves array", () => { 48 | expect(game.playerMoves.length).toBe(0); 49 | }); 50 | test("should add one move to the computer's game array", () => { 51 | expect(game.currentGame.length).toBe(1); 52 | }); 53 | }); -------------------------------------------------------------------------------- /05_advanced_tests_2/css/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Montserrat, sans-serif; 3 | } 4 | 5 | h1 { 6 | font-weight: 300; 7 | margin-bottom: 10px; 8 | } 9 | 10 | h2 { 11 | font-weight: 200; 12 | margin-top: 10px; 13 | } 14 | 15 | .container { 16 | position: relative; 17 | width: 500px; 18 | margin-left: auto; 19 | margin-right: auto; 20 | margin-bottom: 35px; 21 | text-align: center; 22 | } 23 | .circle { 24 | border-radius: 50%; 25 | position: absolute; 26 | cursor: pointer; 27 | } 28 | .circle1 { 29 | height: 500px; 30 | width: 500px; 31 | background-color: #009FE3; 32 | } 33 | 34 | .circle2 { 35 | height: 400px; 36 | width: 400px; 37 | background-color: #445261; 38 | top: 50px; 39 | left: 50px; 40 | } 41 | .circle3 { 42 | height: 300px; 43 | width: 300px; 44 | background-color: #EFB920; 45 | top: 100px; 46 | left: 100px; 47 | } 48 | .circle4 { 49 | height: 200px; 50 | width: 200px; 51 | background-color: #23BBBB; 52 | top: 150px; 53 | left: 150px; 54 | } 55 | 56 | .scorebox { 57 | border-radius: 25%; 58 | box-sizing: border-box; 59 | position: absolute; 60 | background-color: #E6ECF0; 61 | height: 80px; 62 | width: 80px; 63 | top: 210px; 64 | left: 210px; 65 | text-align: center; 66 | color: #445261; 67 | font-size: 3em; 68 | padding-top: 10px; 69 | } 70 | 71 | .button { 72 | background-color: #FF5A60; 73 | color: #FFF; 74 | border: 0; 75 | height: 40px; 76 | width: 160px; 77 | border-radius: 5px; 78 | margin: 0 auto; 79 | display: block; 80 | top: 550px; 81 | position: relative; 82 | font-weight: 600; 83 | } 84 | 85 | .light { 86 | opacity: 0.4; 87 | } -------------------------------------------------------------------------------- /05_advanced_tests_2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Jest Simon Game 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |

simon

16 |

memory game

17 |
18 |
19 |
20 |
21 |
22 |
23 |
0
24 | 25 |
26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /05_advanced_tests_2/scripts/game.js: -------------------------------------------------------------------------------- 1 | let game = { 2 | currentGame: [], 3 | playerMoves: [], 4 | score: 0, 5 | choices: ["button1", "button2", "button3", "button4"] 6 | }; 7 | 8 | function newGame() { 9 | game.currentGame = []; 10 | game.playerMoves = []; 11 | game.score = 0; 12 | showScore(); 13 | addTurn(); 14 | } 15 | 16 | function addTurn() { 17 | game.playerMoves = []; 18 | game.currentGame.push(game.choices[(Math.floor(Math.random() * 4))]); 19 | // showTurns(); 20 | } 21 | 22 | function lightsOn(circ) { 23 | document.getElementById(circ).classList.add("light"); 24 | setTimeout(function () { 25 | document.getElementById(circ).classList.remove("light"); 26 | }, 400); 27 | } 28 | 29 | function showScore() { 30 | document.getElementById("score").innerText = game.score; 31 | } 32 | 33 | module.exports = { game, newGame, showScore, addTurn, lightsOn }; -------------------------------------------------------------------------------- /05_advanced_tests_2/scripts/tests/game.test.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @jest-environment jsdom 3 | */ 4 | 5 | const { game, newGame, showScore, addTurn, lightsOn } = require("../game"); 6 | 7 | beforeAll(() => { 8 | let fs = require("fs"); 9 | let fileContents = fs.readFileSync("index.html", "utf-8"); 10 | document.open(); 11 | document.write(fileContents); 12 | document.close(); 13 | }); 14 | 15 | describe("game object contains correct keys", () => { 16 | test("score key exists", () => { 17 | expect("score" in game).toBe(true); 18 | }); 19 | test("currentGame key exists", () => { 20 | expect("currentGame" in game).toBe(true); 21 | }); 22 | test("playerMoves key exists", () => { 23 | expect("playerMoves" in game).toBe(true); 24 | }); 25 | test("choices key exists", () => { 26 | expect("choices" in game).toBe(true); 27 | }); 28 | test("choices contain correct ids", () => { 29 | expect(game.choices).toEqual(["button1", "button2", "button3", "button4"]); 30 | }); 31 | }); 32 | 33 | describe("newGame works correctly", () => { 34 | beforeAll(() => { 35 | game.score = 42; 36 | game.playerMoves = ["button1", "button2"]; 37 | game.currentGame = ["button1", "button2"]; 38 | document.getElementById("score").innerText = "42"; 39 | newGame(); 40 | }); 41 | test("should set game score to zero", () => { 42 | expect(game.score).toEqual(0); 43 | }); 44 | test("should display 0 for the element with id of score", () => { 45 | expect(document.getElementById("score").innerText).toEqual(0); 46 | }); 47 | test("should clear the player moves array", () => { 48 | expect(game.playerMoves.length).toBe(0); 49 | }); 50 | test("should add one move to the computer's game array", () => { 51 | expect(game.currentGame.length).toBe(1); 52 | }); 53 | }); 54 | 55 | describe("gameplay works correctly", () => { 56 | beforeEach(() => { 57 | game.score = 0; 58 | game.currentGame = []; 59 | game.playerMoves = []; 60 | addTurn(); 61 | }); 62 | afterEach(() => { 63 | game.score = 0; 64 | game.currentGame = []; 65 | game.playerMoves = []; 66 | }); 67 | test("addTurn adds a new turn to the game", () => { 68 | addTurn(); 69 | expect(game.currentGame.length).toBe(2); 70 | }); 71 | test("should add correct class to light up the buttons", () => { 72 | let button = document.getElementById(game.currentGame[0]); 73 | lightsOn(game.currentGame[0]); 74 | expect(button.classList).toContain(game.currentGame[0] + "light"); 75 | }); 76 | }); -------------------------------------------------------------------------------- /06_Using_state/css/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Montserrat, sans-serif; 3 | } 4 | 5 | h1 { 6 | font-weight: 300; 7 | margin-bottom: 10px; 8 | } 9 | 10 | h2 { 11 | font-weight: 200; 12 | margin-top: 10px; 13 | } 14 | 15 | .container { 16 | position: relative; 17 | width: 500px; 18 | margin-left: auto; 19 | margin-right: auto; 20 | margin-bottom: 35px; 21 | text-align: center; 22 | } 23 | .circle { 24 | border-radius: 50%; 25 | position: absolute; 26 | cursor: pointer; 27 | } 28 | .circle1 { 29 | height: 500px; 30 | width: 500px; 31 | background-color: #009FE3; 32 | } 33 | 34 | .circle2 { 35 | height: 400px; 36 | width: 400px; 37 | background-color: #445261; 38 | top: 50px; 39 | left: 50px; 40 | } 41 | .circle3 { 42 | height: 300px; 43 | width: 300px; 44 | background-color: #EFB920; 45 | top: 100px; 46 | left: 100px; 47 | } 48 | .circle4 { 49 | height: 200px; 50 | width: 200px; 51 | background-color: #23BBBB; 52 | top: 150px; 53 | left: 150px; 54 | } 55 | 56 | .scorebox { 57 | border-radius: 25%; 58 | box-sizing: border-box; 59 | position: absolute; 60 | background-color: #E6ECF0; 61 | height: 80px; 62 | width: 80px; 63 | top: 210px; 64 | left: 210px; 65 | text-align: center; 66 | color: #445261; 67 | font-size: 3em; 68 | padding-top: 10px; 69 | } 70 | 71 | .button { 72 | background-color: #FF5A60; 73 | color: #FFF; 74 | border: 0; 75 | height: 40px; 76 | width: 160px; 77 | border-radius: 5px; 78 | margin: 0 auto; 79 | display: block; 80 | top: 550px; 81 | position: relative; 82 | font-weight: 600; 83 | } 84 | 85 | .light { 86 | opacity: 0.4; 87 | } -------------------------------------------------------------------------------- /06_Using_state/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Jest Simon Game 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |

simon

16 |

memory game

17 |
18 |
19 |
20 |
21 |
22 |
23 |
0
24 | 25 |
26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /06_Using_state/scripts/game.js: -------------------------------------------------------------------------------- 1 | let game = { 2 | currentGame: [], 3 | playerMoves: [], 4 | score: 0, 5 | turnNumber: 0, 6 | choices: ["button1", "button2", "button3", "button4"] 7 | }; 8 | 9 | function newGame() { 10 | game.currentGame = []; 11 | game.playerMoves = []; 12 | game.score = 0; 13 | showScore(); 14 | addTurn(); 15 | } 16 | 17 | function addTurn() { 18 | game.playerMoves = []; 19 | game.currentGame.push(game.choices[(Math.floor(Math.random() * 4))]); 20 | showTurns(); 21 | } 22 | 23 | function showTurns() { 24 | game.turnNumber = 0; 25 | let turns = setInterval(function () { 26 | lightsOn(game.currentGame[game.turnNumber]); 27 | game.turnNumber++; 28 | if (game.turnNumber >= game.currentGame.length) { 29 | clearInterval(turns); 30 | } 31 | }, 800); 32 | } 33 | 34 | function lightsOn(circ) { 35 | document.getElementById(circ).classList.add("light"); 36 | setTimeout(function () { 37 | document.getElementById(circ).classList.remove("light"); 38 | }, 400); 39 | } 40 | 41 | function showScore() { 42 | document.getElementById("score").innerText = game.score; 43 | } 44 | 45 | module.exports = { game, newGame, showScore, addTurn, lightsOn, showTurns }; -------------------------------------------------------------------------------- /06_Using_state/scripts/tests/game.test.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @jest-environment jsdom 3 | */ 4 | 5 | const { game, newGame, showScore, addTurn, lightsOn, showTurns } = require("../game"); 6 | 7 | beforeAll(() => { 8 | let fs = require("fs"); 9 | let fileContents = fs.readFileSync("index.html", "utf-8"); 10 | document.open(); 11 | document.write(fileContents); 12 | document.close(); 13 | }); 14 | 15 | describe("game object contains correct keys", () => { 16 | test("score key exists", () => { 17 | expect("score" in game).toBe(true); 18 | }); 19 | test("currentGame key exists", () => { 20 | expect("currentGame" in game).toBe(true); 21 | }); 22 | test("playerMoves key exists", () => { 23 | expect("playerMoves" in game).toBe(true); 24 | }); 25 | test("choices key exists", () => { 26 | expect("choices" in game).toBe(true); 27 | }); 28 | test("choices contain correct ids", () => { 29 | expect(game.choices).toEqual(["button1", "button2", "button3", "button4"]); 30 | }); 31 | test("turnNumber key exists", () => { 32 | expect("turnNumber" in game).toBe(true); 33 | }); 34 | }); 35 | 36 | describe("newGame works correctly", () => { 37 | beforeAll(() => { 38 | game.score = 42; 39 | game.playerMoves = ["button1", "button2"]; 40 | game.currentGame = ["button1", "button2"]; 41 | document.getElementById("score").innerText = "42"; 42 | newGame(); 43 | }); 44 | test("should set game score to zero", () => { 45 | expect(game.score).toEqual(0); 46 | }); 47 | test("should display 0 for the element with id of score", () => { 48 | expect(document.getElementById("score").innerText).toEqual(0); 49 | }); 50 | test("should clear the player moves array", () => { 51 | expect(game.playerMoves.length).toBe(0); 52 | }); 53 | test("should add one move to the computer's game array", () => { 54 | expect(game.currentGame.length).toBe(1); 55 | }); 56 | }); 57 | 58 | describe("gameplay works correctly", () => { 59 | beforeEach(() => { 60 | game.score = 0; 61 | game.currentGame = []; 62 | game.playerMoves = []; 63 | addTurn(); 64 | }); 65 | afterEach(() => { 66 | game.score = 0; 67 | game.currentGame = []; 68 | game.playerMoves = []; 69 | }); 70 | test("addTurn adds a new turn to the game", () => { 71 | addTurn(); 72 | expect(game.currentGame.length).toBe(2); 73 | }); 74 | test("should add correct class to light up the buttons", () => { 75 | let button = document.getElementById(game.currentGame[0]); 76 | lightsOn(game.currentGame[0]); 77 | expect(button.classList).toContain(game.currentGame[0] + "light"); 78 | }); 79 | test("showTurns should update game.turnNumber", () => { 80 | game.turnNumber = 42; 81 | showTurns(); 82 | expect(game.turnNumber).toBe(0); 83 | }); 84 | }); -------------------------------------------------------------------------------- /07_DOM_tests/css/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Montserrat, sans-serif; 3 | } 4 | 5 | h1 { 6 | font-weight: 300; 7 | margin-bottom: 10px; 8 | } 9 | 10 | h2 { 11 | font-weight: 200; 12 | margin-top: 10px; 13 | } 14 | 15 | .container { 16 | position: relative; 17 | width: 500px; 18 | margin-left: auto; 19 | margin-right: auto; 20 | margin-bottom: 35px; 21 | text-align: center; 22 | } 23 | .circle { 24 | border-radius: 50%; 25 | position: absolute; 26 | cursor: pointer; 27 | } 28 | .circle1 { 29 | height: 500px; 30 | width: 500px; 31 | background-color: #009FE3; 32 | } 33 | 34 | .circle2 { 35 | height: 400px; 36 | width: 400px; 37 | background-color: #445261; 38 | top: 50px; 39 | left: 50px; 40 | } 41 | .circle3 { 42 | height: 300px; 43 | width: 300px; 44 | background-color: #EFB920; 45 | top: 100px; 46 | left: 100px; 47 | } 48 | .circle4 { 49 | height: 200px; 50 | width: 200px; 51 | background-color: #23BBBB; 52 | top: 150px; 53 | left: 150px; 54 | } 55 | 56 | .scorebox { 57 | border-radius: 25%; 58 | box-sizing: border-box; 59 | position: absolute; 60 | background-color: #E6ECF0; 61 | height: 80px; 62 | width: 80px; 63 | top: 210px; 64 | left: 210px; 65 | text-align: center; 66 | color: #445261; 67 | font-size: 3em; 68 | padding-top: 10px; 69 | } 70 | 71 | .button { 72 | background-color: #FF5A60; 73 | color: #FFF; 74 | border: 0; 75 | height: 40px; 76 | width: 160px; 77 | border-radius: 5px; 78 | margin: 0 auto; 79 | display: block; 80 | top: 550px; 81 | position: relative; 82 | font-weight: 600; 83 | } 84 | 85 | .light { 86 | opacity: 0.4; 87 | } -------------------------------------------------------------------------------- /07_DOM_tests/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Jest Simon Game 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |

simon

16 |

memory game

17 |
18 |
19 |
20 |
21 |
22 |
23 |
0
24 | 25 |
26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /07_DOM_tests/scripts/game.js: -------------------------------------------------------------------------------- 1 | let game = { 2 | currentGame: [], 3 | playerMoves: [], 4 | score: 0, 5 | turnNumber: 0, 6 | choices: ["button1", "button2", "button3", "button4"] 7 | }; 8 | 9 | function newGame() { 10 | game.currentGame = []; 11 | game.playerMoves = []; 12 | game.score = 0; 13 | 14 | for (let circle of document.getElementsByClassName("circle")) { 15 | if (circle.getAttribute("data-listener") !== "true") { 16 | circle.addEventListener("click", (e) => { 17 | let move = e.target.getAttribute("id"); 18 | lightsOn(move); 19 | game.playerMoves.push(move); 20 | playerTurn(); 21 | }); 22 | circle.setAttribute("data-listener", "true"); 23 | } 24 | } 25 | showScore(); 26 | addTurn(); 27 | } 28 | 29 | function addTurn() { 30 | game.playerMoves = []; 31 | game.currentGame.push(game.choices[(Math.floor(Math.random() * 4))]); 32 | showTurns(); 33 | } 34 | 35 | function showTurns() { 36 | game.turnNumber = 0; 37 | let turns = setInterval(function () { 38 | lightsOn(game.currentGame[game.turnNumber]); 39 | game.turnNumber++; 40 | if (game.turnNumber >= game.currentGame.length) { 41 | clearInterval(turns); 42 | } 43 | }, 800); 44 | } 45 | 46 | function lightsOn(circ) { 47 | document.getElementById(circ).classList.add("light"); 48 | setTimeout(function () { 49 | document.getElementById(circ).classList.remove("light"); 50 | }, 400); 51 | } 52 | 53 | function showScore() { 54 | document.getElementById("score").innerText = game.score; 55 | } 56 | 57 | module.exports = { game, newGame, showScore, addTurn, lightsOn, showTurns }; -------------------------------------------------------------------------------- /07_DOM_tests/scripts/tests/game.test.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @jest-environment jsdom 3 | */ 4 | 5 | const { game, newGame, showScore, addTurn, lightsOn, showTurns } = require("../game"); 6 | 7 | beforeAll(() => { 8 | let fs = require("fs"); 9 | let fileContents = fs.readFileSync("index.html", "utf-8"); 10 | document.open(); 11 | document.write(fileContents); 12 | document.close(); 13 | }); 14 | 15 | describe("game object contains correct keys", () => { 16 | test("score key exists", () => { 17 | expect("score" in game).toBe(true); 18 | }); 19 | test("currentGame key exists", () => { 20 | expect("currentGame" in game).toBe(true); 21 | }); 22 | test("playerMoves key exists", () => { 23 | expect("playerMoves" in game).toBe(true); 24 | }); 25 | test("choices key exists", () => { 26 | expect("choices" in game).toBe(true); 27 | }); 28 | test("choices contain correct ids", () => { 29 | expect(game.choices).toEqual(["button1", "button2", "button3", "button4"]); 30 | }); 31 | test("turnNumber key exists", () => { 32 | expect("turnNumber" in game).toBe(true); 33 | }); 34 | }); 35 | 36 | describe("newGame works correctly", () => { 37 | beforeAll(() => { 38 | game.score = 42; 39 | game.playerMoves = ["button1", "button2"]; 40 | game.currentGame = ["button1", "button2"]; 41 | document.getElementById("score").innerText = "42"; 42 | newGame(); 43 | }); 44 | test("should set game score to zero", () => { 45 | expect(game.score).toEqual(0); 46 | }); 47 | test("should display 0 for the element with id of score", () => { 48 | expect(document.getElementById("score").innerText).toEqual(0); 49 | }); 50 | test("should clear the player moves array", () => { 51 | expect(game.playerMoves.length).toBe(0); 52 | }); 53 | test("should add one move to the computer's game array", () => { 54 | expect(game.currentGame.length).toBe(1); 55 | }); 56 | test("expect data-listener to be true", () => { 57 | newGame(); 58 | const elements = document.getElementsByClassName("circle"); 59 | for (let element of elements) { 60 | expect(element.getAttribute("data-listener")).toEqual("true"); 61 | } 62 | }); 63 | }); 64 | 65 | describe("gameplay works correctly", () => { 66 | beforeEach(() => { 67 | game.score = 0; 68 | game.currentGame = []; 69 | game.playerMoves = []; 70 | addTurn(); 71 | }); 72 | afterEach(() => { 73 | game.score = 0; 74 | game.currentGame = []; 75 | game.playerMoves = []; 76 | }); 77 | test("addTurn adds a new turn to the game", () => { 78 | addTurn(); 79 | expect(game.currentGame.length).toBe(2); 80 | }); 81 | test("should add correct class to light up the buttons", () => { 82 | let button = document.getElementById(game.currentGame[0]); 83 | lightsOn(game.currentGame[0]); 84 | expect(button.classList).toContain(game.currentGame[0] + "light"); 85 | }); 86 | test("showTurns should update game.turnNumber", () => { 87 | game.turnNumber = 42; 88 | showTurns(); 89 | expect(game.turnNumber).toBe(0); 90 | }); 91 | }); -------------------------------------------------------------------------------- /08_Final_Codealong_1/css/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Montserrat, sans-serif; 3 | } 4 | 5 | h1 { 6 | font-weight: 300; 7 | margin-bottom: 10px; 8 | } 9 | 10 | h2 { 11 | font-weight: 200; 12 | margin-top: 10px; 13 | } 14 | 15 | .container { 16 | position: relative; 17 | width: 500px; 18 | margin-left: auto; 19 | margin-right: auto; 20 | margin-bottom: 35px; 21 | text-align: center; 22 | } 23 | .circle { 24 | border-radius: 50%; 25 | position: absolute; 26 | cursor: pointer; 27 | } 28 | .circle1 { 29 | height: 500px; 30 | width: 500px; 31 | background-color: #009FE3; 32 | } 33 | 34 | .circle2 { 35 | height: 400px; 36 | width: 400px; 37 | background-color: #445261; 38 | top: 50px; 39 | left: 50px; 40 | } 41 | .circle3 { 42 | height: 300px; 43 | width: 300px; 44 | background-color: #EFB920; 45 | top: 100px; 46 | left: 100px; 47 | } 48 | .circle4 { 49 | height: 200px; 50 | width: 200px; 51 | background-color: #23BBBB; 52 | top: 150px; 53 | left: 150px; 54 | } 55 | 56 | .scorebox { 57 | border-radius: 25%; 58 | box-sizing: border-box; 59 | position: absolute; 60 | background-color: #E6ECF0; 61 | height: 80px; 62 | width: 80px; 63 | top: 210px; 64 | left: 210px; 65 | text-align: center; 66 | color: #445261; 67 | font-size: 3em; 68 | padding-top: 10px; 69 | } 70 | 71 | .button { 72 | background-color: #FF5A60; 73 | color: #FFF; 74 | border: 0; 75 | height: 40px; 76 | width: 160px; 77 | border-radius: 5px; 78 | margin: 0 auto; 79 | display: block; 80 | top: 550px; 81 | position: relative; 82 | font-weight: 600; 83 | } 84 | 85 | .light { 86 | opacity: 0.4; 87 | } -------------------------------------------------------------------------------- /08_Final_Codealong_1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Jest Simon Game 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |

simon

16 |

memory game

17 |
18 |
19 |
20 |
21 |
22 |
23 |
0
24 | 25 |
26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /08_Final_Codealong_1/scripts/game.js: -------------------------------------------------------------------------------- 1 | let game = { 2 | currentGame: [], 3 | playerMoves: [], 4 | score: 0, 5 | turnNumber: 0, 6 | choices: ["button1", "button2", "button3", "button4"] 7 | }; 8 | 9 | function newGame() { 10 | game.currentGame = []; 11 | game.playerMoves = []; 12 | game.score = 0; 13 | 14 | for (let circle of document.getElementsByClassName("circle")) { 15 | if (circle.getAttribute("data-listener") !== "true") { 16 | circle.addEventListener("click", (e) => { 17 | let move = e.target.getAttribute("id"); 18 | game.playerMoves.push(move); 19 | lightsOn(move); 20 | playerTurn(); 21 | }); 22 | circle.setAttribute("data-listener", "true"); 23 | } 24 | } 25 | showScore(); 26 | addTurn(); 27 | } 28 | 29 | function addTurn() { 30 | game.playerMoves = []; 31 | game.currentGame.push(game.choices[(Math.floor(Math.random() * 4))]); 32 | showTurns(); 33 | } 34 | 35 | function showTurns() { 36 | game.turnNumber = 0; 37 | let turns = setInterval(function () { 38 | lightsOn(game.currentGame[game.turnNumber]); 39 | game.turnNumber++; 40 | if (game.turnNumber >= game.currentGame.length) { 41 | clearInterval(turns); 42 | } 43 | }, 800); 44 | } 45 | 46 | function lightsOn(circ) { 47 | document.getElementById(circ).classList.add("light"); 48 | setTimeout(function () { 49 | document.getElementById(circ).classList.remove("light"); 50 | }, 400); 51 | } 52 | 53 | function playerTurn() { 54 | let i = game.playerMoves.length - 1; 55 | if (game.currentGame[i] === game.playerMoves[i]) { 56 | if (game.currentGame.length === game.playerMoves.length) { 57 | game.score++; 58 | showScore(); 59 | addTurn(); 60 | } 61 | } else { 62 | alert("Wrong move!"); 63 | newGame(); 64 | } 65 | } 66 | 67 | function showScore() { 68 | document.getElementById("score").innerText = game.score; 69 | } 70 | 71 | module.exports = { game, newGame, showScore, addTurn, lightsOn, showTurns, playerTurn }; -------------------------------------------------------------------------------- /08_Final_Codealong_1/scripts/tests/game.test.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @jest-environment jsdom 3 | */ 4 | 5 | const { game, newGame, showScore, addTurn, lightsOn, showTurns, playerTurn } = require("../game"); 6 | 7 | jest.spyOn(window, "alert").mockImplementation(() => { }); 8 | 9 | beforeAll(() => { 10 | let fs = require("fs"); 11 | let fileContents = fs.readFileSync("index.html", "utf-8"); 12 | document.open(); 13 | document.write(fileContents); 14 | document.close(); 15 | }); 16 | 17 | describe("pre-game", () => { 18 | test("clicking buttons before newGame should fail", () => { 19 | game.lastButton = ""; 20 | document.getElementById("button2").click(); 21 | expect(game.lastButton).toEqual(""); 22 | }); 23 | }); 24 | 25 | describe("game object contains correct keys", () => { 26 | test("score key exists", () => { 27 | expect("score" in game).toBe(true); 28 | }); 29 | test("currentGame key exists", () => { 30 | expect("currentGame" in game).toBe(true); 31 | }); 32 | test("playerMoves key exists", () => { 33 | expect("playerMoves" in game).toBe(true); 34 | }); 35 | test("choices key exists", () => { 36 | expect("choices" in game).toBe(true); 37 | }); 38 | test("choices contain correct ids", () => { 39 | expect(game.choices).toEqual(["button1", "button2", "button3", "button4"]); 40 | }); 41 | test("turnNumber key exists", () => { 42 | expect("turnNumber" in game).toBe(true); 43 | }); 44 | }); 45 | 46 | describe("newGame works correctly", () => { 47 | beforeAll(() => { 48 | game.score = 42; 49 | game.playerMoves = ["button1", "button2"]; 50 | game.currentGame = ["button1", "button2"]; 51 | document.getElementById("score").innerText = "42"; 52 | newGame(); 53 | }); 54 | test("expect data-listener to be true", () => { 55 | const elements = document.getElementsByClassName("circle"); 56 | for (let element of elements) { 57 | expect(element.getAttribute("data-listener")).toEqual("true"); 58 | } 59 | }); 60 | test("should set game score to zero", () => { 61 | expect(game.score).toEqual(0); 62 | }); 63 | test("should display 0 for the element with id of score", () => { 64 | expect(document.getElementById("score").innerText).toEqual(0); 65 | }); 66 | test("should clear the player moves array", () => { 67 | expect(game.playerMoves.length).toBe(0); 68 | }); 69 | test("should add one move to the computer's game array", () => { 70 | expect(game.currentGame.length).toBe(1); 71 | }); 72 | }); 73 | 74 | describe("gameplay works correctly", () => { 75 | beforeEach(() => { 76 | game.score = 0; 77 | game.currentGame = []; 78 | game.playerMoves = []; 79 | addTurn(); 80 | }); 81 | afterEach(() => { 82 | game.score = 0; 83 | game.currentGame = []; 84 | game.playerMoves = []; 85 | }); 86 | test("addTurn adds a new turn to the game", () => { 87 | addTurn(); 88 | expect(game.currentGame.length).toBe(2); 89 | }); 90 | test("should add correct class to light up the buttons", () => { 91 | let button = document.getElementById(game.currentGame[0]); 92 | lightsOn(game.currentGame[0]); 93 | expect(button.classList).toContain("light"); 94 | }); 95 | test("should toggle turnInProgress to true", () => { 96 | showTurns(); 97 | expect(game.turnInProgress).toBe(true); 98 | }); 99 | test("showTurns should update game.turnNumber", () => { 100 | game.turnNumber = 42; 101 | showTurns(); 102 | expect(game.turnNumber).toBe(0); 103 | }); 104 | test("should increment the score if the turn is correct", () => { 105 | game.playerMoves.push(game.currentGame[0]); 106 | playerTurn(); 107 | expect(game.score).toBe(1); 108 | }); 109 | test("clicking during computer sequence should fail", () => { 110 | showTurns(); 111 | game.lastButton = ""; 112 | document.getElementById("button2").click(); 113 | expect(game.lastButton).toEqual(""); 114 | }); 115 | }); -------------------------------------------------------------------------------- /09_Final_Codealong_2/css/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Montserrat, sans-serif; 3 | } 4 | 5 | h1 { 6 | font-weight: 300; 7 | margin-bottom: 10px; 8 | } 9 | 10 | h2 { 11 | font-weight: 200; 12 | margin-top: 10px; 13 | } 14 | 15 | .container { 16 | position: relative; 17 | width: 500px; 18 | margin-left: auto; 19 | margin-right: auto; 20 | margin-bottom: 35px; 21 | text-align: center; 22 | } 23 | .circle { 24 | border-radius: 50%; 25 | position: absolute; 26 | cursor: pointer; 27 | } 28 | .circle1 { 29 | height: 500px; 30 | width: 500px; 31 | background-color: #009FE3; 32 | } 33 | 34 | .circle2 { 35 | height: 400px; 36 | width: 400px; 37 | background-color: #445261; 38 | top: 50px; 39 | left: 50px; 40 | } 41 | .circle3 { 42 | height: 300px; 43 | width: 300px; 44 | background-color: #EFB920; 45 | top: 100px; 46 | left: 100px; 47 | } 48 | .circle4 { 49 | height: 200px; 50 | width: 200px; 51 | background-color: #23BBBB; 52 | top: 150px; 53 | left: 150px; 54 | } 55 | 56 | .scorebox { 57 | border-radius: 25%; 58 | box-sizing: border-box; 59 | position: absolute; 60 | background-color: #E6ECF0; 61 | height: 80px; 62 | width: 80px; 63 | top: 210px; 64 | left: 210px; 65 | text-align: center; 66 | color: #445261; 67 | font-size: 3em; 68 | padding-top: 10px; 69 | } 70 | 71 | .button { 72 | background-color: #FF5A60; 73 | color: #FFF; 74 | border: 0; 75 | height: 40px; 76 | width: 160px; 77 | border-radius: 5px; 78 | margin: 0 auto; 79 | display: block; 80 | top: 550px; 81 | position: relative; 82 | font-weight: 600; 83 | } 84 | 85 | .light { 86 | opacity: 0.4; 87 | } -------------------------------------------------------------------------------- /09_Final_Codealong_2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Jest Simon Game 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |

simon

16 |

memory game

17 |
18 |
19 |
20 |
21 |
22 |
23 |
0
24 | 25 |
26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /09_Final_Codealong_2/scripts/game.js: -------------------------------------------------------------------------------- 1 | let game = { 2 | currentGame: [], 3 | playerMoves: [], 4 | score: 0, 5 | turnNumber: 0, 6 | lastButton: "", 7 | turnInProgress: false, 8 | choices: ["button1", "button2", "button3", "button4"] 9 | }; 10 | 11 | function newGame() { 12 | game.currentGame = []; 13 | game.playerMoves = []; 14 | game.score = 0; 15 | 16 | for (let circle of document.getElementsByClassName("circle")) { 17 | if (circle.getAttribute("data-listener") !== "true") { 18 | circle.addEventListener("click", (e) => { 19 | if (game.currentGame.length > 0 && !game.turnInProgress) { 20 | let move = e.target.getAttribute("id"); 21 | game.lastButton = move; 22 | game.playerMoves.push(move); 23 | lightsOn(move); 24 | playerTurn(); 25 | } 26 | }); 27 | circle.setAttribute("data-listener", "true"); 28 | } 29 | } 30 | showScore(); 31 | addTurn(); 32 | } 33 | 34 | function addTurn() { 35 | game.playerMoves = []; 36 | game.currentGame.push(game.choices[(Math.floor(Math.random() * 4))]); 37 | showTurns(); 38 | } 39 | 40 | function showTurns() { 41 | game.turnInProgress = true; 42 | game.turnNumber = 0; 43 | let turns = setInterval(function () { 44 | lightsOn(game.currentGame[game.turnNumber]); 45 | game.turnNumber++; 46 | if (game.turnNumber >= game.currentGame.length) { 47 | clearInterval(turns); 48 | game.turnInProgress = false; 49 | } 50 | }, 800); 51 | } 52 | 53 | function lightsOn(circ) { 54 | document.getElementById(circ).classList.add("light"); 55 | setTimeout(function () { 56 | document.getElementById(circ).classList.remove("light"); 57 | }, 400); 58 | } 59 | 60 | function playerTurn() { 61 | let i = game.playerMoves.length - 1; 62 | if (game.currentGame[i] === game.playerMoves[i]) { 63 | if (game.currentGame.length === game.playerMoves.length) { 64 | game.score++; 65 | showScore(); 66 | addTurn(); 67 | } 68 | } else { 69 | alert("Wrong move!"); 70 | newGame(); 71 | } 72 | } 73 | 74 | function showScore() { 75 | document.getElementById("score").innerText = game.score; 76 | } 77 | 78 | module.exports = { game, newGame, showScore, addTurn, lightsOn, showTurns, playerTurn }; -------------------------------------------------------------------------------- /09_Final_Codealong_2/scripts/tests/game.test.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @jest-environment jsdom 3 | */ 4 | 5 | const { game, newGame, showScore, addTurn, lightsOn, showTurns, playerTurn } = require("../game"); 6 | 7 | jest.spyOn(window, "alert").mockImplementation(() => { }); 8 | 9 | beforeAll(() => { 10 | let fs = require("fs"); 11 | let fileContents = fs.readFileSync("index.html", "utf-8"); 12 | document.open(); 13 | document.write(fileContents); 14 | document.close(); 15 | }); 16 | 17 | describe("pre-game", () => { 18 | test("clicking buttons before newGame should fail", () => { 19 | game.lastButton = ""; 20 | document.getElementById("button2").click(); 21 | expect(game.lastButton).toEqual(""); 22 | }); 23 | }); 24 | 25 | describe("game object contains correct keys", () => { 26 | test("score key exists", () => { 27 | expect("score" in game).toBe(true); 28 | }); 29 | test("currentGame key exists", () => { 30 | expect("currentGame" in game).toBe(true); 31 | }); 32 | test("playerMoves key exists", () => { 33 | expect("playerMoves" in game).toBe(true); 34 | }); 35 | test("choices key exists", () => { 36 | expect("choices" in game).toBe(true); 37 | }); 38 | test("choices contain correct ids", () => { 39 | expect(game.choices).toEqual(["button1", "button2", "button3", "button4"]); 40 | }); 41 | test("turnNumber key exists", () => { 42 | expect("turnNumber" in game).toBe(true); 43 | }); 44 | test("lastButton key exists", () => { 45 | expect("lastButton" in game).toBe(true); 46 | }); 47 | test("turnInProgress key exists", () => { 48 | expect("turnInProgress" in game).toBe(true); 49 | }); 50 | test("turnInProgress key value is false", () => { 51 | expect("turnInProgress" in game).toBe(true); 52 | }); 53 | }); 54 | 55 | describe("newGame works correctly", () => { 56 | beforeAll(() => { 57 | game.score = 42; 58 | game.playerMoves = ["button1", "button2"]; 59 | game.currentGame = ["button1", "button2"]; 60 | document.getElementById("score").innerText = "42"; 61 | newGame(); 62 | }); 63 | test("expect data-listener to be true", () => { 64 | const elements = document.getElementsByClassName("circle"); 65 | for (let element of elements) { 66 | expect(element.getAttribute("data-listener")).toEqual("true"); 67 | } 68 | }); 69 | test("should set game score to zero", () => { 70 | expect(game.score).toEqual(0); 71 | }); 72 | test("should display 0 for the element with id of score", () => { 73 | expect(document.getElementById("score").innerText).toEqual(0); 74 | }); 75 | test("should clear the player moves array", () => { 76 | expect(game.playerMoves.length).toBe(0); 77 | }); 78 | test("should add one move to the computer's game array", () => { 79 | expect(game.currentGame.length).toBe(1); 80 | }); 81 | }); 82 | 83 | describe("gameplay works correctly", () => { 84 | beforeEach(() => { 85 | game.score = 0; 86 | game.currentGame = []; 87 | game.playerMoves = []; 88 | addTurn(); 89 | }); 90 | afterEach(() => { 91 | game.score = 0; 92 | game.currentGame = []; 93 | game.playerMoves = []; 94 | }); 95 | test("addTurn adds a new turn to the game", () => { 96 | addTurn(); 97 | expect(game.currentGame.length).toBe(2); 98 | }); 99 | test("should add correct class to light up the buttons", () => { 100 | let button = document.getElementById(game.currentGame[0]); 101 | lightsOn(game.currentGame[0]); 102 | expect(button.classList).toContain("light"); 103 | }); 104 | test("should toggle turnInProgress to true", () => { 105 | showTurns(); 106 | expect(game.turnInProgress).toBe(true); 107 | }); 108 | test("showTurns should update game.turnNumber", () => { 109 | game.turnNumber = 42; 110 | showTurns(); 111 | expect(game.turnNumber).toBe(0); 112 | }); 113 | test("should increment the score if the turn is correct", () => { 114 | game.playerMoves.push(game.currentGame[0]); 115 | playerTurn(); 116 | expect(game.score).toBe(1); 117 | }); 118 | test("clicking during computer sequence should fail", () => { 119 | showTurns(); 120 | game.lastButton = ""; 121 | document.getElementById("button2").click(); 122 | expect(game.lastButton).toEqual(""); 123 | }); 124 | }); 125 | --------------------------------------------------------------------------------