Update test.js

Author: josemoracard

exercises/04-list-styling/test.js

@@ -1,42 +1,39 @@
-const fs=require("fs");
-const path=require("path");
-const html=fs.readFileSync(path.resolve(__dirname, "./index.html"), "utf8");
+const fs = require("fs");
+const path = require("path");
+const css = fs.readFileSync(path.resolve(__dirname, "./styles.css"), "utf8");
 
 jest.dontMock("fs");
 
-describe("The lists should be modified accordingly", function() {
-  beforeEach(() => {
-    //here I import the HTML into the document
-    document.documentElement.innerHTML = html.toString();
-  });
-  afterEach(() => {
-    jest.resetModules();
-  });
-
-  it("You should not change the existing head tag elements", function () {
-    let head = document.querySelector('head');
-    let title = head.querySelector('title').innerHTML;
-
-    expect(title).toBe('04 List styling')
-  })
-
-  // Test in progress:
-  // it("The lists should be correctly styled", function() {
-  //   const uls = document.querySelectorAll("ul");
-  //   const ols = document.querySelectorAll("ol");
-  //   console.log(uls);
-  //   console.log(ols);
-
-  //   var style1 = window.getComputedStyle(ols[0]);
-  //   var style2 = window.getComputedStyle(uls[0]);
-  //   var style3 = window.getComputedStyle(ols[1]);
-  //   var style4 = window.getComputedStyle(uls[1]);
-
-
-  //   expect(style1["listStyleType"]).toBe("lower-alpha");
-  //   expect(style2["listStyleType"]).toBe("square");
-  //   expect(style3["listStyleType"]).toBe("armenian");
-  //   expect(style4["listStyleType"]).toBe("none");
-
-  // });
-});
+describe("CSS Styles", () => {
+    beforeAll(() => {
+        document.querySelector("head").innerHTML = `<style>${css.toString()}</style>`;
+    });
+
+    test("Cocacola list style should be applied correctly", () => {
+        const cocacolaItems = document.querySelectorAll(".cocacola");
+        cocacolaItems.forEach(item => {
+            expect(getComputedStyle(item).listStyleType).toBe("lower-alpha");
+        });
+    });
+
+    test("Pepsi list style should be applied correctly", () => {
+        const pepsiItems = document.querySelectorAll(".pepsi");
+        pepsiItems.forEach(item => {
+            expect(getComputedStyle(item).listStyleType).toBe("square");
+        });
+    });
+
+    test("Healthy list style should be applied correctly", () => {
+        const healthyItems = document.querySelectorAll(".healthy");
+        healthyItems.forEach(item => {
+            expect(getComputedStyle(item).listStyleType).toBe("armenian");
+        });
+    });
+
+    test("Dev-drinks list style should be applied correctly", () => {
+        const devDrinksItems = document.querySelectorAll(".dev-drinks");
+        devDrinksItems.forEach(item => {
+            expect(getComputedStyle(item).listStyleType).toBe("none");
+        });
+    });
+});