cypress: updated images; better open-cypress.yml with persistent conf…

…iguration settings; added snapshots plugin

.gitignore

@@ -2,6 +2,8 @@
 /coverage/
 /docs/.jekyll-metadata
 /pkg/
-/test/e2e/cypress/videos/
+/test/e2e/cypress/downloads/
+/test/e2e/cypress/fixtures/
 /test/e2e/cypress/screenshots/
+/test/e2e/cypress/videos/
 /tmp/

pagy-on-docker/README.md

@@ -97,22 +97,23 @@ When you want to get rid of everything related to the `pagy` development on your
     - Remember to checkout the right branch before using it
     - If you get some problem running the tests you might need to `rm -rf coverage`
 
-## JS Test Environment
+## E2E Environment
 
-Pagy provides quite a few helpers that render the pagination elements for different js-frameworks on the client side, with improved performance. They are tested with a sinatra/rackup/puma ruby app and  [Cypress](https://www.cypress.io).
-
-If you determine that you need to run the JS tests, you can choose different ways to run them:
+Pagy provides quite a few helpers that render the pagination elements for different js-frameworks on the server side or on the client side (with improved performance). They are tested with a sinatra/rackup/puma ruby app and  [Cypress](https://www.cypress.io).
 
+If you determine that you need to run the E2E tests, you can choose different ways to run them:
 
 1. Remotely in Github Actions CI:
     - Just create a PR and all the tests (including the cypress tests) will run on GitHub. Use this option if you don't need to write any js code or tests interactively and the ruby tests pass.
 2. Locally on your system:
     - With a cypress desktop app that you can [download](https://download.cypress.io/desktop) and manually run from your system. The doc is available on the cypress site and it requires some basic knowledge of cypress to run the tests.
     - Or with a full cypress install with all its dependencies that you may or may not have already (e.g. node modules). The doc is available on the cypress site and it requires some basic knowledge of cypress to run the tests.
 3. Inside docker:
-    - With fully automated testing running the JS tests in headless mode. It requires building only one container and requires no other knowledge about cypress
+    - With fully automated testing running the E2E tests in headless mode. It requires building only one container and requires no other knowledge about cypress
     - Or opening a cypress desktop session from inside the container. It requires a bit of docker setup, but it is a complete installation that avoid polluting your system.
 
+If you need to edit/develop new the E2E tests, you can use one of the previous points #2 or #3.
+
 ### Build Pagy Cypress
 
 Check your user id with:
@@ -145,14 +146,13 @@ If you just want to run the tests, run the container from the `pagy-on-docker` d
 docker-compose up pagy-cypress
 ```
 
-That will run all the tests in headless mode and print a report right on the screen. It will also create a video for each test file run in the `test_js/cypress/videos`. That will be useful in case of failure, showing you exactly what was on the page of the browser during the whole process.
+That will run all the tests with the built in `electron` browser in headless mode and print a report right on the screen. It will also create a video for each test file run in the `test_js/cypress/videos`. That will be useful in case of failure, showing you exactly what was on the page of the browser during the whole process.
 
 ### Open Cypress
 
-If you want to open the cypress desktop app as it was installed in your local system, and you are lucky enough to run with user id 1000 on an ubuntu system, you can just run it with the command below.
+If you want to open and interact the cypress desktop app as it was installed in your local system, and you are lucky enough to run with user id 1000 on an ubuntu system, you can just run it with the command below without custoizing anything.
 
-If not, (i.e. different uid or different OS or version)
-you should read the comments in the `pagy-on-docker/open-cypress.yml` file, customizing it a bit according to your OS need.
+If not, (i.e. different uid or different OS or version) you should first read the comments in the `pagy-on-docker/open-cypress.yml` file and customize it a bit according to your OS need.
 
 Then run it with:
 

pagy-on-docker/open-cypress.yml

@@ -20,17 +20,24 @@ services:
       - DISPLAY
       - DBUS_SESSION_BUS_ADDRESS
     entrypoint: |
-      cypress open --project /test_js
+      cypress open --project /test/e2e
     privileged: true
     network_mode: host
     volumes:
       # mounts working on ubuntu 20.10 host uid 1000
       - /run/user/1000/bus:/run/user/1000/bus
       - /var/run/dbus/system_bus_socket:/var/run/dbus/system_bus_socket
+      - cypress_config:/home/node/.config   # node is the user name for uid 1000: for other cases use your actual USER
       # you may need to change all these mounts by reading at the error messages in the container
       # you might also need some of the following:
       # - $XAUTHORITY:/root/.Xauthority:rw
       # - $HOME/.Xauthority:/root/.Xauthority:rw
       # or on macOS:
       # - /tmp/.X11-unix:/tmp/.X11-unix
+    stdin_open: true
+    tty: true
 
+volumes:
+  # persists the configuration settings
+  cypress_config:
+    name: pagy_cypress_config

pagy-on-docker/pagy-cypress-uid1000.dockerfile

@@ -1,10 +1,13 @@
-FROM cypress/included:7.1.0
+FROM cypress/included:7.2.0
 
 # the upstram dockerfile already provides a node user with UID 1000
 # so we configure the image to run as that user
-RUN ln -s /root/.cache /home/node/.cache
+RUN rm -rf /opt/firefox /usr/bin/firefox \
+ && ln -s /root/.cache /home/node/.cache \
+ && npm install cypress-plugin-snapshots
 
 # make sure cypress looks in the right place
 ENV CYPRESS_CACHE_FOLDER=/home/node/.cache/Cypress
 
 USER node
+RUN mkdir /home/node/.config

pagy-on-docker/pagy-cypress.dockerfile

@@ -1,4 +1,4 @@
-FROM cypress/included:7.1.0
+FROM cypress/included:7.2.0
 
 ARG user
 ARG group
@@ -9,10 +9,13 @@ ARG gid
 # move test runner binary folder to the user home directory
 RUN groupadd -g $gid $user \
  && useradd -r --no-log-init -u $uid -g $user $group \
- && install -d -m 0755 -o $user -g $user /home/$user
- && ln -s /root/.cache /home/$user/.cache
+ && install -d -m 0755 -o $user -g $user /home/$user \
+ && rm -rf /opt/firefox /usr/bin/firefox \
+ && ln -s /root/.cache /home/$user/.cache \
+ && npm install cypress-plugin-snapshots
 
 # make sure cypress looks in the right place
 ENV CYPRESS_CACHE_FOLDER=/home/$user/.cache/Cypress
 
 USER $user
+RUN mkdir /home/node/.config

test/e2e/app.rb

@@ -39,7 +39,7 @@
   include Pagy::Frontend
 
   def site_map
-    html = +%(<div class="style-links">)
+    html = +%(<div id="site-map">)
     query_string = "?#{Rack::Utils.build_nested_query(params)}" unless params.empty?
     [:home, *STYLES].each do |name|
       html << %(<a href="/#{name}#{query_string}">#{name}</a> )
@@ -91,15 +91,16 @@ def site_map
 
 
 @@ home
-<h3>Pagy e2e app</h3>
+<div id="home">
+  <h3>Pagy e2e app</h3>
 
-<p>This app runs on Sinatra/Puma and is used for testing locally and in GitHub Actions CI with cypress, or just inspect the different helpers in the same page.</p>
+  <p>This app runs on Sinatra/Puma and is used for testing locally and in GitHub Actions CI with cypress, or just inspect the different helpers in the same page.</p>
 
-<p>It shows all the helpers for all the styles supported by pagy.</p>
-
-<p>Each framework provides its own set of CSS that applies to the helpers, but we cannot load different framewors in the same app because they would conflict. Without the framework where the helpers are supposed to work we can only normalize the CSS styles in order to make them at least readable.</p>
-<hr>
+  <p>It shows all the helpers for all the styles supported by pagy.</p>
 
+  <p>Each framework provides its own set of CSS that applies to the helpers, but we cannot load different framewors in the same app because they would conflict. Without the framework where the helpers are supposed to work we can only normalize the CSS styles in order to make them at least readable.</p>
+  <hr>
+</div>
 
 
 @@ helpers

test/e2e/cypress.json

@@ -1,4 +1,6 @@
 {
-    "pluginsFile": false,
-    "supportFile": false
+  "ignoreTestFiles": [
+    "**/__snapshots__/*",
+    "**/__image_snapshots__/*"
+  ]
 }

test/e2e/cypress/integration/__snapshots__/dummy.spec.js.snap

@@ -0,0 +1,8 @@
+exports[`Dummy Test > toMatchSnapshot - HTML #0`] = `
+<div id="site-map">
+  <a href="/home">home</a> <a href="/bootstrap">bootstrap</a>
+  <a href="/bulma">bulma</a> <a href="/foundation">foundation</a>
+  <a href="/materialize">materialize</a> <a href="/navs">navs</a>
+  <a href="/semantic">semantic</a> <a href="/uikit">uikit</a>
+</div>
+`;

test/e2e/cypress/integration/dummy.spec.js

@@ -1,7 +1,11 @@
 /// <reference types="cypress" />
 
 describe('Dummy Test', () => {
-  it('Visits the / page', () => {
+  it('toMatchSnapshot - HTML', () => {
     cy.visit('/')
-  })
+      .then(() => {
+        cy.get('#site-map').toMatchSnapshot();
+      });
+  });
 })
+

test/e2e/cypress/plugins/index.js

@@ -16,7 +16,14 @@
  * @type {Cypress.PluginConfig}
  */
 // eslint-disable-next-line no-unused-vars
-module.exports = (on, config) => {
+// module.exports = (on, config) => {
   // `on` is used to hook into various events Cypress emits
   // `config` is the resolved Cypress config
-}
+// }
+
+const { initPlugin } = require('cypress-plugin-snapshots/plugin');
+
+module.exports = (on, config) => {
+  initPlugin(on, config);
+  return config;
+};

test/e2e/cypress/support/commands.js

@@ -23,3 +23,5 @@
 //
 // -- This will overwrite an existing command --
 // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+
+import 'cypress-plugin-snapshots/commands';

test/e2e/public/normalize-styles.css

@@ -12,6 +12,11 @@ p:not(.control) {
   margin-bottom: .5em;
 }
 
+body {
+  font-family: sans-serif;
+  margin: 2em;
+}
+
 /* normalize all on one line with some space in between */
 ul li,
 .pagy-bootstrap-combo-nav-js .btn-group, .pagy-combo-input,