Updated 4GeeksAcademy#2 and fixed issues

plucodev · plucodev · commit ca17a508f33e · 2019-09-04T20:31:39.000Z
diff --git a/exercises/02-Background/README.md b/exercises/02-Background/README.md
@@ -1,19 +1,19 @@
 # `02` Background
 
-The `background` CSS rule allows us to assign and work with the background of any container. The background values can be a `color` or an `image`. 
+The `background` CSS rule allows us to assign and work with the background of any container. The background values can be a `color` or an `image`.
 
 If it is an image you can specify if you want the image to repeat horizontally, vertically, both, or not at all, and you can also specify if you want it to resize and fit the whole container where its being applied, among other properties that can be modified.
 
 ## 📝 Instructions:
 
-```plain/text
+
 1.  Build the exercise.
 2.  Check the Preview.
 3.  On the styles.css file the background-size to 'contain' (check the styles.css tab).
 4.  Build and Preview the exercise again.
 5.  Change the background-repeat to 'inherit' to make it repeat over the x axis and y axis.
 6.  Build and Preview the exercise again.
-```
+
 
 ## 💡Hint:
 
diff --git a/exercises/02-Background/index.html b/exercises/02-Background/index.html
@@ -1,10 +1,10 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width" />
-    <link rel="stylesheet" type="text/css" href="./styles.css" />
-    <title>02 Background</title>
-  </head>
-  <body></body>
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width" />
+		<link rel="stylesheet" type="text/css" href="./styles.css" />
+		<title>02 Background</title>
+	</head>
+	<body></body>
 </html>
diff --git a/exercises/02-Background/tests.js b/exercises/02-Background/tests.js
@@ -11,16 +11,17 @@ describe("All the styles should be applied", function () {
     document.documentElement.innerHTML=html.toString();
 
     //apply the styles from the stylesheet if needed
-    document.querySelector(
-      "head"
-    ).innerHTML=`<style>${css.toString()}</style>`;
+
 
 
   });
   afterEach(() => {
     jest.resetModules();
   });
   it("The body tag should not contains any inline style", function () {
+    document.querySelector(
+      "head"
+    ).innerHTML=`<style>${css.toString()}</style>`;
     let bodyInlineStyle=document.getElementsByTagName("body");
     let emptyBodyInlineStyle={};
     expect(bodyInlineStyle[0].style._values).toEqual(emptyBodyInlineStyle);
@@ -30,20 +31,36 @@ describe("All the styles should be applied", function () {
 
     console.log(bodyInlineStyle[0].style._values);
   });
-  it("The Head tag should not includes a Style tag", function () {
-    expect(html.toString().indexOf(`<style`)>-1).toBeFalsy();
-  });
+
   it("the background-size should be 'contain' without quotes", function () {
+    document.querySelector(
+      "head"
+    ).innerHTML=`<style>${css.toString()}</style>`;
     // 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=`<style>${css.toString()}</style>`;
 
     const body=document.querySelector("body");
     let styles=window.getComputedStyle(body);
     expect(styles["background-repeat"]).toBe("inherit");
   });
+  it("You should not change the head tag", function () {
+
+    let meta1 = document.getElementsByTagName('head')[0].innerHTML.toString().indexOf("<meta c")
+    let meta2 = document.getElementsByTagName('head')[0].innerHTML.toString().indexOf("<meta n")
+    let link = document.getElementsByTagName('head')[0].innerHTML.toString().indexOf("<link")
+    let title = document.getElementsByTagName('head')[0].innerHTML.toString().indexOf("<title")
+    expect(meta1).not.toBe(-1)
+    expect(meta2).not.toBe(-1)
+    expect(link).not.toBe(-1)
+    expect(title).not.toBe(-1)
+    expect(html.toString().indexOf(`<style`)>-1).toBeFalsy();
+  })
 });
