Skip to content

Commit ec8d5ac

Browse files
author
sbmsr
committed
tests
1 parent fa341fe commit ec8d5ac

File tree

5 files changed

+121
-51
lines changed

5 files changed

+121
-51
lines changed

‎.github/workflows/test.js‎

Lines changed: 98 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,108 @@ import { test } from "uvu";
44
import * as assert from "uvu/assert";
55
let filePath = "./src/index.html";
66

7-
test("simple test", async () => {
7+
// Helpers
8+
9+
const hasAllClasses = (dom, id, classes) =>
10+
classes.every((val) => dom.window.document.getElementById(id).getAttribute("class").split(" ").includes(val));
11+
12+
// Tests
13+
14+
test("Nav Buttons Don't Work (Desktop & Mobile)", async () => {
15+
const dom = await JSDOM.fromFile(filePath, {
16+
runScripts: "dangerously",
17+
resources: "usable",
18+
});
19+
await setTimeout(10);
20+
assert.is(dom.window.document.getElementById("nav-logo").getAttribute("href"), "#header");
21+
assert.is(dom.window.document.getElementById("nav-challenges").getAttribute("href"), "#challenges");
22+
assert.is(dom.window.document.getElementById("nav-signup").getAttribute("href"), "#signup");
23+
assert.is(dom.window.document.getElementById("mobile-nav-challenges").getAttribute("href"), "#challenges");
24+
assert.is(dom.window.document.getElementById("mobile-nav-signup").getAttribute("href"), "#signup");
25+
});
26+
27+
test("Desktop Nav Is Visible on Mobile", async () => {
28+
const dom = await JSDOM.fromFile(filePath, {
29+
runScripts: "dangerously",
30+
resources: "usable",
31+
});
32+
await setTimeout(10);
33+
assert.ok(hasAllClasses(dom, "nav-challenges", ["hide-small"]));
34+
assert.ok(hasAllClasses(dom, "nav-signup", ["hide-small"]));
35+
});
36+
37+
test("Invert Banner Image Colors", async () => {
38+
const dom = await JSDOM.fromFile(filePath, {
39+
runScripts: "dangerously",
40+
resources: "usable",
41+
});
42+
await setTimeout(10);
43+
let banner = dom.window.document.getElementById("jumbo-image");
44+
assert.is(dom.window.getComputedStyle(banner)._values["filter"], "invert(1)");
45+
});
46+
47+
test("Tiles Need to be 2x2 Grid", async () => {
48+
const dom = await JSDOM.fromFile(filePath, {
49+
runScripts: "dangerously",
50+
resources: "usable",
51+
});
52+
await setTimeout(10);
53+
let grid = dom.window.document.getElementById("challenge-grid");
54+
assert.ok(
55+
["repeat(2,1fr)", "1fr1fr", "50%50%"].includes(
56+
dom.window.getComputedStyle(grid)._values["grid-template-columns"].replace(/\s/g, "")
57+
)
58+
);
59+
});
60+
61+
test("Improve Errors on Signup Form Validation (Empty Email)", async () => {
62+
const dom = await JSDOM.fromFile(filePath, {
63+
runScripts: "dangerously",
64+
resources: "usable",
65+
});
66+
await setTimeout(150); // Need to wait for script to load
67+
68+
// simulate empty email signup
69+
dom.window.document.querySelector("button").dispatchEvent(new dom.window.MouseEvent("click"));
70+
71+
assert.is(dom.window.document.getElementById("success-message").hidden, true);
72+
assert.is(dom.window.document.getElementById("empty-error-message").hidden, false);
73+
assert.is(dom.window.document.getElementById("taken-error-message").hidden, true);
74+
});
75+
76+
test("Improve Errors on Signup Form Validation (Taken Email)", async () => {
877
const dom = await JSDOM.fromFile(filePath, {
978
runScripts: "dangerously",
1079
resources: "usable",
1180
});
12-
await setTimeout(10); // let css load
13-
assert.is(dom.window.document.querySelector("h1").innerHTML, "Hello World");
81+
await setTimeout(150); // Need to wait for script to load
82+
83+
dom.window.document.getElementById("email").value = "hello@world.com";
84+
dom.window.document.querySelector("button").dispatchEvent(new dom.window.MouseEvent("click"));
85+
86+
assert.is(dom.window.document.getElementById("success-message").hidden, true);
87+
assert.is(dom.window.document.getElementById("empty-error-message").hidden, true);
88+
assert.is(dom.window.document.getElementById("taken-error-message").hidden, false);
89+
});
90+
91+
test("Improve Errors on Signup Form Validation (Repeat Email)", async () => {
92+
const dom = await JSDOM.fromFile(filePath, {
93+
runScripts: "dangerously",
94+
resources: "usable",
95+
});
96+
await setTimeout(150); // Need to wait for script to load
97+
98+
dom.window.document.getElementById("email").value = "test@new.com";
99+
dom.window.document.querySelector("button").dispatchEvent(new dom.window.MouseEvent("click"));
100+
101+
assert.is(dom.window.document.getElementById("success-message").hidden, false);
102+
assert.is(dom.window.document.getElementById("empty-error-message").hidden, true);
103+
assert.is(dom.window.document.getElementById("taken-error-message").hidden, true);
104+
105+
dom.window.document.querySelector("button").dispatchEvent(new dom.window.MouseEvent("click"));
106+
assert.is(dom.window.document.getElementById("success-message").hidden, true);
107+
assert.is(dom.window.document.getElementById("empty-error-message").hidden, true);
108+
assert.is(dom.window.document.getElementById("taken-error-message").hidden, false);
14109
});
15110

16111
test.run();

‎README.md‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,21 +6,16 @@ This is a landing page written in HTML/CSS/JS. Your job is to fix these issues:
66

77
1. Nav Buttons Don't Work (Desktop & Mobile)
88
1. Desktop Nav Is Visible on Mobile
9-
1. Custom Font Not Loading
109
1. Invert Banner Image Colors
11-
1. Banner Button Doesn't Work
12-
1. Tiles Need CSS Grid
13-
1. Tiles Should be Column on Mobile
10+
1. Tiles Need to be 2x2 CSS Grid
1411
1. Improve Errors on Signup Form Validation
15-
1. Prevent Repeat Signups with Same Email
1612

1713
## Learning Objectives
1814

1915
You will learn and gain experience with:
2016

2117
- Linking to Page Elements
2218
- Mobile Responsive Design
23-
- Custom Fonts
2419
- CSS Filters
2520
- CSS Grid
2621
- Stateful Form Validation

‎src/index.html‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,34 +5,33 @@
55
<title>JobSimulator.Dev</title>
66
<link rel="stylesheet" href="styles.css" />
77
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato" />
8-
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat" />
98
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
109
<script src="script.js"></script>
11-
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato" />
12-
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat" />
13-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
1410
</head>
1511

1612
<body>
1713
<!-- Navbar -->
14+
<!-- TODO: Fix Issue, Nav Buttons Don't Work (Desktop & Mobile) -->
1815
<nav class="top">
1916
<div class="bar blue card left-align large">
2017
<a
2118
class="bar-item button hide-medium hide-large right padding-large hover-white large blue"
2219
href="javascript:void(0);"
20+
id="hamburger-button"
2321
onclick="toggleNav()"
2422
title="Toggle Navigation Menu"
2523
><i class="fa fa-bars"></i
2624
></a>
27-
<a href="#header" class="bar-item button padding-large white">JobSimulator.Dev</a>
28-
<a href="#challenges" class="bar-item button hide-small padding-large hover-white">Browse Challenges</a>
29-
<a href="#signup" class="bar-item button hide-small padding-large hover-white">Sign Up</a>
25+
<!-- TODO: Fix Issue, Desktop Nav Is Visible on Mobile -->
26+
<a id="nav-logo" class="bar-item button padding-large white">JobSimulator.Dev</a>
27+
<a id="nav-challenges" class="bar-item button padding-large hover-white">Browse Challenges</a>
28+
<a id="nav-signup" class="bar-item button padding-large hover-white">Sign Up</a>
3029
</div>
3130

3231
<!-- Navbar on small screens -->
33-
<div id="navDemo" class="bar-block white hide hide-large hide-medium large">
34-
<a href="#challenges" class="bar-item button padding-large">Browse Challenges</a>
35-
<a href="#signup" class="bar-item button padding-large">Sign Up</a>
32+
<div id="mobile-nav" class="bar-block white hide hide-large hide-medium large">
33+
<a id="mobile-nav-challenges" class="bar-item button padding-large">Browse Challenges</a>
34+
<a id="mobile-nav-signup" class="bar-item button padding-large">Sign Up</a>
3635
</div>
3736
</nav>
3837

‎src/script.js‎

Lines changed: 9 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -25,24 +25,18 @@ addEventListener("submit", (event) => {
2525

2626
let email = document.getElementById("email").value;
2727

28-
console.log("email is", email);
29-
if (!email) {
30-
renderEmailEmptyError();
31-
return;
32-
}
33-
if (usersTable.find((user) => user.username === email)) {
34-
renderEmailTakenError();
35-
} else {
36-
renderSuccess();
37-
usersTable.push({ id: usersTable.length + 1, username: email });
38-
}
28+
// TODO: Show Correct Status Messages on Signup Form
29+
// 1. successful signup
30+
// 2. empty email
31+
// 3. taken email
32+
// 4. repeat email
3933
});
4034

4135
let toggleNav = () => {
42-
var x = document.getElementById("navDemo");
43-
if (x.className.indexOf("show") == -1) {
44-
x.className += " show";
36+
var nav = document.getElementById("mobile-nav");
37+
if (nav.className.indexOf("show") == -1) {
38+
nav.className += " show";
4539
} else {
46-
x.className = x.className.replace(" show", "");
40+
nav.className = nav.className.replace(" show", "");
4741
}
4842
};

‎src/styles.css‎

Lines changed: 4 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,3 @@
1-
body,
2-
h1,
3-
h2,
4-
h3,
5-
h4,
6-
h5,
7-
h6 {
8-
font-family: "Lato", sans-serif;
9-
}
10-
.bar,
11-
h1,
12-
button {
13-
font-family: "Montserrat", sans-serif;
14-
}
151
*,
162
*:before,
173
*:after {
@@ -167,7 +153,7 @@ h3,
167153
h4,
168154
h5,
169155
h6 {
170-
font-family: "Segoe UI", Arial, sans-serif;
156+
font-family: "Lato", Arial, sans-serif;
171157
font-weight: 400;
172158
margin: 10px 0;
173159
}
@@ -683,7 +669,7 @@ form > span {
683669

684670
#jumbo-image {
685671
max-height: 20rem;
686-
filter: invert(1);
672+
/* TODO: Invert banner colors using CSS */
687673
}
688674

689675
@media (max-width: 600px) {
@@ -890,7 +876,8 @@ form > span {
890876

891877
#challenge-grid {
892878
display: grid;
893-
grid-template-columns: repeat(2, 1fr);
879+
/* TODO: Fix Issue, Tiles Need to be 2x2 Grid. Change only grid-template-columns */
880+
grid-template-columns: none;
894881
grid-auto-rows: 10rem;
895882
gap: 1rem;
896883
padding-top: 2rem;

0 commit comments

Comments
 (0)