Agregado test y solution.hide.css al ejercicio 03-list-styling

Author: AnggieAlava

exercises/03-list-styling/solution.hide.css

@@ -0,0 +1,29 @@
+body {
+  height: 100vh;
+  background: rgb(189, 189, 189);
+}
+
+.container {
+  font-family: 'Comic Sans MS', 'Comic Sans', cursive;
+  margin: 0 auto;
+  width: 70vw;
+  box-shadow: 3px 5px 20px #312f2f;
+  background-color: white;
+  padding: 120px;
+  width: 300px;
+}
+
+.cocacola {
+  list-style-type: lower-alpha;
+}
+.pepsi {
+  list-style-type: square;
+}
+.healthy {
+  list-style-type: armenian;
+}
+.dev-drinks {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}

exercises/03-list-styling/test.js

@@ -1,42 +1,49 @@
-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 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("The lists should be modified accordingly", function() {
-  beforeEach(() => {
-    //here I import the HTML into the document
-    document.documentElement.innerHTML = html.toString();
+describe("All the styles should be applied", () => {
+  const ols = document.querySelectorAll("ol");
+  const uls = document.querySelectorAll("ul");
+
+  test("There should be two <ol> tags", () => {
+    expect(ols.length).toBe(2)
   });
-  afterEach(() => {
-    jest.resetModules();
+  test("There should be two <ul> tags", () => {
+    expect(uls.length).toBe(2)
   });
-
-  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('03 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");
-
-  // });
-});
+  test("The first Ol must have a list-style-type = lower-alpha ", () => {
+    document.querySelector(
+      "head"
+    ).innerHTML = `<style>${css.toString()}</style>`;
+    let firstOl = window.getComputedStyle(ols[0]);
+    expect(firstOl["list-style-type"]).toBe("lower-alpha");
+  });
+  test("The second Ol must have a list-style-type = square ", () => {
+    document.querySelector(
+      "head"
+    ).innerHTML = `<style>${css.toString()}</style>`;
+    let secondOl = window.getComputedStyle(ols[1]);
+    expect(secondOl["list-style-type"]).toBe("square");
+  });
+  test("The first Ul must have a list-style-type = armenian ", () => {
+    document.querySelector(
+      "head"
+    ).innerHTML = `<style>${css.toString()}</style>`;
+    let firstUl = window.getComputedStyle(uls[0]);
+    expect(firstUl["list-style-type"]).toBe("armenian");
+  });
+  test("The second Ul must have a list-style-type = none ", () => {
+    document.querySelector(
+      "head"
+    ).innerHTML = `<style>${css.toString()}</style>`;
+    let secondUl = window.getComputedStyle(uls[1]);
+    expect(secondUl["list-style-type"]).toBe("none");
+    expect(secondUl["margin"]).toBe("0px");
+    expect(secondUl["padding"]).toBe("0px");
+  });
+})