Added fix for Cypress bug affecting the snapshots plugin, improved cy…

…press dockerfiles; added cypress studio and basic try

pagy-on-docker/README.md

@@ -106,13 +106,14 @@ If you determine that you need to run the E2E tests, you can choose different wa
 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.
+    - 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 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.
+If you need to edit/develop new E2E tests, you can use one of the previous points:
+- the #2 is the easiest to work with but it adds an app and dependencies to your system
+- the #3 is a big download, but it is contained in the docker space (i.e. you can remove it completely when you finished without any left-over in your system), but it may miss a few minor features
 
 ### Build Pagy Cypress
 

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

@@ -2,7 +2,8 @@ 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 rm -rf /opt/firefox /usr/bin/firefox \
+RUN apt-get update && apt-get install -y libcanberra-gtk* \
+ && rm -rf /opt/firefox /usr/bin/firefox \
  && ln -s /root/.cache /home/node/.cache \
  && npm install cypress-plugin-snapshots
 

pagy-on-docker/pagy-cypress.dockerfile

@@ -7,7 +7,8 @@ ARG gid
 
 # configure this image to run as a user identical to your host USER
 # move test runner binary folder to the user home directory
-RUN groupadd -g $gid $user \
+RUN apt-get update && apt-get install -y libcanberra-gtk* \
+ && groupadd -g $gid $user \
  && useradd -r --no-log-init -u $uid -g $user $group \
  && install -d -m 0755 -o $user -g $user /home/$user \
  && rm -rf /opt/firefox /usr/bin/firefox \

test/e2e/cypress.json

@@ -1,4 +1,5 @@
 {
+  "experimentalStudio": true,
   "ignoreTestFiles": [
     "**/__snapshots__/*",
     "**/__image_snapshots__/*"

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

@@ -6,3 +6,12 @@ exports[`Dummy Test > toMatchSnapshot - HTML #0`] = `
   <a href="/semantic">semantic</a> <a href="/uikit">uikit</a>
 </div>
 `;
+
+exports[`Test Bootstrap > 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/__snapshots__/dummy2.spec.js.snap

@@ -0,0 +1,17 @@
+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>
+`;
+
+exports[`Dummy Test > toMatchSnapshot - HTML #1`] = `
+<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/bootstrap.spec.js

@@ -0,0 +1,26 @@
+/// <reference types="cypress" />
+
+import { fixCypressSpec } from '../support'
+beforeEach(fixCypressSpec(__filename))
+
+describe('Test Bootstrap', () => {
+  it('toMatchSnapshot - HTML', () => {
+    cy.visit('/bootstrap')
+      .then(() => {
+        cy.get('#site-map').toMatchSnapshot();
+      });
+  });
+
+  /* === Test Created with Cypress Studio === */
+  it('Try Studio', function() {
+    /* ==== Generated with Cypress Studio ==== */
+    cy.visit('/bootstrap');
+    cy.get('#nav > .pagination > :nth-child(4) > .page-link').click();
+    cy.get('#nav-js-responsive > .pagination > :nth-child(8) > .page-link').click();
+    cy.get('.text-primary').click();
+    cy.get('.text-primary').clear();
+    cy.get('.text-primary').type('34{enter}');
+    /* ==== End Cypress Studio ==== */
+  });
+})
+

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

@@ -1,5 +1,8 @@
 /// <reference types="cypress" />
 
+import { fixCypressSpec } from '../support'
+beforeEach(fixCypressSpec(__filename))
+
 describe('Dummy Test', () => {
   it('toMatchSnapshot - HTML', () => {
     cy.visit('/')

test/e2e/cypress/plugins/index.js

@@ -25,5 +25,19 @@ const { initPlugin } = require('cypress-plugin-snapshots/plugin');
 
 module.exports = (on, config) => {
   initPlugin(on, config);
+  /*
+  on('before:browser:launch', (browser = {}, launchOptions) => {
+    // `args` is an array of all the arguments that will
+    // be passed to browsers when it launches
+    // console.log(launchOptions.args) // print all current args
+    if (browser.family === 'chromium' && browser.name !== 'electron') {
+      // fullscreen ad auto open devtools
+      launchOptions.args.push('--start-fullscreen', '--auto-open-devtools-for-tabs')
+    }
+    // whatever you return here becomes the launchOptions
+    return launchOptions
+  })
+  */
+
   return config;
-};
+}

test/e2e/cypress/support/index.js

@@ -18,3 +18,23 @@ import './commands'
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')
+
+
+// Fix for cypress bug affecting cypress-snapshots-plugin
+// https://github.com/meinaart/cypress-plugin-snapshots/issues/10#issuecomment-514459554
+// it requires the following addition at the top of each file:
+// import { fixCypressSpec } from '../support'
+// beforeEach(fixCypressSpec(__filename))
+export const fixCypressSpec = filename => () => {
+  const path = require('path')
+  // const relative = filename.substr(1) // removes leading "/"
+  // we don't need to remove the leading "/"
+  const relative = filename
+  const projectRoot = Cypress.config('projectRoot')
+  const absolute = path.join(projectRoot, relative)
+  Cypress.spec = {
+    absolute,
+    name: path.basename(filename),
+    relative
+  }
+}