@helpscout/cyan - npm Package Compare versions

Comparing version 0.10.1 to 0.11.0

dist/cy.js

@@ -18,3 +18,3 @@ "use strict";
 
-var _debug = _interopRequireDefault(require("./debug"));
+var _debug = require("./debug");
 
@@ -56,3 +56,4 @@ var _delay = _interopRequireDefault(require("./delay"));
   domCleanUp: _domCleanUp.default,
-  debug: _debug.default,
+  debug: _debug.debug,
+  debugByCy: _debug.debugByCy,
   delay: _delay.default,
@@ -59,0 +60,0 @@ inspect: _inspector.default,

dist/debug.d.ts

@@ -1,2 +0,3 @@
-declare const debug: (selector?: string | undefined, options?: any) => void;
+export declare const debug: (selector?: string | undefined, options?: any) => void;
+export declare const debugByCy: (selector?: string | undefined, options?: any) => void;
 export default debug;

dist/debug.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.default = void 0;
+exports.default = exports.debugByCy = exports.debug = void 0;
 
@@ -31,3 +31,14 @@ var _pretty = require("./utils/pretty.utils");
 
+exports.debug = debug;
+
+var debugByCy = function (selector, options) {
+  if (!selector) {
+    debug(selector, options);
+  } else {
+    debug("[data-cy=\"" + selector + "\"]", options);
+  }
+};
+
+exports.debugByCy = debugByCy;
 var _default = debug;
 exports.default = _default;

dist/index.d.ts

@@ -5,3 +5,3 @@ import cy from './cy';
 export { default as domCleanUp } from './domCleanUp';
-export { default as debug } from './debug';
+export { debug, debugByCy } from './debug';
 export { default as fireEvent } from './fireEvent';
@@ -8,0 +8,0 @@ export { default as render } from './render';

dist/index.js

@@ -11,2 +11,3 @@ "use strict";
   debug: true,
+  debugByCy: true,
   fireEvent: true,
@@ -39,5 +40,11 @@ render: true,
   get: function get() {
-    return _debug.default;
+    return _debug.debug;
   }
 });
+Object.defineProperty(exports, "debugByCy", {
+  enumerable: true,
+  get: function get() {
+    return _debug.debugByCy;
+  }
+});
 Object.defineProperty(exports, "fireEvent", {
@@ -81,3 +88,3 @@ enumerable: true,
 
-var _debug = _interopRequireDefault(require("./debug"));
+var _debug = require("./debug");
 
@@ -84,0 +91,0 @@ var _fireEvent = _interopRequireDefault(require("./fireEvent"));

dist/types/Cy.types.d.ts

@@ -76,2 +76,12 @@ import CyanInterface, { Selector, CySelector } from './Cyan.interface.types';
     /**
+     * Logs the html of a DOM element matching a data-cy selector.
+     *
+     * @param {string} selector The data-cy selector.
+     * @param {Object} options Options for printing (js-beautify).
+     *
+     * @example
+     * cy.debugByCy('Button')
+     */
+    debugByCy(selector?: string, options?: any): void;
+    /**
      * Runs all immediates, ticks, timers, and Mock Promises.
@@ -78,0 +88,0 @@ *

docs/api/debugging.md

@@ -48,3 +48,3 @@ ---
 
-`Function(): void`
+`Function(selector?: string): void`
 
@@ -68,2 +68,27 @@ [Logs](https://developer.mozilla.org/en-US/docs/Web/API/Console/log) the rendered within for `document.body`.<br />
 
+## debugByCy
+
+`Function(selector?: string): void`
+
+[Logs](https://developer.mozilla.org/en-US/docs/Web/API/Console/log) the rendered from a matching `data-cy` selector.<br />
+No need to call `console.log`. The `debug()` method does this automatically!
+
+#### Example
+
+```jsx
+const SampleComponent = () => (
+  <div className="sample-component">
+    <div data-cy="InnerSampleComponent" />
+  </div>
+)
+
+test('My component can render', () => {
+  cy.render(<SampleComponent />)
+
+  cy.debugByCy('InnerSampleComponent')
+  // The following is logged in your Jest test runner:
+  // <div data-cy="InnerSampleComponent"></div>
+})
+```
+
 ## html
@@ -70,0 +95,0 @@

package.json

 {
   "name": "@helpscout/cyan",
-  "version": "0.10.1",
+  "version": "0.11.0",
   "description": "Cypress-like Testing for React + JSDOM",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

No alert changes

Improved metrics

Total package byte prevSize

177486

increased by0.82%

Lines of code

4177

increased by0.67%

No dependency changes