principles-ui-components
Version:
Supporting UI controller for Tizen TV web application, which developed base on React Framework.
205 lines (163 loc) • 7.02 kB
JavaScript
import React, { Component }from 'react';
import {shallow, mount} from 'enzyme';
import VMultiLineList from '../UI_Component/VMultiLineList';
import PressFeedback from '../UI_Component/common/PressFeedback';
import { KEY } from '../UI_Component/common/CommonDefine';
const data = []; // temp value, otherwise, global value will changed, then componentshouldupdate check failed.s
let count = 0;
while (count < 100) {
const OSD = {
layout: {
l: 0,
t: 0,
w: 285,
h: 370,
},
image: [
{
l: 0,
t: 0,
w: 285,
h: 285,
url: 'https://u.scdn.co/images/pl/default/e714636cd9f486a6e5e83339893ced444efb6035',
},
],
icon: [
{
l: 6,
t: 8 + 285,
w: 66,
h: 66,
url: 'http://leisure.365jia.cn/uploads/news/folder_1890096/images/61ae2731fecad69152c10561963e27de.jpg',
},
],
text: [
{
l: 80,
t: 8 + 285,
w: 195,
h: 40,
fontSize: 26,
fontSizel: 32,
fontType: 'SamsungOneGui_600',
textAlign: 'left',
verticalAlign: 'middle',
scrollGap: 60,
text: `Title ${count}`,
},
{
l: 80,
t: 48 + 285,
w: 195,
h: 28,
fontSize: 20,
fontSizel: 24,
fontType: 'SamsungOneGui_400',
textAlign: 'left',
verticalAlign: 'middle',
scrollGap: 60,
text: 'subTitle',
},
],
progress: {
l: 6,
t: 275,
w: 273,
h: 3,
rate: 10,
},
};
data.push(OSD);
count += 1;
}
describe ('<VMultiLineList />', () => {
it ('VMultiLineList unit test, move focus in line', () => {
const listWrapper = mount(<VMultiLineList countPerRow={5} OSD={data.slice(0,19)} layout={{ l: 0, t: 120, w: 1920, h: 960 }}/>);
expect(listWrapper.props().countPerRow).toBe(5);
const onFocusChanged = jest.fn();
listWrapper.setProps({onFocusChanged: onFocusChanged, ttsEnable:true});
const listInst = listWrapper.instance();
expect(listInst).toBeInstanceOf(VMultiLineList);
listInst.keyFocusIn();
listInst.handleKey({keyCode: KEY.LEFT}); // left border
listInst.handleKey({keyCode: KEY.RIGHT});
listInst.handleKey({keyCode: KEY.LEFT});
expect(onFocusChanged).toHaveBeenCalled();
listInst.focusedIdx={index: 4, row: 0, column: 4 } // right border
listInst.handleKey({keyCode: KEY.RIGHT});
listInst.focusedIdx={index: 18, row: 3, column: 3 } // list end
listInst.handleKey({keyCode: KEY.RIGHT});
listWrapper.setProps({OSD: data.slice(0,4)});
expect(listWrapper.props().OSD.length).toBe(4);
listInst.focusedIdx={index: 3, row: 0, column: 3 } // list end
listInst.handleKey({keyCode: KEY.RIGHT});
listWrapper.unmount();
});
it ('VMultiLineList unit test, move focus between line', () => {
const listWrapper = mount(<VMultiLineList countPerRow={5} OSD={data.slice(0,39)} layout={{ l: 0, t: 120, w: 1920, h: 960 }}/>);
const listInst = listWrapper.instance();
expect(listInst).toBeInstanceOf(VMultiLineList);
listInst.keyFocusIn();
listInst.handleKey({keyCode: KEY.UP}); // up border
listInst.handleKey({keyCode: KEY.DOWN});
listInst.handleKey({keyCode: KEY.DOWN});
listInst.handleKey({keyCode: KEY.DOWN}); //offset == 0
listInst.focusedIdx={index: 10, row: 2, column: 0 };//normal translation
listInst.handleKey({keyCode: KEY.DOWN});
listInst.handleKey({keyCode: KEY.UP});
listInst.handleKey({keyCode: KEY.UP});
listInst.focusedIdx={index: 5, row: 1, column: 0 }; // down start offset ==0
listInst.handleKey({keyCode: KEY.DOWN});
listInst.focusedIdx={index: 34, row: 6, column: 4 }; // right border
listInst.handleKey({keyCode: KEY.DOWN});
listInst.focusedIdx={index: 35, row: 7, column: 0 }; // bottom border
listInst.handleKey({keyCode: KEY.DOWN});
listInst.focusedIdx={index: 30, row: 6, column: 0 }; // up start offset == list row - 2* buffer
listInst.handleKey({keyCode: KEY.UP});
listWrapper.setProps({ buffer: 2, layout:{ l: 0, t: 120, w: 1920, h: 480 }}); //offset < 0
listInst.focusedIdx={index: 0, row: 0, column: 0 };
listInst.handleKey({keyCode: KEY.DOWN});
listWrapper.unmount();
});
it ('VMultiLineList unit test, highcontrast and enlarge', () => {
const listWrapper = mount(<VMultiLineList countPerRow={5} OSD={data} layout={{ l: 0, t: 120, w: 1920, h: 960 }}/>);
listWrapper.setProps({highContrast: true});
listWrapper.setProps({enlarge: true});
listWrapper.setProps({ttsEnable: true});
listWrapper.setProps({scrollBarEnable: false});
listWrapper.unmount();
});
it ('VMultiLineList unit test, enter and return', () => {
const listWrapper = mount(<VMultiLineList countPerRow={5} OSD={data} layout={{ l: 0, t: 120, w: 1920, h: 960 }}/>);
const onItemPress = jest.fn();
listWrapper.setProps({onItemPress:onItemPress});
const listInst = listWrapper.instance();
listInst.keyFocusIn();
listInst.handleKey({keyCode: KEY.ENTER});
const feedbackWrapper = mount(<PressFeedback start={false}/>);
feedbackWrapper.setProps({start: true, animationDoneCB:listInst.enterCB});
const feedbackInst = feedbackWrapper.instance();
const e ={target: 'div', currentTarget: 'div', type: 'animationend', preventDefault: jest.fn()};
feedbackInst.animationDone(e);
expect(onItemPress).toHaveBeenCalled();
listInst.handleKey({keyCode: KEY.RETURN});
listWrapper.unmount();
feedbackWrapper.unmount();
});
it ('VMultiLineList unit test, API', () => {
const listWrapper = mount(<VMultiLineList countPerRow={5} OSD={data} layout={{ l: 0, t: 120, w: 1920, h: 960 }}/>);
const listInst = listWrapper.instance();
const onGridFocus = jest.fn();
listWrapper.setProps({onGridFocus:onGridFocus});
listInst.handleKey({keyCode: KEY.UP}); // up border
listInst.keyFocusIn();
listInst.keyFocusIn();
expect(onGridFocus).toHaveBeenCalled();
listInst.keyFocusOut();
listInst.keyFocusOut();
const elem = {offsetLeft:1, offsetTop: 2, offsetParent:null};
const reValue = listInst.getElementPos(elem);
expect(reValue).toEqual({x:1, y: 2});
listWrapper.unmount();
});
});