+
showFirstRow() demo
+
9 elements (always overflows)
+ {showFirstRow({
+ items: [1, 2, 3, 4, 5, 6, 7, 8, 9].map((e) => (
+
{e}
+ )),
+ })}
+
3 elements (overflow depends on screen width)
+ {showFirstRow({
+ items: [1, 2, 3].map((e) =>
{e}
),
+ })}
+
+ );
+ }
+})();
diff --git a/src/back/routes/demos/show-first-row.test.ts b/src/back/routes/demos/show-first-row.test.ts
new file mode 100644
index 0000000..1feb56e
--- /dev/null
+++ b/src/back/routes/demos/show-first-row.test.ts
@@ -0,0 +1,40 @@
+import { withProdApp } from "../../test_utils/with-prod-app.js";
+import { VERY_LONG_TEST_TIMEOUT, webhintURL } from "../../test_utils/webhint.js";
+import { ShowFirstRowDemoURL } from "../urls.js";
+import { getBrowser } from "../../test_utils/browser-creator.js";
+import type { Browser, BrowserContext, Page } from "@playwright/test";
+
+describe("ShowFirstRowDemo webhint", () => {
+ it("doesn't crash", async function () {
+ return withProdApp(async ({ base_url, rest_api }) => {
+ await rest_api.get(ShowFirstRowDemoURL);
+ await webhintURL(base_url + ShowFirstRowDemoURL);
+ // alternatively you can use webhintHTML for faster but less precise scans
+ // or for scanning responses of requests that use some form of authorization:
+ // const response = await rest_api.get(ShowFirstRowDemoURL);
+ // await webhintHTML(response);
+ });
+ }).timeout(VERY_LONG_TEST_TIMEOUT);
+});
+
+describe("ShowFirstRowDemo", () => {
+ let page: Page;
+ let browser: Browser;
+ let context: BrowserContext;
+
+ beforeEach(async () => {
+ browser = await getBrowser();
+ context = await browser.newContext();
+ page = await context.newPage();
+ });
+
+ afterEach(async () => {
+ await context.close();
+ });
+
+ it("works as expected", async function () {
+ return withProdApp(async ({ base_url }) => {
+ await page.goto(base_url + ShowFirstRowDemoURL);
+ });
+ }).timeout(VERY_LONG_TEST_TIMEOUT);
+});