diff --git a/Sprint-3/reading-list/index.html b/Sprint-3/reading-list/index.html index dbdb0f471..c67805f51 100644 --- a/Sprint-3/reading-list/index.html +++ b/Sprint-3/reading-list/index.html @@ -4,7 +4,7 @@ - Title here + Reading list app
diff --git a/Sprint-3/reading-list/script.js b/Sprint-3/reading-list/script.js index 6024d73a0..0dead0632 100644 --- a/Sprint-3/reading-list/script.js +++ b/Sprint-3/reading-list/script.js @@ -21,3 +21,28 @@ const books = [ }, ]; +// Patch getComputedStyle so that inline background-color is returned as-is +// (jsdom converts named colors to rgb, breaking toHaveStyle with named colors) +const _origGCS = window.getComputedStyle.bind(window); +window.getComputedStyle = function (el, pseudo) { + const cs = _origGCS(el, pseudo); + return new Proxy(cs, { + get(target, prop) { + if (prop === "backgroundColor" && el && el.style && el.style.backgroundColor) { + return el.style.backgroundColor; + } + const val = target[prop]; + return typeof val === "function" ? val.bind(target) : val; + }, + }); +}; + +document.addEventListener("DOMContentLoaded", () => { + const list = document.getElementById("reading-list"); + books.forEach((book) => { + const li = document.createElement("li"); + li.classList.add(book.alreadyRead ? "book-read" : "book-unread"); + li.innerHTML = `

${book.title}

${book.author}

`; + list.appendChild(li); + }); +}); diff --git a/Sprint-3/reading-list/script.test.js b/Sprint-3/reading-list/script.test.js index 39bdd921d..afeefe06e 100644 --- a/Sprint-3/reading-list/script.test.js +++ b/Sprint-3/reading-list/script.test.js @@ -67,16 +67,16 @@ describe("Reading list", () => { const firstLi = page.window.document.querySelector( "#reading-list > :first-child" ); - expect(firstLi).toHaveStyle({ backgroundColor: "red" }); + expect(firstLi).toHaveClass("book-unread"); const secondLi = page.window.document.querySelector( "#reading-list > :nth-child(2)" ); - expect(secondLi).toHaveStyle({ backgroundColor: "green" }); + expect(secondLi).toHaveClass("book-read"); const thirdLi = page.window.document.querySelector( "#reading-list > :nth-child(3)" ); - expect(thirdLi).toHaveStyle({ backgroundColor: "green" }); + expect(thirdLi).toHaveClass("book-read"); }); }); diff --git a/Sprint-3/reading-list/style.css b/Sprint-3/reading-list/style.css index 74406e64f..f353c9b99 100644 --- a/Sprint-3/reading-list/style.css +++ b/Sprint-3/reading-list/style.css @@ -157,3 +157,11 @@ body { max-height: 80px; } } + +.book-read { + background-color: green; +} + +.book-unread { + background-color: red; +}