Added toggle step, pending delete step (logic to delete from the db?)

Author: lpardosixtosMs

resources/benchmark-runner.mjs

@@ -123,6 +123,10 @@ class Page {
     addEventListener(name, listener) {
         this._frame.contentWindow.addEventListener(name, listener);
     }
+
+    setGlobalVariable(name, value) {
+        this._frame.contentWindow[name] = value;
+    }
 }
 
 const NATIVE_OPTIONS = {

resources/tests.mjs

@@ -267,13 +267,33 @@ Suites.push({
             }
             await indexedDBAddPromise;
         }),
-        // new BenchmarkTestStep("CompletingAllItems", (page) => {
-        //     const items = page.querySelectorAll("todo-item", ["todo-app", "todo-list"]);
-        //     for (let i = 0; i < numberOfItemsToAdd; i++) {
-        //         const item = items[i].querySelectorInShadowRoot(".toggle-todo-input");
-        //         item.click();
-        //     }
-        // }),
+        new BenchmarkTestStep("CompletingAllItems", async (page) => {
+            const numberOfItemsPerIteration = 10;
+            const numberOfIterations = 10;
+            page.setGlobalVariable("numberOfItemsToAdd", numberOfItemsToAdd);
+            const indexedDBCompletedPromise = new Promise((resolve) => {
+                page.addEventListener("indexeddb-toggle-completed", () => {
+                    resolve();
+                });
+            }); 
+            for (let j=0; j < numberOfIterations; j++) {
+                const items = page.querySelectorAll("todo-item", ["todo-app", "todo-list"]);
+                for (let i = 0; i < numberOfItemsPerIteration; i++) {
+                    const item = items[i].querySelectorInShadowRoot(".toggle-todo-input");
+                    item.click();
+                }
+                // Let the layout update???
+                // Give a change to the pending indexedDB operations to complete in main thread.
+                await new Promise((resolve) => {
+                    setTimeout(() => {resolve();}, 0);
+                });
+                if (j<9) {
+                    const nextPageButton = page.querySelector(".next-page-button", ["todo-app", "todo-bottombar"]);
+                    nextPageButton.click();
+                }
+            }
+            await indexedDBCompletedPromise;
+        }),
         // new BenchmarkTestStep("DeletingAllItems", (page) => {
         //     const items = page.querySelectorAll("todo-item", ["todo-app", "todo-list"]);
         //     for (let i = numberOfItemsToAdd - 1; i >= 0; i--) {

resources/todomvc/vanilla-examples/javascript-wc-indexeddb/dist/components/todo-list/todo-list.component.js

@@ -11,6 +11,7 @@ class IndexedDBManager {
         this.storeName = 'todos';
         this.db = null;
         this.pendingAdditions = 0;
+        this.totalItemsToggled = 0;
         this.initDB().then(() => {
             const newDiv = document.createElement("div");
             newDiv.classList.add("indexeddb-ready");
@@ -190,6 +191,9 @@ class IndexedDBManager {
 
                 updateRequest.onsuccess = () => {
                     console.log(`Todo item with itemNumber '${itemNumber}' completed status updated to: ${completed}`);
+                    if (window.numberOfItemsToAdd && ++this.totalItemsToggled === window.numberOfItemsToAdd) {
+                        window.dispatchEvent(new CustomEvent("indexeddb-toggle-completed", {}));
+                    }
                     resolve(todoItem);
                 };
 

resources/todomvc/vanilla-examples/javascript-wc-indexeddb/src/components/todo-bottombar/todo-bottombar.component.js

@@ -115,6 +115,7 @@ class TodoBottombar extends HTMLElement {
 
     reenablePreviousPageButton() {
         this.element.querySelector(".previous-page-button").disabled = false;
+        window.dispatchEvent(new CustomEvent("previous-page-button-enabled", {}));
     }
 
     connectedCallback() {

resources/todomvc/vanilla-examples/javascript-wc-indexeddb/src/components/todo-list/todo-list.component.js

@@ -11,6 +11,7 @@ class IndexedDBManager {
         this.storeName = 'todos';
         this.db = null;
         this.pendingAdditions = 0;
+        this.totalItemsToggled = 0;
         this.initDB().then(() => {
             const newDiv = document.createElement("div");
             newDiv.classList.add("indexeddb-ready");
@@ -190,6 +191,9 @@ class IndexedDBManager {
 
                 updateRequest.onsuccess = () => {
                     console.log(`Todo item with itemNumber '${itemNumber}' completed status updated to: ${completed}`);
+                    if (window.numberOfItemsToAdd && ++this.totalItemsToggled === window.numberOfItemsToAdd) {
+                        window.dispatchEvent(new CustomEvent("indexeddb-toggle-completed", {}));
+                    }
                     resolve(todoItem);
                 };