Skip to content

Commit 91383e5

Browse files
tommygonzalezatommygonzaleza
committed
Some improvements added to the tests
1 parent 201f863 commit 91383e5

File tree

13 files changed

+49
-33
lines changed

13 files changed

+49
-33
lines changed

‎exercises/01-Hello-World/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!-- your code here -->
1+
<!-- your code here -->

‎exercises/01-Hello-World/solution.hide.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!-- your code here -->
22
<style>
3-
a {
4-
color: pink;
5-
}
3+
a {
4+
color: pink;
5+
}
66
</style>
7-
<a href="https://google.com" target="_blank">Click me to open google.com</a>
7+
<a href="https://google.com" target="_blank">Click me to open google.com</a>

‎exercises/01-Hello-World/test.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,20 +10,24 @@ const a = document.querySelector("a");
1010
test("There should be an anchor tag", ()=>{
1111
expect(a).toBeTruthy()
1212
})
13+
1314
test("The anchor tag should be pink", ()=>{
1415
let styles = window.getComputedStyle(a);
1516
expect(styles["color"]).toBe("pink");
1617
});
18+
1719
test("There should be a href attribute pointing to 'https://google.com'", ()=>{
1820
let href = a.getAttribute('href');
1921
expect(href).toBeTruthy();
2022
expect(href).toBe("https://google.com");
2123
})
24+
2225
test("There should be a target attribute pointing to '_blank'", ()=>{
2326
let target = a.getAttribute('target');
2427
expect(target).toBeTruthy();
2528
expect(target).toBe("_blank");
2629
})
30+
2731
test("The anchor tag should not contains any inline style", ()=>{
2832
let emptyBodyInlineStyle = {};
2933
expect(a.style._values).toEqual(emptyBodyInlineStyle);

‎exercises/01.1-The-Style-Tag/test.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,14 @@ jest.dontMock('fs');
88
const p = document.querySelector("p");
99

1010
test("There should be a p tag", ()=>{
11-
expect(p).toBeTruthy()
11+
expect(p).toBeTruthy();
1212
})
13+
1314
test("The p tag color should be blue", ()=>{
1415
let styles = window.getComputedStyle(p);
1516
expect(styles["color"]).toBe("blue");
1617
});
18+
1719
test("The p tag should not contain any inline style", ()=>{
1820
let emptyBodyInlineStyle = {};
1921
expect(p.style._values).toEqual(emptyBodyInlineStyle);

‎exercises/01.2-Your-First-Style/tests.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,19 +7,23 @@ jest.dontMock('fs');
77

88
describe("All the styles should be applied", ()=>{
99
const a = document.querySelector("a");
10+
1011
test("The anchor tag should be yellow", ()=>{
1112
let styles = window.getComputedStyle(a);
1213
expect(styles["color"]).toBe("yellow");
1314
});
15+
1416
test("The body tag should not contain any inline style", ()=>{
1517
let bodyInlineStyle = document.getElementsByTagName("body");
1618
let emptyBodyInlineStyle = {};
1719
expect(bodyInlineStyle[0].style._values).toEqual(emptyBodyInlineStyle);
1820
});
21+
1922
test("The anchor tag should not contain any inline style", ()=>{
2023
let emptyBodyInlineStyle = {};
2124
expect(a.style._values).toEqual(emptyBodyInlineStyle);
2225
});
26+
2327
test("You should not change the existing head tag elements", ()=>{
2428
let head = document.querySelector('head')
2529
expect(head).toBeTruthy()

‎exercises/01.3-Your-Second-Style/index.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@
33
<head>
44
<style>
55
/* Your code here */
6+
body {
7+
background-color: blue;
8+
}
69
</style>
710
</head>
811
<body>

‎exercises/01.3-Your-Second-Style/tests.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,21 @@ jest.dontMock('fs');
77

88
describe("All the styles should be applied", ()=>{
99
const body = document.querySelector("body");
10+
1011
test("The background should be blue", ()=>{
1112
let styles = window.getComputedStyle(body);
1213
expect(styles["background"]).toBe("blue");
1314
});
15+
1416
test("The body tag should not contains any inline style", ()=>{
1517
let emptyBodyInlineStyle = {};
1618
expect(body.style._values).toEqual(emptyBodyInlineStyle);
1719
});
20+
1821
test("You should not change the existing head tag elements", ()=>{
1922
let head = document.querySelector('head')
2023
expect(head).toBeTruthy()
24+
2125
let meta = head.querySelector("meta")
2226
expect(meta).toBe(null)
2327
})

‎exercises/02-Separate-Stylesheet/solution.hide.css

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,6 @@
22
1. Select the body tag.
33
2. Add the background rule equal to blue.
44
*/
5-
body {
5+
body {
66
background: blue;
7-
background-size: contain;
8-
background-repeat: inherit;
9-
}
7+
}

‎exercises/02-Separate-Stylesheet/tests.js

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,14 @@ jest.dontMock("fs");
88

99
describe("All the styles should be applied", ()=>{
1010
const link = document.querySelector("link");
11-
const body = document.querySelector("body")
11+
const body = document.querySelector("body");
12+
1213
test("The body tag should not contains any inline style", ()=>{
13-
document.querySelector(
14-
"head"
15-
).innerHTML=`<style>${css.toString()}</style>`;
14+
document.querySelector("head").innerHTML = `<style>${css.toString()}</style>`;
1615
let emptyBodyInlineStyle={};
1716
expect(body.style._values).toEqual(emptyBodyInlineStyle)
1817
});
18+
1919
test("You should not change the existing head tag elements", ()=>{
2020
let head = document.querySelector('head')
2121
expect(head).toBeTruthy()
@@ -26,6 +26,7 @@ describe("All the styles should be applied", ()=>{
2626
let href = link.getAttribute("href")
2727
expect(href).toEqual('./styles.css')
2828
});
29+
2930
test("Your body tag background color should be blue", ()=>{
3031
let styles = window.getComputedStyle(body)
3132
expect(styles["background-color"]).toBe("blue")

‎exercises/02.1-Background/tests.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ describe("All the styles should be applied", ()=>{
3636
let styles = window.getComputedStyle(body);
3737
expect(styles["background-repeat"]).toBe("inherit");
3838
});
39+
3940
test("You should not change the existing head tag elements", ()=>{
4041
let head = document.querySelector('head')
4142
expect(head).toBeTruthy()

‎exercises/04.1-Combined-Rules/tests.js

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,47 +9,50 @@ jest.dontMock("fs");
99
describe("All the styles should be applied", ()=> {
1010
const body = document.querySelector("body");
1111
const link = document.querySelector("link");
12-
const title = document.querySelector('title')
12+
const title = document.querySelector('title');
13+
1314
test("The body tag should not contains any inline style", ()=> {
1415
document.querySelector(
1516
"head"
1617
).innerHTML = `<style>${css.toString()}</style>`;
1718
let emptyBodyInlineStyle = {};
1819
expect(body.style._values).toEqual(emptyBodyInlineStyle);
1920
});
21+
2022
test("the width should be '50px'", ()=> {
2123
// get computed styles of any element you like
2224
document.querySelector(
2325
"head"
2426
).innerHTML = `<style>${css.toString()}</style>`;
2527

2628
let cssArray = document.styleSheets[0].cssRules;
27-
// console.log("$$$:", cssArray)
2829
let orangeHoverSelector = "";
30+
2931
for (let i = 0; i < cssArray.length; i++) {
3032
if (cssArray[i].selectorText === ".myBox") {
3133
orangeHoverSelector = cssArray[i].style.width;
3234
}
3335
}
34-
expect(orangeHoverSelector).toBe('50px');
3536

37+
expect(orangeHoverSelector).toBe('50px');
3638
});
39+
3740
test("the height should be '50px'", ()=> {
3841
// get computed styles of any element you like
3942
document.querySelector(
4043
"head"
4144
).innerHTML = `<style>${css.toString()}</style>`;
4245

4346
let cssArray = document.styleSheets[0].cssRules;
44-
// console.log("$$$:", cssArray)
4547
let orangeHoverSelector = "";
48+
4649
for (let i = 0; i < cssArray.length; i++) {
4750
if (cssArray[i].selectorText === ".myBox") {
4851
orangeHoverSelector = cssArray[i].style.height;
4952
}
5053
}
51-
expect(orangeHoverSelector).toBe('50px');
5254

55+
expect(orangeHoverSelector).toBe('50px');
5356
});
5457

5558
test("the background-size should be contain", ()=> {
@@ -58,22 +61,23 @@ describe("All the styles should be applied", ()=> {
5861
).innerHTML = `<style>${css.toString()}</style>`;
5962

6063
let cssArray = document.styleSheets[0].cssRules;
61-
// console.log("$$$:", cssArray)
6264
let orangeHoverSelector = "";
65+
6366
for (let i = 0; i < cssArray.length; i++) {
6467
if (cssArray[i].selectorText === ".myBox") {
6568
orangeHoverSelector = cssArray[i].style['background-size'];
6669
}
6770
}
71+
6872
expect(orangeHoverSelector).toBe('contain');
6973
});
74+
7075
test("the background should include the shorthand property", ()=> {
7176
document.querySelector(
7277
"head"
7378
).innerHTML = `<style>${css.toString()}</style>`;
7479

7580
let cssArray = document.styleSheets[0].cssRules;
76-
console.log("$$$:", cssArray)
7781
let orangeHoverSelector = "";
7882
let backImg = "";
7983
let backColor = "";
@@ -125,6 +129,7 @@ describe("All the styles should be applied", ()=> {
125129
expect(padBottom).toBeFalsy();
126130
expect(padLeft).toBeFalsy();
127131
});
132+
128133
test("You should not change the existing head tag elements", ()=> {
129134
let head = document.querySelector('head')
130135
expect(head).toBeTruthy()

‎exercises/04.2-Apply-several-classes/test.js

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,19 +6,13 @@ document.documentElement.innerHTML = html.toString();
66
jest.dontMock("fs");
77

88
describe("You should change the class on the div tag", () => {
9-
const div = document.querySelectorAll("div")
10-
test("There should only be 1 div tag", () => {
11-
expect(div.length).toBe(1)
12-
});
9+
const div = document.querySelector("div");
1310

1411
test("The div class should NOT have the spades class", () => {
15-
div.forEach(e=>{
16-
expect(e.classList.contains("spade")).toBe(false)
17-
})
12+
expect(div.classList.contains("spade")).toBe(false);
1813
});
14+
1915
test("The div class should have the heart class", () => {
20-
div.forEach(e=>{
21-
expect(e.classList.contains("heart")).toBe(true)
22-
})
16+
expect(div.classList.contains("heart")).toBe(true);
2317
});
2418
});

‎learn.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@
1111
"difficulty": "easy",
1212
"video-solutions": true,
1313
"graded": true,
14-
"disabledActions": ["test"],
15-
"disableGrading": true,
14+
"disabledActions": [],
15+
"disableGrading": false,
1616
"editor": {
1717
"version": "1.0.73"
1818
}

0 commit comments

Comments
 (0)