@enact/ui/resolution/tests/ResolutionDecorator-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 _ResolutionDecorator = _interopRequireDefault(require("../ResolutionDecorator"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
var changeTargetResolution = function changeTargetResolution(target, width, height) {
  Object.defineProperty(target, 'clientWidth', {
    configurable: true,
    value: width
  });
  Object.defineProperty(target, 'clientHeight', {
    configurable: true,
    value: height
  });
};
describe('ResolutionDecorator Specs', function () {
  test('should apply resolution classes to the wrapped component', function () {
    var Component = (0, _ResolutionDecorator["default"])('div');
    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
      "data-testid": "component"
    }));
    var div = _react.screen.getByTestId('component').className;
    var expected = true;
    var actual = div.includes('enact-res-standard') && (div.includes('enact-orientation-landscape') || div.includes('enact-orientation-portrait'));
    expect(actual).toBe(expected);
  });
  test('should not change resolution between renders if the screen stays the same', function () {
    var Component = (0, _ResolutionDecorator["default"])('div');
    var _render = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
        "data-testid": "component"
      })),
      rerender = _render.rerender;
    var expected = true;
    var div = _react.screen.getByTestId('component').className;
    var actual = div.includes('enact-res-standard') && (div.includes('enact-orientation-landscape') || div.includes('enact-orientation-portrait'));
    expect(actual).toBe(expected);
    rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
      "data-testid": "component"
    }));
    div = _react.screen.getByTestId('component').className;
    actual = div.includes('enact-res-standard') && (div.includes('enact-orientation-landscape') || div.includes('enact-orientation-portrait'));
    expect(actual).toBe(expected);
  });
  test('should allow custom screen types', function () {
    var name = 'mhd';
    var screens = [{
      name: name,
      pxPerRem: 36,
      width: 1440,
      height: 920,
      aspectRatioName: 'hdtv',
      base: true
    }];
    var Component = (0, _ResolutionDecorator["default"])({
      screenTypes: screens
    }, 'div');
    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
      "data-testid": "component"
    }));
    var div = _react.screen.getByTestId('component');
    expect(div).toHaveClass('enact-res-mhd');
  });
  test('should update the resolution when the screen is resized', function () {
    var screens = [{
      name: 'hd',
      pxPerRem: 16,
      width: 1280,
      height: 720,
      aspectRatioName: 'hdtv',
      base: true
    }, {
      name: 'fhd',
      pxPerRem: 24,
      width: 1920,
      height: 1080,
      aspectRatioName: 'hdtv'
    }];
    var Component = (0, _ResolutionDecorator["default"])({
      screenTypes: screens
    }, 'div');
    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
      "data-testid": "component"
    }));
    var div = _react.screen.getByTestId('component');
    changeTargetResolution(div, 1920, 1080);
    (0, _react.fireEvent)(window, new Event('resize'));
    expect(div).toHaveClass('enact-res-fhd');
    changeTargetResolution(div, 1280, 720);
    (0, _react.fireEvent)(window, new Event('resize'));
    expect(div).toHaveClass('enact-res-hd');
    expect(div).not.toHaveClass('enact-res-fhd');
  });
  test('should not allow dynamic resolution updates when \'dynamic\' config option is false', function () {
    var screens = [{
      name: 'mhd',
      pxPerRem: 36,
      width: 1440,
      height: 920,
      aspectRatioName: 'hdtv',
      base: true
    }, {
      name: 'fhd',
      pxPerRem: 24,
      width: 1920,
      height: 1080,
      aspectRatioName: 'hdtv'
    }];
    var Component = (0, _ResolutionDecorator["default"])({
      dynamic: false,
      screenTypes: screens
    }, 'div');
    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
      "data-testid": "component"
    }));
    var div = _react.screen.getByTestId('component');
    expect(div).toHaveClass('enact-res-mhd');
    changeTargetResolution(div, 1920, 1080);
    (0, _react.fireEvent)(window, new Event('resize'));
    expect(div).toHaveClass('enact-res-mhd');
    expect(div).not.toHaveClass('enact-res-fhd');
  });
});