Fixed all tests

.devcontainer/devcontainer.json

@@ -22,7 +22,7 @@
 	// Use 'forwardPorts' to make a list of ports inside the container available locally.
 	// "forwardPorts": [],
 
-	"onCreateCommand": "npm i jest@29.7.0 -g && npm i @learnpack/learnpack@2.1.44 -g && learnpack plugins:install @learnpack/node@1.1.11 && learnpack plugins:install @learnpack/html@1.1.5"
+	"onCreateCommand": "npm i jest@29.7.0 jest-environment-jsdom@29.7.0 -g && npm i @learnpack/learnpack@2.1.45 -g && learnpack plugins:install @learnpack/node@1.1.11 && learnpack plugins:install @learnpack/html@1.1.7"
 
 	// Use 'postCreateCommand' to run commands after the container is created.
 	// "postCreateCommand": "yarn install",

.learn/exercises/11-postcard-divisions/test.js

@@ -26,11 +26,13 @@ test("Create a div with class postcard-header as child of .postcard", function()
 })
 
 test("Create a div with class postcard-body as child of .postcard", function(){
+    dom = fromFile();
     const e=dom.querySelector('.postcard').inside().querySelector('.postcard-body')
     expect(e).toBeTruthy();
 })
 
 test("Create a div with class postcard-footer as child of .postcard", function(){
+    dom = fromFile();
     const e=dom.querySelector('.postcard').inside().querySelector('.postcard-footer')
     expect(e).toBeTruthy();
 })

.learn/exercises/11.1-header-content/test.js

@@ -26,16 +26,19 @@ test("Create an image inside the .postcard-header <div>", function(){
 })
 
 test("Create an <h1> inside the .postcard-header <div>", function(){
+    dom = fromFile();
     const e=dom.querySelector('.postcard-header').inside().querySelector('h1')
     expect(e).toBeTruthy();
 })
 
 test("The <h1> inside .postcard-header should say 'My Postcard'", function(){
+    dom = fromFile();
     const e =dom.querySelector('.postcard-header').inside().querySelector('h1')
     expect(e.innerHTML.toLowerCase()).toEqual("My Postcard".toLowerCase());
 })
 
 test("The <img> tag should contain the given URL as src, E.g: <img src='the_image_src_goes_here' />", function(){
+    dom = fromFile();
     const e =dom.querySelector('.postcard-header').inside().querySelector('img')
     expect(e.src).toEqual('https://raw.githubusercontent.com/breatheco-de/exercise-postcard/e63a7916530cc850bd92aa1c2e19191837fb5c80/.learn/assets/4geeks.png');
 })

.learn/exercises/12-split-postcard-body/test.js

@@ -26,6 +26,7 @@ test("Create a <div> inside the .postcard-body and add the class .body-left to i
 })
 
 test("Create another <div> inside the .postcard-body and add the class .body-right to it", function(){
+    dom = fromFile();
     const e=dom.querySelector('.postcard-body').inside().querySelector('div.body-right')
     expect(e).toBeTruthy();
 })

.learn/exercises/12.1-body-content/test.js

@@ -26,6 +26,7 @@ test("Create a <div> inside the .postcard-body and add the class .body-left to i
 })
 
 test("Create a <div> inside the .postcard-body and add the class .body-right to it", function(){
+    dom = fromFile();
     const e=dom.querySelector('.postcard-body').inside().querySelector('div.body-right')
     expect(e).toBeTruthy();
 })

.learn/utils/dom.js

@@ -14,7 +14,8 @@ const DOM = (path=null, html=null, context) => {
         htmlContent = fs.readFileSync(path, 'utf8')
     }
     document.documentElement.innerHTML = htmlContent.toString();
-    let _document = document.cloneNode(true);
+    let _document = document // The current version of jest doesn't fully support the stylesheets in cloned elements
+    // let _document = document.cloneNode(true);
 
     return {
         raw: htmlContent,