@guardian/threads
Version:
119 lines • 5.53 kB
JavaScript
import { __assign, __awaiter, __extends, __generator } from "tslib";
import React, { Component } from 'react';
import { render, act, fireEvent, waitFor } from '@testing-library/react';
import noop from 'lodash/noop';
import { getInlineInputTestId } from '../../InlineInput';
import { InputSupper } from '../../InputSupper';
import { getSelectAsyncChipTestId, getSelectAsyncChipWrapperTestId, } from '../SelectAsyncChip';
import { menuItemTestId } from '../../../../Menu/MenuItem';
var createInputSupperScaffold = function (filters, initialElements, onUpdate) {
return /** @class */ (function (_super) {
__extends(InputSupperScaffold, _super);
function InputSupperScaffold() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
queryElements: initialElements,
};
_this.updateQuery = function (newElements) {
_this.setState({ queryElements: newElements });
};
return _this;
}
InputSupperScaffold.prototype.render = function () {
var _this = this;
return (React.createElement(React.Fragment, null,
React.createElement("div", { id: "overlays" }),
React.createElement(InputSupper, { elements: this.state.queryElements, availableFilters: filters, onChange: function (q) {
_this.setState({ queryElements: q });
onUpdate(q);
} })));
};
return InputSupperScaffold;
}(Component));
};
var createSelectAsyncFilter = function (onInputChange) { return ({
name: 'SelectAsync',
type: 'select_async',
onInputChange: onInputChange,
}); };
var createInitialQueryElements = function (value, filter) { return [
{
type: 'text',
value: 'lhs',
},
{
type: 'filter',
name: 'selectAsync',
negate: false,
value: value,
filter: filter,
},
{
type: 'text',
value: 'rhs',
},
]; };
var defaultOnInputChange = function () { return Promise.resolve([]); };
/**
* Render an InputSupper with a focused SelectAsyncChip surrounded by
* InlineText elements. Passes back commonly selected elements to reduce
* test boilerplate.
*/
export var renderFocusedAsyncChip = function (options) {
if (options === void 0) { options = {}; }
var _a = options.value, value = _a === void 0 ? 'example' : _a, _b = options.onInputChange, onInputChange = _b === void 0 ? defaultOnInputChange : _b, _c = options.onUpdate, onUpdate = _c === void 0 ? noop : _c;
var filter = createSelectAsyncFilter(onInputChange);
var initialQueryElements = createInitialQueryElements(value, filter);
var Scaffold = createInputSupperScaffold([filter], initialQueryElements, onUpdate);
var renderOpts = render(React.createElement(Scaffold, null));
var selectAsyncChipInput = renderOpts.getByTestId(getSelectAsyncChipTestId(1));
var selectAsyncChipWrapper = renderOpts.getByTestId(getSelectAsyncChipWrapperTestId(1));
var lhsInlineInput = renderOpts.getByTestId(getInlineInputTestId(0));
var rhsInlineInput = renderOpts.getByTestId(getInlineInputTestId(2));
act(function () {
selectAsyncChipInput.focus();
fireEvent.change(selectAsyncChipInput, { target: { value: value } });
});
return __assign(__assign({}, renderOpts), { selectAsyncChipInput: selectAsyncChipInput,
selectAsyncChipWrapper: selectAsyncChipWrapper,
lhsInlineInput: lhsInlineInput,
rhsInlineInput: rhsInlineInput });
};
/**
* As with renderFocusedAsyncChip, but adds input to the focused chip,
* which should expose a menu element with the provided options for testing.
*/
export var renderFocusedAsyncChipWithMenu = function (options) {
if (options === void 0) { options = {}; }
return __awaiter(void 0, void 0, void 0, function () {
var renderOptions, menuItems;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
renderOptions = renderFocusedAsyncChip(options);
fireEvent.change(renderOptions.selectAsyncChipInput, {
target: { value: 'a' },
});
// When expecting option menus, we'll need to wait a tick in tests with
// waitFor() for the promise returned by this function to resolve.
return [4 /*yield*/, waitFor(function () { return renderOptions.queryAllByTestId(menuItemTestId).length; })];
case 1:
// When expecting option menus, we'll need to wait a tick in tests with
// waitFor() for the promise returned by this function to resolve.
_a.sent();
menuItems = renderOptions.queryAllByTestId(menuItemTestId);
return [2 /*return*/, __assign(__assign({}, renderOptions), { menuItems: menuItems })];
}
});
});
};
export var keyCodes = {
ArrowUp: { key: 'ArrowUp', code: 'ArrowUp' },
ArrowDown: { key: 'ArrowDown', code: 'ArrowDown' },
ArrowLeft: { key: 'ArrowLeft', code: 'ArrowLeft' },
ArrowRight: { key: 'ArrowRight', code: 'ArrowRight' },
Enter: { key: 'Enter', code: 'Enter' },
Backspace: { key: 'Backspace', code: 'Backspace' },
Delete: { key: 'Delete', code: 'Delete' },
};
//# sourceMappingURL=selectAsyncChipHelpers.js.map