@birdseye/snapshot - npm Package Compare versions

Comparing version 0.4.1 to 0.5.0

lib/index.js

@@ -50,2 +50,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.snapshot = void 0;
 var path = require("path");
@@ -56,4 +57,4 @@ var fs = require("fs");
 var capture_all_1 = require("capture-all");
+var page_context_1 = require("./page-context");
 var previewSelector = '#__birdseye_preview__';
-var routesScriptSelector = '#__birdseye_routes__';
 function fillOptionDefaults(options) {
@@ -67,3 +68,3 @@ return __assign({ snapshotDir: 'birdseye/snapshots', viewport: {
     return __awaiter(this, void 0, void 0, function () {
-        var opts, browser, page, frame, routes;
+        var opts, browser, page, routes;
         return __generator(this, function (_a) {
@@ -79,22 +80,20 @@ switch (_a.label) {
                     page = _a.sent();
-                    return [4 /*yield*/, page.goto(opts.url)];
+                    return [4 /*yield*/, page.goto(opts.url)
+                        // Get all snapshot options from catalogs.
+                    ];
                 case 3:
                     _a.sent();
-                    return [4 /*yield*/, page.mainFrame()];
+                    return [4 /*yield*/, page.evaluate(function () {
+                            return window.__birdseye_routes__;
+                        })];
                 case 4:
-                    frame = _a.sent();
-                    return [4 /*yield*/, frame.waitFor(routesScriptSelector)];
-                case 5:
-                    _a.sent();
-                    return [4 /*yield*/, frame.$eval(routesScriptSelector, function (el) {
-                            return JSON.parse(el.textContent || '[]');
-                        })];
-                case 6:
                     routes = _a.sent();
                     return [4 /*yield*/, browser.close()];
-                case 7:
+                case 5:
                     _a.sent();
                     return [2 /*return*/, new Promise(function (resolve, reject) {
-                            var stream = capture_all_1.createCaptureStream(routes.map(function (route) {
-                                var _a, _b;
+                            var stream = capture_all_1.createCaptureStream(routes.map(function (route, i) {
+                                var _a, _b, _c;
+                                // capture option becomes '{} | undefined' as Function is not serializable.
+                                var hasCapture = !!((_a = route.snapshot) === null || _a === void 0 ? void 0 : _a.capture);
                                 return {
@@ -104,4 +103,7 @@ url: opts.url + '#' + route.path + '?fullscreen=1',
                                     viewport: opts.viewport,
-                                    delay: (_a = route.snapshot) === null || _a === void 0 ? void 0 : _a.delay,
-                                    disableCssAnimation: (_b = route.snapshot) === null || _b === void 0 ? void 0 : _b.disableCssAnimation,
+                                    delay: (_b = route.snapshot) === null || _b === void 0 ? void 0 : _b.delay,
+                                    disableCssAnimation: (_c = route.snapshot) === null || _c === void 0 ? void 0 : _c.disableCssAnimation,
+                                    capture: hasCapture
+                                        ? function (page, capture) { return page_context_1.runCapture(page, capture, i); }
+                                        : undefined,
                                 };
@@ -116,3 +118,3 @@ }));
                                     .replace(/[^0-9a-zA-Z]/g, '_');
-                                var dest = path.join(opts.snapshotDir, normalized + '.png');
+                                var dest = path.join(opts.snapshotDir, normalized + '_' + (result.index + 1) + '.png');
                                 fs.writeFile(dest, result.image, function (error) {
@@ -119,0 +121,0 @@ if (error) {

lib/plugin.d.ts

 import { Catalog } from '@birdseye/core';
+import { PageContext } from './page-context';
 export interface SnapshotOptions {
     delay?: number;
     disableCssAnimation?: boolean;
+    capture?: (page: PageContext, capture: () => Promise<void>) => Promise<void>;
 }
@@ -11,2 +13,7 @@ export interface CatalogRoute {
 export declare function snapshotPlugin(catalogs: Catalog[]): void;
+declare global {
+    interface Window {
+        __birdseye_routes__: CatalogRoute[];
+    }
+}
 declare module '@birdseye/core/dist/interfaces' {
@@ -13,0 +20,0 @@ interface PluginOptions {

lib/plugin.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.snapshotPlugin = void 0;
 function snapshotPlugin(catalogs) {
@@ -13,8 +14,4 @@ var routes = catalogs.reduce(function (acc, catalog) {
     }, []);
-    var script = document.createElement('script');
-    script.id = '__birdseye_routes__';
-    script.type = 'application/json';
-    script.textContent = JSON.stringify(routes);
-    document.head.appendChild(script);
+    window.__birdseye_routes__ = routes;
 }
 exports.snapshotPlugin = snapshotPlugin;

package.json

 {
   "name": "@birdseye/snapshot",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "author": "katashin",
@@ -55,7 +55,7 @@ "description": "Taking snapshots for Birdseye catalog",
   "devDependencies": {
-    "@birdseye/app": "^0.4.1",
-    "@types/jest": "^25.1.0",
-    "@types/jest-image-snapshot": "^2.11.0",
+    "@birdseye/app": "^0.5.0",
+    "@types/jest": "^26.0.0",
+    "@types/jest-image-snapshot": "^3.1.0",
     "@types/mkdirp": "^1.0.0",
-    "@types/puppeteer": "^2.0.0",
+    "@types/puppeteer": "^3.0.0",
     "@types/rimraf": "^3.0.0",
@@ -67,17 +67,17 @@ "@vue/cli-plugin-typescript": "^4.1.1",
     "jest": "^26.0.1",
-    "jest-image-snapshot": "^3.1.0",
-    "prettier": "2.0.5",
+    "jest-image-snapshot": "^4.0.0",
+    "prettier": "2.1.1",
     "prettier-config-ktsn": "^1.0.0",
     "rimraf": "^3.0.0",
-    "ts-jest": "^25.0.0",
-    "typescript": "^3.7.3"
+    "ts-jest": "^26.0.0",
+    "typescript": "^4.0.2"
   },
   "dependencies": {
-    "@birdseye/core": "^0.4.1",
-    "@birdseye/vue": "^0.4.1",
-    "capture-all": "^0.5.0",
+    "@birdseye/core": "^0.5.0",
+    "@birdseye/vue": "^0.5.0",
+    "capture-all": "^0.6.0",
     "mkdirp": "^1.0.3",
-    "puppeteer": "^3.0.0"
+    "puppeteer": "^5.2.0"
   },
-  "gitHead": "0056e4a58660a8cdca96ef68fc7d332981b5d773"
+  "gitHead": "48bd32e1c83b71cb118f3ca0e32e952d106832a1"
 }

README.md

@@ -71,3 +71,3 @@ # @birdseye/snapshot
 
-It will store snapshot images in `birdseye/snapshots` for all component catalogs. You can visual regression test with the snapshots.
+It will store snapshot images in `birdseye/snapshots` for all component catalogs. You can run visual regression test with the snapshots.
 
@@ -107,3 +107,54 @@ ### Snapshot Options
 - `disableCssAnimation` Disable CSS animations and transitions if `true`. (default `true`)
+- `capture` A function to define interactions (e.g. `click`, `hover` etc. the an element) before capture. See [Triggering Interaction before Capture](#triggering-interaction-before-capture) for details.
 
+### Triggering Interaction before Capture
+
+There are cases that you want to manipulate a rendered catalog before capturing it. For example, capturing a hover style of a button, a focused style of a text field, etc.
+
+You can trigger such manipulations with `capture` option:
+
+```js
+import { catalogFor } from '@birdseye/vue'
+import MyButton from '@/components/MyButton.vue'
+
+export default catalogFor(MyButton, 'MyButton')
+  .add('primary', {
+    props: {
+      primary: true
+    },
+
+    slots: {
+      default: 'Button Text'
+    },
+
+    plugins: {
+      snapshot: {
+        capture: async (page, capture) => {
+          // Capture the regular style of the button.
+          await capture()
+
+          // Trigger a hover for the button. Specify the target elemenet with a CSS selector.
+          // The below triggers a hover for an element with `my-button` class.
+          await page.hover('.my-button')
+
+          // Capture the button while it is hovered.
+          await capture()
+        }
+      }
+    }
+  })
+```
+
+`capture` option is a function receiving two arguments - a page context and a capture function. The page context has methods to trigger manipulations for an element in the page. They are just aliases of [Puppeteer's ElementHandle methods](https://github.com/puppeteer/puppeteer/blob/v5.2.1/docs/api.md#class-elementhandle) except receiving the selector for the element as the first argument. Available methods are below:
+
+- click
+- focus
+- hover
+- press
+- select
+- tap
+- type
+
+The original method arguments are supposed to placed after the second argument. For example, if you write `el.click({ button: 'right' })` with Puppeteer, the equivalent is `page.click('.selector', { button: 'right' })`.
+
 ### Visual Regression Testing with [reg-suit](https://github.com/reg-viz/reg-suit)
@@ -110,0 +161,0 @@

No alert changes

Improved metrics

Total package byte prevSize

23521

increased by62.16%

Number of package files

9

increased by28.57%

Lines of code

301

increased by78.11%

Number of lines in readme file

193

increased by35.92%

Dependency changes

• + Added@birdseye/core@0.5.0(transitive)

• + Added@birdseye/vue@0.5.0(transitive)

• + Addedcapture-all@0.6.0(transitive)

• + Addeddevtools-protocol@0.0.818844(transitive)

• + Addedfind-up@4.1.0(transitive)

• + Addedlocate-path@5.0.0(transitive)

• + Addednode-fetch@2.7.0(transitive)

• + Addedp-limit@2.3.0(transitive)

• + Addedp-locate@4.1.0(transitive)

• + Addedp-try@2.2.0(transitive)

• + Addedpath-exists@4.0.0(transitive)

• + Addedpkg-dir@4.2.0(transitive)

• + Addedpuppeteer@5.5.0(transitive)

• + Addedsafe-buffer@5.2.1(transitive)

• + Addedstring_decoder@1.3.0(transitive)

• + Addedtr46@0.0.3(transitive)

• + Addedwebidl-conversions@3.0.1(transitive)

• + Addedwhatwg-url@5.0.0(transitive)

• - Removed@birdseye/core@0.4.1(transitive)

• - Removed@birdseye/vue@0.4.1(transitive)

• - Removed@types/mime-types@2.1.4(transitive)

• - Removedasync-limiter@1.0.1(transitive)

• - Removedbuffer-from@1.1.2(transitive)

• - Removedcapture-all@0.5.0(transitive)

• - Removedconcat-stream@1.6.2(transitive)

• - Removedcore-util-is@1.0.3(transitive)

• - Removeddebug@2.6.9(transitive)

• - Removedextract-zip@1.7.0(transitive)

• - Removedisarray@1.0.0(transitive)

• - Removedmime@2.6.0(transitive)

• - Removedmime-db@1.52.0(transitive)

• - Removedmime-types@2.1.35(transitive)

• - Removedminimist@1.2.8(transitive)

• - Removedmkdirp@0.5.6(transitive)

• - Removedms@2.0.0(transitive)

• - Removedprocess-nextick-args@2.0.1(transitive)

• - Removedpuppeteer@2.1.13.3.0(transitive)

• - Removedreadable-stream@2.3.8(transitive)

• - Removedrimraf@2.7.1(transitive)

• - Removedsafe-buffer@5.1.2(transitive)

• - Removedstring_decoder@1.1.1(transitive)

• - Removedtypedarray@0.0.6(transitive)

• - Removedws@6.2.2(transitive)

• Updated@birdseye/core@^0.5.0

• Updated@birdseye/vue@^0.5.0

• Updatedcapture-all@^0.6.0

• Updatedpuppeteer@^5.2.0