fixed issue with CSS rules, improved tests

Author: UmiKami

exercises/10-Your-Own-Font/tests.js

@@ -1,53 +1,47 @@
-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");
-
-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=`<style>${css.toString()}</style>`;
-  });
-  afterEach(() => {
-    jest.resetModules();
-  });
+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');
+
+let cssArray = null;
+
+describe("All the styles should be applied", ()=>{
+  const link = document.querySelectorAll("link")
+  test("the  font-family in the .myTitle should exists", ()=>{
+    document.querySelector(
+      "head"
+    ).innerHTML = `<style>${css.toString()}</style>`;
 
-  it("the  font-family in the .myTitle should exists", function () {
     // get computed styles of any element you like
-    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===".myTitle") {
+    let orangeHoverSelector = "";
+    for (let i = 0; i < cssArray.length; i++) {
+      if (cssArray[i].selectorText === ".myTitle") {
         // console.log("%%% ", cssArray[i].selectorText)
-        orangeHoverSelector=cssArray[i].style['font-family'];
+        orangeHoverSelector = cssArray[i].style['font-family'];
       }
     }
 
     expect(orangeHoverSelector).toBeTruthy();
   });
-  it('the h1 tag should have a class "myTitle"', function () {
+  test('the h1 tag should have a class "myTitle"', ()=>{
     //or use query selector to compare hoy mane scriptags do we have
-    const h=document.querySelector("h1");
+    const h = document.querySelector("h1");
     expect(h.classList.contains("myTitle")).toBeTruthy();
   });
-  it("The link should be included in the head tag", function () {
+  test("The link should be included in the head tag", ()=>{
     // let headContent=document.getElementsByTagName("*")
     // console.log("###", headContent[1].innerHTML)
-    console.log("###", document.head.childNodes)
-    expect(document.querySelectorAll("link").length).toBe(2);
+    expect(link.length).toBe(2);
   });
 
 
-  it("The Head tag should not includes a Style tag", function () {
-    expect(html.toString().indexOf(`<style`)>-1).toBeFalsy();
+  test("The Head tag should not includes a Style tag", ()=>{
+    expect(html.toString().indexOf(`<style`) > -1).toBeFalsy();
   });
 });