@enact/sandstone/MediaOverlay/tests/MediaOverlay-specs.js

Large-screen/TV support library for Enact, containing a variety of UI components.

"use strict";

require("@testing-library/jest-dom");
var _react = require("@testing-library/react");
var _MediaOverlay = _interopRequireDefault(require("../MediaOverlay"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
/* global HTMLMediaElement */

describe('MediaOverlay', function () {
  beforeEach(function () {
    jest.spyOn(HTMLMediaElement.prototype, 'load').mockImplementation(function () {
      return true;
    });
  });
  afterEach(function () {
    HTMLMediaElement.prototype.load.mockRestore();
  });
  test('should render a caption', function () {
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_MediaOverlay["default"], {
      caption: "This is a caption",
      source: "abc.mp4"
    }));
    var mediaOverlayCaption = _react.screen.getByText('This is a caption');
    var captionContainer = _react.screen.getByText('This is a caption').parentElement.parentElement;
    expect(mediaOverlayCaption).toBeInTheDocument();
    expect(captionContainer).toHaveClass('caption');
  });
  test('should render a text', function () {
    var text = 'The quick brown fox jumped over the lazy dog. The bean bird flies at sundown.';
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_MediaOverlay["default"], {
      source: "abc.mp4",
      text: text
    }));
    var mediaOverlayText = _react.screen.getByText(text);
    expect(mediaOverlayText).toBeInTheDocument();
    expect(mediaOverlayText).toHaveClass('text');
  });
  test('should position text at end when `textAlign` is set to end', function () {
    var text = 'Text Example';
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_MediaOverlay["default"], {
      source: "abc.mp4",
      text: text,
      textAlign: "end"
    }));
    var expected = 'flex-end';
    var actual = _react.screen.getByText(text).parentElement.parentElement.parentElement;
    expect(actual).toHaveStyle({
      'align-items': expected
    });
  });
  test('should position text at center when `textAlign` is set to center', function () {
    var text = 'Text Example';
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_MediaOverlay["default"], {
      source: "abc.mp4",
      text: text,
      textAlign: "center"
    }));
    var expected = 'center';
    var actual = _react.screen.getByText(text).parentElement.parentElement.parentElement;
    expect(actual).toHaveStyle({
      'align-items': expected
    });
  });
  test('should position text at start when `textAlign` is set to start', function () {
    var text = 'Text Example';
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_MediaOverlay["default"], {
      source: "abc.mp4",
      text: text,
      textAlign: "start"
    }));
    var expected = 'flex-start';
    var actual = _react.screen.getByText(text).parentElement.parentElement.parentElement;
    expect(actual).toHaveStyle({
      'align-items': expected
    });
  });
  test('should render a subtitle', function () {
    var subtitle = '07:00 AM - 08:00 AM';
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_MediaOverlay["default"], {
      source: "abc.mp4",
      subtitle: subtitle
    }));
    var mediaOverlaySubtitle = _react.screen.getByText(subtitle);
    var subtitleContainer = _react.screen.getByText(subtitle).parentElement.parentElement;
    expect(mediaOverlaySubtitle).toBeInTheDocument();
    expect(subtitleContainer).toHaveClass('subtitle');
  });
  test('should display a progress bar when `showProgress` is set to true', function () {
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_MediaOverlay["default"], {
      showProgress: true,
      source: "abc.mp4"
    }));
    var progressBar = _react.screen.getByRole('progressbar');
    expect(progressBar).toBeInTheDocument();
  });
  test('should not display a progress bar when `showProgress` is set to false', function () {
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_MediaOverlay["default"], {
      showProgress: false,
      source: "abc.mp4"
    }));
    var progressBar = _react.screen.queryByRole('progressbar');
    expect(progressBar).toBeNull();
  });
  test('should display an image', function () {
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_MediaOverlay["default"], {
      imageOverlay: "image.png",
      source: "abc.mp4"
    }));
    var image = _react.screen.getAllByRole('img')[0];
    expect(image).toBeInTheDocument();
  });
  test('should use the same node when changing the `source`', function () {
    var _render = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_MediaOverlay["default"], {
        "data-testid": "mediaOverlay",
        source: "abc.mp4"
      })),
      rerender = _render.rerender;
    var expected = _react.screen.getByTestId('mediaOverlay');
    rerender( /*#__PURE__*/(0, _jsxRuntime.jsx)(_MediaOverlay["default"], {
      "data-testid": "mediaOverlay",
      source: "def.mp4"
    }));
    var actual = _react.screen.getByTestId('mediaOverlay');
    expect(actual).toBe(expected);
  });
});