Skip to content

Commit cc37f6c

Browse files
issackjohnissackjohn
committed
Move Responsive-Design suite to experimental/tests.mjs and sync with main
1 parent 75f70bc commit cc37f6c

File tree

2 files changed

+104
-104
lines changed

2 files changed

+104
-104
lines changed

‎experimental/tests.mjs‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -142,4 +142,108 @@ export const ExperimentalSuites = freezeSuites([
142142
name: "default", // optional param to target non-default tests locally
143143
}, */
144144
},
145+
{
146+
name: "Responsive-Design",
147+
url: "experimental/responsive-design/dist/index.html",
148+
tags: ["responsive-design", "webcomponents", "experimental"],
149+
type: "async",
150+
async prepare(page) {
151+
await page.waitForElement("cooking-app");
152+
},
153+
tests: [
154+
new BenchmarkTestStep("LoadChatAndExpandRecipes", async (page) => {
155+
const resumePreviousChatBtn = page.querySelector("#resume-previous-chat-btn", ["cooking-app", "chat-window"]);
156+
resumePreviousChatBtn.click();
157+
page.layout();
158+
159+
const nextRestaurantBtn = page.querySelector("#next-restaurant-btn", ["cooking-app", "information-window"]);
160+
const restaurantCards = page.querySelectorAll("restaurant-card", ["cooking-app", "information-window"]);
161+
const numOfRestaurantCards = restaurantCards.length - 1;
162+
for (let i = 0; i < numOfRestaurantCards; i++) {
163+
nextRestaurantBtn.click();
164+
page.layout();
165+
}
166+
167+
const showMoreBtn = page.querySelectorAll(".show-more-btn", ["cooking-app", "main-content", "recipe-grid"]);
168+
for (const btn of showMoreBtn) {
169+
btn.click();
170+
page.layout();
171+
}
172+
}),
173+
new BenchmarkTestStep("ReduceWidthIn5Steps", async (page) => {
174+
const widths = [768, 704, 640, 560, 480];
175+
const MATCH_MEDIA_QUERY_BREAKPOINT = 640;
176+
177+
// The matchMedia query is "(max-width: 640px)"
178+
// Starting from a width > 640px, we'll only get 1 event when crossing to <= 640px
179+
// This happens when the width changes from 704px to 640px
180+
const resizeWorkPromise = new Promise((resolve) => {
181+
page.addEventListener("resize-work-complete", resolve, { once: true });
182+
});
183+
184+
for (const width of widths) {
185+
page.setWidth(width);
186+
page.layout();
187+
if (width === MATCH_MEDIA_QUERY_BREAKPOINT)
188+
await resizeWorkPromise;
189+
}
190+
191+
await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)));
192+
}),
193+
new BenchmarkTestStep("ScrollToChatAndSendMessages", async (page) => {
194+
const cvWorkComplete = new Promise((resolve) => {
195+
page.addEventListener("video-grid-content-visibility-complete", resolve, { once: true });
196+
});
197+
198+
const nextItemBtn = page.querySelector("#next-item-carousel-btn", ["cooking-app", "main-content", "recipe-carousel"]);
199+
const recipeCarouselItems = page.querySelectorAll(".carousel-item", ["cooking-app", "main-content", "recipe-carousel"]);
200+
const numOfCarouselItems = recipeCarouselItems.length - 3;
201+
for (let i = 0; i < numOfCarouselItems; i++) {
202+
nextItemBtn.click();
203+
page.layout();
204+
}
205+
206+
// Collapse recipes
207+
const showMoreBtnCollapse = page.querySelectorAll(".show-more-btn", ["cooking-app", "main-content", "recipe-grid"]);
208+
for (const btn of showMoreBtnCollapse) {
209+
btn.click();
210+
page.layout();
211+
}
212+
213+
const chatWindow = page.querySelector("#chat-window", ["cooking-app", "chat-window"]);
214+
chatWindow.scrollIntoView({ behavior: "instant" });
215+
page.layout();
216+
217+
const messagesToBeSent = ["Please generate an image of Tomato Soup.", "Try again, but make the soup look thicker.", "Try again, but make the soup served in a rustic bowl and include a sprinkle of fresh herbs on top."];
218+
const chatInput = page.querySelector("#chat-input", ["cooking-app", "chat-window"]);
219+
for (const message of messagesToBeSent) {
220+
chatInput.setValue(message);
221+
chatInput.dispatchEvent("input");
222+
chatInput.enter("keydown");
223+
page.layout();
224+
}
225+
await cvWorkComplete;
226+
}),
227+
new BenchmarkTestStep("IncreaseWidthIn5Steps", async (page) => {
228+
const widths = [560, 640, 704, 768, 800];
229+
const MATCH_MEDIA_QUERY_BREAKPOINT = 704;
230+
231+
// The matchMedia query is "(max-width: 640px)"
232+
// Starting from a width <= 640px, we'll get 1 event when crossing back to > 640px.
233+
// This happens when the width changes from 640px to 704px.
234+
const resizeWorkPromise = new Promise((resolve) => {
235+
page.addEventListener("resize-work-complete", resolve, { once: true });
236+
});
237+
238+
for (const width of widths) {
239+
page.setWidth(width);
240+
page.layout();
241+
if (width === MATCH_MEDIA_QUERY_BREAKPOINT)
242+
await resizeWorkPromise;
243+
}
244+
245+
await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)));
246+
}),
247+
],
248+
},
145249
]);

‎resources/default-tests.mjs‎

Lines changed: 0 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -940,108 +940,4 @@ export const DefaultSuites = freezeSuites([
940940
}),
941941
],
942942
},
943-
{
944-
name: "Responsive-Design",
945-
url: "experimental/responsive-design/dist/index.html",
946-
tags: ["responsive-design", "webcomponents", "experimental"],
947-
type: "async",
948-
async prepare(page) {
949-
await page.waitForElement("cooking-app");
950-
},
951-
tests: [
952-
new BenchmarkTestStep("LoadChatAndExpandRecipes", async (page) => {
953-
const resumePreviousChatBtn = page.querySelector("#resume-previous-chat-btn", ["cooking-app", "chat-window"]);
954-
resumePreviousChatBtn.click();
955-
page.layout();
956-
957-
const nextRestaurantBtn = page.querySelector("#next-restaurant-btn", ["cooking-app", "information-window"]);
958-
const restaurantCards = page.querySelectorAll("restaurant-card", ["cooking-app", "information-window"]);
959-
const numOfRestaurantCards = restaurantCards.length - 1;
960-
for (let i = 0; i < numOfRestaurantCards; i++) {
961-
nextRestaurantBtn.click();
962-
page.layout();
963-
}
964-
965-
const showMoreBtn = page.querySelectorAll(".show-more-btn", ["cooking-app", "main-content", "recipe-grid"]);
966-
for (const btn of showMoreBtn) {
967-
btn.click();
968-
page.layout();
969-
}
970-
}),
971-
new BenchmarkTestStep("ReduceWidthIn5Steps", async (page) => {
972-
const widths = [768, 704, 640, 560, 480];
973-
const MATCH_MEDIA_QUERY_BREAKPOINT = 640;
974-
975-
// The matchMedia query is "(max-width: 640px)"
976-
// Starting from a width > 640px, we'll only get 1 event when crossing to <= 640px
977-
// This happens when the width changes from 704px to 640px
978-
const resizeWorkPromise = new Promise((resolve) => {
979-
page.addEventListener("resize-work-complete", resolve, { once: true });
980-
});
981-
982-
for (const width of widths) {
983-
page.setWidth(width);
984-
page.layout();
985-
if (width === MATCH_MEDIA_QUERY_BREAKPOINT)
986-
await resizeWorkPromise;
987-
}
988-
989-
await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)));
990-
}),
991-
new BenchmarkTestStep("ScrollToChatAndSendMessages", async (page) => {
992-
const cvWorkComplete = new Promise((resolve) => {
993-
page.addEventListener("video-grid-content-visibility-complete", resolve, { once: true });
994-
});
995-
996-
const nextItemBtn = page.querySelector("#next-item-carousel-btn", ["cooking-app", "main-content", "recipe-carousel"]);
997-
const recipeCarouselItems = page.querySelectorAll(".carousel-item", ["cooking-app", "main-content", "recipe-carousel"]);
998-
const numOfCarouselItems = recipeCarouselItems.length - 3;
999-
for (let i = 0; i < numOfCarouselItems; i++) {
1000-
nextItemBtn.click();
1001-
page.layout();
1002-
}
1003-
1004-
// Collapse recipes
1005-
const showMoreBtnCollapse = page.querySelectorAll(".show-more-btn", ["cooking-app", "main-content", "recipe-grid"]);
1006-
for (const btn of showMoreBtnCollapse) {
1007-
btn.click();
1008-
page.layout();
1009-
}
1010-
1011-
const chatWindow = page.querySelector("#chat-window", ["cooking-app", "chat-window"]);
1012-
chatWindow.scrollIntoView({ behavior: "instant" });
1013-
page.layout();
1014-
1015-
const messagesToBeSent = ["Please generate an image of Tomato Soup.", "Try again, but make the soup look thicker.", "Try again, but make the soup served in a rustic bowl and include a sprinkle of fresh herbs on top."];
1016-
const chatInput = page.querySelector("#chat-input", ["cooking-app", "chat-window"]);
1017-
for (const message of messagesToBeSent) {
1018-
chatInput.setValue(message);
1019-
chatInput.dispatchEvent("input");
1020-
chatInput.enter("keydown");
1021-
page.layout();
1022-
}
1023-
await cvWorkComplete;
1024-
}),
1025-
new BenchmarkTestStep("IncreaseWidthIn5Steps", async (page) => {
1026-
const widths = [560, 640, 704, 768, 800];
1027-
const MATCH_MEDIA_QUERY_BREAKPOINT = 704;
1028-
1029-
// The matchMedia query is "(max-width: 640px)"
1030-
// Starting from a width <= 640px, we'll get 1 event when crossing back to > 640px.
1031-
// This happens when the width changes from 640px to 704px.
1032-
const resizeWorkPromise = new Promise((resolve) => {
1033-
page.addEventListener("resize-work-complete", resolve, { once: true });
1034-
});
1035-
1036-
for (const width of widths) {
1037-
page.setWidth(width);
1038-
page.layout();
1039-
if (width === MATCH_MEDIA_QUERY_BREAKPOINT)
1040-
await resizeWorkPromise;
1041-
}
1042-
1043-
await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)));
1044-
}),
1045-
],
1046-
},
1047943
]);

0 commit comments

Comments
 (0)