Merge pull request 4GeeksAcademy#71 from dsilva06/07-very-speficil-rules

flexible tests

Author: tommygonzaleza

exercises/07-Very-Specific-Rules/README.es.md

@@ -8,7 +8,7 @@ En este ejercicio, puedes agregar tu código solo arriba del **READ ONLY BLOCK**
 
 1. Establece el color de texto `ul` a rojo (`red`) (anula los conflictos siendo más específico).
 
-2. Establece el color de fondo (`background-color`) del segundo `li` del `ol` a verde (`green`) (no uses el selector #id).
+2. Establece el color de fondo (`background-color`) del segundo `li` del `ol` a verde (`green`) (no uses el selector #id ni el .class).
 
 3. Haz que las filas impares de las tablas tengan fondo amarillo usando `tr:nth-child`.
 

exercises/07-Very-Specific-Rules/README.md

@@ -13,7 +13,7 @@ In this exercise, you can add your code only above the **READ ONLY BLOCK** of th
 
 1. Set the `ul` text color to `red` (override conflicts with specificity).
 
-2. Set the `background-color` of the second `li` of the `ol` to `green` (don't use the #id selector).
+2. Set the `background-color` of the second `li` of the `ol` to `green` (don't use the #id selector or .class selector).
 
 3. Change the odd rows of the tables to a yellow background using `tr:nth-child`.
 

exercises/07-Very-Specific-Rules/styles.css

@@ -1,7 +1,5 @@
 /** Insert your code here **/
 
-
-
 /*********** READ ONLY BLOCK ******
 You CANNOT UPDATE anything from here on,
 only add lines of code on top of this lines
@@ -14,4 +12,4 @@ body {
 ul li,
 ol li {
 	color: green;
-}
+}

exercises/07-Very-Specific-Rules/tests.js

@@ -35,14 +35,16 @@ describe("All the styles should be applied", ()=>{
     ).innerHTML = `<style>${css.toString()}</style>`;
     let cssArray = document.styleSheets[0].cssRules;
 
-    let orangeHoverSelector = "";
+    let background = "";
+    let backgroundColor="";
     for (let i = 0; i < cssArray.length; i++) {
       if (cssArray[i].selectorText === "ol li:nth-child(2)" || cssArray[i].selectorText === "ol > li:nth-child(2)") {
-        orangeHoverSelector = cssArray[i].style['background-color'];
+        background = cssArray[i].style['background'];
+        backgroundColor = cssArray[i].style['background-color'];
 
       }
 
-    } expect(orangeHoverSelector).toBe("green");
+    } expect(background === 'green' || backgroundColor === 'green').toBeTruthy();
   })
 
   test("The odd rows of the table should have yellow background", ()=>{
@@ -51,14 +53,16 @@ describe("All the styles should be applied", ()=>{
     ).innerHTML = `<style>${css.toString()}</style>`;
     let cssArray = document.styleSheets[0].cssRules;
 
-    let orangeHoverSelector = "";
+    let background = "";
+    let backgroundColor = "";
     for (let i = 0; i < cssArray.length; i++) {
       if (cssArray[i].selectorText === "tr:nth-child(odd)") {
-        orangeHoverSelector = cssArray[i].style['background'];
-
+        background = cssArray[i].style['background'];
+        backgroundColor = cssArray[i].style['background-color'];
+        
       }
 
-    } expect(orangeHoverSelector).toBe("yellow");
+    } expect(background === "yellow" || backgroundColor === "yellow").toBeTruthy();
   })
 
   test("Write all your rules above the existing code", ()=>{