Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 2cfee81

Browse files
Merge pull request #137 from AnggieAlava/bug/1572
Agregado test y solution.hide.css al ejercicio 03-list-styling
2 parents 59e966e + 0df6e6b commit 2cfee81

File tree

2 files changed

+73
-37
lines changed

2 files changed

+73
-37
lines changed
Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
body {
2+
height: 100vh;
3+
background: rgb(189, 189, 189);
4+
}
5+
6+
.container {
7+
font-family: 'Comic Sans MS', 'Comic Sans', cursive;
8+
margin: 0 auto;
9+
width: 70vw;
10+
box-shadow: 3px 5px 20px #312f2f;
11+
background-color: white;
12+
padding: 120px;
13+
width: 300px;
14+
}
15+
16+
.cocacola {
17+
list-style-type: lower-alpha;
18+
}
19+
.pepsi {
20+
list-style-type: square;
21+
}
22+
.healthy {
23+
list-style-type: armenian;
24+
}
25+
.dev-drinks {
26+
list-style-type: none;
27+
margin: 0;
28+
padding: 0;
29+
}

‎exercises/03-list-styling/test.js

Lines changed: 44 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,49 @@
1-
const fs=require("fs");
2-
const path=require("path");
3-
const html=fs.readFileSync(path.resolve(__dirname, "./index.html"), "utf8");
1+
const fs = require("fs");
2+
const path = require("path");
3+
const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8');
4+
const css = fs.readFileSync(path.resolve(__dirname, "./styles.css"), "utf8");
5+
document.documentElement.innerHTML = html.toString();
46

57
jest.dontMock("fs");
68

7-
describe("The lists should be modified accordingly", function() {
8-
beforeEach(() => {
9-
//here I import the HTML into the document
10-
document.documentElement.innerHTML = html.toString();
9+
describe("All the styles should be applied", () => {
10+
const ols = document.querySelectorAll("ol");
11+
const uls = document.querySelectorAll("ul");
12+
13+
test("There should be two <ol> tags", () => {
14+
expect(ols.length).toBe(2)
1115
});
12-
afterEach(() => {
13-
jest.resetModules();
16+
test("There should be two <ul> tags",() => {
17+
expect(uls.length).toBe(2)
1418
});
15-
16-
it("You should not change the existing head tag elements", function () {
17-
let head = document.querySelector('head');
18-
let title = head.querySelector('title').innerHTML;
19-
20-
expect(title).toBe('03 List styling')
21-
})
22-
23-
// Test in progress:
24-
// it("The lists should be correctly styled", function() {
25-
// const uls = document.querySelectorAll("ul");
26-
// const ols = document.querySelectorAll("ol");
27-
// console.log(uls);
28-
// console.log(ols);
29-
30-
// var style1 = window.getComputedStyle(ols[0]);
31-
// var style2 = window.getComputedStyle(uls[0]);
32-
// var style3 = window.getComputedStyle(ols[1]);
33-
// var style4 = window.getComputedStyle(uls[1]);
34-
35-
36-
// expect(style1["listStyleType"]).toBe("lower-alpha");
37-
// expect(style2["listStyleType"]).toBe("square");
38-
// expect(style3["listStyleType"]).toBe("armenian");
39-
// expect(style4["listStyleType"]).toBe("none");
40-
41-
// });
42-
});
19+
test("The first Ol must have a list-style-type = lower-alpha ", () => {
20+
document.querySelector(
21+
"head"
22+
).innerHTML = `<style>${css.toString()}</style>`;
23+
let firstOl = window.getComputedStyle(ols[0]);
24+
expect(firstOl["list-style-type"]).toBe("lower-alpha");
25+
});
26+
test("The second Ol must have a list-style-type = square ", () => {
27+
document.querySelector(
28+
"head"
29+
).innerHTML = `<style>${css.toString()}</style>`;
30+
let secondOl = window.getComputedStyle(ols[1]);
31+
expect(secondOl["list-style-type"]).toBe("square");
32+
});
33+
test("The first Ul must have a list-style-type = armenian ", () => {
34+
document.querySelector(
35+
"head"
36+
).innerHTML = `<style>${css.toString()}</style>`;
37+
let firstUl = window.getComputedStyle(uls[0]);
38+
expect(firstUl["list-style-type"]).toBe("armenian");
39+
});
40+
test("The second Ul must have a list-style-type = none ", () => {
41+
document.querySelector(
42+
"head"
43+
).innerHTML = `<style>${css.toString()}</style>`;
44+
let secondUl = window.getComputedStyle(uls[1]);
45+
expect(secondUl["list-style-type"]).toBe("none");
46+
expect(secondUl["margin"]).toBe("0px");
47+
expect(secondUl["padding"]).toBe("0px");
48+
});
49+
})

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /