@enact/ui
Version:
A collection of simplified unstyled cross-platform UI components for Enact
959 lines (958 loc) • 34.5 kB
JavaScript
;
require("@testing-library/jest-dom");
var _react = require("@testing-library/react");
var _index = require("../index.js");
var _jsxRuntime = require("react/jsx-runtime");
function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
var ltrText = 'This is some fine latin text.',
rtlText = 'العربية - العراق',
ltrArray = ['The first quick brown fox jumped over the first lazy dog. The bean bird flies at sundown.', 'The second quick brown fox jumped over the second lazy dog. The bean bird flies at sundown.'];
var Controller = (0, _index.MarqueeController)({
marqueeOnFocus: true
}, 'div');
beforeEach(function () {
jest.useFakeTimers();
global.Element.prototype.getBoundingClientRect = jest.fn(function () {
return {
width: 100,
height: 50,
top: 0,
left: 0,
bottom: 0,
right: 0
};
});
var _observe = jest.fn();
global.IntersectionObserver = /*#__PURE__*/function () {
function IntersectionObserver() {
_classCallCheck(this, IntersectionObserver);
}
return _createClass(IntersectionObserver, [{
key: "disconnect",
value: function disconnect() {
return null;
}
}, {
key: "observe",
value: function observe() {
return _observe;
}
}]);
}();
});
afterEach(function () {
jest.useRealTimers();
});
describe('Marquee', function () {
test('should determine the correct directionality of latin text on initial render', function () {
(0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Marquee, {
children: ltrText
}));
var marquee = _react.screen.getByText(ltrText);
var expected = 'ltr';
expect(marquee).toHaveStyle({
'direction': expected
});
});
test('should determine the correct directionality of non-latin text on initial render', function () {
(0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Marquee, {
children: rtlText
}));
var marquee = _react.screen.getByText(rtlText);
var expected = 'rtl';
expect(marquee).toHaveStyle({
'direction': expected
});
});
test('should force the directionality text if forceDirection is specified', function () {
(0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Marquee, {
forceDirection: "ltr",
children: rtlText
}));
var marquee = _react.screen.getByText(rtlText);
var expected = 'ltr';
expect(marquee).toHaveStyle({
'direction': expected
});
});
test('should switch directionality when the text content changes after initial render', function () {
var _render = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Marquee, {
children: ltrText
})),
rerender = _render.rerender;
var marquee = _react.screen.getByText(ltrText);
rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Marquee, {
children: rtlText
}));
var expected = 'rtl';
expect(marquee).toHaveStyle({
'direction': expected
});
});
test('should not switch directionality when the text content changes after initial render and the forceDirection property was already set', function () {
var _render2 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Marquee, {
forceDirection: "ltr",
children: ltrText
})),
rerender = _render2.rerender;
var marquee = _react.screen.getByText(ltrText);
rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Marquee, {
forceDirection: "ltr",
children: rtlText
}));
var expected = 'ltr';
expect(marquee).toHaveStyle({
'direction': expected
});
});
test('should override direction to RTL when forceDirection is set and locale is LTR', function () {
(0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Marquee, {
"data-testid": "marquee",
forceDirection: "rtl",
locale: "ltr"
}));
var marquee = _react.screen.getByTestId('marquee').children.item(0).children.item(0);
var expected = 'rtl';
expect(marquee).toHaveStyle({
'direction': expected
});
});
test('should not override direction to RTL when forceDirection is "locale" and locale is LTR', function () {
var _render3 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Marquee, {
forceDirection: "locale",
children: ltrText
})),
rerender = _render3.rerender;
var marquee = _react.screen.getByText(ltrText);
var expected = 'ltr';
expect(marquee).toHaveStyle({
'direction': expected
});
rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Marquee, {
forceDirection: "locale",
children: rtlText
}));
expect(marquee).toHaveStyle({
'direction': expected
});
});
test('should override direction to LTR when forceDirection is set and locale is RTL', function () {
(0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Marquee, {
"data-testid": "marquee",
forceDirection: "ltr",
locale: "rtl"
}));
var marquee = _react.screen.getByTestId('marquee').children.item(0).children.item(0);
var expected = 'ltr';
expect(marquee).toHaveStyle({
'direction': expected
});
});
test('should have direction of RTL when forceDirection is RTL and locale is RTL', function () {
(0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Marquee, {
"data-testid": "marquee",
forceDirection: "rtl",
locale: "rtl"
}));
var marquee = _react.screen.getByTestId('marquee').children.item(0).children.item(0);
var expected = 'rtl';
expect(marquee).toHaveStyle({
'direction': expected
});
});
test('should have direction of LTR when forceDirection is LTR and locale is LTR', function () {
(0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Marquee, {
"data-testid": "marquee",
forceDirection: "ltr",
locale: "ltr"
}));
var marquee = _react.screen.getByTestId('marquee').children.item(0).children.item(0);
var expected = 'ltr';
expect(marquee).toHaveStyle({
'direction': expected
});
});
test('should convert percentage values of marqueeSpacing to absolute values', function (done) {
(0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Marquee, {
"data-testid": "marquee",
marqueeOn: "render",
marqueeOnRenderDelay: 10,
marqueeSpacing: "60%"
}));
(0, _react.act)(function () {
return jest.advanceTimersByTime(100);
});
var expected = '60';
var marquee = _react.screen.getByTestId('marquee').children.item(0).children.item(0);
expect(marquee).toHaveStyle({
'--ui-marquee-spacing': expected
});
done();
});
test('should pass absolute values of marqueeSpacing', function (done) {
(0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Marquee, {
"data-testid": "marquee",
marqueeOn: "render",
marqueeOnRenderDelay: 10,
marqueeSpacing: 80
}));
(0, _react.act)(function () {
return jest.advanceTimersByTime(100);
});
var expected = '80';
var marquee = _react.screen.getByTestId('marquee').children.item(0).children.item(0);
expect(marquee).toHaveStyle({
'--ui-marquee-spacing': expected
});
done();
});
test('should warn when marquees are nested', function () {
var spy = jest.spyOn(console, 'error').mockImplementation(function () {});
(0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Marquee, {
marqueeOn: "render",
marqueeOnRenderDelay: 10,
marqueeSpacing: 80,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Marquee, {
marqueeOn: "render",
marqueeOnRenderDelay: -10,
marqueeSpacing: 80
})
}));
(0, _react.act)(function () {
return jest.advanceTimersByTime(100);
});
expect(spy).toHaveBeenCalled();
});
test('should not animate when marquee is disabled', function () {
(0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Marquee, {
marqueeDisabled: true,
children: ltrText
}));
var marquee = _react.screen.getByText(ltrText).parentElement;
var expected = 'marquee';
expect(marquee).not.toHaveClass(expected);
});
test('should re-measure content after marqueeDisabled transitions to false', function () {
var originalGetBoundingClientRect = global.Element.prototype.getBoundingClientRect;
global.Element.prototype.getBoundingClientRect = jest.fn(function () {
var isSpan = this && this.tagName === 'SPAN';
return {
width: isSpan ? 200 : 100,
height: 50,
top: 0,
left: 0,
bottom: 0,
right: isSpan ? 200 : 100
};
});
var _render4 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Marquee, {
marqueeOn: "render",
marqueeDelay: 0,
marqueeOnRenderDelay: 0,
children: ltrText
})),
rerender = _render4.rerender;
(0, _react.act)(function () {
return jest.advanceTimersByTime(100);
});
rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Marquee, {
marqueeOn: "render",
marqueeDelay: 0,
marqueeOnRenderDelay: 0,
marqueeDisabled: true,
children: ltrText
}));
global.Element.prototype.getBoundingClientRect = jest.fn(function () {
var isSpan = this && this.tagName === 'SPAN';
return {
width: isSpan ? 300 : 100,
height: 50,
top: 0,
left: 0,
bottom: 0,
right: isSpan ? 300 : 100
};
});
rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Marquee, {
marqueeOn: "render",
marqueeDelay: 0,
marqueeOnRenderDelay: 0,
children: ltrText
}));
(0, _react.act)(function () {
return jest.advanceTimersByTime(100);
});
var marquee = _react.screen.getAllByText(ltrText).find(function (el) {
return el.classList.contains('text');
});
expect(marquee).toHaveStyle({
'transform': 'translateX(-350px)'
});
global.Element.prototype.getBoundingClientRect = originalGetBoundingClientRect;
});
test('should start marquee when transitioning into `marqueeOn="render"`', function () {
var _render5 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Marquee, {
marqueeOn: "focus",
marqueeDelay: 0,
marqueeOnRenderDelay: 0,
children: ltrText
})),
rerender = _render5.rerender;
rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Marquee, {
marqueeOn: "render",
marqueeDelay: 0,
marqueeOnRenderDelay: 0,
children: ltrText
}));
(0, _react.act)(function () {
return jest.advanceTimersByTime(100);
});
var marquee = _react.screen.getByText(ltrText);
expect(marquee).toHaveStyle({
'--ui-marquee-spacing': '50'
});
});
test('should restart render-mode marquee when children change', function () {
var _render6 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Marquee, {
marqueeOn: "render",
marqueeDelay: 0,
marqueeOnRenderDelay: 0,
children: ltrText
})),
rerender = _render6.rerender;
(0, _react.act)(function () {
return jest.advanceTimersByTime(100);
});
var ltrMarquee = _react.screen.getByText(ltrText);
expect(ltrMarquee).toHaveStyle({
'--ui-marquee-spacing': '50'
});
rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Marquee, {
marqueeOn: "render",
marqueeDelay: 0,
marqueeOnRenderDelay: 0,
children: rtlText
}));
(0, _react.act)(function () {
return jest.advanceTimersByTime(100);
});
var rtlMarquee = _react.screen.getByText(rtlText);
expect(rtlMarquee).toHaveStyle({
'direction': 'rtl'
});
});
test('should cancel animation on marqueeSpeed change while animating (render mode)', function () {
var originalGetBoundingClientRect = global.Element.prototype.getBoundingClientRect;
global.Element.prototype.getBoundingClientRect = jest.fn(function () {
var isSpan = this && this.tagName === 'SPAN';
return {
width: isSpan ? 200 : 100,
height: 50,
top: 0,
left: 0,
bottom: 0,
right: isSpan ? 200 : 100
};
});
var _render7 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Marquee, {
marqueeOn: "render",
marqueeDelay: 0,
marqueeOnRenderDelay: 0,
marqueeSpeed: 60,
children: ltrText
})),
rerender = _render7.rerender;
(0, _react.act)(function () {
return jest.advanceTimersByTime(100);
});
var marquee = _react.screen.getAllByText(ltrText).find(function (el) {
return el.classList.contains('text');
});
expect(marquee).not.toHaveStyle({
'transform': 'translateX(0)'
});
rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Marquee, {
marqueeOn: "render",
marqueeDelay: 0,
marqueeOnRenderDelay: 0,
marqueeSpeed: 70,
children: ltrText
}));
var marqueeAfter = _react.screen.getAllByText(ltrText).find(function (el) {
return el.classList.contains('text');
});
expect(marqueeAfter).toHaveStyle({
'transform': 'translateX(0)'
});
global.Element.prototype.getBoundingClientRect = originalGetBoundingClientRect;
});
test('should restart render-mode marquee after forceDirection changes', function () {
var originalGetBoundingClientRect = global.Element.prototype.getBoundingClientRect;
global.Element.prototype.getBoundingClientRect = jest.fn(function () {
var isSpan = this && this.tagName === 'SPAN';
return {
width: isSpan ? 200 : 100,
height: 50,
top: 0,
left: 0,
bottom: 0,
right: isSpan ? 200 : 100
};
});
var _render8 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Marquee, {
marqueeOn: "render",
marqueeDelay: 0,
marqueeOnRenderDelay: 0,
children: ltrText
})),
rerender = _render8.rerender;
(0, _react.act)(function () {
return jest.advanceTimersByTime(100);
});
var marquee = _react.screen.getAllByText(ltrText).find(function (el) {
return el.classList.contains('text');
});
expect(marquee).toHaveStyle({
'--ui-marquee-spacing': '50'
});
rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Marquee, {
marqueeOn: "render",
marqueeDelay: 0,
marqueeOnRenderDelay: 0,
forceDirection: "rtl",
children: ltrText
}));
(0, _react.act)(function () {
return jest.advanceTimersByTime(100);
});
var marqueeAfter = _react.screen.getAllByText(ltrText).find(function (el) {
return el.classList.contains('text');
});
expect(marqueeAfter).toHaveStyle({
'--ui-marquee-spacing': '50'
});
global.Element.prototype.getBoundingClientRect = originalGetBoundingClientRect;
});
test('should start marquee on focus if `marqueeOn` is focus', function () {
(0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Marquee, {
marqueeOn: "focus",
marqueeDelay: 10,
children: ltrText
}));
var marquee = _react.screen.getByText(ltrText);
_react.fireEvent.focus(marquee);
(0, _react.act)(function () {
return jest.advanceTimersByTime(100);
});
expect(marquee).toHaveStyle({
'--ui-marquee-spacing': '50'
});
});
test('should start marquee on hover if `marqueeOn` is hover', function () {
(0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Marquee, {
marqueeOn: "hover",
marqueeDelay: 10,
children: ltrText
}));
var marquee = _react.screen.getByText(ltrText);
_react.fireEvent.mouseOver(marquee);
(0, _react.act)(function () {
return jest.advanceTimersByTime(100);
});
expect(marquee).toHaveStyle({
'--ui-marquee-spacing': '50'
});
});
test('should forward `blur` event', function () {
var spy = jest.fn();
(0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Marquee, {
marqueeOn: "focus",
marqueeDelay: 10,
onBlur: spy,
children: ltrText
}));
var marquee = _react.screen.getByText(ltrText);
_react.fireEvent.focus(marquee);
(0, _react.act)(function () {
return jest.advanceTimersByTime(100);
});
_react.fireEvent.blur(marquee.parentElement.parentElement);
expect(spy).toHaveBeenCalled();
});
test('should forward `mouseleave` event', function () {
var spy = jest.fn();
(0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Marquee, {
marqueeOn: "hover",
marqueeDelay: 10,
onMouseLeave: spy,
children: ltrText
}));
var marquee = _react.screen.getByText(ltrText);
_react.fireEvent.mouseOver(marquee);
(0, _react.act)(function () {
return jest.advanceTimersByTime(100);
});
_react.fireEvent.mouseLeave(marquee);
expect(spy).toHaveBeenCalled();
});
test('should creates and observes with ResizeObserver', function () {
var originalResizeObserver = global.ResizeObserver;
var observe = jest.fn();
var resizeCallback = null;
global.ResizeObserver = jest.fn(function (cb) {
resizeCallback = cb;
return {
observe: observe,
disconnect: jest.fn()
};
});
(0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Marquee, {
children: ltrText
}));
(0, _react.act)(function () {
return jest.advanceTimersByTime(100);
});
expect(global.ResizeObserver).toHaveBeenCalled();
expect(observe).toHaveBeenCalled();
(0, _react.act)(function () {
if (typeof resizeCallback === 'function') {
resizeCallback();
}
});
global.ResizeObserver = originalResizeObserver;
});
});
describe('MarqueeBase', function () {
// Computed Property Tests
test('should not include the animate class when animating is false', function () {
(0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.MarqueeBase, {
"data-testid": "marquee"
}));
var marquee = _react.screen.getByTestId('marquee').children.item(0);
var expected = 'animate';
expect(marquee).not.toHaveClass(expected);
});
test('should include the animate class when animating is true', function () {
(0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.MarqueeBase, {
animating: true,
"data-testid": "marquee"
}));
var marquee = _react.screen.getByTestId('marquee').children.item(0);
var expected = 'animate';
expect(marquee).toHaveClass(expected);
});
test('should not transition when animating is false', function () {
(0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.MarqueeBase, {
"data-testid": "marquee"
}));
var marquee = _react.screen.getByTestId('marquee').children.item(0);
expect(marquee).not.toHaveStyle({
'transition-duration': 'NaNs'
});
});
test('should transition when animating is true', function () {
(0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.MarqueeBase, {
animating: true,
"data-testid": "marquee"
}));
var marquee = _react.screen.getByTestId('marquee').children.item(0);
expect(marquee).toHaveStyle({
'transition-duration': 'NaNs'
});
});
test('should set RTL direction in LTR context when the text directionality is RTL', function () {
(0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.MarqueeBase, {
"data-testid": "marquee",
rtl: true
}), {
context: {
rtl: false
}
});
var marquee = _react.screen.getByTestId('marquee').children.item(0);
var expected = 'rtl';
expect(marquee).toHaveStyle({
'direction': expected
});
});
test('should set LTR direction in RTL when the text directionality is LTR', function () {
(0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.MarqueeBase, {
"data-testid": "marquee"
}), {
context: {
rtl: true
}
});
var marquee = _react.screen.getByTestId('marquee').children.item(0);
var expected = 'ltr';
expect(marquee).toHaveStyle({
'direction': expected
});
});
test('should transition from the right with LTR text (a negative translate value)', function () {
(0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.MarqueeBase, {
animating: true,
"data-testid": "marquee",
distance: 100
}));
var marquee = _react.screen.getByTestId('marquee').children.item(0);
var expected = 'translateX(-100px)';
expect(marquee).toHaveStyle({
'transform': expected
});
});
test('should transition from the left with RTL text (a positive translate value)', function () {
(0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.MarqueeBase, {
animating: true,
"data-testid": "marquee",
distance: 100,
rtl: true
}));
var marquee = _react.screen.getByTestId('marquee').children.item(0);
var expected = 'translateX(100px)';
expect(marquee).toHaveStyle({
'transform': expected
});
});
test('should duplicate from content when promoted and a non-zero distance', function () {
(0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.MarqueeBase, {
"data-testid": "marquee",
distance: 100,
willAnimate: true,
children: "Text"
}));
var marquee = _react.screen.getByTestId('marquee');
expect(marquee).toHaveTextContent('TextText');
});
test('should not duplicate from content when promoted and a zero distance', function () {
(0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.MarqueeBase, {
distance: 0,
willAnimate: true,
children: "Text"
}));
var marquee = _react.screen.getByText('Text');
expect(marquee).toBeInTheDocument();
});
test('should not duplicate from content when not promoted and a non-zero distance', function () {
(0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.MarqueeBase, {
distance: 100,
children: "Text"
}));
var marquee = _react.screen.getByText('Text');
expect(marquee).toBeInTheDocument();
});
test('should add aria-label with content when promoted and a non-zero distance', function () {
var text = 'Text';
(0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.MarqueeBase, {
"data-testid": "marquee",
distance: 100,
willAnimate: true,
children: text
}));
var marquee = _react.screen.getByTestId('marquee');
var expected = text;
expect(marquee).toHaveAttribute('aria-label', expected);
});
test('should not override aria-label with content when promoted and a non-zero distance', function () {
var aria = 'Custom';
(0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.MarqueeBase, {
"aria-label": aria,
"data-testid": "marquee",
distance: 100,
willAnimate: true,
children: "Text"
}));
var marquee = _react.screen.getByTestId('marquee');
var expected = aria;
expect(marquee).toHaveAttribute('aria-label', expected);
});
test('should concatenate string children when promoted and a non-zero distance', function () {
(0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_index.MarqueeBase, {
"data-testid": "marquee",
distance: 100,
willAnimate: true,
children: ["This is ", 'A', " test"]
}));
var marquee = _react.screen.getByTestId('marquee');
var expected = 'This is A test';
expect(marquee).toHaveAttribute('aria-label', expected);
});
test('should not concatenate non-string children when promoted and a non-zero distance', function () {
(0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_index.MarqueeBase, {
"data-testid": "marquee",
distance: 100,
willAnimate: true,
children: ["Test", /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: "Hello"
}), "World"]
}));
var marquee = _react.screen.getByTestId('marquee');
var expected = 'Test World';
expect(marquee).toHaveAttribute('aria-label', expected);
});
test('should not throw exception for null children when promoted and a non-zero distance - ENYO-6362', function () {
var renderSubject = function renderSubject() {
return (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.MarqueeBase, {
distance: 100,
willAnimate: true,
children: null
}));
};
expect(renderSubject).not.toThrow();
});
});
describe('MarqueeController', function () {
test('should start marquee on all children on render if `marqueeOn` is render', function () {
(0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Controller, {
children: ltrArray.map(function (children, index) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Marquee, {
marqueeDelay: 10,
marqueeOn: "render",
marqueeOnRenderDelay: 10,
children: children
}, index);
})
}));
(0, _react.act)(function () {
return jest.advanceTimersByTime(100);
});
var marquee1 = _react.screen.getByText(ltrArray[0]);
var marquee2 = _react.screen.getByText(ltrArray[1]);
expect(marquee1).toHaveStyle({
'--ui-marquee-spacing': '50'
});
expect(marquee2).toHaveStyle({
'--ui-marquee-spacing': '50'
});
});
test('should start marquee on all children when one is focused and `marqueeOn` is focus', function () {
(0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Controller, {
children: ltrArray.map(function (children, index) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Marquee, {
marqueeDelay: 10,
marqueeOn: "focus",
children: children
}, index);
})
}));
(0, _react.act)(function () {
return jest.advanceTimersByTime(100);
});
var marquee1 = _react.screen.getByText(ltrArray[0]);
var marquee2 = _react.screen.getByText(ltrArray[1]);
_react.fireEvent.focus(marquee1);
(0, _react.act)(function () {
return jest.advanceTimersByTime(100);
});
expect(marquee1).toHaveStyle({
'--ui-marquee-spacing': '50'
});
expect(marquee2).toHaveStyle({
'--ui-marquee-spacing': '50'
});
});
test('should start marquee on all children when one is hovered and `marqueeOn` is hover', function () {
(0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Controller, {
children: ltrArray.map(function (children, index) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Marquee, {
marqueeDelay: 10,
marqueeOn: "hover",
children: children
}, index);
})
}));
(0, _react.act)(function () {
return jest.advanceTimersByTime(100);
});
var marquee1 = _react.screen.getByText(ltrArray[0]);
var marquee2 = _react.screen.getByText(ltrArray[1]);
_react.fireEvent.mouseOver(marquee1);
(0, _react.act)(function () {
return jest.advanceTimersByTime(100);
});
expect(marquee1).toHaveStyle({
'--ui-marquee-spacing': '50'
});
expect(marquee2).toHaveStyle({
'--ui-marquee-spacing': '50'
});
});
test('should forward `blur` event when one of the children is blurred and `marqueeOn` is focus', function () {
var spy = jest.fn();
(0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Controller, {
onBlur: spy,
children: ltrArray.map(function (children, index) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Marquee, {
marqueeDelay: 10,
marqueeOn: "focus",
children: children
}, index);
})
}));
var marquee1 = _react.screen.getByText(ltrArray[0]);
var marquee2 = _react.screen.getByText(ltrArray[1]);
_react.fireEvent.focus(marquee1);
_react.fireEvent.blur(marquee1);
_react.fireEvent.focus(marquee2);
_react.fireEvent.blur(marquee2);
expect(spy).toHaveBeenCalledTimes(2);
});
test('should forward `mouseleave` event when one of the children is unhovered and `marqueeOn` is hover', function () {
var spy = jest.fn();
(0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Controller, {
onMouseLeave: spy,
children: ltrArray.map(function (children, index) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Marquee, {
marqueeDelay: 10,
marqueeOn: "hover",
children: children
}, index);
})
}));
var marquee1 = _react.screen.getByText(ltrArray[0]);
var marquee2 = _react.screen.getByText(ltrArray[1]);
_react.fireEvent.mouseOver(marquee1);
_react.fireEvent.mouseLeave(marquee1);
_react.fireEvent.mouseOver(marquee2);
_react.fireEvent.mouseLeave(marquee2);
expect(spy).toHaveBeenCalledTimes(2);
});
test('should set a minimum value for reset delay when `marqueeDelay` is less than 40', function () {
(0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Controller, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Marquee, {
marqueeDelay: 0,
marqueeOn: "render",
children: ltrArray[0]
})
}));
var marquee1 = _react.screen.getByText(ltrArray[0]);
marquee1.getBoundingClientRect = jest.fn(function () {
return {
width: 50,
height: 50,
top: 0,
left: 0,
bottom: 0,
right: 0
};
});
_react.fireEvent.focus(marquee1);
(0, _react.act)(function () {
return jest.advanceTimersByTime(10);
});
_react.fireEvent.transitionEnd(marquee1);
(0, _react.act)(function () {
return jest.advanceTimersByTime(10);
});
expect(marquee1).toHaveStyle({
'transform': 'translateX(0)'
});
(0, _react.act)(function () {
return jest.advanceTimersByTime(40);
});
expect(marquee1).toHaveStyle({
'transform': 'translateX(-125px)'
});
});
test('should enter marquee context when component becomes disabled while hovered in sync mode', function () {
var _render9 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Controller, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Marquee, {
marqueeDelay: 0,
marqueeOn: "focus",
children: ltrText
})
})),
rerender = _render9.rerender;
var marquee = _react.screen.getByText(ltrText);
_react.fireEvent.mouseOver(marquee);
rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(Controller, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Marquee, {
disabled: true,
marqueeDelay: 0,
marqueeOn: "focus",
children: ltrText
})
}));
(0, _react.act)(function () {
return jest.advanceTimersByTime(100);
});
expect(marquee).toHaveStyle({
'--ui-marquee-spacing': '50'
});
});
test('should call resetAnimation on content change while focused (marqueeOn="focus")', function () {
var originalGetBoundingClientRect = global.Element.prototype.getBoundingClientRect;
global.Element.prototype.getBoundingClientRect = jest.fn(function () {
var isSpan = this && this.tagName === 'SPAN';
return {
width: isSpan ? 200 : 100,
height: 50,
top: 0,
left: 0,
bottom: 0,
right: isSpan ? 200 : 100
};
});
var _render0 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Controller, {
children: [ltrText].map(function (children, index) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Marquee, {
marqueeDelay: 10,
marqueeOn: "focus",
children: children
}, index);
})
})),
rerender = _render0.rerender;
var marquee1 = _react.screen.getByText(ltrText);
_react.fireEvent.focus(marquee1);
(0, _react.act)(function () {
return jest.advanceTimersByTime(100);
});
rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(Controller, {
children: [rtlText].map(function (children, index) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Marquee, {
marqueeDelay: 10,
marqueeOn: "focus",
children: children
}, index);
})
}));
(0, _react.act)(function () {
return jest.advanceTimersByTime(1);
});
expect(_react.screen.getByText(rtlText)).toHaveStyle({
'transform': 'translateX(0)'
});
global.Element.prototype.getBoundingClientRect = originalGetBoundingClientRect;
});
test('should detect RTL direction when content changes mid-marquee in sync mode', function () {
var _render1 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Controller, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Marquee, {
marqueeDelay: 10,
marqueeOn: "focus",
children: ltrText
})
})),
rerender = _render1.rerender;
var marquee1 = _react.screen.getByText(ltrText);
_react.fireEvent.focus(marquee1);
(0, _react.act)(function () {
return jest.advanceTimersByTime(200);
});
rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(Controller, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Marquee, {
marqueeDelay: 10,
marqueeOn: "focus",
children: rtlText
})
}));
var marquee2 = _react.screen.getByText(rtlText);
expect(marquee2).toHaveStyle({
'direction': 'rtl'
});
});
});