diff --git a/exercises/03-list-styling/solution.hide.css b/exercises/03-list-styling/solution.hide.css
new file mode 100644
index 00000000..82698f17
--- /dev/null
+++ b/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;
+}
diff --git a/exercises/03-list-styling/test.js b/exercises/03-list-styling/test.js
index c8939872..27bc7c81 100644
--- a/exercises/03-list-styling/test.js
+++ b/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 tags", () => {
+ expect(ols.length).toBe(2)
});
- afterEach(() => {
- jest.resetModules();
+ test("There should be two 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");
-
- // });
-});
\ No newline at end of file
+ test("The first Ol must have a list-style-type = lower-alpha ", () => {
+ document.querySelector(
+ "head"
+ ).innerHTML = ``;
+ 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 = ``;
+ 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 = ``;
+ 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 = ``;
+ let secondUl = window.getComputedStyle(uls[1]);
+ expect(secondUl["list-style-type"]).toBe("none");
+ expect(secondUl["margin"]).toBe("0px");
+ expect(secondUl["padding"]).toBe("0px");
+ });
+})