Simplify e2e output

.github/workflows/e2e-test.yml

@@ -76,3 +76,4 @@ jobs:
           wait-on: http://0.0.0.0:8080
           wait-on-timeout: 120
           spec: cypress/e2e/${{ matrix.app }}.cy.ts
+          quiet: true

e2e/README.md

@@ -17,25 +17,37 @@ enabled ASAP.
 
 Run `npm -i` or (`pnpm -i` if `pnpm` is installed).
 
+### Run the test for all the apps
+
 You can run all the e2e tests in parallel with:
 
 ```shell
 <local-pagy-dir>/e2e $ ./test-e2e
 ```
 
-Notice the exit status and the last message in order to check if and which test failed, and search the details in the output.
+Notice: 
+
+- The output of the parallel processes get mixed in the same log stream, however the test summaries are prefixed with the app name.
+- The script will return a non-zero status if any of the test fail, and will print a brief feedback.
+
+### Run the test for a single app
 
 You can limit the e2e test to a specific APP:
 
 ```shell
 <local-pagy-dir>/e2e $ ./test-e2e repro
 ```
 
-You can also run the e2e test interactively (on one APP/file at the time) opening cypress UI:
+### Run the test interactively
+
+You can also run the e2e test interactively (only one APP/file at the time) opening cypress UI:
 
 ```shell
 <local-pagy-dir>/e2e $ ./open-e2e demo
 ```
+
+Notice: You can only run the spec file for the app that is running (e.g. `demo.cy.ts` in the example above) 
+
 ---
 
 See also [Ruby Test Environment](https://github.com/ddnexus/pagy/tree/master/test)

e2e/cypress/e2e/calendar.cy.ts

@@ -1,27 +1,27 @@
 import {snapIds} from "../support/test-helper.ts";
 
-
+const app = "calendar";
 const calIds = ["#year-nav", "#month-nav", "#day-nav", "#pagy-info"];
 
-describe(`Test helpers [calendar]`, () => {
+describe(`[${app}] Test helpers`, () => {
     beforeEach(() => {
         cy.visit("/");
     });
 
-    it("Test #toggle", () => {
+    it(`[${app}] Test #toggle`, () => {
         snapIds(calIds);
         cy.get("#toggle").click();
         snapIds(["#pages-nav"]);
         cy.get("#toggle").click();
         snapIds(calIds);
     });
 
-    it("Test #go-to-day", () => {
+    it(`[${app}] Test #go-to-day`, () => {
         cy.get("#go-to-day").click();
         snapIds(calIds);
     });
 
-    it("Test calendar navs", () => {
+    it(`[${app}] Test calendar navs`, () => {
         cy.get("#year-nav").contains("2022").click();
         snapIds(calIds);
         cy.get("#month-nav").contains("Apr").click();

e2e/cypress/e2e/demo.cy.ts

@@ -1,24 +1,25 @@
 import {testNav, testComboNav, testInfo, testItemsSelector} from "../support/test-helper.ts";
 
+const app = "demo";
 const paths = [
     "/pagy",
     "/bootstrap",
     "/bulma"
 ];
 
 for (const path of paths) {
-    describe(`Test ${path} helpers [demo]`, () => {
+    describe(`[${app}] Test ${path} helpers`, () => {
         beforeEach(() => {
             cy.visit(path);
         });
 
-        testNav("#nav", {path: path});
-        testNav("#nav-js", {path: path});
-        testNav("#nav-js-responsive", {path: path, rjs: true});
-        testComboNav("#combo-nav-js");
-        testInfo("#pagy-info", path);
+        testNav(app, "#nav", {path: path});
+        testNav(app, "#nav-js", {path: path});
+        testNav(app, "#nav-js-responsive", {path: path, rjs: true});
+        testComboNav(app, "#combo-nav-js");
+        testInfo(app, "#pagy-info", path);
         if (path === "/pagy") {
-            testItemsSelector("#items-selector-js", path, true); // trim true
+            testItemsSelector(app, "#items-selector-js", path, true); // trim true
         }
     });
 }

e2e/cypress/e2e/rails.cy.ts

@@ -1,14 +1,15 @@
 import {testNav, testComboNav, testInfo, testItemsSelector} from "../support/test-helper.ts";
 
+const app = "rails";
 
-describe(`Test helpers [rails]`, () => {
+describe(`[rails] Test helpers`, () => {
     beforeEach(() => {
         cy.visit("/");
     });
 
-    testNav("#nav", {pages: ["3"]});
-    testNav("#nav-js", {pages: ["3"]});
-    testComboNav("#combo-nav-js");
-    testItemsSelector("#items-selector-js");  // no style, no trim
-    testInfo("#pagy-info");
+    testNav(app, "#nav", {pages: ["3"]});
+    testNav(app, "#nav-js", {pages: ["3"]});
+    testComboNav(app, "#combo-nav-js");
+    testItemsSelector(app, "#items-selector-js");  // no style, no trim
+    testInfo(app, "#pagy-info");
 });

e2e/cypress/e2e/repro.cy.ts

@@ -1,15 +1,15 @@
 import {testNav, testComboNav, testInfo, testItemsSelector} from "../support/test-helper.ts";
 
-
-describe(`Test helpers [repro]`, () => {
+const app = "repro";
+describe(`[${app}] Test helpers`, () => {
     beforeEach(() => {
         cy.visit("/");
     });
 
-    testNav("#nav", {});
-    testNav("#nav-js", {});
-    testNav("#nav-js-responsive", {rjs: true});
-    testComboNav("#combo-nav-js");
-    testInfo("#pagy-info");
-    testItemsSelector("#items-selector-js");  // no style, no trim
+    testNav(app, "#nav", {});
+    testNav(app, "#nav-js", {});
+    testNav(app, "#nav-js-responsive", {rjs: true});
+    testComboNav(app, "#combo-nav-js");
+    testInfo(app, "#pagy-info");
+    testItemsSelector(app, "#items-selector-js");  // no style, no trim
 });

e2e/cypress/support/test-helper.ts

@@ -11,8 +11,8 @@ interface TestNavOpts {
     rjs?:boolean
 }
 
-export function testNav(id:string, {path = "/", pages = ["3", "50"], rjs = false}:TestNavOpts) {
-    it(`Test ${id}`, () => {
+export function testNav(app:string, id:string, {path = "/", pages = ["3", "50"], rjs = false}:TestNavOpts) {
+    it(`[${app}] Test ${id}`, () => {
         if (rjs) {
             const widths = [450, 700, 950, 1050];
             for (const width of widths) {
@@ -36,9 +36,9 @@ function checkNav(id:string, pages:string[]) {
     goCheckPrev(id);
 }
 
-export function testComboNav(id:string) {
+export function testComboNav(app:string, id:string) {
     const id_input = `${id} input`;
-    it(`Test ${id}`, () => {
+    it(`[${app}] Test ${id}`, () => {
         snapIds([id]);
         goCheckNext(id);
         const page = "3";
@@ -61,9 +61,9 @@ export function testComboNav(id:string) {
     });
 }
 
-export function testItemsSelector(id:string, path = "/", trim = false) {
-    it(`Test ${id}`, () => {
-        const pages    = [1, 36, 50];
+export function testItemsSelector(app:string, id:string, path = "/", trim = false) {
+    it(`[${app}] Test ${id}`, () => {
+        const pages = [1, 36, 50];
         const id_input = `${id} input`;
         for (const page of pages) {
             cy.visit(`${path}?page=${page}`);
@@ -106,8 +106,8 @@ export function testItemsSelector(id:string, path = "/", trim = false) {
     });
 }
 
-export function testInfo(id:string, path = "/") {
-    it(`Test ${id}`, () => {
+export function testInfo(app:string, id:string, path = "/") {
+    it(`[${app}] Test ${id}`, () => {
         const pages = [1, 36, 50];
         for (const page of pages) {
             cy.visit(`${path}?page=${page}`);