@enact/ui/Marquee/tests/Marquee-specs.js

A collection of simplified unstyled cross-platform UI components for Enact

"use strict";

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 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();
    global.ResizeObserver = jest.fn(function () {
      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();
    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)'
    });
  });
});