Skip to content

CSS Exercises #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 25 commits into from
Aug 12, 2019
Merged

CSS Exercises #1

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
07c775a
Added all 13 exercises folders with all the files
plucodev Aug 1, 2019
f724ac5
completed exercise 02
plucodev Aug 1, 2019
980799d
updated 03 and 04
plucodev Aug 1, 2019
33c046d
README 04 & 05
plucodev Aug 2, 2019
c44f716
README 06
plucodev Aug 2, 2019
2771fdd
completed #07
plucodev Aug 2, 2019
23e91a3
Completed 03
plucodev Aug 4, 2019
7746b42
Completed 05
plucodev Aug 4, 2019
b1cb679
Fixed issues 01
plucodev Aug 11, 2019
4c8fe0c
refactoring 02
plucodev Aug 11, 2019
283f27f
fixed issues 02
plucodev Aug 11, 2019
c43acb1
modified welcome README
plucodev Aug 11, 2019
cd9e017
fixed issues 01
plucodev Aug 11, 2019
5d5fc61
refactoring 03
plucodev Aug 11, 2019
8c3d06c
fixed issues 04
plucodev Aug 12, 2019
0598eaa
fixed issues 05
plucodev Aug 12, 2019
8a61c79
fixed issues 06
plucodev Aug 12, 2019
7269d64
fixed issues 07
plucodev Aug 12, 2019
d8e6e3b
fixed issues 08
plucodev Aug 12, 2019
006be0b
fixed issues 09
plucodev Aug 12, 2019
39ebd12
fixed issues 11
plucodev Aug 12, 2019
e2e5091
fixed issues 12
plucodev Aug 12, 2019
ed1cd31
fixed issues 13
plucodev Aug 12, 2019
9b4b3ea
fixed issues 06
plucodev Aug 12, 2019
3326526
fixed issues 10
plucodev Aug 12, 2019
File filter

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Completed 03
  • Loading branch information
@plucodev
plucodev committed Aug 4, 2019
commit 23e91a362cde212049fb69bc464e217e43b49e53
1 change: 1 addition & 0 deletions exercises/02-Background/tests.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ describe("All the styles should be applied", function() {
it("the background-size should be 'contain'", function() {
// get computed styles of any element you like
const body = document.querySelector("table");
console.log("Body: " + body);
var styles = window.getComputedStyle(body);
expect(styles["background-size"]).toBe("contain");
});
Expand Down
2 changes: 1 addition & 1 deletion exercises/03-Inline-Styles/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<title>03 Inline Styles</title>
</head>
<body>
<table style="background: green">
<table>
<tr>
<td>Hello</td>
</tr>
Expand Down
61 changes: 45 additions & 16 deletions exercises/03-Inline-Styles/tests.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@ 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");
console.log(css);

jest.dontMock("fs");

describe("All the html should match", function() {
describe("The Table tag should contain inline style background: green", function() {
beforeEach(() => {
//here I import the HTML into the document
document.documentElement.innerHTML = html.toString();
Expand All @@ -16,20 +16,49 @@ describe("All the html should match", function() {
afterEach(() => {
jest.resetModules();
});

it("the html code should contain a table tag", function() {
// we can read from the source code
console.log(html.toString());
expect(html.toString().indexOf(`table`)).toBeTruthy();

//or use query selector to compare hoy mane scriptags do we have
// const pTags = document.querySelectorAll("p");
// expect(pTags.length).toBe(1);
it("The styles.css file should be empty", function() {
console.log(css);
expect(css.toString() === "").toBeTruthy();
});
it("the background should be green", function() {
// get computed styles of any element you like
const body = document.querySelector("body");
var styles = window.getComputedStyle(body);
expect(styles["background"]).toBe("green");

it("The background should be green", function() {
const table = document.querySelector("table");
expect(table.style.background === "green").toBeTruthy();
});
});

// describe("The Table tag should contain inline style background:green", function() {
// beforeEach(() => {
// //here I import the HTML into the document
// document.documentElement.innerHTML = html.toString();
// document.querySelector(
// "head"
// ).innerHTML = `<style>${css.toString()}</style>`;
// });
// afterEach(() => {
// jest.resetModules();
// });

// // it("the html code should contain a table tag", function() {
// // we can read from the source code
// // console.log("HTML: " + html.toString());
// // console.log("CSS " + css.toString());
// // expect(css.toString().toBeFalsy());
// // expect(html.toString().indexOf(`table`)).toBeTruthy();

// //or use query selector to compare hoy mane scriptags do we have
// // const pTags = document.querySelectorAll("p");
// // expect(pTags.length).toBe(1);
// // });
// it("the background should be green", function() {

// const table = document.querySelector("table");
// expect(css.toString().toBeFalsy());
// expect(table.style.background === "green").toBeTruthy();
// // expect(table.contains("styles"));
// // var styles = window.getComputedStyle("table");
// // console.log("Styles: " + styles);
// // expect(styles["background"]).toBe("green");
// // console.log("Styles: " + table);
// });
// });