@enact/sandstone
Version:
Large-screen/TV support library for Enact, containing a variety of UI components.
257 lines (256 loc) • 12.4 kB
JavaScript
;
require("@testing-library/jest-dom");
var _react = require("@testing-library/react");
var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
var _Header = _interopRequireDefault(require("../Header"));
var _Panel = _interopRequireDefault(require("../Panel"));
var _Panels = _interopRequireDefault(require("../Panels"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
describe('Panels Specs', function () {
test('should set {autoFocus} on child to "default-element" on first render', function () {
var DivPanel = function DivPanel(_ref) {
var autoFocus = _ref.autoFocus,
id = _ref.id;
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
"data-testid": "panel",
id: id,
children: autoFocus
});
};
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Panels["default"], {
index: 0,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DivPanel, {})
}));
var expected = 'default-element';
var actual = _react.screen.getByTestId('panel').textContent;
expect(actual).toBe(expected);
});
test('should set {autoFocus} on child to "default-element" when navigating to a higher index', function () {
var DivPanel = function DivPanel(_ref2) {
var autoFocus = _ref2.autoFocus,
id = _ref2.id;
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
"data-testid": "panel",
id: id,
children: autoFocus
});
};
var _render = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Panels["default"], {
index: 0,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DivPanel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(DivPanel, {
id: "p2"
})]
})),
rerender = _render.rerender;
rerender( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Panels["default"], {
index: 1,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DivPanel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(DivPanel, {
id: "p2"
})]
}));
var expected = 'default-element';
var actual = _react.screen.getAllByTestId('panel')[0].textContent;
expect(actual).toBe(expected);
});
test('should not set {autoFocus} on child when navigating to a higher index when it has an autoFocus prop set', function () {
var DivPanel = function DivPanel(_ref3) {
var autoFocus = _ref3.autoFocus,
id = _ref3.id;
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
"data-testid": "panel",
id: id,
children: autoFocus
});
};
var _render2 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Panels["default"], {
index: 0,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DivPanel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(DivPanel, {
id: "p2",
autoFocus: "last-focused"
})]
})),
rerender = _render2.rerender;
rerender( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Panels["default"], {
index: 1,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DivPanel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(DivPanel, {
id: "p2",
autoFocus: "last-focused"
})]
}));
var expected = 'last-focused';
var panel = _react.screen.getAllByTestId('panel')[0];
expect(panel.textContent).toBe(expected);
expect(panel.id).toBe('p2');
});
test('should return a ref to the root Panel node', function () {
var ref = jest.fn();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Panel["default"], {
ref: ref
}));
var expected = 'ARTICLE';
var actual = ref.mock.calls[0][0].nodeName;
expect(actual).toBe(expected);
});
describe('with Panel and Header', function () {
test('should not render back button on the first panel', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Panels["default"], {
index: 0,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Panel["default"], {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Header["default"], {})
})
}));
var backButton = _react.screen.queryByLabelText('go to previous');
expect(backButton).toBeNull();
});
test('should render back button when not on the first panel', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Panels["default"], {
index: 1,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Panel["default"], {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Header["default"], {})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Panel["default"], {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Header["default"], {})
})]
}));
var backButton = _react.screen.getByLabelText('go to previous');
expect(backButton).toBeInTheDocument();
});
test('should fire `onBack` with `onBack` type when back clicked', /*#__PURE__*/_asyncToGenerator(function* () {
var handleBack = jest.fn();
var user = _userEvent["default"].setup();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Panels["default"], {
index: 1,
onBack: handleBack,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Panel["default"], {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Header["default"], {})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Panel["default"], {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Header["default"], {})
})]
}));
yield user.click(_react.screen.getByLabelText('go to previous'));
var expected = {
type: 'onBack'
};
yield (0, _react.waitFor)(function () {
var actual = handleBack.mock.calls.length && handleBack.mock.calls[0][0];
expect(actual).toMatchObject(expected);
});
}));
test('should not render back button when not on the first panel and \'noBackButton\' is set to true', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Panels["default"], {
index: 1,
noBackButton: true,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Panel["default"], {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Header["default"], {})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Panel["default"], {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Header["default"], {})
})]
}));
var backButton = _react.screen.queryByLabelText('go to previous');
expect(backButton).toBeNull();
});
test('should not render back button when \'noBackButton\' is set on `Panel` 2', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Panels["default"], {
index: 1,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Panel["default"], {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Header["default"], {})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Panel["default"], {
noBackButton: true,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Header["default"], {})
})]
}));
var backButton = _react.screen.queryByLabelText('go to previous');
expect(backButton).toBeNull();
});
test('should render back button on panel 3 when \'noBackButton\' is set on panel 2', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Panels["default"], {
index: 2,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Panel["default"], {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Header["default"], {})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Panel["default"], {
noBackButton: true,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Header["default"], {})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Panel["default"], {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Header["default"], {})
})]
}));
var backButton = _react.screen.getByLabelText('go to previous');
expect(backButton).toBeInTheDocument();
});
test('should set back button "aria-label" to backButtonAriaLabel', function () {
var label = 'custom back button label';
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Panels["default"], {
backButtonAriaLabel: label,
index: 1,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Panel["default"], {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Header["default"], {})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Panel["default"], {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Header["default"], {})
})]
}));
var backButton = _react.screen.getByLabelText(label);
var backButtonContainer = backButton.parentElement.parentElement;
var expectedClass = 'slotBefore';
expect(backButton).toBeInTheDocument();
expect(backButtonContainer).toHaveClass(expectedClass);
});
test('should set back button "aria-label" to backButtonAriaLabel when defined only on a panel', function () {
var label = 'custom back button label';
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Panels["default"], {
index: 1,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Panel["default"], {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Header["default"], {})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Panel["default"], {
backButtonAriaLabel: label,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Header["default"], {})
})]
}));
var backButton = _react.screen.getByLabelText(label);
var backButtonContainer = backButton.parentElement.parentElement;
var expectedClass = 'slotBefore';
expect(backButton).toBeInTheDocument();
expect(backButtonContainer).toHaveClass(expectedClass);
});
test('should render close button', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Panels["default"], {
index: 0,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Panel["default"], {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Header["default"], {})
})
}));
var closeButton = _react.screen.getByLabelText('Exit app');
var closeButtonContainer = closeButton.parentElement.parentElement;
var expectedClass = 'slotAfter';
expect(closeButton).toBeInTheDocument();
expect(closeButtonContainer).toHaveClass(expectedClass);
});
test('should not render close button when \'noCloseButton\' is set to true', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Panels["default"], {
index: 0,
noCloseButton: true,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Panel["default"], {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Header["default"], {})
})
}));
var closeButton = _react.screen.queryByLabelText('Exit app');
expect(closeButton).toBeNull();
});
test('should set close button "aria-label" to closeButtonAriaLabel', function () {
var label = 'custom close button label';
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Panels["default"], {
closeButtonAriaLabel: label,
index: 0,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Panel["default"], {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Header["default"], {})
})
}));
var closeButton = _react.screen.getByLabelText(label);
var closeButtonContainer = closeButton.parentElement.parentElement;
var expectedClass = 'slotAfter';
expect(closeButton).toBeInTheDocument();
expect(closeButtonContainer).toHaveClass(expectedClass);
});
});
});