@enact/limestone 1.3.0

package/MediaOverlay/tests/MediaOverlay-specs.js

@@ -0,0 +1,127 @@
+"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(e) { return e && e.__esModule ? e : { "default": e }; }
+/* 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);
+  });
+});