Add decrement functionality and update tests for counter

dom-merge-conflict/tasks/buttons-and-counter/src/app.js

@@ -3,21 +3,26 @@ function increment(node) {
   let current = node.textContent;
   node.textContent = Number(current) + 1;
 }
+function decrement(node) {
+  let current = node.textContent;
+  node.textContent = Number(current) - 1;
+}
 
 export function App() {
   const body = document.createElement("body");
 
   const header = document.createElement("header");
   header.innerHTML = `
         <h1>Number Counter</h1>
-        <p>A simple counter. Press increment to increase the count by one.</p>
+        <p>A simple counter. Press increment to increase the count by one or decrement to decrease it by one.</p>
     `;
   body.appendChild(header);
 
   const main = document.createElement("main");
   main.innerHTML = `
         <p id="counter" data-testid="counter">0</p>
         <button id="increment">Increment</button>
+        <button id="decrement">Decrement</button> 
     `;
   body.appendChild(main);
 
@@ -26,6 +31,7 @@ export function App() {
   button.addEventListener("click", () => {
     increment(counter);
   });
-
-  return body;
-}
+  const decrementButton = body.querySelector("#decrement");
+  decrementButton.addEventListener("click", () => {
+    decrement(counter);
+  });

dom-merge-conflict/tasks/buttons-and-counter/test/app.test.js

@@ -35,7 +35,7 @@ describe("button and counter", () => {
     expect(getByTestId(container, "counter")).toHaveTextContent(/^2$/);
   });
 
-  describe.skip("decrement button", () => {
+  describe("decrement button", () => {
     test("pressing Decrement decreases the counter", () => {
       const button = getByRole(container, "button", {
         name: "Decrement",
@@ -54,3 +54,4 @@ describe("button and counter", () => {
     });
   });
 });
+