From dc3c77bd2d854bf898720658795bdce2d6cc9a8e Mon Sep 17 00:00:00 2001
From: ErnestoXG
Date: Wed, 3 Aug 2022 01:31:47 +0000
Subject: [PATCH 01/25] test is now checking for color yellow on anchor
---
exercises/01.2-Your-First-Style/tests.js | 8 ++++----
1 file changed, 4 insertions(+), 4 deletions(-)
diff --git a/exercises/01.2-Your-First-Style/tests.js b/exercises/01.2-Your-First-Style/tests.js
index 8e94018b..5818e30a 100644
--- a/exercises/01.2-Your-First-Style/tests.js
+++ b/exercises/01.2-Your-First-Style/tests.js
@@ -14,10 +14,10 @@ describe("All the styles should be applied", function() {
jest.resetModules();
});
- it("The background should be blue", function() {
- const body = document.querySelector("body");
- var styles = window.getComputedStyle(body);
- expect(styles["background"]).toBe("blue");
+ it("The anchor tag should be yellow", function() {
+ const a = document.querySelector("a");
+ var styles = window.getComputedStyle(a);
+ expect(styles["color"]).toBe("yellow");
});
it("The body tag should not contains any inline style", function() {
let bodyInlineStyle = document.getElementsByTagName("body");
From 824949383b16f787faf05745f7ace48187bfac23 Mon Sep 17 00:00:00 2001
From: ErnestoXG
Date: Wed, 3 Aug 2022 01:58:19 +0000
Subject: [PATCH 02/25] added tests to check if p tag exists and it has proper
styles
---
exercises/01.1-The-Style-Tag/test.js | 20 ++++++++++++++++++++
1 file changed, 20 insertions(+)
create mode 100644 exercises/01.1-The-Style-Tag/test.js
diff --git a/exercises/01.1-The-Style-Tag/test.js b/exercises/01.1-The-Style-Tag/test.js
new file mode 100644
index 00000000..bf66dc21
--- /dev/null
+++ b/exercises/01.1-The-Style-Tag/test.js
@@ -0,0 +1,20 @@
+const fs = require('fs');
+const path = require('path');
+const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8');
+document.documentElement.innerHTML = html.toString();
+
+jest.dontMock('fs');
+
+const p = document.querySelector("p");
+
+test("There should be a p tag", ()=>{
+ expect(p).toBeTruthy()
+})
+test("The p tag color should be blue", ()=>{
+ let styles = window.getComputedStyle(p);
+ expect(styles["color"]).toBe("blue");
+});
+test("The p tag should not contain any inline style", ()=>{
+ let emptyBodyInlineStyle = {};
+ expect(p.style._values).toEqual(emptyBodyInlineStyle);
+});
\ No newline at end of file
From 425e2f340ea352bac68310a29b0f2f252f927773 Mon Sep 17 00:00:00 2001
From: ErnestoXG
Date: Wed, 3 Aug 2022 02:00:34 +0000
Subject: [PATCH 03/25] added and further improved tests
---
exercises/01-Hello-World/test.js | 30 ++++++++++++++++++++++++++++++
1 file changed, 30 insertions(+)
create mode 100644 exercises/01-Hello-World/test.js
diff --git a/exercises/01-Hello-World/test.js b/exercises/01-Hello-World/test.js
new file mode 100644
index 00000000..fca18c3f
--- /dev/null
+++ b/exercises/01-Hello-World/test.js
@@ -0,0 +1,30 @@
+const fs = require('fs');
+const path = require('path');
+const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8');
+document.documentElement.innerHTML = html.toString();
+
+jest.dontMock('fs');
+
+const a = document.querySelector("a");
+
+test("There should be an anchor tag", ()=>{
+ expect(a).toBeTruthy()
+})
+test("The anchor tag should be pink", ()=>{
+ let styles = window.getComputedStyle(a);
+ expect(styles["color"]).toBe("pink");
+});
+test("There should be a href attribute pointing to 'https://google.com'", ()=>{
+ let href = a.getAttribute('href');
+ expect(href).toBeTruthy();
+ expect(href).toBe("https://google.com");
+})
+test("There should be a target attribute pointing to '_blank'", ()=>{
+ let target = a.getAttribute('target');
+ expect(target).toBeTruthy();
+ expect(target).toBe("_blank");
+})
+test("The anchor tag should not contains any inline style", ()=>{
+ let emptyBodyInlineStyle = {};
+ expect(a.style._values).toEqual(emptyBodyInlineStyle);
+});
\ No newline at end of file
From b91745d2d059029bea4e80fced0e711308e690cf Mon Sep 17 00:00:00 2001
From: ErnestoXG
Date: Wed, 3 Aug 2022 02:09:52 +0000
Subject: [PATCH 04/25] improved tests using ES6, test keyword, and checking
inline style of anchor tag
---
exercises/01.2-Your-First-Style/tests.js | 35 ++++++++++--------------
1 file changed, 15 insertions(+), 20 deletions(-)
diff --git a/exercises/01.2-Your-First-Style/tests.js b/exercises/01.2-Your-First-Style/tests.js
index 5818e30a..ddbfad7f 100644
--- a/exercises/01.2-Your-First-Style/tests.js
+++ b/exercises/01.2-Your-First-Style/tests.js
@@ -1,31 +1,26 @@
-const fs = require("fs");
-const path = require("path");
-const html = fs.readFileSync(path.resolve(__dirname, "./index.html"), "utf8");
-// const css = fs.readFileSync(path.resolve(__dirname, "./styles.css"), "utf8");
+const fs = require('fs');
+const path = require('path');
+const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8');
+document.documentElement.innerHTML = html.toString();
-jest.dontMock("fs");
+jest.dontMock('fs');
-describe("All the styles should be applied", function() {
- beforeEach(() => {
- //here I import the HTML into the document
- document.documentElement.innerHTML = html.toString();
- });
- afterEach(() => {
- jest.resetModules();
- });
-
- it("The anchor tag should be yellow", function() {
- const a = document.querySelector("a");
- var styles = window.getComputedStyle(a);
+describe("All the styles should be applied", ()=>{
+ const a = document.querySelector("a");
+ test("The anchor tag should be yellow", ()=>{
+ let styles = window.getComputedStyle(a);
expect(styles["color"]).toBe("yellow");
});
- it("The body tag should not contains any inline style", function() {
+ test("The body tag should not contain any inline style", ()=>{
let bodyInlineStyle = document.getElementsByTagName("body");
let emptyBodyInlineStyle = {};
expect(bodyInlineStyle[0].style._values).toEqual(emptyBodyInlineStyle);
- // console.log(bodyInlineStyle[0].style._values.background);
});
- it("You should not change the existing head tag elements", function () {
+ test("The anchor tag should not contain any inline style", ()=>{
+ let emptyBodyInlineStyle = {};
+ expect(a.style._values).toEqual(emptyBodyInlineStyle);
+ });
+ test("You should not change the existing head tag elements", ()=>{
let head = document.querySelector('head')
expect(head).toBeTruthy()
From e450b3fb2168ad74073df2f77abb0a8bcc247a01 Mon Sep 17 00:00:00 2001
From: ErnestoXG
Date: Wed, 3 Aug 2022 02:16:21 +0000
Subject: [PATCH 05/25] upgraded tests to ES6 and changed it function foor test
function
---
exercises/01.3-Your-Second-Style/tests.js | 34 ++++++++---------------
1 file changed, 12 insertions(+), 22 deletions(-)
diff --git a/exercises/01.3-Your-Second-Style/tests.js b/exercises/01.3-Your-Second-Style/tests.js
index 2e0fa1a3..e7e8ea61 100644
--- a/exercises/01.3-Your-Second-Style/tests.js
+++ b/exercises/01.3-Your-Second-Style/tests.js
@@ -1,31 +1,21 @@
-const fs = require("fs");
-const path = require("path");
-const html = fs.readFileSync(path.resolve(__dirname, "./index.html"), "utf8");
-// const css = fs.readFileSync(path.resolve(__dirname, "./styles.css"), "utf8");
+const fs = require('fs');
+const path = require('path');
+const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8');
+document.documentElement.innerHTML = html.toString();
-jest.dontMock("fs");
+jest.dontMock('fs');
-describe("All the styles should be applied", function() {
- beforeEach(() => {
- //here I import the HTML into the document
- document.documentElement.innerHTML = html.toString();
- });
- afterEach(() => {
- jest.resetModules();
- });
-
- it("The background should be blue", function() {
- const body = document.querySelector("body");
- var styles = window.getComputedStyle(body);
+describe("All the styles should be applied", ()=>{
+ const body = document.querySelector("body");
+ test("The background should be blue", ()=>{
+ let styles = window.getComputedStyle(body);
expect(styles["background"]).toBe("blue");
});
- it("The body tag should not contains any inline style", function() {
- let bodyInlineStyle = document.getElementsByTagName("body");
+ test("The body tag should not contains any inline style", ()=>{
let emptyBodyInlineStyle = {};
- expect(bodyInlineStyle[0].style._values).toEqual(emptyBodyInlineStyle);
- // console.log(bodyInlineStyle[0].style._values.background);
+ expect(body.style._values).toEqual(emptyBodyInlineStyle);
});
- it("You should not change the existing head tag elements", function () {
+ test("You should not change the existing head tag elements", ()=>{
let head = document.querySelector('head')
expect(head).toBeTruthy()
let meta = head.querySelector("meta")
From 0f7f2a4b1b9da9b96fbacaa51f8f259809209465 Mon Sep 17 00:00:00 2001
From: ErnestoXG
Date: Wed, 3 Aug 2022 02:22:03 +0000
Subject: [PATCH 06/25] removed unncessary comment in example
---
exercises/01-Hello-World/README.es.md | 1 -
exercises/01-Hello-World/README.md | 1 -
2 files changed, 2 deletions(-)
diff --git a/exercises/01-Hello-World/README.es.md b/exercises/01-Hello-World/README.es.md
index 779fe511..ec1c29ff 100644
--- a/exercises/01-Hello-World/README.es.md
+++ b/exercises/01-Hello-World/README.es.md
@@ -19,7 +19,6 @@ Mira este ejemplo:
```HTML
diff --git a/exercises/01-Hello-World/README.md b/exercises/01-Hello-World/README.md
index 9510cd81..35efc390 100644
--- a/exercises/01-Hello-World/README.md
+++ b/exercises/01-Hello-World/README.md
@@ -18,7 +18,6 @@ Look at this example:
```HTML
From 94723357baa5c2e634f78a2991e0af729d600915 Mon Sep 17 00:00:00 2001
From: ErnestoXG
Date: Wed, 3 Aug 2022 02:22:23 +0000
Subject: [PATCH 07/25] added solution file
---
exercises/01-Hello-World/solution.hide.html | 7 +++++++
1 file changed, 7 insertions(+)
create mode 100644 exercises/01-Hello-World/solution.hide.html
diff --git a/exercises/01-Hello-World/solution.hide.html b/exercises/01-Hello-World/solution.hide.html
new file mode 100644
index 00000000..ce422661
--- /dev/null
+++ b/exercises/01-Hello-World/solution.hide.html
@@ -0,0 +1,7 @@
+
+
+Click me to open google.com
\ No newline at end of file
From fbc9af20a17b4911bde9348ef04a147446ae9208 Mon Sep 17 00:00:00 2001
From: ErnestoXG
Date: Wed, 3 Aug 2022 02:23:37 +0000
Subject: [PATCH 08/25] added solution file
---
exercises/01.1-The-Style-Tag/solution.hide.html | 12 ++++++++++++
1 file changed, 12 insertions(+)
create mode 100644 exercises/01.1-The-Style-Tag/solution.hide.html
diff --git a/exercises/01.1-The-Style-Tag/solution.hide.html b/exercises/01.1-The-Style-Tag/solution.hide.html
new file mode 100644
index 00000000..659b76b3
--- /dev/null
+++ b/exercises/01.1-The-Style-Tag/solution.hide.html
@@ -0,0 +1,12 @@
+
+
+
+ Coding is a basic literacy in the digital age, and it is important for kids to understand and be able to work with and understand the technology
+ around them. Having children learn coding at a young age prepares them for the future. Coding helps children with communication, creativity,
+ math,writing, and confidence.
+
\ No newline at end of file
From 52891964f87a80c4beb51eb461a759a5035c33ff Mon Sep 17 00:00:00 2001
From: ErnestoXG
Date: Wed, 3 Aug 2022 02:24:28 +0000
Subject: [PATCH 09/25] added solution file
---
exercises/01.2-Your-First-Style/solution.hide.html | 14 ++++++++++++++
1 file changed, 14 insertions(+)
create mode 100644 exercises/01.2-Your-First-Style/solution.hide.html
diff --git a/exercises/01.2-Your-First-Style/solution.hide.html b/exercises/01.2-Your-First-Style/solution.hide.html
new file mode 100644
index 00000000..3907bb3c
--- /dev/null
+++ b/exercises/01.2-Your-First-Style/solution.hide.html
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+ Hello! I am an anchor in red, change my color to yellow
+
+
From 2576920fba4fc84caa335091106c9d3a98a74041 Mon Sep 17 00:00:00 2001
From: ErnestoXG
Date: Wed, 3 Aug 2022 02:26:00 +0000
Subject: [PATCH 10/25] added solution file
---
.../01.3-Your-Second-Style/solution.hide.html | 14 ++++++++++++++
1 file changed, 14 insertions(+)
create mode 100644 exercises/01.3-Your-Second-Style/solution.hide.html
diff --git a/exercises/01.3-Your-Second-Style/solution.hide.html b/exercises/01.3-Your-Second-Style/solution.hide.html
new file mode 100644
index 00000000..9b239409
--- /dev/null
+++ b/exercises/01.3-Your-Second-Style/solution.hide.html
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+ Hello! My background should be blue!
+
+
From b6f1b26813408d04a1806748a78cedb404e95f98 Mon Sep 17 00:00:00 2001
From: ErnestoXG
Date: Wed, 3 Aug 2022 02:55:01 +0000
Subject: [PATCH 11/25] added solution file
---
exercises/02-Separate-Stylesheet/solution.hide.css | 9 +++++++++
1 file changed, 9 insertions(+)
create mode 100644 exercises/02-Separate-Stylesheet/solution.hide.css
diff --git a/exercises/02-Separate-Stylesheet/solution.hide.css b/exercises/02-Separate-Stylesheet/solution.hide.css
new file mode 100644
index 00000000..779c2c33
--- /dev/null
+++ b/exercises/02-Separate-Stylesheet/solution.hide.css
@@ -0,0 +1,9 @@
+/* your styles here:
+ 1. Select the body tag.
+ 2. Add the background rule equal to blue.
+ */
+ body {
+ background: blue;
+ background-size: contain;
+ background-repeat: inherit;
+}
\ No newline at end of file
From 12c623fc13a695900f690c8a38e071a83d77c7c0 Mon Sep 17 00:00:00 2001
From: ErnestoXG
Date: Wed, 3 Aug 2022 02:56:03 +0000
Subject: [PATCH 12/25] improved tests and cghecks for background color blue
---
exercises/02-Separate-Stylesheet/tests.js | 59 ++++++-----------------
1 file changed, 14 insertions(+), 45 deletions(-)
diff --git a/exercises/02-Separate-Stylesheet/tests.js b/exercises/02-Separate-Stylesheet/tests.js
index a583e81e..d07034b6 100644
--- a/exercises/02-Separate-Stylesheet/tests.js
+++ b/exercises/02-Separate-Stylesheet/tests.js
@@ -1,64 +1,33 @@
const fs=require("fs");
const path=require("path");
-const html=fs.readFileSync(path.resolve(__dirname, "./index.html"), "utf8");
+const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8');
const css=fs.readFileSync(path.resolve(__dirname, "./styles.css"), "utf8");
+document.documentElement.innerHTML = html.toString();
jest.dontMock("fs");
-describe("All the styles should be applied", function () {
- beforeEach(() => {
- //here I import the HTML into the document
- document.documentElement.innerHTML=html.toString();
-
- //apply the styles from the stylesheet if needed
-
-
-
- });
- afterEach(() => {
- jest.resetModules();
- });
- it("The body tag should not contains any inline style", function () {
+describe("All the styles should be applied", ()=>{
+ const link = document.querySelector("link");
+ const body = document.querySelector("body")
+ test("The body tag should not contains any inline style", ()=>{
document.querySelector(
"head"
).innerHTML=``;
- let bodyInlineStyle=document.getElementsByTagName("body");
let emptyBodyInlineStyle={};
- expect(bodyInlineStyle[0].style._values).toEqual(emptyBodyInlineStyle);
- // expect(bodyInlineStyle[0].style._values.background - repeat).toBe(
- // undefined
- // );
-
- console.log(bodyInlineStyle[0].style._values);
+ expect(body.style._values).toEqual(emptyBodyInlineStyle)
});
-
- it("the background-size should be 'contain' without quotes", function () {
- document.querySelector(
- "head"
- ).innerHTML=``;
- // get computed styles of any element you like
- const body=document.querySelector("body");
- let styles=window.getComputedStyle(body);
- expect(styles["background-size"]).toBe("contain");
- });
-
- it("the background-repeat should be 'inherit' without quotes", function () {
- document.querySelector(
- "head"
- ).innerHTML=``;
-
- const body=document.querySelector("body");
- let styles=window.getComputedStyle(body);
- expect(styles["background-repeat"]).toBe("inherit");
- });
- it("You should not change the existing head tag elements", function () {
+ test("You should not change the existing head tag elements", ()=>{
let head = document.querySelector('head')
expect(head).toBeTruthy()
let meta = head.querySelector("meta")
expect(meta).toBe(null)
- const pathname = new URL(document.querySelector('link').href).pathname
- expect(pathname).toBe('/styles.css')
+ let href = link.getAttribute("href")
+ expect(href).toEqual('./styles.css')
+ });
+ test("Your body tag background color should be blue", ()=>{
+ let styles = window.getComputedStyle(body)
+ expect(styles["background-color"]).toBe("blue")
})
});
From 9710f495b9e79966184e840776098520f5af75ac Mon Sep 17 00:00:00 2001
From: ErnestoXG
Date: Wed, 3 Aug 2022 03:08:20 +0000
Subject: [PATCH 13/25] added solution file
---
exercises/02.1-Background/solution.hide.css | 5 +++++
1 file changed, 5 insertions(+)
create mode 100644 exercises/02.1-Background/solution.hide.css
diff --git a/exercises/02.1-Background/solution.hide.css b/exercises/02.1-Background/solution.hide.css
new file mode 100644
index 00000000..8c72a684
--- /dev/null
+++ b/exercises/02.1-Background/solution.hide.css
@@ -0,0 +1,5 @@
+body {
+ background-image: url(https://4geeksacademy.github.io/exercise-assets/img/bg/small-mosaic.jpg);
+ background-size: contain;
+ background-repeat: inherit;
+}
\ No newline at end of file
From 708ce0dd5633e6880e3f08c2a0ec84b62e393788 Mon Sep 17 00:00:00 2001
From: ErnestoXG
Date: Wed, 3 Aug 2022 03:09:19 +0000
Subject: [PATCH 14/25] Upgraded test to modern stanndards and made it less
repetitive
---
exercises/02.1-Background/tests.js | 69 ++++++++++++------------------
1 file changed, 27 insertions(+), 42 deletions(-)
diff --git a/exercises/02.1-Background/tests.js b/exercises/02.1-Background/tests.js
index cfde6b1f..375aa45c 100644
--- a/exercises/02.1-Background/tests.js
+++ b/exercises/02.1-Background/tests.js
@@ -1,67 +1,52 @@
-const fs=require("fs");
-const path=require("path");
-const html=fs.readFileSync(path.resolve(__dirname, "./index.html"), "utf8");
-const css=fs.readFileSync(path.resolve(__dirname, "./styles.css"), "utf8");
+const fs = require("fs");
+const path = require("path");
+const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8');
+const css = fs.readFileSync(path.resolve(__dirname, "./styles.css"), "utf8");
+document.documentElement.innerHTML = html.toString();
jest.dontMock("fs");
-describe("All the styles should be applied", function () {
- beforeEach(() => {
- //here I import the HTML into the document
- document.documentElement.innerHTML=html.toString();
-
- //apply the styles from the stylesheet if needed
-
-
-
- });
- afterEach(() => {
- jest.resetModules();
- });
- it("The body tag should not contains any inline style", function () {
+describe("All the styles should be applied", ()=>{
+ const body = document.querySelector("body");
+ const link = document.querySelector("link");
+ const title = document.querySelector('title');
+
+ test("The body tag should not contains any inline style", ()=>{
document.querySelector(
"head"
- ).innerHTML=``;
- let bodyInlineStyle=document.getElementsByTagName("body");
- let emptyBodyInlineStyle={};
- expect(bodyInlineStyle[0].style._values).toEqual(emptyBodyInlineStyle);
- // expect(bodyInlineStyle[0].style._values.background - repeat).toBe(
- // undefined
- // );
-
- console.log(bodyInlineStyle[0].style._values);
+ ).innerHTML = ``;
+ let emptyBodyInlineStyle = {};
+ expect(body.style._values).toEqual(emptyBodyInlineStyle);
});
- it("the background-size should be 'contain' without quotes", function () {
+ test("the background-size should be 'contain' without quotes", ()=>{
document.querySelector(
"head"
- ).innerHTML=``;
+ ).innerHTML = ``;
// get computed styles of any element you like
- const body=document.querySelector("body");
- let styles=window.getComputedStyle(body);
+ let styles = window.getComputedStyle(body);
expect(styles["background-size"]).toBe("contain");
});
- it("the background-repeat should be 'inherit' without quotes", function () {
+ test("the background-repeat should be 'inherit' without quotes", ()=>{
document.querySelector(
"head"
- ).innerHTML=``;
+ ).innerHTML = ``;
- const body=document.querySelector("body");
- let styles=window.getComputedStyle(body);
+ let styles = window.getComputedStyle(body);
expect(styles["background-repeat"]).toBe("inherit");
});
- it("You should not change the existing head tag elements", function () {
+ test("You should not change the existing head tag elements", ()=>{
let head = document.querySelector('head')
expect(head).toBeTruthy()
-
+
let meta = head.querySelector("meta")
expect(meta).toBe(null)
-
- const pathname = new URL(document.querySelector('link').href).pathname
- expect(pathname).toBe('/styles.css')
- let title = head.querySelector('title').innerHTML
- expect(title).toBe('02 Background')
+ const href = link.getAttribute("href")
+ expect(href).toBe('./styles.css')
+
+ let titleInner = title.innerHTML
+ expect(titleInner).toBe('02 Background')
})
});
From f6cd29ab05b8114d7c795561d4c2b1e5096ab887 Mon Sep 17 00:00:00 2001
From: ErnestoXG
Date: Wed, 3 Aug 2022 03:17:38 +0000
Subject: [PATCH 15/25] added solution file
---
exercises/03-Inline-Styles/solution.hide.html | 17 +++++++++++++++++
1 file changed, 17 insertions(+)
create mode 100644 exercises/03-Inline-Styles/solution.hide.html
diff --git a/exercises/03-Inline-Styles/solution.hide.html b/exercises/03-Inline-Styles/solution.hide.html
new file mode 100644
index 00000000..1c3a3828
--- /dev/null
+++ b/exercises/03-Inline-Styles/solution.hide.html
@@ -0,0 +1,17 @@
+
+
+
+ 03 Inline Styles
+
+
+
+
+
+
Hello
+
+
+
My brother
+
+
+
+
\ No newline at end of file
From c6107db9f77cd6e34d78ba5e82072e7b2f07760a Mon Sep 17 00:00:00 2001
From: ErnestoXG
Date: Wed, 3 Aug 2022 03:18:05 +0000
Subject: [PATCH 16/25] upgraded tests to mre modern standard
---
exercises/03-Inline-Styles/tests.js | 20 ++++++--------------
1 file changed, 6 insertions(+), 14 deletions(-)
diff --git a/exercises/03-Inline-Styles/tests.js b/exercises/03-Inline-Styles/tests.js
index 3de572dd..04593d63 100644
--- a/exercises/03-Inline-Styles/tests.js
+++ b/exercises/03-Inline-Styles/tests.js
@@ -1,24 +1,16 @@
-
const fs = require("fs");
const path = require("path");
-const html = fs.readFileSync(path.resolve(__dirname, "./index.html"), "utf8");
-
+const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8');
+document.documentElement.innerHTML = html.toString();
jest.dontMock("fs");
-describe("The Table tag should contain inline style background: green", function() {
- beforeEach(() => {
- //here I import the HTML into the document
- document.documentElement.innerHTML = html.toString();
- });
- afterEach(() => {
- jest.resetModules();
- });
+describe("The Table tag should contain inline style background: green", ()=>{
- it("You should not change the existing head tag elements", function () {
+ test("You should not change the existing head tag elements", ()=>{
let head = document.querySelector('head')
expect(head).toBeTruthy()
-
+
let meta = head.querySelector("meta")
expect(meta).toBe(null)
@@ -26,7 +18,7 @@ describe("The Table tag should contain inline style background: green", function
expect(title).toBe('03 Inline Styles')
})
- it("The background should be green", function() {
+ test("The background should be green", ()=>{
const table = document.querySelector("table");
// expect(table.style.background === "green").toBeTruthy();
var styles = window.getComputedStyle(table);
From 2c3450b2a0ec52a842b06cba491aae4ce18bfdb5 Mon Sep 17 00:00:00 2001
From: ErnestoXG
Date: Wed, 3 Aug 2022 03:36:53 +0000
Subject: [PATCH 17/25] exchanged var for let
---
exercises/03-Inline-Styles/tests.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/exercises/03-Inline-Styles/tests.js b/exercises/03-Inline-Styles/tests.js
index 04593d63..b0b7b629 100644
--- a/exercises/03-Inline-Styles/tests.js
+++ b/exercises/03-Inline-Styles/tests.js
@@ -21,7 +21,7 @@ describe("The Table tag should contain inline style background: green", ()=>{
test("The background should be green", ()=>{
const table = document.querySelector("table");
// expect(table.style.background === "green").toBeTruthy();
- var styles = window.getComputedStyle(table);
+ let styles = window.getComputedStyle(table);
expect(styles["background"]).toBe("green");
});
});
From a6039f493660a39d9f68dff5950d6971b04d2cc5 Mon Sep 17 00:00:00 2001
From: ErnestoXG
Date: Wed, 3 Aug 2022 03:37:28 +0000
Subject: [PATCH 18/25] Added test
---
exercises/04-Class-Selector/test.js | 40 +++++++++++++++++++++++++++++
1 file changed, 40 insertions(+)
create mode 100644 exercises/04-Class-Selector/test.js
diff --git a/exercises/04-Class-Selector/test.js b/exercises/04-Class-Selector/test.js
new file mode 100644
index 00000000..58c20d17
--- /dev/null
+++ b/exercises/04-Class-Selector/test.js
@@ -0,0 +1,40 @@
+const fs = require("fs");
+const path = require("path");
+const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8');
+const css = fs.readFileSync(path.resolve(__dirname, "./styles.css"), "utf8");
+document.documentElement.innerHTML = html.toString();
+
+jest.dontMock("fs");
+
+describe("Both p tags should have a blue background", () => {
+ const body = document.querySelector("body")
+ const p = document.querySelectorAll("p");
+ test("You should not change the existing head tag elements", () => {
+ let head = document.querySelector('head')
+ expect(head).toBeTruthy()
+
+ let meta = head.querySelector("meta")
+ expect(meta).toBe(null)
+
+ let title = head.querySelector('title').innerHTML
+ expect(title).toBe('04 Class selector')
+ });
+
+ test("The body tag should not contains any inline style", () => {
+ document.querySelector(
+ "head"
+ ).innerHTML = ``;
+ let emptyBodyInlineStyle = {};
+ expect(body.style._values).toEqual(emptyBodyInlineStyle)
+ });
+
+ test("There should be two p tags", () => {
+ expect(p.length).toBe(2)
+ });
+ test("Both p tags should have a class name 'b-blue' without the quotation marks", () => {
+ p.forEach(e=>{
+ let eClass = e.getAttribute("class");
+ expect(eClass).toBe("b-blue")
+ })
+ });
+});
From bd04bceac091b354fa7740258a1ff22b93580ca9 Mon Sep 17 00:00:00 2001
From: ErnestoXG
Date: Wed, 3 Aug 2022 03:42:15 +0000
Subject: [PATCH 19/25] added solution file
---
exercises/04-Class-Selector/index.html | 4 +---
exercises/04-Class-Selector/solution.hide.html | 12 ++++++++++++
2 files changed, 13 insertions(+), 3 deletions(-)
create mode 100644 exercises/04-Class-Selector/solution.hide.html
diff --git a/exercises/04-Class-Selector/index.html b/exercises/04-Class-Selector/index.html
index e3abd1bd..45709afb 100644
--- a/exercises/04-Class-Selector/index.html
+++ b/exercises/04-Class-Selector/index.html
@@ -2,9 +2,7 @@
-
- 04 Class selector
-
+ 04 Class selector
diff --git a/exercises/04-Class-Selector/solution.hide.html b/exercises/04-Class-Selector/solution.hide.html
new file mode 100644
index 00000000..60e1d67f
--- /dev/null
+++ b/exercises/04-Class-Selector/solution.hide.html
@@ -0,0 +1,12 @@
+
+
+
+
+ 04 Class selector
+
+
+
+
Hello!
+
World!
+
+
From a55c1f87deb4fa31967428e93e3586125da8670c Mon Sep 17 00:00:00 2001
From: ErnestoXG
Date: Wed, 3 Aug 2022 03:52:54 +0000
Subject: [PATCH 20/25] added solution file
---
exercises/04.1-Combined-Rules/solution.hide.css | 8 ++++++++
1 file changed, 8 insertions(+)
create mode 100644 exercises/04.1-Combined-Rules/solution.hide.css
diff --git a/exercises/04.1-Combined-Rules/solution.hide.css b/exercises/04.1-Combined-Rules/solution.hide.css
new file mode 100644
index 00000000..e9d46fd5
--- /dev/null
+++ b/exercises/04.1-Combined-Rules/solution.hide.css
@@ -0,0 +1,8 @@
+.myBox {
+ width: 50px;
+ height: 50px;
+ padding: 10px 190px 50px 30px;
+
+ background: rgb(189, 189, 189) url(https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/3a2d1dd03f58167a5a4894155af2d3aa4d41d647/.learn/assets/baby.jpg?raw=true) no-repeat 100px;
+ background-size: contain;
+}
\ No newline at end of file
From dcbb8369f218d6436c9147abab85f9d0c3027902 Mon Sep 17 00:00:00 2001
From: ErnestoXG
Date: Wed, 3 Aug 2022 03:53:26 +0000
Subject: [PATCH 21/25] improved format and minar issue with header
---
exercises/04.1-Combined-Rules/tests.js | 170 ++++++++++---------------
1 file changed, 67 insertions(+), 103 deletions(-)
diff --git a/exercises/04.1-Combined-Rules/tests.js b/exercises/04.1-Combined-Rules/tests.js
index 16c3296a..d3540732 100644
--- a/exercises/04.1-Combined-Rules/tests.js
+++ b/exercises/04.1-Combined-Rules/tests.js
@@ -1,126 +1,91 @@
-const fs=require("fs");
-const path=require("path");
-const html=fs.readFileSync(path.resolve(__dirname, "./index.html"), "utf8");
-const css=fs.readFileSync(path.resolve(__dirname, "./styles.css"), "utf8");
+const fs = require("fs");
+const path = require("path");
+const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8');
+const css = fs.readFileSync(path.resolve(__dirname, "./styles.css"), "utf8");
+document.documentElement.innerHTML = html.toString();
jest.dontMock("fs");
-describe("All the styles should be applied", function () {
- beforeEach(() => {
- //here I import the HTML into the document
- document.documentElement.innerHTML=html.toString();
-
- //apply the styles from the stylesheet if needed
- // document.querySelector(
- // "head"
- // ).innerHTML = ``;
- });
- afterEach(() => {
- jest.resetModules();
- });
-
- // it("The styles.css file should be empty", function () {
- // console.log(css);
- // expect(css.toString()==="").toBeTruthy();
- // });
- // it("The Head tag should includes a Style tag", function () {
- // expect(html.toString().indexOf(`-1).toBeTruthy();
- // });
- it("The body tag should not contains any inline style", function () {
+describe("All the styles should be applied", ()=> {
+ const body = document.querySelector("body");
+ const link = document.querySelector("link");
+ const title = document.querySelector('title')
+ test("The body tag should not contains any inline style", ()=> {
document.querySelector(
"head"
- ).innerHTML=``;
- let bodyInlineStyle=document.getElementsByTagName("style");
- let emptyBodyInlineStyle={};
- expect(bodyInlineStyle[0].style._values).toEqual(emptyBodyInlineStyle);
- console.log("sty: ", bodyInlineStyle[0]);
+ ).innerHTML = ``;
+ let emptyBodyInlineStyle = {};
+ expect(body.style._values).toEqual(emptyBodyInlineStyle);
});
- it("the width should be '50px'", function () {
+ test("the width should be '50px'", ()=> {
// get computed styles of any element you like
document.querySelector(
"head"
- ).innerHTML=``;
+ ).innerHTML = ``;
- let cssArray=document.styleSheets[0].cssRules;
+ let cssArray = document.styleSheets[0].cssRules;
// console.log("$$$:", cssArray)
- let orangeHoverSelector="";
- for (let i=0; i< cssArray.length; i++) {
+ if (cssArray[i].selectorText === ".myBox") {
+ orangeHoverSelector = cssArray[i].style.width;
}
}
expect(orangeHoverSelector).toBe('50px');
});
- it("the height should be '50px'", function () {
+ test("the height should be '50px'", ()=> {
// get computed styles of any element you like
document.querySelector(
"head"
- ).innerHTML=``;
+ ).innerHTML = ``;
- let cssArray=document.styleSheets[0].cssRules;
+ let cssArray = document.styleSheets[0].cssRules;
// console.log("$$$:", cssArray)
- let orangeHoverSelector="";
- for (let i=0; i< cssArray.length; i++) {
+ if (cssArray[i].selectorText === ".myBox") {
+ orangeHoverSelector = cssArray[i].style.height;
}
}
expect(orangeHoverSelector).toBe('50px');
});
- // it("the background should be in rgb code rgb(189, 189, 189)", function() {
- // // get computed styles of any element you like
- // const body = document.querySelector(".myBox");
- // var styles = window.getComputedStyle(body);
- // expect(styles["background"]).toBe("rgb(189, 189, 189)");
- // });
-
- // it("the padding-top should be deleted", function () {
- // // get computed styles of any element you like
- // const body=document.querySelector(".myBox");
- // var styles=window.getComputedStyle(body);
- // expect(styles["padding-top"]).toBeFalsy();
- // expect(styles["padding-bottom"]).toBeFalsy();
- // expect(styles["padding-right"]).toBeFalsy();
- // expect(styles["padding-left"]).toBeFalsy();
- // });
-
- it("the background-size should be contain", function () {
+ test("the background-size should be contain", ()=> {
document.querySelector(
"head"
- ).innerHTML=``;
+ ).innerHTML = ``;
- let cssArray=document.styleSheets[0].cssRules;
+ let cssArray = document.styleSheets[0].cssRules;
// console.log("$$$:", cssArray)
- let orangeHoverSelector="";
- for (let i=0; i< cssArray.length; i++) {
+ if (cssArray[i].selectorText === ".myBox") {
+ orangeHoverSelector = cssArray[i].style['background-size'];
}
}
expect(orangeHoverSelector).toBe('contain');
});
- it("the background should include the shorthand property", function () {
+ test("the background should include the shorthand property", ()=> {
document.querySelector(
"head"
- ).innerHTML=``;
+ ).innerHTML = ``;
- let cssArray=document.styleSheets[0].cssRules;
+ let cssArray = document.styleSheets[0].cssRules;
console.log("$$$:", cssArray)
- let orangeHoverSelector="";
+ let orangeHoverSelector = "";
let backImg = "";
let backColor = "";
let backPos = "";
let backRepeat = "";
- for (let i=0; i< cssArray.length; i++) {
+ if (cssArray[i].selectorText === ".myBox") {
+ orangeHoverSelector = cssArray[i].style.background;
+ backImg = cssArray[i].style['background-image'];
+ backColor = cssArray[i].style['background-color'];
+ backPos = cssArray[i].style['background-position-x'];
+ backRepeat = cssArray[i].style['background-repeat'];
}
}
expect(backColor).toBeFalsy();
@@ -133,25 +98,25 @@ describe("All the styles should be applied", function () {
expect(orangeHoverSelector).toContain('url(https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/3a2d1dd03f58167a5a4894155af2d3aa4d41d647/.learn/assets/baby.jpg?raw=true)');
});
- it("the padding should include the shorthand property in the right order (top, right, bottom, left)", function () {
+ test("the padding should include the shorthand property in the right order (top, right, bottom, left)", ()=> {
document.querySelector(
"head"
- ).innerHTML=``;
+ ).innerHTML = ``;
- let cssArray=document.styleSheets[0].cssRules;
+ let cssArray = document.styleSheets[0].cssRules;
// console.log("$$$:", cssArray)
- let orangeHoverSelector="";
- let padTop= "";
- let padRight= "";
- let padBottom= "";
- let padLeft= "";
- for (let i=0; i< cssArray.length; i++) {
+ if (cssArray[i].selectorText === ".myBox") {
+ orangeHoverSelector = cssArray[i].style.padding;
+ padTop = cssArray[i].style['padding-top']
+ padRight = cssArray[i].style['padding-right']
+ padBottom = cssArray[i].style['padding-bottom']
+ padLeft = cssArray[i].style['padding-left']
}
}
expect(orangeHoverSelector).toBe('10px 190px 50px 30px');
@@ -160,17 +125,16 @@ describe("All the styles should be applied", function () {
expect(padBottom).toBeFalsy();
expect(padLeft).toBeFalsy();
});
- it("You should not change the existing head tag elements", function () {
+ test("You should not change the existing head tag elements", ()=> {
let head = document.querySelector('head')
expect(head).toBeTruthy()
-
+
let meta = head.querySelector("meta")
expect(meta).toBe(null)
-
- const pathname = new URL(document.querySelector('link').href).pathname
- expect(pathname).toBe('/styles.css')
-
- let title = head.querySelector('title')
- expect(title).not.toBe(null)
+
+ const href = link.getAttribute("href")
+ expect(href).toBe('./styles.css')
+
+ expect(title).toBeTruthy()
})
});
From ada8f1038cd20d2e8a697855e8672c48214c3e19 Mon Sep 17 00:00:00 2001
From: ErnestoXG
Date: Wed, 3 Aug 2022 04:05:42 +0000
Subject: [PATCH 22/25] fixed titles
---
exercises/04.1-Combined-Rules/index.html | 4 +---
exercises/04.2-Apply-several-classes/index.html | 4 +---
2 files changed, 2 insertions(+), 6 deletions(-)
diff --git a/exercises/04.1-Combined-Rules/index.html b/exercises/04.1-Combined-Rules/index.html
index 2af5a24c..1525b6cf 100644
--- a/exercises/04.1-Combined-Rules/index.html
+++ b/exercises/04.1-Combined-Rules/index.html
@@ -2,9 +2,7 @@
-
- 04 Combined Rules
-
+ 04.1 Combined Rules
diff --git a/exercises/04.2-Apply-several-classes/index.html b/exercises/04.2-Apply-several-classes/index.html
index a64723af..3a293815 100644
--- a/exercises/04.2-Apply-several-classes/index.html
+++ b/exercises/04.2-Apply-several-classes/index.html
@@ -2,9 +2,7 @@
-
- 04 Class selector
-
+ 04.2 Apply several classes
From e88ac6cefae7c94702a5ae240777af07fbfae8a7 Mon Sep 17 00:00:00 2001
From: ErnestoXG
Date: Wed, 3 Aug 2022 04:06:08 +0000
Subject: [PATCH 23/25] added test to check if the div exists and if it
contains the proper classes
---
exercises/04.2-Apply-several-classes/test.js | 24 ++++++++++++++++++++
1 file changed, 24 insertions(+)
create mode 100644 exercises/04.2-Apply-several-classes/test.js
diff --git a/exercises/04.2-Apply-several-classes/test.js b/exercises/04.2-Apply-several-classes/test.js
new file mode 100644
index 00000000..2c6ed0d1
--- /dev/null
+++ b/exercises/04.2-Apply-several-classes/test.js
@@ -0,0 +1,24 @@
+const fs = require("fs");
+const path = require("path");
+const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8');
+document.documentElement.innerHTML = html.toString();
+
+jest.dontMock("fs");
+
+describe("You should change the class on the div tag", () => {
+ const div = document.querySelectorAll("div")
+ test("There should only be 1 div tag", () => {
+ expect(div.length).toBe(1)
+ });
+
+ test("The div class should NOT have the spades class", () => {
+ div.forEach(e=>{
+ expect(e.classList.contains("spade")).toBe(false)
+ })
+ });
+ test("The div class should have the heart class", () => {
+ div.forEach(e=>{
+ expect(e.classList.contains("heart")).toBe(true)
+ })
+ });
+});
From 201f86355bbe0f46a664e1b5347d290fe83c1dbf Mon Sep 17 00:00:00 2001
From: ErnestoXG
Date: Wed, 3 Aug 2022 04:07:31 +0000
Subject: [PATCH 24/25] added solution file
---
.../04.2-Apply-several-classes/solution.hide.html | 11 +++++++++++
1 file changed, 11 insertions(+)
create mode 100644 exercises/04.2-Apply-several-classes/solution.hide.html
diff --git a/exercises/04.2-Apply-several-classes/solution.hide.html b/exercises/04.2-Apply-several-classes/solution.hide.html
new file mode 100644
index 00000000..95de441b
--- /dev/null
+++ b/exercises/04.2-Apply-several-classes/solution.hide.html
@@ -0,0 +1,11 @@
+
+
+
+
+ 04.2 Apply several classes
+
+
+
+
9
+
+
From 91383e52daec0aea06c72edd4694db124f5e8ebc Mon Sep 17 00:00:00 2001
From: Tomas Gonzalez
Date: Mon, 29 Aug 2022 21:58:24 +0000
Subject: [PATCH 25/25] Some improvements added to the tests
---
exercises/01-Hello-World/index.html | 2 +-
exercises/01-Hello-World/solution.hide.html | 8 ++++----
exercises/01-Hello-World/test.js | 4 ++++
exercises/01.1-The-Style-Tag/test.js | 4 +++-
exercises/01.2-Your-First-Style/tests.js | 4 ++++
exercises/01.3-Your-Second-Style/index.html | 3 +++
exercises/01.3-Your-Second-Style/tests.js | 4 ++++
.../02-Separate-Stylesheet/solution.hide.css | 6 ++----
exercises/02-Separate-Stylesheet/tests.js | 9 +++++----
exercises/02.1-Background/tests.js | 1 +
exercises/04.1-Combined-Rules/tests.js | 19 ++++++++++++-------
exercises/04.2-Apply-several-classes/test.js | 14 ++++----------
learn.json | 4 ++--
13 files changed, 49 insertions(+), 33 deletions(-)
diff --git a/exercises/01-Hello-World/index.html b/exercises/01-Hello-World/index.html
index 03ae0584..93d4ce1c 100644
--- a/exercises/01-Hello-World/index.html
+++ b/exercises/01-Hello-World/index.html
@@ -1 +1 @@
-
\ No newline at end of file
+
diff --git a/exercises/01-Hello-World/solution.hide.html b/exercises/01-Hello-World/solution.hide.html
index ce422661..b2ad5b0e 100644
--- a/exercises/01-Hello-World/solution.hide.html
+++ b/exercises/01-Hello-World/solution.hide.html
@@ -1,7 +1,7 @@
-Click me to open google.com
\ No newline at end of file
+Click me to open google.com
diff --git a/exercises/01-Hello-World/test.js b/exercises/01-Hello-World/test.js
index fca18c3f..fbe19bf5 100644
--- a/exercises/01-Hello-World/test.js
+++ b/exercises/01-Hello-World/test.js
@@ -10,20 +10,24 @@ const a = document.querySelector("a");
test("There should be an anchor tag", ()=>{
expect(a).toBeTruthy()
})
+
test("The anchor tag should be pink", ()=>{
let styles = window.getComputedStyle(a);
expect(styles["color"]).toBe("pink");
});
+
test("There should be a href attribute pointing to 'https://google.com'", ()=>{
let href = a.getAttribute('href');
expect(href).toBeTruthy();
expect(href).toBe("https://google.com");
})
+
test("There should be a target attribute pointing to '_blank'", ()=>{
let target = a.getAttribute('target');
expect(target).toBeTruthy();
expect(target).toBe("_blank");
})
+
test("The anchor tag should not contains any inline style", ()=>{
let emptyBodyInlineStyle = {};
expect(a.style._values).toEqual(emptyBodyInlineStyle);
diff --git a/exercises/01.1-The-Style-Tag/test.js b/exercises/01.1-The-Style-Tag/test.js
index bf66dc21..a4be505b 100644
--- a/exercises/01.1-The-Style-Tag/test.js
+++ b/exercises/01.1-The-Style-Tag/test.js
@@ -8,12 +8,14 @@ jest.dontMock('fs');
const p = document.querySelector("p");
test("There should be a p tag", ()=>{
- expect(p).toBeTruthy()
+ expect(p).toBeTruthy();
})
+
test("The p tag color should be blue", ()=>{
let styles = window.getComputedStyle(p);
expect(styles["color"]).toBe("blue");
});
+
test("The p tag should not contain any inline style", ()=>{
let emptyBodyInlineStyle = {};
expect(p.style._values).toEqual(emptyBodyInlineStyle);
diff --git a/exercises/01.2-Your-First-Style/tests.js b/exercises/01.2-Your-First-Style/tests.js
index ddbfad7f..0eabdf65 100644
--- a/exercises/01.2-Your-First-Style/tests.js
+++ b/exercises/01.2-Your-First-Style/tests.js
@@ -7,19 +7,23 @@ jest.dontMock('fs');
describe("All the styles should be applied", ()=>{
const a = document.querySelector("a");
+
test("The anchor tag should be yellow", ()=>{
let styles = window.getComputedStyle(a);
expect(styles["color"]).toBe("yellow");
});
+
test("The body tag should not contain any inline style", ()=>{
let bodyInlineStyle = document.getElementsByTagName("body");
let emptyBodyInlineStyle = {};
expect(bodyInlineStyle[0].style._values).toEqual(emptyBodyInlineStyle);
});
+
test("The anchor tag should not contain any inline style", ()=>{
let emptyBodyInlineStyle = {};
expect(a.style._values).toEqual(emptyBodyInlineStyle);
});
+
test("You should not change the existing head tag elements", ()=>{
let head = document.querySelector('head')
expect(head).toBeTruthy()
diff --git a/exercises/01.3-Your-Second-Style/index.html b/exercises/01.3-Your-Second-Style/index.html
index 998d973a..03e672a3 100644
--- a/exercises/01.3-Your-Second-Style/index.html
+++ b/exercises/01.3-Your-Second-Style/index.html
@@ -3,6 +3,9 @@
diff --git a/exercises/01.3-Your-Second-Style/tests.js b/exercises/01.3-Your-Second-Style/tests.js
index e7e8ea61..147aabc5 100644
--- a/exercises/01.3-Your-Second-Style/tests.js
+++ b/exercises/01.3-Your-Second-Style/tests.js
@@ -7,17 +7,21 @@ jest.dontMock('fs');
describe("All the styles should be applied", ()=>{
const body = document.querySelector("body");
+
test("The background should be blue", ()=>{
let styles = window.getComputedStyle(body);
expect(styles["background"]).toBe("blue");
});
+
test("The body tag should not contains any inline style", ()=>{
let emptyBodyInlineStyle = {};
expect(body.style._values).toEqual(emptyBodyInlineStyle);
});
+
test("You should not change the existing head tag elements", ()=>{
let head = document.querySelector('head')
expect(head).toBeTruthy()
+
let meta = head.querySelector("meta")
expect(meta).toBe(null)
})
diff --git a/exercises/02-Separate-Stylesheet/solution.hide.css b/exercises/02-Separate-Stylesheet/solution.hide.css
index 779c2c33..5250e305 100644
--- a/exercises/02-Separate-Stylesheet/solution.hide.css
+++ b/exercises/02-Separate-Stylesheet/solution.hide.css
@@ -2,8 +2,6 @@
1. Select the body tag.
2. Add the background rule equal to blue.
*/
- body {
+body {
background: blue;
- background-size: contain;
- background-repeat: inherit;
-}
\ No newline at end of file
+}
diff --git a/exercises/02-Separate-Stylesheet/tests.js b/exercises/02-Separate-Stylesheet/tests.js
index d07034b6..f36df975 100644
--- a/exercises/02-Separate-Stylesheet/tests.js
+++ b/exercises/02-Separate-Stylesheet/tests.js
@@ -8,14 +8,14 @@ jest.dontMock("fs");
describe("All the styles should be applied", ()=>{
const link = document.querySelector("link");
- const body = document.querySelector("body")
+ const body = document.querySelector("body");
+
test("The body tag should not contains any inline style", ()=>{
- document.querySelector(
- "head"
- ).innerHTML=``;
+ document.querySelector("head").innerHTML = ``;
let emptyBodyInlineStyle={};
expect(body.style._values).toEqual(emptyBodyInlineStyle)
});
+
test("You should not change the existing head tag elements", ()=>{
let head = document.querySelector('head')
expect(head).toBeTruthy()
@@ -26,6 +26,7 @@ describe("All the styles should be applied", ()=>{
let href = link.getAttribute("href")
expect(href).toEqual('./styles.css')
});
+
test("Your body tag background color should be blue", ()=>{
let styles = window.getComputedStyle(body)
expect(styles["background-color"]).toBe("blue")
diff --git a/exercises/02.1-Background/tests.js b/exercises/02.1-Background/tests.js
index 375aa45c..b223105f 100644
--- a/exercises/02.1-Background/tests.js
+++ b/exercises/02.1-Background/tests.js
@@ -36,6 +36,7 @@ describe("All the styles should be applied", ()=>{
let styles = window.getComputedStyle(body);
expect(styles["background-repeat"]).toBe("inherit");
});
+
test("You should not change the existing head tag elements", ()=>{
let head = document.querySelector('head')
expect(head).toBeTruthy()
diff --git a/exercises/04.1-Combined-Rules/tests.js b/exercises/04.1-Combined-Rules/tests.js
index d3540732..c6f62acc 100644
--- a/exercises/04.1-Combined-Rules/tests.js
+++ b/exercises/04.1-Combined-Rules/tests.js
@@ -9,7 +9,8 @@ jest.dontMock("fs");
describe("All the styles should be applied", ()=> {
const body = document.querySelector("body");
const link = document.querySelector("link");
- const title = document.querySelector('title')
+ const title = document.querySelector('title');
+
test("The body tag should not contains any inline style", ()=> {
document.querySelector(
"head"
@@ -17,6 +18,7 @@ describe("All the styles should be applied", ()=> {
let emptyBodyInlineStyle = {};
expect(body.style._values).toEqual(emptyBodyInlineStyle);
});
+
test("the width should be '50px'", ()=> {
// get computed styles of any element you like
document.querySelector(
@@ -24,16 +26,17 @@ describe("All the styles should be applied", ()=> {
).innerHTML = ``;
let cssArray = document.styleSheets[0].cssRules;
- // console.log("$$$:", cssArray)
let orangeHoverSelector = "";
+
for (let i = 0; i < cssArray.length; i++) {
if (cssArray[i].selectorText === ".myBox") {
orangeHoverSelector = cssArray[i].style.width;
}
}
- expect(orangeHoverSelector).toBe('50px');
+ expect(orangeHoverSelector).toBe('50px');
});
+
test("the height should be '50px'", ()=> {
// get computed styles of any element you like
document.querySelector(
@@ -41,15 +44,15 @@ describe("All the styles should be applied", ()=> {
).innerHTML = ``;
let cssArray = document.styleSheets[0].cssRules;
- // console.log("$$$:", cssArray)
let orangeHoverSelector = "";
+
for (let i = 0; i < cssArray.length; i++) {
if (cssArray[i].selectorText === ".myBox") {
orangeHoverSelector = cssArray[i].style.height;
}
}
- expect(orangeHoverSelector).toBe('50px');
+ expect(orangeHoverSelector).toBe('50px');
});
test("the background-size should be contain", ()=> {
@@ -58,22 +61,23 @@ describe("All the styles should be applied", ()=> {
).innerHTML = ``;
let cssArray = document.styleSheets[0].cssRules;
- // console.log("$$$:", cssArray)
let orangeHoverSelector = "";
+
for (let i = 0; i < cssArray.length; i++) {
if (cssArray[i].selectorText === ".myBox") {
orangeHoverSelector = cssArray[i].style['background-size'];
}
}
+
expect(orangeHoverSelector).toBe('contain');
});
+
test("the background should include the shorthand property", ()=> {
document.querySelector(
"head"
).innerHTML = ``;
let cssArray = document.styleSheets[0].cssRules;
- console.log("$$$:", cssArray)
let orangeHoverSelector = "";
let backImg = "";
let backColor = "";
@@ -125,6 +129,7 @@ describe("All the styles should be applied", ()=> {
expect(padBottom).toBeFalsy();
expect(padLeft).toBeFalsy();
});
+
test("You should not change the existing head tag elements", ()=> {
let head = document.querySelector('head')
expect(head).toBeTruthy()
diff --git a/exercises/04.2-Apply-several-classes/test.js b/exercises/04.2-Apply-several-classes/test.js
index 2c6ed0d1..6d1d608e 100644
--- a/exercises/04.2-Apply-several-classes/test.js
+++ b/exercises/04.2-Apply-several-classes/test.js
@@ -6,19 +6,13 @@ document.documentElement.innerHTML = html.toString();
jest.dontMock("fs");
describe("You should change the class on the div tag", () => {
- const div = document.querySelectorAll("div")
- test("There should only be 1 div tag", () => {
- expect(div.length).toBe(1)
- });
+ const div = document.querySelector("div");
test("The div class should NOT have the spades class", () => {
- div.forEach(e=>{
- expect(e.classList.contains("spade")).toBe(false)
- })
+ expect(div.classList.contains("spade")).toBe(false);
});
+
test("The div class should have the heart class", () => {
- div.forEach(e=>{
- expect(e.classList.contains("heart")).toBe(true)
- })
+ expect(div.classList.contains("heart")).toBe(true);
});
});
diff --git a/learn.json b/learn.json
index 709ede73..dc56301e 100644
--- a/learn.json
+++ b/learn.json
@@ -11,8 +11,8 @@
"difficulty": "easy",
"video-solutions": true,
"graded": true,
- "disabledActions": ["test"],
- "disableGrading": true,
+ "disabledActions": [],
+ "disableGrading": false,
"editor": {
"version": "1.0.73"
}