feat: make plugin Cypress 10 compatible

downgrade to moveFile@2 due to better cjs support
add example of usage
create test suite
add a bit more visual space between on hover and diff panels

Signed-off-by: Jakub Freisler <[email protected]>

Author: FRSgit

.github/workflows/ci.yml

@@ -31,6 +31,7 @@ jobs:
             ~/.cache/Cypress
             .yarn
             node_modules
+            example/node_modules
       - name: Install dependencies
         if: ${{ github.actor != 'dependabot[bot]' || github.ref == 'refs/heads/main' }}
         run: yarn --immutable
@@ -62,13 +63,45 @@ jobs:
             ~/.cache/Cypress
             .yarn
             node_modules
+            example/node_modules
       - name: Install dependencies
         run: yarn --immutable
       - name: Lint
         run: yarn lint:ci
       - name: Prettify
         run: yarn prettify:ci
 
+  test:
+    name: test
+    runs-on: ubuntu-latest
+    needs: cache
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '16.x'
+      - name: remove git auth
+        run: git config --unset http.https://github.com/.extraheader
+      - name: Configure Yarn cache
+        uses: actions/cache@v3
+        with:
+          key: ${{ needs.cache.outputs.yarn-cache-key }}
+          path: |
+            ~/.cache/Cypress
+            .yarn
+            node_modules
+            example/node_modules
+      - name: Install dependencies
+        run: yarn --immutable
+      - name: Build plugin
+        run: yarn build
+      - name: Install example dependencies
+        run: cd example && yarn --immutable
+      - name: Test e2e
+        run: yarn test:e2e:ci
+      - name: Test component-testing
+        run: yarn test:ct:ci
+
   build-and-release:
     name: build and release
     runs-on: ubuntu-latest
@@ -96,6 +129,7 @@ jobs:
             ~/.cache/Cypress
             .yarn
             node_modules
+            example/node_modules
       - name: Install dependencies
         run: yarn --immutable
       - name: Authenticate with Registry

README.md

@@ -15,7 +15,7 @@
 </p>
 
 <h1 align="center">Plugin for Cypress - Visual Regression Diff</h1>
-<p align="center">Perform visual regression test with a nice GUI as help. 💅 <i>Only&nbsp;for&nbsp;Cypress!</i></p>
+<p align="center">Perform visual regression test with a nice GUI as help. 💅 <i>Only&nbsp;for&nbsp;Cypress!</i> Both e2e and component-testing compatible 💪</p>
 
 <p align="center">
   <a href="#getting-started">Getting Started</a>
@@ -61,7 +61,7 @@ Next, you need to import the library:
 
 - first, in your support file (located by default in `cypress/support/index.js`):
 ```ts
-// typescript
+// typescript / ES6
 import '@frsource/cypress-plugin-visual-regression-diff/dist/support';
 
 // javascript
@@ -71,7 +71,7 @@ require('@frsource/cypress-plugin-visual-regression-diff/dist/support');
 - secondly:
   - (for Cypress 10.0+) in `cypress.config.js` (or `cypress.config.ts`):
 ```ts
-// typescript
+// typescript / ES6
 import { defineConfig } from 'cypress';
 import { initPlugin } from '@frsource/cypress-plugin-visual-regression-diff/dist/plugins';
 
@@ -85,9 +85,9 @@ export default defineConfig({
   }
 });
 ```
-  - (for Cypress >10.0) in your plugins file (located by default in `cypress/plugins/index.js`):
+  - (for Cypress <10.0) in your plugins file (located by default in `cypress/plugins/index.js`):
 ```ts
-// typescript
+// typescript / ES6
 import { initPlugin } from '@frsource/cypress-plugin-visual-regression-diff/dist/plugins';
 
 export default function (on: Cypress.PluginEvents, config: Cypress.PluginConfigOptions) {
@@ -124,6 +124,10 @@ cy.matchImage();
 
 `matchImage` command will do a screenshot and compare it with image from a previous run. In case of regression the test will fail and you'll get a "Compare images" button to see what's a root of a problem.
 
+## Example
+
+Still got troubles with installation? Have a look at [example directory of this repo](./example) to see how this plugin can be used in e2e or component-testing Cypress within your project.
+
 ## Configuration
 
 This plugin can be configured either:

example/.browserslistrc

@@ -0,0 +1,4 @@
+> 1%
+last 2 versions
+not dead
+not ie 11

example/.gitignore

@@ -0,0 +1,30 @@
+.DS_Store
+node_modules
+/dist
+
+/tests/e2e/videos/
+/tests/e2e/screenshots/
+
+# we do not want to commit local screenshot files
+# as they might be different on different OSes
+**/__image_snapshots_local__
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

example/.yarnrc.yml

@@ -0,0 +1,3 @@
+nodeLinker: node-modules
+
+yarnPath: ../.yarn/releases/yarn-3.2.1.cjs

example/README.md

@@ -0,0 +1,31 @@
+# Example for @frsource/cypress-plugin-visual-regression-diff
+
+## Project setup
+
+```bash
+yarn install
+```
+
+### Run your end-to-end tests
+
+> Important - remember to run `yarn && yarn build` command in this repo's root directory before starting e2e tests.
+
+```bash
+yarn test:e2e
+```
+
+### Compiles and hot-reloads for development
+
+```bash
+yarn serve
+```
+
+### Compiles and minifies for production
+
+```bash
+yarn build
+```
+
+### Customize configuration
+
+See [Configuration Reference](https://cli.vuejs.org/config/).

example/cypress.config.js

@@ -0,0 +1,23 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const { defineConfig } = require("cypress");
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const { initPlugin } = require("@frsource/cypress-plugin-visual-regression-diff/dist/plugins");
+
+module.exports = defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+      initPlugin(on, config);
+    },
+    specPattern: "cypress/e2e/**/*.cy.{js,jsx,ts,tsx}"
+  },
+
+  component: {
+    setupNodeEvents(on, config) {
+      initPlugin(on, config);
+    },
+    devServer: {
+      framework: "vue-cli",
+      bundler: "webpack",
+    },
+  },
+});

example/cypress/component/HelloWorld.cy.js

@@ -0,0 +1,16 @@
+import HelloWorld from '../../src/components/HelloWorld.vue';
+
+const msg = 'Some random test message';
+
+describe('HelloWorld.cy.js', () => {
+  it('playground', () => {
+    cy.mount(HelloWorld, {
+      propsData: { msg },
+    })
+      .then(() => {
+        cy.contains('h1', msg);
+        cy.matchImage();
+        cy.get('[data-testid="description"]').matchImage();
+      })
+  })
+})

example/cypress/component/__image_snapshots__/HelloWorld.cy.js playground #0.png

@@ -0,0 +1,7 @@
+describe('My First Test', () => {
+  it('Visits the app root url', () => {
+    cy.visit('/')
+    cy.contains('h1', 'Welcome to Your Vue.js App')
+    cy.matchImage()
+  })
+})

example/cypress/component/__image_snapshots__/HelloWorld.cy.js playground #1.png

@@ -0,0 +1,27 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+
+import '@frsource/cypress-plugin-visual-regression-diff/dist/support';

example/cypress/e2e/__image_snapshots__/My First Test Visits the app root url #0.png

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>Components App</title>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>

example/cypress/e2e/spec.cy.js

@@ -0,0 +1,27 @@
+// ***********************************************************
+// This example support/component.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
+
+import { mount } from 'cypress/vue'
+
+Cypress.Commands.add('mount', mount);
+
+// Example use:
+// cy.mount(MyComponent)

example/cypress/support/commands.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/component.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

example/cypress/support/component-index.html

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "baseUrl": "./",
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  }
+}

example/cypress/support/component.js

@@ -0,0 +1,24 @@
+{
+  "name": "example",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "test:open": "vue-cli-service test:e2e --env \"pluginVisualRegressionImagesDir=__image_snapshots_local__\"",
+    "test:run": "vue-cli-service test:e2e",
+    "test:ct": "yarn test:open --component",
+    "test:ct:ci": "yarn test:run --component --headless",
+    "test:e2e": "yarn test:open --e2e",
+    "test:e2e:ci": "yarn test:run --e2e --headless"
+  },
+  "dependencies": {
+    "vue": "^3.2.13"
+  },
+  "devDependencies": {
+    "@frsource/cypress-plugin-visual-regression-diff": "portal:..",
+    "@vue/cli-plugin-e2e-cypress": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "cypress": "^10.2.0"
+  }
+}

example/cypress/support/e2e.js

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>