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

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

"use strict";

var _resolution = require("../resolution.js");
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, 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); }
describe('Resolution Specs', function () {
  var screenTypes = [{
    name: 'vga',
    pxPerRem: 8,
    width: 640,
    height: 480,
    aspectRatioName: 'standard'
  }, {
    name: 'xga',
    pxPerRem: 16,
    width: 1024,
    height: 768,
    aspectRatioName: 'standard'
  }, {
    name: 'hd',
    pxPerRem: 16,
    width: 1280,
    height: 720,
    aspectRatioName: 'hdtv'
  }, {
    name: 'uw-hd',
    pxPerRem: 16,
    width: 1920,
    height: 804,
    aspectRatioName: 'cinema'
  }, {
    name: 'fhd',
    pxPerRem: 24,
    width: 1920,
    height: 1080,
    aspectRatioName: 'hdtv'
  }, {
    name: 'uw-uxga',
    pxPerRem: 24,
    width: 2560,
    height: 1080,
    aspectRatioName: 'cinema'
  }, {
    name: 'qhd',
    pxPerRem: 32,
    width: 2560,
    height: 1440,
    aspectRatioName: 'hdtv'
  }, {
    name: 'wqhd',
    pxPerRem: 32,
    width: 3440,
    height: 1440,
    aspectRatioName: 'cinema'
  }, {
    name: 'uhd',
    pxPerRem: 48,
    width: 3840,
    height: 2160,
    aspectRatioName: 'hdtv',
    base: true
  }, {
    name: 'wuhd',
    pxPerRem: 48,
    width: 5158,
    height: 2160,
    aspectRatioName: 'cinema'
  }, {
    name: 'uhd2',
    pxPerRem: 96,
    width: 7680,
    height: 4320,
    aspectRatioName: 'hdtv'
  }];
  var VGA = {
    width: 640,
    height: 480
  };
  var XGA = {
    width: 1024,
    height: 768
  };
  var HD = {
    width: 1280,
    height: 720
  };
  var UWHD = {
    width: 1920,
    height: 804
  };
  var FHD = {
    width: 1920,
    height: 1080
  };
  var UWUXGA = {
    width: 2560,
    height: 1080
  };
  var QHD = {
    width: 2560,
    height: 1440
  };
  var WQHD = {
    width: 3440,
    height: 1440
  };
  var UHD = {
    width: 3840,
    height: 2160
  };
  var WUHD = {
    width: 5158,
    height: 2160
  };
  var UHD2 = {
    width: 7680,
    height: 4320
  };
  (0, _resolution.defineScreenTypes)(screenTypes);
  describe('Matching Screen Types', function () {
    test('should select screen type whose dimensions are same with the screen if exist', function () {
      expect((0, _resolution.getScreenType)(VGA)).toBe('vga');
      expect((0, _resolution.getScreenType)(XGA)).toBe('xga');
      expect((0, _resolution.getScreenType)(HD)).toBe('hd');
      expect((0, _resolution.getScreenType)(UWHD)).toBe('uw-hd');
      expect((0, _resolution.getScreenType)(FHD)).toBe('fhd');
      expect((0, _resolution.getScreenType)(UWUXGA)).toBe('uw-uxga');
      expect((0, _resolution.getScreenType)(QHD)).toBe('qhd');
      expect((0, _resolution.getScreenType)(WQHD)).toBe('wqhd');
      expect((0, _resolution.getScreenType)(UHD)).toBe('uhd');
      expect((0, _resolution.getScreenType)(WUHD)).toBe('wuhd');
      expect((0, _resolution.getScreenType)(UHD2)).toBe('uhd2');
    });
    test('should select screen type whose height and width are the closest to the screen', function () {
      screenTypes.forEach(function (type) {
        expect((0, _resolution.getScreenType)({
          width: type.width,
          height: type.height
        })).toBe(type.name);
        expect((0, _resolution.getScreenType)({
          width: type.width - 1,
          height: type.height - 1
        })).toBe(type.name);
        expect((0, _resolution.getScreenType)({
          width: type.width + 1,
          height: type.height + 1
        })).toBe(type.name);
      });
      for (var i = 0; i < screenTypes.length - 1; i++) {
        var current = screenTypes[i];
        var next = screenTypes[i + 1];
        var midPoint = {
          width: (current.width + next.width) / 2,
          height: (current.height + next.height) / 2
        };
        var justBeforeMid = {
          width: Math.floor(midPoint.width - 0.1),
          height: Math.floor(midPoint.height - 0.1)
        };
        var justAfterMid = {
          width: Math.ceil(midPoint.width + 0.1),
          height: Math.ceil(midPoint.height + 0.1)
        };
        expect((0, _resolution.getScreenType)(justBeforeMid)).toBe(current.name);
        expect((0, _resolution.getScreenType)(justAfterMid)).toBe(next.name);
      }
      var firstScreenType = screenTypes.at(0);
      expect((0, _resolution.getScreenType)({
        width: 1,
        height: 1
      })).toBe(firstScreenType.name);
      var lastType = screenTypes.at(-1);
      expect((0, _resolution.getScreenType)({
        width: lastType.width + 1000,
        height: lastType.height + 1000
      })).toBe(lastType.name);
    });
  });
  test('should detect portrait orientation', function () {
    var fhdPortrait = {
      height: 1920,
      width: 1080
    };
    (0, _resolution.defineScreenTypes)(screenTypes);
    var expected = 'fhd';
    var actual = (0, _resolution.getScreenType)(fhdPortrait);
    expect(actual).toBe(expected);
  });
  test('should calculate the base font size for the given screen type', function () {
    var expectedUHD = '48px';
    var actualUHD = (0, _resolution.calculateFontSize)('uhd');
    var expectedQHD = '32px';
    var actualQHD = (0, _resolution.calculateFontSize)('qhd');
    var expectedFHD = '24px';
    var actualFHD = (0, _resolution.calculateFontSize)('fhd');
    var expectedHD = '16px';
    var actualHD = (0, _resolution.calculateFontSize)('hd');
    expect(actualUHD).toBe(expectedUHD);
    expect(actualQHD).toBe(expectedQHD);
    expect(actualFHD).toBe(expectedFHD);
    expect(actualHD).toBe(expectedHD);
  });
  test('should scale pixel measurements for the current screen', function () {
    var expectedFHD = 24 / 6;
    var actualFHD = (0, _resolution.scale)(24);
    var expectedHD = 16 / 6;
    var actualHD = (0, _resolution.scale)(16);
    expect(actualFHD).toBe(expectedFHD);
    expect(actualHD).toBe(expectedHD);
  });
  test('should convert pixels to units', function () {
    var expectedFHD = '3rem';
    var actualFHD = (0, _resolution.unit)(24, 'rem');
    var expectedHD = '2rem';
    var actualHD = (0, _resolution.unit)(16, 'rem');
    expect(actualFHD).toBe(expectedFHD);
    expect(actualHD).toBe(expectedHD);
  });
  test('should convert pixels to units in landscape and fontSizeHandling is "scale"', function () {
    var closestResolution = _objectSpread({}, XGA);
    var wideResolution = {
      innerWidth: 1024,
      innerHeight: 480
    };
    (0, _resolution.init)({
      measurementNode: wideResolution
    });
    var expectedFHD = 3 / (wideResolution.innerHeight / closestResolution.height) + 'rem';
    var actualFHD = (0, _resolution.unit)(48, 'rem');
    var expectedHD = 2 / (wideResolution.innerHeight / closestResolution.height) + 'rem';
    var actualHD = (0, _resolution.unit)(32, 'rem');
    expect(actualFHD).toBe(expectedFHD);
    expect(actualHD).toBe(expectedHD);
  });
  test('should select source for the current screen type', function () {
    var measurementNode;
    var src = {
      vga: 'VGA',
      hd: 'HD',
      fhd: 'FHD',
      uhd: 'UHD'
    };
    var stringSrc = 'src/to/image';

    // String src
    expect((0, _resolution.selectSrc)(stringSrc)).toBe(stringSrc);

    // VGA
    measurementNode = {
      innerWidth: VGA.width,
      innerHeight: VGA.height
    };
    (0, _resolution.init)({
      measurementNode: measurementNode
    });
    expect((0, _resolution.selectSrc)(src)).toBe(src.vga);

    // XGA
    measurementNode = {
      innerWidth: XGA.width,
      innerHeight: XGA.height
    };
    (0, _resolution.init)({
      measurementNode: measurementNode
    });
    expect((0, _resolution.selectSrc)(src)).toBe(src.hd);

    // HD
    measurementNode = {
      innerWidth: HD.width,
      innerHeight: HD.height
    };
    (0, _resolution.init)({
      measurementNode: measurementNode
    });
    expect((0, _resolution.selectSrc)(src)).toBe(src.hd);

    // UWHD
    measurementNode = {
      innerWidth: UWHD.width,
      innerHeight: UWHD.height
    };
    (0, _resolution.init)({
      measurementNode: measurementNode
    });
    expect((0, _resolution.selectSrc)(src)).toBe(src.fhd);

    // FHD
    measurementNode = {
      innerWidth: FHD.width,
      innerHeight: FHD.height
    };
    (0, _resolution.init)({
      measurementNode: measurementNode
    });
    expect((0, _resolution.selectSrc)(src)).toBe(src.fhd);

    // UWUXGA
    measurementNode = {
      innerWidth: UWUXGA.width,
      innerHeight: UWUXGA.height
    };
    (0, _resolution.init)({
      measurementNode: measurementNode
    });
    expect((0, _resolution.selectSrc)(src)).toBe(src.fhd);

    // QHD
    measurementNode = {
      innerWidth: QHD.width,
      innerHeight: QHD.height
    };
    (0, _resolution.init)({
      measurementNode: measurementNode
    });
    expect((0, _resolution.selectSrc)(src)).toBe(src.fhd);

    // WQHD
    measurementNode = {
      innerWidth: WQHD.width,
      innerHeight: WQHD.height
    };
    (0, _resolution.init)({
      measurementNode: measurementNode
    });
    expect((0, _resolution.selectSrc)(src)).toBe(src.uhd);

    // UHD
    measurementNode = {
      innerWidth: UHD.width,
      innerHeight: UHD.height
    };
    (0, _resolution.init)({
      measurementNode: measurementNode
    });
    expect((0, _resolution.selectSrc)(src)).toBe(src.uhd);

    // WUHD
    measurementNode = {
      innerWidth: WUHD.width,
      innerHeight: WUHD.height
    };
    (0, _resolution.init)({
      measurementNode: measurementNode
    });
    expect((0, _resolution.selectSrc)(src)).toBe(src.uhd);

    // UHD2
    measurementNode = {
      innerWidth: UHD2.width,
      innerHeight: UHD2.height
    };
    (0, _resolution.init)({
      measurementNode: measurementNode
    });
    expect((0, _resolution.selectSrc)(src)).toBe(src.uhd);
  });
  test('should calculate linearly scaled font size based on workspace bounds and current screen', function () {
    _resolution.config.linearScaling.active = true;
    screenTypes.forEach(function (type, index, arr) {
      (0, _resolution.init)({
        measurementNode: {
          innerWidth: type.width,
          innerHeight: type.height
        }
      });
      var actual = (0, _resolution.calculateFontSize)();
      expect(actual).toBe(type.pxPerRem + 'px');
      (0, _resolution.init)({
        measurementNode: {
          innerWidth: type.width - 10,
          innerHeight: type.height - 10
        }
      });
      actual = Number((0, _resolution.calculateFontSize)().split('px').at(0));
      expect(actual).toBeLessThan(type.pxPerRem);
      (0, _resolution.init)({
        measurementNode: {
          innerWidth: type.width + 10,
          innerHeight: type.height + 10
        }
      });
      actual = Number((0, _resolution.calculateFontSize)().split('px').at(0));
      var expectCondition = arr.length - 1 === index ? 'toEqual' : 'toBeGreaterThan';
      expect(actual)[expectCondition](type.pxPerRem);
    });
    _resolution.config.linearScaling.active = false;
  });
});