Changeset 51989

Timestamp:

11/02/2021 09:03:10 PM (8 months ago)

Author:

hellofromTonya

Message:

Build/Test Tools: Introduce local visual regression testing.

Adds the ability to locally run visual regression testing for wp-admin pages via npm run test:visual. Snapshots are stored on contributors' local machines.

Note:
Wiring to the CI is not included. Why? The challenges for the CI are storage of the artifacts and unreliability of testing these across different environments.

This commit is a first step towards visual regression testing. Running it locally provides a learning opportunity which could help to craft how to build it into the automated CI process.

Props isabel_brison, andraganescu, azaozz, danfarrow, desrosj, hellofromTonya, justinahinon, netweb, talldanwp.
Fixes #49606.

Location:

trunk

Files:

• .gitignore (modified) (1 diff)
• package-lock.json (modified) (4 diffs)
• package.json (modified) (2 diffs)
• tests/e2e/config/bootstrap.js (modified) (1 diff)
• tests/visual-regression (added)
• tests/visual-regression/README.md (added)
• tests/visual-regression/config (added)
• tests/visual-regression/config/bootstrap.js (added)
• tests/visual-regression/jest.config.js (added)
• tests/visual-regression/run-tests.js (added)
• tests/visual-regression/specs (added)
• tests/visual-regression/specs/visual-snapshots.test.js (added)

trunk/.gitignore

@@ -91 +91 @@
 # Files for local environment config
 /docker-compose.override.yml
+
+# Visual regression test diffs
+tests/visual-regression/specs/__image_snapshots__

trunk/package-lock.json

@@ -12536 +12536 @@
             }
         },
+        "glur": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/glur/-/glur-1.1.2.tgz",
+            "integrity": "sha1-8g6jbbEDv8KSNDkh8fkeg8NGdok=",
+            "dev": true
+        },
         "gonzales-pe": {
             "version": "4.3.0",
@@ -15605 +15611 @@
                         "is-number": "^7.0.0"
                     }
+                }
+            }
+        },
+        "jest-image-snapshot": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/jest-image-snapshot/-/jest-image-snapshot-3.0.1.tgz",
+            "integrity": "sha512-bW8eYxgAVyO8cNLlTt15wd5YiWvRfzQyNQ4K8FKHUEPasQADEZ5NzaWmnOpSdh3/NLYoH++TMp6o/rRVLpOIkQ==",
+            "dev": true,
+            "requires": {
+                "chalk": "^1.1.3",
+                "get-stdin": "^5.0.1",
+                "glur": "^1.1.2",
+                "lodash": "^4.17.4",
+                "mkdirp": "^0.5.1",
+                "pixelmatch": "^5.1.0",
+                "pngjs": "^3.4.0",
+                "rimraf": "^2.6.2"
+            },
+            "dependencies": {
+                "ansi-regex": {
+                    "version": "2.1.1",
+                    "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+                    "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
+                    "dev": true
+                },
+                "ansi-styles": {
+                    "version": "2.2.1",
+                    "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+                    "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
+                    "dev": true
+                },
+                "chalk": {
+                    "version": "1.1.3",
+                    "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+                    "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+                    "dev": true,
+                    "requires": {
+                        "ansi-styles": "^2.2.1",
+                        "escape-string-regexp": "^1.0.2",
+                        "has-ansi": "^2.0.0",
+                        "strip-ansi": "^3.0.0",
+                        "supports-color": "^2.0.0"
+                    }
+                },
+                "strip-ansi": {
+                    "version": "3.0.1",
+                    "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+                    "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+                    "dev": true,
+                    "requires": {
+                        "ansi-regex": "^2.0.0"
+                    }
+                },
+                "supports-color": {
+                    "version": "2.0.0",
+                    "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+                    "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
+                    "dev": true
                 }
             }
@@ -19786 +19850 @@
             }
         },
+        "pixelmatch": {
+            "version": "5.2.1",
+            "resolved": "https://registry.npmjs.org/pixelmatch/-/pixelmatch-5.2.1.tgz",
+            "integrity": "sha512-WjcAdYSnKrrdDdqTcVEY7aB7UhhwjYQKYhHiBXdJef0MOaQeYpUdQ+iVyBLa5YBKS8MPVPPMX7rpOByISLpeEQ==",
+            "dev": true,
+            "requires": {
+                "pngjs": "^4.0.1"
+            },
+            "dependencies": {
+                "pngjs": {
+                    "version": "4.0.1",
+                    "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-4.0.1.tgz",
+                    "integrity": "sha512-rf5+2/ioHeQxR6IxuYNYGFytUyG3lma/WW1nsmjeHlWwtb2aByla6dkVc8pmJ9nplzkTA0q2xx7mMWrOTqT4Gg==",
+                    "dev": true
+                }
+            }
+        },
         "pkg-dir": {
             "version": "3.0.0",
@@ -19857 +19938 @@
                 "irregular-plurals": "^3.2.0"
             }
+        },
+        "pngjs": {
+            "version": "3.4.0",
+            "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-3.4.0.tgz",
+            "integrity": "sha512-NCrCHhWmnQklfH4MtJMRjZ2a8c80qXeMlQMv2uVp9ISJMTt562SbGd6n2oq0PaPgKm7Z6pL9E2UlLIhC+SHL3w==",
+            "dev": true
         },
         "polyfill-library": {

trunk/package.json

@@ -62 +62 @@
         "ink-docstrap": "1.3.2",
         "install-changed": "1.1.0",
+        "jest-image-snapshot": "3.0.1",
         "matchdep": "~2.0.0",
         "prettier": "npm:wp-prettier@2.0.5",
@@ -173 +174 @@
         "test:php": "node ./tools/local-env/scripts/docker.js run -T php composer update -W && node ./tools/local-env/scripts/docker.js run php ./vendor/bin/phpunit",
         "test:e2e": "node ./tests/e2e/run-tests.js",
+        "test:visual": "node ./tests/visual-regression/run-tests.js",
         "wp-packages-update": "wp-scripts packages-update"
     }

trunk/tests/e2e/config/bootstrap.js

@@ -33 +33 @@
 // The Jest timeout is increased because these tests are a bit slow
 jest.setTimeout( PUPPETEER_TIMEOUT || 100000 );
+
 
 /**