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();
+      })
+  })
+})