@baselift/blocks-testing 0.0.1

package/dist/cjs/test_driver.js

@@ -0,0 +1,658 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.symbol.description.js");
+require("core-js/modules/es.array.from.js");
+require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.array.slice.js");
+require("core-js/modules/es.regexp.exec.js");
+require("core-js/modules/es.regexp.to-string.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.array.reduce.js");
+require("core-js/modules/es.object.to-string.js");
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _unstable_testing_utils = require("@baselift/blocks/unstable_testing_utils");
+var _ui = require("@baselift/blocks/ui");
+var _error_utils = require("./error_utils");
+var _mock_airtable_interface = _interopRequireDefault(require("./mock_airtable_interface"));
+var _test_mutations = require("./test_mutations");
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+/**
+ * An object describing a {@link Table}, a {@link View}, or both.
+ */
+/**
+ * A class designed to facilitate the automated testing of Airtable Extensions
+ * outside of a production Extensions environment. Each instance creates a simulated
+ * {@link Base} which is distinct from any other Base created in this way.
+ * Custom Extensions can be instantiated using an instance of this class; see {@link
+ * Container|the `Container` method}.
+ *
+ * The example code for this class's methods is written in terms of a
+ * non-existent Airtable Extension called `MyCustomExtension`. Each example includes a
+ * description of the presumed behavior for that Extension. Consumers of this library
+ * will work with their own Extensions whose behavior differs from these examples, so
+ * their tests will be distinct in this regard.
+ *
+ * @docsPath testing/TestDriver
+ */
+var TestDriver = exports.default = /*#__PURE__*/function () {
+  /**
+   * Create an instance of the test driver, initializing a simulated Airtable
+   * Base to take the state described by the provided fixture data.
+   */
+  function TestDriver(fixtureData) {
+    (0, _classCallCheck2.default)(this, TestDriver);
+    /** @internal */
+    (0, _defineProperty2.default)(this, "_airtableInterface", void 0);
+    /** @internal */
+    (0, _defineProperty2.default)(this, "_sdk", void 0);
+    this._airtableInterface = new _mock_airtable_interface.default(fixtureData);
+    this._sdk = new _unstable_testing_utils.Sdk(this._airtableInterface);
+    this.Container = this.Container.bind(this);
+  }
+
+  /**
+   * The simulated {@link Base} associated with this instance.
+   */
+  return (0, _createClass2.default)(TestDriver, [{
+    key: "base",
+    get: function get() {
+      return this._sdk.base;
+    }
+
+    /**
+     * The {@link Cursor} instance associated with this instance's Base.
+     */
+  }, {
+    key: "cursor",
+    get: function get() {
+      return this._sdk.cursor;
+    }
+
+    /**
+     * A {@link Session} instance. This will correspond to the first
+     * collaborator in your fixture data.
+     */
+  }, {
+    key: "session",
+    get: function get() {
+      return this._sdk.session;
+    }
+
+    /**
+     * A simulated {@link GlobalConfig} instance. This always starts empty.
+     */
+  }, {
+    key: "globalConfig",
+    get: function get() {
+      return this._sdk.globalConfig;
+    }
+
+    /**
+     * A React Component which may be used to wrap Extension Components, enabling
+     * them to run outside of a production Extensions environment.
+     *
+     * @example
+     * ```js
+     * import TestDriver from '@baselift/blocks-testing';
+     * // Given MyCustomExtension, an Airtable Extension which defines a React Component...
+     * const MyCustomExtension = require('../src/my_custom_extension');
+     * // And given myFixtureData, a data structure describing the initial
+     * // state of a simulated Airtable Base...
+     * const myFixtureData = require('./my_fixture_data');
+     *
+     * const testDriver = new TestDriver(myFixtureData);
+     *
+     * render(
+     *     <testDriver.Container>
+     *         <MyCustomExtension />
+     *     </testDriver.Container>
+     * );
+     * ```
+     */
+  }, {
+    key: "Container",
+    value: function Container(_ref) {
+      var children = _ref.children;
+      var fallback = /*#__PURE__*/_react.default.createElement('div', null);
+      return /*#__PURE__*/_react.default.createElement(_react.default.Suspense, {
+        fallback: fallback
+      }, /*#__PURE__*/_react.default.createElement(_ui.BaseProvider, {
+        value: this.base
+      }, children));
+    }
+
+    /**
+     * Destroy a {@link Field} in the simulated {@link Base}.
+     *
+     * @example
+     * ```js
+     * import TestDriver from '@baselift/blocks-testing';
+     * // Given MyCustomExtension, an Airtable Extension which displays the names of all
+     * // the Fields in the active Table...
+     * import MyCustomExtension from '../src/my_custom_extension';
+     * // And given myFixtureData, a data structure describing an Airtable
+     * // Base which contains a Table named "Table One" with three Fields...
+     * import myFixtureData from './my_fixture_data';
+     * import {render, screen} from '@testing-library/react';
+     *
+     * const testDriver = new TestDriver(myFixtureData);
+     * let items, itemTexts;
+     *
+     * render(
+     *     <testDriver.Container>
+     *         <MyCustomExtension />
+     *     </testDriver.Container>
+     * );
+     *
+     * // Verify that MyExtension initially displays all three Fields
+     * items = screen.getAllByRole('listitem');
+     * itemTexts = items.map((el) => el.textContent);
+     * expect(itemTexts).toEqual(['1st field', '2nd field', '3rd field']);
+     *
+     * // Simulate the destruction of the Field named "2nd field"
+     * await testDriver.deleteFieldAsync('Table One', '2nd field');
+     *
+     * // Verify that MyExtension correctly updates to describe the two remaining
+     * // Fields
+     * items = screen.getAllByRole('listitem');
+     * itemTexts = items.map((el) => el.textContent);
+     * expect(itemTexts).toEqual(['1st field', '3rd field']);
+     * ```
+     */
+  }, {
+    key: "deleteFieldAsync",
+    value: (function () {
+      var _deleteFieldAsync = (0, _asyncToGenerator2.default)(/*#__PURE__*/_regenerator.default.mark(function _callee(tableIdOrName, fieldIdOrName) {
+        var table, field;
+        return _regenerator.default.wrap(function (_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              table = this.base.getTable(tableIdOrName);
+              field = table.getField(fieldIdOrName);
+              _context.next = 1;
+              return this._airtableInterface.applyMutationAsync({
+                type: _test_mutations.TestMutationTypes.DELETE_SINGLE_FIELD,
+                tableId: table.id,
+                id: field.id
+              });
+            case 1:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, this);
+      }));
+      function deleteFieldAsync(_x, _x2) {
+        return _deleteFieldAsync.apply(this, arguments);
+      }
+      return deleteFieldAsync;
+    }()
+    /**
+     * Destroy a {@link Table} in the simulated {@link Base}.
+     *
+     * @example
+     * ```js
+     * import TestDriver from '@baselift/blocks-testing';
+     * // Given MyCustomExtension, an Airtable Extension which displays the names of all
+     * // the Tables in the Base...
+     * import MyCustomExtension from '../src/my_custom_extension';
+     * // And given myFixtureData, a data structure describing an Airtable
+     * // Base which contains three Tables...
+     * import myFixtureData from './my_fixture_data';
+     * import {render, screen} from '@testing-library/react';
+     *
+     * const testDriver = new TestDriver(myFixtureData);
+     * let items, itemTexts;
+     *
+     * render(
+     *     <testDriver.Container>
+     *         <MyCustomExtension />
+     *     </testDriver.Container>
+     * );
+     *
+     * // Verify that MyExtension initially displays all three Tables
+     * items = screen.getAllByRole('listitem');
+     * itemTexts = items.map((el) => el.textContent);
+     * expect(itemTexts).toEqual(['1st table', '2nd table', '3rd table']);
+     *
+     * // Simulate the destruction of the Table named "2nd table"
+     * testDriver.deleteTable('2nd table');
+     *
+     * // Verify that MyExtension correctly updates to describe the two remaining
+     * // Table
+     * items = screen.getAllByRole('listitem');
+     * itemTexts = items.map((el) => el.textContent);
+     * expect(itemTexts).toEqual(['1st table', '3rd table']);
+     * ```
+     */
+    )
+  }, {
+    key: "deleteTable",
+    value: function deleteTable(tableIdOrName) {
+      var table = this.base.getTable(tableIdOrName);
+      var newOrder = this.base.tables.filter(_ref2 => {
+        var id = _ref2.id;
+        return table.id !== id;
+      }).map(_ref3 => {
+        var id = _ref3.id;
+        return id;
+      });
+      (0, _error_utils.invariant)(newOrder.length > 0, 'Table with ID "%s" may not be deleted because it is the only Table present in the Base', table.id);
+      var updates = [{
+        path: ['tableOrder'],
+        value: newOrder
+      }, {
+        path: ['tablesById', table.id],
+        value: undefined
+      }];
+      if (table.id === this._airtableInterface.sdkInitData.baseData.activeTableId) {
+        updates.push({
+          path: ['activeTableId'],
+          value: newOrder[0]
+        });
+      }
+      this._airtableInterface.triggerModelUpdates(updates);
+    }
+
+    /**
+     * Destroy a {@link View} in the simulated {@link Base}.
+     *
+     * @example
+     * ```js
+     * import TestDriver from '@baselift/blocks-testing';
+     * // Given MyCustomExtension, an Airtable Extension which displays the names of all
+     * // the Views in the active Table...
+     * import MyCustomExtension from '../src/my_custom_extension';
+     * // And given myFixtureData, a data structure describing an Airtable
+     * // Base which contains a Table named "Table One" with three Views...
+     * import myFixtureData from './my_fixture_data';
+     * import {render, screen} from '@testing-library/react';
+     *
+     * const testDriver = new TestDriver(myFixtureData);
+     * let items, itemTexts;
+     *
+     * render(
+     *     <testDriver.Container>
+     *         <MyCustomExtension />
+     *     </testDriver.Container>
+     * );
+     *
+     * // Verify that MyExtension initially displays all three Views
+     * items = screen.getAllByRole('listitem');
+     * itemTexts = items.map((el) => el.textContent);
+     * expect(itemTexts).toEqual(['1st view', '2nd view', '3rd view']);
+     *
+     * // Simulate the destruction of the Field named "2nd view"
+     * await testDriver.deleteViewAsync('Table One', '2nd view');
+     *
+     * // Verify that MyExtension correctly updates to describe the two remaining
+     * // Views
+     * items = screen.getAllByRole('listitem');
+     * itemTexts = items.map((el) => el.textContent);
+     * expect(itemTexts).toEqual(['1st view', '3rd view']);
+     * ```
+     */
+  }, {
+    key: "deleteViewAsync",
+    value: (function () {
+      var _deleteViewAsync = (0, _asyncToGenerator2.default)(/*#__PURE__*/_regenerator.default.mark(function _callee2(tableIdOrName, viewIdOrName) {
+        var table, view;
+        return _regenerator.default.wrap(function (_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              table = this.base.getTable(tableIdOrName);
+              view = table.getView(viewIdOrName);
+              _context2.next = 1;
+              return this._airtableInterface.applyMutationAsync({
+                type: _test_mutations.TestMutationTypes.DELETE_SINGLE_VIEW,
+                tableId: table.id,
+                id: view.id
+              });
+            case 1:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2, this);
+      }));
+      function deleteViewAsync(_x3, _x4) {
+        return _deleteViewAsync.apply(this, arguments);
+      }
+      return deleteViewAsync;
+    }()
+    /**
+     * Update the active {@link Table} and/or the active {@link View} of the
+     * Extension's {@link Cursor}. Either `table` or `view` must be specified.
+     *
+     * @example
+     * ```js
+     * testDriver.setActiveCursorModels({view: 'My grid view'});
+     * ```
+     *
+     * @example
+     * ```js
+     * import TestDriver from '@baselift/blocks-testing';
+     * // Given MyCustomExtension, an Airtable Extension which displays the names of the
+     * // active Table...
+     * import MyCustomExtension from '../src/my_custom_extension';
+     * // And given myFixtureData, a data structure describing an Airtable
+     * // Base which contains two Tables...
+     * import myFixtureData from './my_fixture_data';
+     * import {render, screen} from '@testing-library/react';
+     *
+     * const testDriver = new TestDriver(myFixtureData);
+     * let heading;
+     *
+     * render(
+     *     <testDriver.Container>
+     *         <MyCustomExtension />
+     *     </testDriver.Container>
+     * );
+     *
+     * // Verify that MyExtension initially displays the first Table
+     * heading = screen.getByRole('heading');
+     * expect(heading.textContent).toBe('First table');
+     *
+     * // Simulate the end user selecting the second Table from the Airtable
+     * // user interface
+     * testDriver.setActiveCursorModels(({table: 'Second table'});
+     *
+     * // Verify that MyExtension correctly updates to describe the newly-selected
+     * // Table
+     * heading = screen.getByRole('heading');
+     * expect(heading.textContent).toBe('Second table');
+     * ```
+     */
+    )
+  }, {
+    key: "setActiveCursorModels",
+    value: function setActiveCursorModels(tableAndOrView) {
+      var tableIdOrName = tableAndOrView.table,
+        viewIdOrName = tableAndOrView.view;
+      (0, _error_utils.invariant)(tableIdOrName || viewIdOrName, 'One of `table` or `view` must be specified.');
+      var tableId = tableIdOrName ? this.base.getTable(tableIdOrName).id : this.cursor.activeTableId;
+      (0, _error_utils.invariant)(typeof tableId === 'string', 'Cannot set cursor model when table is not loaded');
+      var viewId = viewIdOrName ? this.base.getTable(tableId).getView(viewIdOrName).id : this.cursor.activeViewId;
+      (0, _error_utils.invariant)(!viewId || this.base.getTable(tableId).getViewIfExists(viewId), 'Cannot change active table to "%s" because active view ("%s") belongs to another table', tableIdOrName, viewId);
+      this._airtableInterface.triggerModelUpdates([{
+        path: ['activeTableId'],
+        value: tableId
+      }]);
+      if (viewIdOrName) {
+        this._airtableInterface.triggerModelUpdates([{
+          path: ['tablesById', tableId, 'activeViewId'],
+          value: viewId
+        }]);
+      }
+    }
+
+    /**
+     * Specify the outcome of internal permission checks. This influences the
+     * behavior of not only explicit permission checks from Extensions code but also
+     * the outcome of model operations such as {@link createRecordsAsync}.
+     *
+     * @example
+     * ```js
+     * import TestDriver from '@baselift/blocks-testing';
+     * // Given MyCustomExtension, an Airtable Extension which displays a button labeled
+     * // "Add" and which disables that button for users who lack "write"
+     * // permissions to the Base...
+     * import MyCustomExtension from '../src/my_custom_extension';
+     * // And given myFixtureData, a data structure describing the initial
+     * // state of a simulated Airtable Base...
+     * import myFixtureData from './my_fixture_data';
+     * import {render, screen} from '@testing-library/react';
+     *
+     * const testDriver = new TestDriver(myFixtureData);
+     *
+     * // Configure the test driver to reject all "create record" mutations.
+     * testDriver.simulatePermissionCheck((mutation) => {
+     *     return mutation.type !== 'createMultipleRecords';
+     * });
+     *
+     * render(
+     *     <testDriver.Container>
+     *         <MyCustomExtension />
+     *     </testDriver.Container>
+     * );
+     *
+     * // Verify that MyCustomExtension recognizes that the current user may not
+     * // create Records and that disables the corresponding aspect of the user
+     * // interface.
+     * const button = screen.getByRole('button', {name: 'Add'});
+     * expect(button.disabled).toBe(true);
+     * ```
+     */
+  }, {
+    key: "simulatePermissionCheck",
+    value: function simulatePermissionCheck(check) {
+      this._airtableInterface.setUserPermissionCheck(check);
+    }
+
+    /**
+     * Specify the outcome of a request for the user to select a record in the
+     * UI created by {@link expandRecordPickerAsync}.
+     *
+     * @example
+     * ```js
+     * import TestDriver from '@baselift/blocks-testing';
+     * // Given MyCustomExtension, an Airtable Extension which prompts the end user to
+     * // select a Record and displays the name of the Record they selected...
+     * import MyCustomExtension from '../src/my_custom_extension';
+     * // And given myFixtureData, a data structure describing the initial
+     * // state of a simulated Airtable Base...
+     * import myFixtureData from './my_fixture_data';
+     * import {render, screen} from '@testing-library/react';
+     * import userEvent from '@testing-library/user-event';
+     *
+     * const testDriver = new TestDriver(myFixtureData);
+     *
+     * testDriver.simulateExpandedRecordSelection((tableId, recordIds) => {
+     *     return recordIds[1];
+     * });
+     *
+     * render(
+     *     <testDriver.Container>
+     *         <MyCustomExtension />
+     *     </testDriver.Container>
+     * );
+     *
+     * // Simulate a user clicking on a button in MyCustomExtension labeled with the
+     * // text "Choose record". If MyCustomExtension reacts to this event by invoking
+     * // the SDK's `expandRecordPickerAsync`, then it will receive the second
+     * // available record due to the function that is provided to
+     * // `simulateExpandedRecordSelection` above.
+     * const button = screen.getByRole('button', {name: 'Choose record'});
+     * userEvent.click(button);
+     *
+     * // Verify that MyCustomExtension correctly responds to the simulated user's
+     * // input
+     * const heading = await waitFor(() => screen.getByRole('heading'));
+     * expect(heading.textContent)
+     *   .toBe('You selected the record named "Number Two"');
+     * ```
+     */
+  }, {
+    key: "simulateExpandedRecordSelection",
+    value: function simulateExpandedRecordSelection(pickRecord) {
+      this._airtableInterface.setPickRecord(pickRecord);
+    }
+
+    /**
+     * Simulate a user visually selecting a set of {@link Record|Records} in
+     * the active {@link Table}. This operation is unrelated to an Extension's
+     * programmatic "selection" of records via, e.g. {@link
+     * Table.selectRecords}. To deselect all records, invoke this method with
+     * an empty array.
+     *
+     * @example
+     * ```js
+     * import TestDriver from '@baselift/blocks-testing';
+     * // Given MyCustomExtension, an Airtable Extension which displays the number of
+     * // Records that an end user has selected in the active Table...
+     * import MyCustomExtension from '../src/my_custom_extension';
+     * // And given myFixtureData, a data structure describing the initial
+     * // state of a simulated Airtable Base...
+     * import myFixtureData from './my_fixture_data';
+     * import {render, screen} from '@testing-library/react';
+     *
+     * const testDriver = new TestDriver(myFixtureData);
+     *
+     * render(
+     *     <testDriver.Container>
+     *         <MyCustomExtension />
+     *     </testDriver.Container>
+     * );
+     *
+     * // Retrieve all the Records present in the first Table in the Base
+     * const records = await testDriver.base.tables[0].selectRecordsAsync();
+     *
+     * // Simulate an end-user selecting the second and fourth Record
+     * testDriver.userSelectRecords([records[1].id, records[3].id]);
+     *
+     * // Verify that MyCustomExtension correctly responds to the simulated user's
+     * // input
+     * const heading = await waitFor(() => screen.getByRole('heading'));
+     * expect(heading.textContent).toBe('2 records selected');
+     * ```
+     */
+  }, {
+    key: "userSelectRecords",
+    value: function userSelectRecords(recordIds) {
+      var baseData = this._airtableInterface.sdkInitData.baseData;
+      var activeTableId = baseData.activeTableId;
+      (0, _error_utils.invariant)(activeTableId, 'Cannot select records when no table is active');
+      var _iterator = _createForOfIteratorHelper(recordIds),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var recordId = _step.value;
+          (0, _error_utils.invariant)(this._airtableInterface.hasRecord(activeTableId, recordId), 'Record with ID "%s" is not present in active table "%s"', recordId, activeTableId);
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+      var selectedRecordIdSet = recordIds.reduce((all, recordId) => {
+        all[recordId] = true;
+        return all;
+      }, {});
+      this._airtableInterface.triggerModelUpdates([{
+        path: ['cursorData', 'selectedRecordIdSet'],
+        value: selectedRecordIdSet
+      }]);
+    }
+
+    /**
+     * Register a function to be invoked in response to a given internal event.
+     * See {@link WatchableKeysAndArgs} for the available keys and the values
+     * which are included when they are emitted.
+     *
+     * @example
+     * ```js
+     * import TestDriver from '@baselift/blocks-testing';
+     * // Given MyCustomExtension, an Airtable Extension which presents the user with one
+     * // button for each available Record, and which responds to button clicks
+     * // by expanding the Record in the Airtable user interface...
+     * import MyCustomExtension from '../src/my_custom_extension';
+     * // And given myFixtureData, a data structure describing an Airtable
+     * // Base which contains a Table with three records...
+     * import myFixtureData from './my_fixture_data';
+     * import {render, screen} from '@testing-library/react';
+     * import userEvent from '@testing-library/user-event';
+     *
+     * const testDriver = new TestDriver(myFixtureData);
+     *
+     * // Keep track of every time MyCustomExtension attempts to expand a Record in
+     * // the Airtable user interface
+     * let expandedRecordIds = [];
+     * testDriver.watch('expandRecord', ({recordId}) => {
+     *   expendedRecordIds.push(recordId);
+     * });
+     *
+     * render(
+     *     <testDriver.Container>
+     *         <MyCustomExtension />
+     *     </testDriver.Container>
+     * );
+     *
+     * // Verify that MyCustomExtension does not expand any Records prior to user
+     * // interaction
+     * expect(expandedRecords).toEqual([]);
+     *
+     * // Simulate a user clicking on the second button in MyCustomExtension, which
+     * // is expected to correspond to the second Record in the simulated Base
+     * const buttons = screen.getAllByRole('button');
+     * userEvent.click(buttons[1]);
+     *
+     * // Verify that MyCustomExtension correctly expanded the second Record in the
+     * // Airtable user interface
+     * expect(expandedRecords).toEqual(['rec2']);
+     * ```
+     */
+  }, {
+    key: "watch",
+    value: function watch(key, fn) {
+      this._airtableInterface.on(key, fn);
+    }
+
+    /**
+     * De-register a function which was previously registered with {@link
+     * watch}. See {@link WatchableKeysAndArgs} for the available keys.
+     *
+     * @example
+     * ```js
+     * import TestDriver from '@baselift/blocks-testing';
+     * // Given MyCustomExtension, an Airtable Extension which enters "full screen" mode
+     * // in response to certain interactions...
+     * const MyCustomExtension = require('../src/my_custom_extension');
+     * // And given myFixtureData, a data structure describing the initial
+     * // state of a simulated Airtable Base...
+     * const myFixtureData = require('./my_fixture_data');
+     *
+     * let testDriver;
+     * let enterCount;
+     * let increment = () => {
+     *   enterCount += 1;
+     * });
+     *
+     * // Configure the test runner to create a TestDriver instance before
+     * // every test and to listen for requests to enter "full screen" mode
+     * beforeEach(() => {
+     *   testDriver = new TestDriver(myFixtureData);
+     *   enterCount = 0;
+     *   testDriver.watch('enterFullscreen', increment);
+     * });
+     *
+     * // Configure the test runner to remove the event listener after every
+     * // test. (The next test will have a new instance of TestDriver with its
+     * // own event handler, so this one is no longer necessary.)
+     * afterEach(() => {
+     *   testDriver.unwatch('enterFullscreen', increment);
+     * });
+     *
+     * // (include tests using the `testDriver` and `enterCount` variables
+     * // here)
+     * ```
+     */
+  }, {
+    key: "unwatch",
+    value: function unwatch(key, fn) {
+      this._airtableInterface.off(key, fn);
+    }
+  }]);
+}();