diff --git a/resources/tests.mjs b/resources/tests.mjs index d7cf6794a..f35e88eec 100644 --- a/resources/tests.mjs +++ b/resources/tests.mjs @@ -274,6 +274,39 @@ Suites.push({ ], }); +Suites.push({ + name: "TodoMVC-WebComponents-Old", + url: "resources/todomvc/vanilla-examples/javascript-web-components-old/dist/index.html", + tags: ["todomvc", "webcomponents"], + async prepare(page) { + await page.waitForElement("todo-app"); + }, + tests: [ + new BenchmarkTestStep(`Adding${numberOfItemsToAdd}Items`, (page) => { + const input = page.querySelector(".new-todo-input", ["todo-app", "todo-topbar"]); + for (let i = 0; i < numberOfItemsToAdd; i++) { + input.setValue(getTodoText(defaultLanguage, i)); + input.dispatchEvent("input"); + input.enter("keyup"); + } + }), + 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("DeletingAllItems", (page) => { + const items = page.querySelectorAll("todo-item", ["todo-app", "todo-list"]); + for (let i = numberOfItemsToAdd - 1; i >= 0; i--) { + const item = items[i].querySelectorInShadowRoot(".remove-todo-button"); + item.click(); + } + }), + ], +}); + Suites.push({ name: "TodoMVC-WebComponents-Complex-DOM", url: "resources/todomvc/vanilla-examples/javascript-web-components-complex/dist/index.html", @@ -308,6 +341,40 @@ Suites.push({ ], }); +Suites.push({ + name: "TodoMVC-WebComponents-Old-Complex-DOM", + url: "resources/todomvc/vanilla-examples/javascript-web-components-old-complex/dist/index.html", + tags: ["todomvc", "webcomponents", "complex"], + disabled: true, + async prepare(page) { + await page.waitForElement("todo-app"); + }, + tests: [ + new BenchmarkTestStep(`Adding${numberOfItemsToAdd}Items`, (page) => { + const input = page.querySelector(".new-todo-input", ["todo-app", "todo-topbar"]); + for (let i = 0; i < numberOfItemsToAdd; i++) { + input.setValue(getTodoText(defaultLanguage, i)); + input.dispatchEvent("input"); + input.enter("keyup"); + } + }), + 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("DeletingAllItems", (page) => { + const items = page.querySelectorAll("todo-item", ["todo-app", "todo-list"]); + for (let i = numberOfItemsToAdd - 1; i >= 0; i--) { + const item = items[i].querySelectorInShadowRoot(".remove-todo-button"); + item.click(); + } + }), + ], +}); + Suites.push({ name: "TodoMVC-React", url: "resources/todomvc/architecture-examples/react/dist/index.html#/home", diff --git a/resources/todomvc/vanilla-examples/javascript-web-components-complex/dist/components/todo-app/todo-app.component.js b/resources/todomvc/vanilla-examples/javascript-web-components-complex/dist/components/todo-app/todo-app.component.js index 877d0c29d..ed4be34e0 100644 --- a/resources/todomvc/vanilla-examples/javascript-web-components-complex/dist/components/todo-app/todo-app.component.js +++ b/resources/todomvc/vanilla-examples/javascript-web-components-complex/dist/components/todo-app/todo-app.component.js @@ -6,7 +6,8 @@ import appStyles from "../../styles/app.constructable.js"; import mainStyles from "../../styles/main.constructable.js"; class TodoApp extends HTMLElement { #isReady = false; - #data = []; + #numberOfItems = 0; + #numberOfCompletedItems = 0; constructor() { super(); @@ -42,37 +43,28 @@ class TodoApp extends HTMLElement { addItem(event) { const { detail: item } = event; - - this.#data.push(item); - this.list.addItem(item); - + this.list.addItem(item, this.#numberOfItems++); this.update("add-item", item.id); } toggleItem(event) { - this.#data.forEach((entry) => { - if (entry.id === event.detail.id) - entry.completed = event.detail.completed; - }); + if (event.detail.completed) + this.#numberOfCompletedItems++; + else + this.#numberOfCompletedItems--; this.update("toggle-item", event.detail.id); } removeItem(event) { - this.#data.forEach((entry, index) => { - if (entry.id === event.detail.id) - this.#data.splice(index, 1); - }); + if (event.detail.completed) + this.#numberOfCompletedItems--; + this.#numberOfItems--; this.update("remove-item", event.detail.id); } updateItem(event) { - this.#data.forEach((entry) => { - if (entry.id === event.detail.id) - entry.title = event.detail.title; - }); - this.update("update-item", event.detail.id); } @@ -84,13 +76,12 @@ class TodoApp extends HTMLElement { this.list.removeCompletedItems(); } - update(type = "", id = "") { - const totalItems = this.#data.length; - const activeItems = this.#data.filter((entry) => !entry.completed).length; - const completedItems = totalItems - activeItems; + update() { + const totalItems = this.#numberOfItems; + const completedItems = this.#numberOfCompletedItems; + const activeItems = totalItems - completedItems; this.list.setAttribute("total-items", totalItems); - this.list.updateElements(type, id); this.topbar.setAttribute("total-items", totalItems); this.topbar.setAttribute("active-items", activeItems); diff --git a/resources/todomvc/vanilla-examples/javascript-web-components-complex/dist/components/todo-bottombar/todo-bottombar.component.js b/resources/todomvc/vanilla-examples/javascript-web-components-complex/dist/components/todo-bottombar/todo-bottombar.component.js index cc0203c48..174bcc5e1 100644 --- a/resources/todomvc/vanilla-examples/javascript-web-components-complex/dist/components/todo-bottombar/todo-bottombar.component.js +++ b/resources/todomvc/vanilla-examples/javascript-web-components-complex/dist/components/todo-bottombar/todo-bottombar.component.js @@ -3,6 +3,17 @@ import template from "./todo-bottombar.template.js"; import globalStyles from "../../styles/global.constructable.js"; import bottombarStyles from "../../styles/bottombar.constructable.js"; +const customStyles = new CSSStyleSheet(); +customStyles.replaceSync(` + .bottombar { + display: block; + } + + :host([total-items="0"]) > .bottombar { + display: none; + } +`); + class TodoBottombar extends HTMLElement { static get observedAttributes() { return ["total-items", "active-items"]; @@ -20,18 +31,13 @@ class TodoBottombar extends HTMLElement { this.shadow = this.attachShadow({ mode: "open" }); this.htmlDirection = document.dir || "ltr"; this.setAttribute("dir", this.htmlDirection); - this.shadow.adoptedStyleSheets = [globalStyles, bottombarStyles]; + this.shadow.adoptedStyleSheets = [globalStyles, bottombarStyles, customStyles]; this.shadow.append(node); this.clearCompletedItems = this.clearCompletedItems.bind(this); } updateDisplay() { - if (parseInt(this["total-items"]) !== 0) - this.element.style.display = "block"; - else - this.element.style.display = "none"; - this.todoStatus.textContent = `${this["active-items"]} ${this["active-items"] === "1" ? "item" : "items"} left!`; } diff --git a/resources/todomvc/vanilla-examples/javascript-web-components-complex/dist/components/todo-bottombar/todo-bottombar.template.js b/resources/todomvc/vanilla-examples/javascript-web-components-complex/dist/components/todo-bottombar/todo-bottombar.template.js index 4f34ca92d..4a5e06f25 100644 --- a/resources/todomvc/vanilla-examples/javascript-web-components-complex/dist/components/todo-bottombar/todo-bottombar.template.js +++ b/resources/todomvc/vanilla-examples/javascript-web-components-complex/dist/components/todo-bottombar/todo-bottombar.template.js @@ -2,7 +2,7 @@ const template = document.createElement("template"); template.id = "todo-bottombar-template"; template.innerHTML = ` -