@enact/ui
Version:
A collection of simplified unstyled cross-platform UI components for Enact
774 lines (736 loc) • 24.2 kB
JavaScript
"use strict";
var _resolution = require("../resolution.js");
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 both smaller than or same with the screen if `matchSmallerScreenType` true', function () {
_resolution.config.matchSmallerScreenType = true;
// if width or height of screen is smaller than the smallest screen type, select the smallest screen type
expect((0, _resolution.getScreenType)({
width: VGA.width - 1,
height: VGA.height - 1
})).toBe('vga');
expect((0, _resolution.getScreenType)({
width: VGA.width + 1,
height: VGA.height - 1
})).toBe('vga');
expect((0, _resolution.getScreenType)({
width: VGA.width - 1,
height: VGA.height + 1
})).toBe('vga');
// VGA
expect((0, _resolution.getScreenType)({
width: VGA.width + 1,
height: VGA.height + 1
})).toBe('vga');
expect((0, _resolution.getScreenType)({
width: XGA.width - 1,
height: XGA.height - 1
})).toBe('vga');
expect((0, _resolution.getScreenType)({
width: XGA.width + 1,
height: XGA.height - 1
})).toBe('vga');
expect((0, _resolution.getScreenType)({
width: XGA.width - 1,
height: XGA.height + 1
})).toBe('vga');
expect((0, _resolution.getScreenType)({
width: HD.width - 1,
height: HD.height - 1
})).toBe('vga');
expect((0, _resolution.getScreenType)({
width: HD.width + 1,
height: HD.height - 1
})).toBe('vga');
expect((0, _resolution.getScreenType)({
width: HD.width - 1,
height: HD.height + 1
})).toBe('vga');
expect((0, _resolution.getScreenType)({
width: XGA.width,
height: HD.height
})).toBe('vga');
expect((0, _resolution.getScreenType)({
width: XGA.width - 1,
height: HD.height - 1
})).toBe('vga');
expect((0, _resolution.getScreenType)({
width: XGA.width + 1,
height: HD.height - 1
})).toBe('vga');
expect((0, _resolution.getScreenType)({
width: XGA.width - 1,
height: HD.height + 1
})).toBe('vga');
expect((0, _resolution.getScreenType)({
width: XGA.width + 1,
height: HD.height + 1
})).toBe('vga');
expect((0, _resolution.getScreenType)({
width: HD.width - 1,
height: XGA.height - 1
})).toBe('vga');
// XGA
expect((0, _resolution.getScreenType)({
width: XGA.width + 1,
height: XGA.height + 1
})).toBe('xga');
expect((0, _resolution.getScreenType)({
width: HD.width - 1,
height: XGA.height + 1
})).toBe('xga');
// HD
expect((0, _resolution.getScreenType)({
width: HD.width + 1,
height: HD.height + 1
})).toBe('hd');
expect((0, _resolution.getScreenType)({
width: HD.width,
height: XGA.height
})).toBe('hd');
expect((0, _resolution.getScreenType)({
width: HD.width + 1,
height: XGA.height - 1
})).toBe('hd');
expect((0, _resolution.getScreenType)({
width: HD.width + 1,
height: XGA.height + 1
})).toBe('hd');
expect((0, _resolution.getScreenType)({
width: UWHD.width - 1,
height: UWHD.height - 1
})).toBe('hd');
expect((0, _resolution.getScreenType)({
width: UWHD.width + 1,
height: UWHD.height - 1
})).toBe('hd');
expect((0, _resolution.getScreenType)({
width: UWHD.width - 1,
height: UWHD.height + 1
})).toBe('hd');
expect((0, _resolution.getScreenType)({
width: UWUXGA.width - 1,
height: UWHD.height - 1
})).toBe('hd');
expect((0, _resolution.getScreenType)({
width: UWUXGA.width + 1,
height: UWHD.height - 1
})).toBe('hd');
expect((0, _resolution.getScreenType)({
width: FHD.width - 1,
height: FHD.height - 1
})).toBe('hd');
expect((0, _resolution.getScreenType)({
width: FHD.width - 1,
height: FHD.height + 1
})).toBe('hd');
// UWHD
expect((0, _resolution.getScreenType)({
width: UWHD.width + 1,
height: UWHD.height + 1
})).toBe('uw-hd');
expect((0, _resolution.getScreenType)({
width: UWUXGA.width - 1,
height: UWHD.height + 1
})).toBe('uw-hd');
expect((0, _resolution.getScreenType)({
width: UWUXGA.width + 1,
height: UWHD.height + 1
})).toBe('uw-hd');
expect((0, _resolution.getScreenType)({
width: FHD.width + 1,
height: FHD.height - 1
})).toBe('uw-hd');
expect((0, _resolution.getScreenType)({
width: UWUXGA.width - 1,
height: UWUXGA.height - 1
})).toBe('uw-hd');
expect((0, _resolution.getScreenType)({
width: UWUXGA.width + 1,
height: UWUXGA.height - 1
})).toBe('uw-hd');
// FHD
expect((0, _resolution.getScreenType)({
width: FHD.width + 1,
height: FHD.height + 1
})).toBe('fhd');
expect((0, _resolution.getScreenType)({
width: UWUXGA.width - 1,
height: UWUXGA.height + 1
})).toBe('fhd'); // {height: FHD.height + 1, width: UWUXGA.width - 1}
expect((0, _resolution.getScreenType)({
width: QHD.width - 1,
height: QHD.height - 1
})).toBe('fhd'); // {height: QHD.height - 1, width: UWUXGA.width - 1}
expect((0, _resolution.getScreenType)({
width: QHD.width - 1,
height: QHD.height + 1
})).toBe('fhd'); // {height: QHD.height + 1, width: UWUXGA.width - 1}
// UWUXGA
expect((0, _resolution.getScreenType)({
width: UWUXGA.width + 1,
height: UWUXGA.height + 1
})).toBe('uw-uxga'); // {height: FHD.height + 1, width: UWUXGA.width + 1}
expect((0, _resolution.getScreenType)({
width: QHD.width + 1,
height: QHD.height - 1
})).toBe('uw-uxga'); // {height: QHD.height - 1, width: UWUXGA.width + 1}
expect((0, _resolution.getScreenType)({
width: WQHD.width - 1,
height: WQHD.height - 1
})).toBe('uw-uxga'); // {height: QHD.height - 1, width: WQHD.width - 1}
expect((0, _resolution.getScreenType)({
width: WQHD.width + 1,
height: WQHD.height - 1
})).toBe('uw-uxga'); // {height: QHD.height - 1, width: WQHD.width + 1}
// QHD
expect((0, _resolution.getScreenType)({
width: QHD.width + 1,
height: QHD.height + 1
})).toBe('qhd'); // {height: QHD.height + 1, width: UWUXGA.width + 1}
expect((0, _resolution.getScreenType)({
width: WQHD.width - 1,
height: WQHD.height + 1
})).toBe('qhd'); // {height: QHD.height + 1, width: WQHD.width - 1}
// WQHD
expect((0, _resolution.getScreenType)({
width: WQHD.width + 1,
height: WQHD.height + 1
})).toBe('wqhd'); // {height: QHD.height + 1, width: WQHD.width + 1}
expect((0, _resolution.getScreenType)({
width: UHD.width - 1,
height: UHD.height - 1
})).toBe('wqhd');
expect((0, _resolution.getScreenType)({
width: UHD.width + 1,
height: UHD.height - 1
})).toBe('wqhd');
expect((0, _resolution.getScreenType)({
width: UHD.width - 1,
height: UHD.height + 1
})).toBe('wqhd');
expect((0, _resolution.getScreenType)({
width: WUHD.width - 1,
height: WUHD.height - 1
})).toBe('wqhd');
expect((0, _resolution.getScreenType)({
width: WUHD.width + 1,
height: WUHD.height - 1
})).toBe('wqhd');
expect((0, _resolution.getScreenType)({
width: UHD2.width - 1,
height: WUHD.height - 1
})).toBe('wqhd');
expect((0, _resolution.getScreenType)({
width: UHD2.width + 1,
height: WUHD.height - 1
})).toBe('wqhd');
// UHD
expect((0, _resolution.getScreenType)({
width: UHD.width + 1,
height: UHD.height + 1
})).toBe('uhd');
expect((0, _resolution.getScreenType)({
width: WUHD.width - 1,
height: WUHD.height + 1
})).toBe('uhd');
expect((0, _resolution.getScreenType)({
width: WUHD.width - 1,
height: UHD2.height - 1
})).toBe('uhd');
expect((0, _resolution.getScreenType)({
width: WUHD.width - 1,
height: UHD2.height + 1
})).toBe('uhd');
// WUHD
expect((0, _resolution.getScreenType)({
width: WUHD.width + 1,
height: WUHD.height + 1
})).toBe('wuhd');
expect((0, _resolution.getScreenType)({
width: WUHD.width + 1,
height: UHD2.height - 1
})).toBe('wuhd');
expect((0, _resolution.getScreenType)({
width: WUHD.width + 1,
height: UHD2.height + 1
})).toBe('wuhd');
expect((0, _resolution.getScreenType)({
width: UHD2.width - 1,
height: WUHD.height + 1
})).toBe('wuhd');
expect((0, _resolution.getScreenType)({
width: UHD2.width + 1,
height: WUHD.height + 1
})).toBe('wuhd');
expect((0, _resolution.getScreenType)({
width: UHD2.width - 1,
height: UHD2.height - 1
})).toBe('wuhd');
expect((0, _resolution.getScreenType)({
width: UHD2.width + 1,
height: UHD2.height - 1
})).toBe('wuhd');
expect((0, _resolution.getScreenType)({
width: UHD2.width - 1,
height: UHD2.height + 1
})).toBe('wuhd');
// UHD2
expect((0, _resolution.getScreenType)({
width: UHD2.width + 1,
height: UHD2.height + 1
})).toBe('uhd2');
});
test('should select screen type whose height and width are both bigger than or same with the screen if `matchSmallerScreenType` false', function () {
_resolution.config.matchSmallerScreenType = false;
// VGA
expect((0, _resolution.getScreenType)({
width: VGA.width - 1,
height: VGA.height - 1
})).toBe('vga');
// XGA
expect((0, _resolution.getScreenType)({
width: VGA.width + 1,
height: VGA.height - 1
})).toBe('xga');
expect((0, _resolution.getScreenType)({
width: VGA.width - 1,
height: VGA.height + 1
})).toBe('xga');
expect((0, _resolution.getScreenType)({
width: VGA.width + 1,
height: VGA.height + 1
})).toBe('xga');
expect((0, _resolution.getScreenType)({
width: XGA.width - 1,
height: XGA.height - 1
})).toBe('xga');
expect((0, _resolution.getScreenType)({
width: XGA.width,
height: HD.height
})).toBe('xga');
expect((0, _resolution.getScreenType)({
width: XGA.width - 1,
height: HD.height - 1
})).toBe('xga');
expect((0, _resolution.getScreenType)({
width: XGA.width - 1,
height: HD.height + 1
})).toBe('xga');
// HD
expect((0, _resolution.getScreenType)({
width: XGA.width + 1,
height: HD.height - 1
})).toBe('hd');
expect((0, _resolution.getScreenType)({
width: HD.width - 1,
height: HD.height - 1
})).toBe('hd');
// UWHD
expect((0, _resolution.getScreenType)({
width: UWHD.width - 1,
height: UWHD.height - 1
})).toBe('uw-hd');
expect((0, _resolution.getScreenType)({
width: XGA.width + 1,
height: XGA.height - 1
})).toBe('uw-hd');
expect((0, _resolution.getScreenType)({
width: XGA.width - 1,
height: XGA.height + 1
})).toBe('uw-hd');
expect((0, _resolution.getScreenType)({
width: XGA.width + 1,
height: XGA.height + 1
})).toBe('uw-hd');
expect((0, _resolution.getScreenType)({
width: HD.width,
height: XGA.height
})).toBe('uw-hd');
expect((0, _resolution.getScreenType)({
width: HD.width - 1,
height: XGA.height - 1
})).toBe('uw-hd');
expect((0, _resolution.getScreenType)({
width: HD.width + 1,
height: XGA.height - 1
})).toBe('uw-hd');
expect((0, _resolution.getScreenType)({
width: HD.width - 1,
height: XGA.height + 1
})).toBe('uw-hd');
expect((0, _resolution.getScreenType)({
width: HD.width + 1,
height: XGA.height + 1
})).toBe('uw-hd');
expect((0, _resolution.getScreenType)({
width: XGA.width + 1,
height: HD.height + 1
})).toBe('uw-hd');
expect((0, _resolution.getScreenType)({
width: HD.width + 1,
height: HD.height - 1
})).toBe('uw-hd');
expect((0, _resolution.getScreenType)({
width: HD.width - 1,
height: HD.height + 1
})).toBe('uw-hd');
expect((0, _resolution.getScreenType)({
width: HD.width + 1,
height: HD.height + 1
})).toBe('uw-hd');
expect((0, _resolution.getScreenType)({
width: HD.width + 1,
height: UWHD.height - 1
})).toBe('uw-hd');
// FHD
expect((0, _resolution.getScreenType)({
width: UWHD.width - 1,
height: UWHD.height + 1
})).toBe('fhd');
expect((0, _resolution.getScreenType)({
width: FHD.width - 1,
height: FHD.height - 1
})).toBe('fhd');
// UWUXGA
expect((0, _resolution.getScreenType)({
width: UWHD.width + 1,
height: UWHD.height - 1
})).toBe('uw-uxga');
expect((0, _resolution.getScreenType)({
width: UWHD.width + 1,
height: UWHD.height + 1
})).toBe('uw-uxga');
expect((0, _resolution.getScreenType)({
width: UWUXGA.width - 1,
height: UWHD.height - 1
})).toBe('uw-uxga');
expect((0, _resolution.getScreenType)({
width: UWUXGA.width - 1,
height: UWHD.height + 1
})).toBe('uw-uxga');
expect((0, _resolution.getScreenType)({
width: UWUXGA.width - 1,
height: UWUXGA.height - 1
})).toBe('uw-uxga'); // {height: FHD.height - 1, width: UWUXGA.width - 1}
expect((0, _resolution.getScreenType)({
width: FHD.width + 1,
height: FHD.height - 1
})).toBe('uw-uxga');
// QHD
expect((0, _resolution.getScreenType)({
width: UWUXGA.width - 1,
height: UWUXGA.height + 1
})).toBe('qhd'); // {height: FHD.height + 1, width: UWUXGA.width - 1}
expect((0, _resolution.getScreenType)({
width: QHD.width - 1,
height: QHD.height - 1
})).toBe('qhd'); // {height: QHD.height - 1, width: UWUXGA.width - 1}
expect((0, _resolution.getScreenType)({
width: FHD.width - 1,
height: FHD.height + 1
})).toBe('qhd');
expect((0, _resolution.getScreenType)({
width: FHD.width + 1,
height: FHD.height + 1
})).toBe('qhd');
// WQHD
expect((0, _resolution.getScreenType)({
width: UWUXGA.width + 1,
height: UWHD.height - 1
})).toBe('wqhd');
expect((0, _resolution.getScreenType)({
width: UWUXGA.width + 1,
height: UWHD.height + 1
})).toBe('wqhd');
expect((0, _resolution.getScreenType)({
width: UWUXGA.width + 1,
height: UWUXGA.height - 1
})).toBe('wqhd'); // {height: FHD.height - 1, width: UWUXGA.width + 1}
expect((0, _resolution.getScreenType)({
width: UWUXGA.width + 1,
height: UWUXGA.height + 1
})).toBe('wqhd'); // {height: FHD.height + 1, width: UWUXGA.width + 1}
expect((0, _resolution.getScreenType)({
width: QHD.width + 1,
height: QHD.height - 1
})).toBe('wqhd'); // {height: QHD.height - 1, width: UWUXGA.width + 1}
expect((0, _resolution.getScreenType)({
width: WQHD.width - 1,
height: WQHD.height - 1
})).toBe('wqhd'); // {height: QHD.height - 1, width: WQHD.width - 1}
// UHD
expect((0, _resolution.getScreenType)({
width: QHD.width - 1,
height: QHD.height + 1
})).toBe('uhd'); // {height: QHD.height + 1, width: UWUXGA.width - 1}
expect((0, _resolution.getScreenType)({
width: QHD.width + 1,
height: QHD.height + 1
})).toBe('uhd'); // {height: QHD.height + 1, width: UWUXGA.width + 1}
expect((0, _resolution.getScreenType)({
width: WQHD.width + 1,
height: WQHD.height - 1
})).toBe('uhd'); // {height: QHD.height - 1, width: WQHD.width + 1}
expect((0, _resolution.getScreenType)({
width: WQHD.width - 1,
height: WQHD.height + 1
})).toBe('uhd'); // {height: QHD.height + 1, width: WQHD.width - 1}
expect((0, _resolution.getScreenType)({
width: WQHD.width + 1,
height: WQHD.height + 1
})).toBe('uhd'); // {height: QHD.height + 1, width: WQHD.width + 1}
expect((0, _resolution.getScreenType)({
width: UHD.width - 1,
height: UHD.height - 1
})).toBe('uhd');
// WUHD
expect((0, _resolution.getScreenType)({
width: UHD.width + 1,
height: UHD.height - 1
})).toBe('wuhd');
expect((0, _resolution.getScreenType)({
width: WUHD.width - 1,
height: WUHD.height - 1
})).toBe('wuhd');
// UHD2
expect((0, _resolution.getScreenType)({
width: UHD.width - 1,
height: UHD.height + 1
})).toBe('uhd2');
expect((0, _resolution.getScreenType)({
width: UHD.width + 1,
height: UHD.height + 1
})).toBe('uhd2');
expect((0, _resolution.getScreenType)({
width: WUHD.width + 1,
height: WUHD.height - 1
})).toBe('uhd2');
expect((0, _resolution.getScreenType)({
width: WUHD.width - 1,
height: WUHD.height + 1
})).toBe('uhd2');
expect((0, _resolution.getScreenType)({
width: WUHD.width + 1,
height: WUHD.height + 1
})).toBe('uhd2');
expect((0, _resolution.getScreenType)({
width: WUHD.width - 1,
height: UHD2.height - 1
})).toBe('uhd2');
expect((0, _resolution.getScreenType)({
width: WUHD.width + 1,
height: UHD2.height - 1
})).toBe('uhd2');
expect((0, _resolution.getScreenType)({
width: UHD2.width - 1,
height: WUHD.height - 1
})).toBe('uhd2');
expect((0, _resolution.getScreenType)({
width: UHD2.width - 1,
height: WUHD.height + 1
})).toBe('uhd2');
expect((0, _resolution.getScreenType)({
width: UHD2.width - 1,
height: UHD2.height - 1
})).toBe('uhd2');
// if width or height of screen is bigger than the biggest screen type, select the biggest screen type
expect((0, _resolution.getScreenType)({
width: WUHD.width - 1,
height: UHD2.height + 1
})).toBe('uhd2');
expect((0, _resolution.getScreenType)({
width: WUHD.width + 1,
height: UHD2.height + 1
})).toBe('uhd2');
expect((0, _resolution.getScreenType)({
width: UHD2.width + 1,
height: WUHD.height - 1
})).toBe('uhd2');
expect((0, _resolution.getScreenType)({
width: UHD2.width + 1,
height: WUHD.height + 1
})).toBe('uhd2');
expect((0, _resolution.getScreenType)({
width: UHD2.width + 1,
height: UHD2.height - 1
})).toBe('uhd2');
expect((0, _resolution.getScreenType)({
width: UHD2.width - 1,
height: UHD2.height + 1
})).toBe('uhd2');
expect((0, _resolution.getScreenType)({
width: UHD2.width + 1,
height: UHD2.height + 1
})).toBe('uhd2');
});
});
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);
});
// NOTE: Currently tough to test selectSrc because it relies on a global variable for screenType
test.skip('should select source for the current screen type', function () {});
});