first example

alesanchezr · alesanchezr · commit a9602bba768d · 2019-08-01T07:56:24.000Z
diff --git a/exercises/00-Welcome/README.md b/exercises/00-Welcome/README.md
@@ -1,3 +1,3 @@
 # Welcome!!
 
-Here are the DOM Excercises
+Here are the CSS Excercises
diff --git a/exercises/01-hello-world/index.html b/exercises/01-hello-world/index.html
@@ -6,11 +6,9 @@
     <link rel="stylesheet" type="text/css" href="./styles.css" />
   </head>
   <body>
-    <h1 id="theTitle">Hello world title</h1>
-    <p>
+    <p class="big">
       This is my description, it needs to be long because is supposed to be a
       paragraph and not a title.
     </p>
-    <script src="./index.js"></script>
   </body>
 </html>
diff --git a/exercises/01-hello-world/index.js b/exercises/01-hello-world/index.js
@@ -1 +1 @@
-alert("Hello world!!");
+//nothing to see here
diff --git a/exercises/01-hello-world/tests.js b/exercises/01-hello-world/tests.js
@@ -6,30 +6,6 @@ const css = fs.readFileSync(path.resolve(__dirname, './styles.css'), 'utf8');
 
 jest.dontMock('fs');
 
-describe('All the javascript should match', function () {
-    beforeEach(() => {
-        //here I import the HTML into the document
-        document.documentElement.innerHTML = html.toString();
-    });
-    afterEach(() => { jest.resetModules(); });
-
-    it('alert() function should be called', function () {
-
-        /*
-            Here is how to mock the alert function:
-            https://stackoverflow.com/questions/41885841/how-to-mock-the-javascript-window-object-using-jest
-        */
-        global.alert = jest.fn((text) => console.log(text));
-
-        //then I import the index.js (which should have the alert() call inside)
-        const file = require("./index.js");
-
-        //and I expect the alert to be already called.
-        expect(alert.mock.calls.length).toBe(1);
-    });
-});
-
-
 describe('All the styles should be applied', function () {
     beforeEach(() => {
         //here I import the HTML into the document
@@ -57,14 +33,22 @@ describe('All the html should match', function () {
     });
     afterEach(() => { jest.resetModules(); });
 
-    it('the html code should contain a script tag', function () {
+    it('the html code should contain a p tag', function () {
 
         // we can read from the source code
         console.log(html.toString());
-        expect(html.toString().indexOf(`<script src="./index.js"></script>`) > -1).toBeTruthy();
+        expect(html.toString().indexOf(`<p`) > -1).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 p tag should have a class "big"', function () {
 
         //or use query selector to compare hoy mane scriptags do we have
-        const scripts = document.querySelectorAll("script");
-        expect(scripts.length).toBe(1);
+        const p = document.querySelector("p");
+        expect(p.classList.contains("big")).toBeTruthy();
     });
 });

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,3 @@`
`1`	`1`	`# Welcome!!`
`2`	`2`
`3`		`-Here are the DOM Excercises`
	`3`	`+Here are the CSS Excercises`
Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-alert("Hello world!!");`
	`1`	`+//nothing to see here`