@khanacademy/wonder-blocks-testing 6.0.0 → 6.1.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @khanacademy/wonder-blocks-testing
 
+## 6.1.0
+
+### Minor Changes
+
+-   b79979b8: Add `logHandler` to GetPropsOptions to simplify generic event logging for common use cases
+
 ## 6.0.0
 
 ### Major Changes

package/dist/es/index.js

@@ -80,9 +80,10 @@ const getAdapter = (MountingComponent = null) => new Adapter("storybook", ({
   getDefaultTitle: _
 }, adapterOptions, declaredFixtures) => {
   const templateMap = new WeakMap();
-
-  const log = (message, ...args) => action(message).apply(void 0, args);
-
+  const getPropsOptions = {
+    log: (message, ...args) => action(message).apply(void 0, args),
+    logHandler: action
+  };
   const exports = declaredFixtures.reduce((acc, {
     description,
     getProps,
@@ -96,15 +97,13 @@ const getAdapter = (MountingComponent = null) => new Adapter("storybook", ({
       Template = MountingComponent ? args => React.createElement(MountingComponent, {
         component: Component,
         props: args,
-        log: log
+        log: getPropsOptions.log
       }) : args => React.createElement(Component, args);
       templateMap.set(Component, Template);
     }
 
     acc[exportName] = Template.bind({});
-    acc[exportName].args = getProps({
-      log
-    });
+    acc[exportName].args = getProps(getPropsOptions);
     acc[exportName].storyName = storyName;
     return acc;
   }, {

package/dist/index.js

@@ -99,10 +99,10 @@ module.exports = require("react");
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "DefaultAdapters", function() { return DefaultAdapters; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "DefaultConfigs", function() { return DefaultConfigs; });
-/* harmony import */ var _css_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(8);
-/* harmony import */ var _data_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(9);
-/* harmony import */ var _portal_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(10);
-/* harmony import */ var _router_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(11);
+/* harmony import */ var _css_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9);
+/* harmony import */ var _data_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(10);
+/* harmony import */ var _portal_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(11);
+/* harmony import */ var _router_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(12);
 
 
 
@@ -451,6 +451,12 @@ const mockRequester = (operationMatcher, operationToString) => {
 
 /***/ }),
 /* 8 */
+/***/ (function(module, exports) {
+
+module.exports = require("@storybook/addon-actions");
+
+/***/ }),
+/* 9 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -514,7 +520,7 @@ const adapter = (children, config) => {
 };
 
 /***/ }),
-/* 9 */
+/* 10 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -560,7 +566,7 @@ const adapter = (children, config) => {
 };
 
 /***/ }),
-/* 10 */
+/* 11 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -585,7 +591,7 @@ const adapter = (children, config) => /*#__PURE__*/react__WEBPACK_IMPORTED_MODUL
 }), children);
 
 /***/ }),
-/* 11 */
+/* 12 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -703,25 +709,25 @@ const adapter = (children, config) => {
 };
 
 /***/ }),
-/* 12 */
+/* 13 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _storybook_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(13);
+/* harmony import */ var _storybook_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(14);
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "storybook", function() { return _storybook_js__WEBPACK_IMPORTED_MODULE_0__["a"]; });
 
 
 
 /***/ }),
-/* 13 */
+/* 14 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return getAdapter; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _storybook_addon_actions__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(20);
+/* harmony import */ var _storybook_addon_actions__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(8);
 /* harmony import */ var _storybook_addon_actions__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_storybook_addon_actions__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _adapter_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(21);
 
@@ -739,9 +745,10 @@ const getAdapter = (MountingComponent = null) => new _adapter_js__WEBPACK_IMPORT
   getDefaultTitle: _
 }, adapterOptions, declaredFixtures) => {
   const templateMap = new WeakMap();
-
-  const log = (message, ...args) => Object(_storybook_addon_actions__WEBPACK_IMPORTED_MODULE_1__["action"])(message).apply(void 0, args);
-
+  const getPropsOptions = {
+    log: (message, ...args) => Object(_storybook_addon_actions__WEBPACK_IMPORTED_MODULE_1__["action"])(message).apply(void 0, args),
+    logHandler: _storybook_addon_actions__WEBPACK_IMPORTED_MODULE_1__["action"]
+  };
   const exports = declaredFixtures.reduce((acc, {
     description,
     getProps,
@@ -770,7 +777,7 @@ const getAdapter = (MountingComponent = null) => new _adapter_js__WEBPACK_IMPORT
       Template = MountingComponent ? args => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](MountingComponent, {
         component: Component,
         props: args,
-        log: log
+        log: getPropsOptions.log
       }) : args => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](Component, args);
       templateMap.set(Component, Template);
     } // Each story that shares that component then reuses that
@@ -778,9 +785,7 @@ const getAdapter = (MountingComponent = null) => new _adapter_js__WEBPACK_IMPORT
 
 
     acc[exportName] = Template.bind({});
-    acc[exportName].args = getProps({
-      log
-    }); // Adding a story name here means that we don't have to
+    acc[exportName].args = getProps(getPropsOptions); // Adding a story name here means that we don't have to
     // care about naming the exports correctly, if we don't
     // want (useful if we need to autogenerate or manually
     // expose ESM exports).
@@ -799,7 +804,7 @@ const getAdapter = (MountingComponent = null) => new _adapter_js__WEBPACK_IMPORT
 });
 
 /***/ }),
-/* 14 */
+/* 15 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -905,7 +910,7 @@ const fixtures = (componentOrOptions, fn) => {
 };
 
 /***/ }),
-/* 15 */
+/* 16 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -922,7 +927,7 @@ const mockFetch = () => Object(_mock_requester_js__WEBPACK_IMPORTED_MODULE_1__[/
     Options: ${init == null ? "None" : JSON.stringify(init, null, 2)}`);
 
 /***/ }),
-/* 16 */
+/* 17 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -940,7 +945,7 @@ const mockGqlFetch = () => Object(_mock_requester_js__WEBPACK_IMPORTED_MODULE_1_
     Context: ${JSON.stringify(context, null, 2)}`);
 
 /***/ }),
-/* 17 */
+/* 18 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -952,7 +957,7 @@ const mockGqlFetch = () => Object(_mock_requester_js__WEBPACK_IMPORTED_MODULE_1_
  */
 
 /***/ }),
-/* 18 */
+/* 19 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -977,7 +982,7 @@ const mockGqlFetch = () => Object(_mock_requester_js__WEBPACK_IMPORTED_MODULE_1_
 const hookHarness = Object(_make_hook_harness_js__WEBPACK_IMPORTED_MODULE_1__[/* makeHookHarness */ "a"])(_adapters_adapters_js__WEBPACK_IMPORTED_MODULE_2__["DefaultAdapters"], _adapters_adapters_js__WEBPACK_IMPORTED_MODULE_2__["DefaultConfigs"]);
 
 /***/ }),
-/* 19 */
+/* 20 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -1001,12 +1006,6 @@ const hookHarness = Object(_make_hook_harness_js__WEBPACK_IMPORTED_MODULE_1__[/*
  */
 const testHarness = Object(_make_test_harness_js__WEBPACK_IMPORTED_MODULE_1__[/* makeTestHarness */ "a"])(_adapters_adapters_js__WEBPACK_IMPORTED_MODULE_2__["DefaultAdapters"], _adapters_adapters_js__WEBPACK_IMPORTED_MODULE_2__["DefaultConfigs"]);
 
-/***/ }),
-/* 20 */
-/***/ (function(module, exports) {
-
-module.exports = require("@storybook/addon-actions");
-
 /***/ }),
 /* 21 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
@@ -1389,24 +1388,24 @@ const renderAdapters = (adapters, configs, children) => {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _fixtures_adapters_adapters_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(12);
+/* harmony import */ var _fixtures_adapters_adapters_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(13);
 /* harmony reexport (module object) */ __webpack_require__.d(__webpack_exports__, "fixtureAdapters", function() { return _fixtures_adapters_adapters_js__WEBPACK_IMPORTED_MODULE_0__; });
-/* harmony import */ var _fixtures_fixtures_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(14);
+/* harmony import */ var _fixtures_fixtures_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(15);
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "fixtures", function() { return _fixtures_fixtures_js__WEBPACK_IMPORTED_MODULE_1__["a"]; });
 
 /* harmony import */ var _fixtures_setup_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(4);
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "setupFixtures", function() { return _fixtures_setup_js__WEBPACK_IMPORTED_MODULE_2__["b"]; });
 
-/* harmony import */ var _fetch_mock_fetch_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(15);
+/* harmony import */ var _fetch_mock_fetch_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(16);
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "mockFetch", function() { return _fetch_mock_fetch_js__WEBPACK_IMPORTED_MODULE_3__["a"]; });
 
-/* harmony import */ var _gql_mock_gql_fetch_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(16);
+/* harmony import */ var _gql_mock_gql_fetch_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(17);
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "mockGqlFetch", function() { return _gql_mock_gql_fetch_js__WEBPACK_IMPORTED_MODULE_4__["a"]; });
 
 /* harmony import */ var _make_mock_response_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(5);
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "RespondWith", function() { return _make_mock_response_js__WEBPACK_IMPORTED_MODULE_5__["a"]; });
 
-/* harmony import */ var _harness_types_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(17);
+/* harmony import */ var _harness_types_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(18);
 /* harmony import */ var _harness_adapters_adapters_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(1);
 /* harmony reexport (module object) */ __webpack_require__.d(__webpack_exports__, "harnessAdapters", function() { return _harness_adapters_adapters_js__WEBPACK_IMPORTED_MODULE_7__; });
 /* harmony import */ var _harness_make_hook_harness_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(6);
@@ -1415,10 +1414,10 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _harness_make_test_harness_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(3);
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "makeTestHarness", function() { return _harness_make_test_harness_js__WEBPACK_IMPORTED_MODULE_9__["a"]; });
 
-/* harmony import */ var _harness_hook_harness_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(18);
+/* harmony import */ var _harness_hook_harness_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(19);
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "hookHarness", function() { return _harness_hook_harness_js__WEBPACK_IMPORTED_MODULE_10__["a"]; });
 
-/* harmony import */ var _harness_test_harness_js__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(19);
+/* harmony import */ var _harness_test_harness_js__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(20);
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "testHarness", function() { return _harness_test_harness_js__WEBPACK_IMPORTED_MODULE_11__["a"]; });
 
 // Fixtures framework

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@khanacademy/wonder-blocks-testing",
-    "version": "6.0.0",
+    "version": "6.1.0",
     "design": "v1",
     "publishConfig": {
         "access": "public"

package/src/__docs__/types.get-props-options.stories.mdx

@@ -17,9 +17,36 @@ type GetPropsOptions = {|
      * A function to call that will log output.
      */
     log: (message: string, ...args: Array<any>) => void,
+
+    /**
+     * A function to make a handler that will log all arguments with the given
+     * name or message. Useful for logging events as it avoids the boilerplate
+     * of the `log` function.
+     */
+    logHandler: (name: string) => (...args: Array<any>) => void,
 |};
 ```
 
 A fixture can provide a callback that the framework invokes to obtain the props for the fixture component. This callback takes a single argument of type `GetPropsOptions`.
 
-This has a single `log` property; a callback for logging output in the context of the fixture. This can be useful for logging event handler invocations, for example.
+This has two calls available.
+
+The `log` callback is for logging output in the context of the fixture. This can be useful for logging information during your fixture. However, in many situations, it is easier to use the `logHandler` callback. The `logHandler` callback takes a single argument of type `string` and returns a function that logs all arguments with the given name or message, allowing easy creation of event handlers that will log that event and its arguments.
+
+For example:
+
+```ts
+    fixture("My fixture that does logging", ({logHandler}) => ({
+        onClick: logHandler("onClick"),
+    }));
+```
+
+is equivalent to:
+
+```ts
+    fixture("My fixture that does logging", ({log}) => ({
+        onClick: (...args) => log("onClick", ...args),
+    }));
+```
+
+

package/src/fixtures/adapters/__tests__/storybook.test.js

@@ -121,6 +121,7 @@ describe("Storybook Adapter", () => {
                 // Assert
                 expect(getPropsStub).toHaveBeenCalledWith({
                     log: expect.any(Function),
+                    logHandler: expect.any(Function),
                 });
             });
 
@@ -161,6 +162,45 @@ describe("Storybook Adapter", () => {
                 expect(actionReturnFn).toHaveBeenCalledWith("ARG1", "ARG2");
             });
 
+            it("should inject logHandler function that logs to storybook actions", () => {
+                // Arrange
+                const adapterSpy = jest
+                    .spyOn(AdapterModule, "Adapter")
+                    .mockImplementation(() => {});
+                getAdapter();
+                const actionReturnFn = jest.fn();
+                const actionSpy = jest
+                    .spyOn(AddonActionsModule, "action")
+                    .mockReturnValue(actionReturnFn);
+                const closeGroupFn = adapterSpy.mock.calls[0][1];
+                const getPropsStub = jest.fn();
+                closeGroupFn(
+                    {
+                        title: "TITLE",
+                        description: "DESCRIPTION",
+                    },
+                    null,
+                    [
+                        {
+                            description:
+                                "🎉 This is a story with legal and illegal characters",
+                            component: () => "I AM A COMPONENT",
+                            getProps: getPropsStub,
+                        },
+                    ],
+                );
+                const {logHandler: logHandlerFn} =
+                    getPropsStub.mock.calls[0][0];
+
+                // Act
+                const logFn = logHandlerFn("MESSAGE");
+                logFn("ARG1", "ARG2");
+
+                // Assert
+                expect(actionSpy).toHaveBeenCalledWith("MESSAGE");
+                expect(actionReturnFn).toHaveBeenCalledWith("ARG1", "ARG2");
+            });
+
             it("should have args attached", () => {
                 // Arrange
                 const adapterSpy = jest

package/src/fixtures/adapters/storybook.js

@@ -59,7 +59,10 @@ export const getAdapter: FixturesAdapterFactory<
         ): ?$ReadOnly<Exports<TProps>> => {
             const templateMap = new WeakMap();
 
-            const log = (message, ...args) => action(message)(...args);
+            const getPropsOptions = {
+                log: (message, ...args) => action(message)(...args),
+                logHandler: action,
+            };
 
             const exports = declaredFixtures.reduce(
                 (acc, {description, getProps, component: Component}, i) => {
@@ -78,7 +81,7 @@ export const getAdapter: FixturesAdapterFactory<
                     // component. We don't use decorators for the wrapper
                     // because we may not be in a storybook context and it
                     // keeps the framework API simpler this way.
-                    let Template = templateMap.get(Component);
+                    let Template = templateMap.get((Component: any));
                     if (Template == null) {
                         // The MountingComponent is a bit different than just a
                         // Storybook decorator. It's a React component that
@@ -91,17 +94,17 @@ export const getAdapter: FixturesAdapterFactory<
                                   <MountingComponent
                                       component={Component}
                                       props={args}
-                                      log={log}
+                                      log={getPropsOptions.log}
                                   />
                               )
                             : (args) => <Component {...args} />;
-                        templateMap.set(Component, Template);
+                        templateMap.set((Component: any), Template);
                     }
 
                     // Each story that shares that component then reuses that
                     // template.
                     acc[exportName] = Template.bind({});
-                    acc[exportName].args = getProps({log});
+                    acc[exportName].args = getProps(getPropsOptions);
                     // Adding a story name here means that we don't have to
                     // care about naming the exports correctly, if we don't
                     // want (useful if we need to autogenerate or manually

package/src/fixtures/types.js

@@ -10,6 +10,13 @@ export type GetPropsOptions = {|
      * A function to call that will log output.
      */
     log: (message: string, ...args: Array<any>) => void,
+
+    /**
+     * A function to make a handler that will log all arguments with the given
+     * name or message. Useful for logging events as it avoids the boilerplate
+     * of the `log` function.
+     */
+    logHandler: (name: string) => (...args: Array<any>) => void,
 |};
 
 /**