mirror of
https://github.com/hiloteam/Hilo.git
synced 2025-12-08 20:35:59 +00:00
c0f2ccf92c
* feat: test add macaca-reporter * fix: get screenshot name in util * fix: optimize empty image * fix: update macaca-reporter * fix: test:reporter * fix: use test * fix: add log * fix: debug reporter * fix: add debug log * fix: only test * fix: add log * fix: add log * fix: add log * fix: add only * fix: add e.stack * fix: require * fix: debug log * fix: add reporter
720 lines
26 KiB
JavaScript
720 lines
26 KiB
JavaScript
var needTestRenderTypes = window._IS_TRAVIS?['canvas']:['canvas', 'dom', 'webgl'];
|
|
needTestRenderTypes.forEach(function(stageRenderType){
|
|
|
|
describe('view:' + stageRenderType, function() {
|
|
var stage, ticker;
|
|
var stageElem = document.getElementById('stage');
|
|
beforeEach('init stage', function() {
|
|
stage = new Hilo.Stage({
|
|
container:stageElem,
|
|
renderType:stageRenderType,
|
|
width:600,
|
|
height:480
|
|
});
|
|
ticker = new Hilo.Ticker(60);
|
|
ticker.addTick(stage);
|
|
ticker.start();
|
|
});
|
|
|
|
afterEach('destroy stage', function() {
|
|
ticker.removeTick(stage);
|
|
ticker.stop();
|
|
if(stage.drawable && stage.drawable.domElement && stage.drawable.domElement.parentNode){
|
|
stage.drawable.domElement.parentNode.removeChild(stage.drawable.domElement);
|
|
}
|
|
else if(stage.canvas && stage.canvas.parentNode){
|
|
stage.canvas.parentNode.removeChild(stage.canvas);
|
|
}
|
|
stage = null;
|
|
ticker = null;
|
|
});
|
|
|
|
describe('Bitmap', function() {
|
|
var bmp, btnImage;
|
|
beforeEach('init bitmap', function(done){
|
|
utils.loadImage('images/btn.png', function(img){
|
|
btnImage = img;
|
|
bmp = new Hilo.Bitmap({
|
|
image: img,
|
|
rect:[0, 64, 64, 64]
|
|
}).addTo(stage);
|
|
done();
|
|
});
|
|
});
|
|
|
|
afterEach(function(done) {
|
|
utils.screenshot(done, this);
|
|
});
|
|
|
|
it('new', function(done){
|
|
utils.diffWithScreenshot('Bitmap-new', done);
|
|
});
|
|
|
|
it('transform', function(done){
|
|
bmp.x = stage.width * .5;
|
|
bmp.y = stage.height * .5;
|
|
bmp.pivotX = bmp.width * .4;
|
|
bmp.pivotY = bmp.height * .6;
|
|
bmp.scaleX = 0.5;
|
|
bmp.scaleY = -2;
|
|
bmp.rotation = 30;
|
|
if(stageRenderType === 'dom'){
|
|
utils.diffWithScreenshot('Bitmap-transform-dom', done);
|
|
}
|
|
else{
|
|
utils.diffWithScreenshot('Bitmap-transform', done);
|
|
}
|
|
});
|
|
|
|
it('alpha', function(done){
|
|
bmp.x = stage.width * .5;
|
|
bmp.y = stage.height * .5;
|
|
bmp.alpha = 0.5;
|
|
utils.diffWithScreenshot('Bitmap-alpha', done);
|
|
});
|
|
|
|
it('setImage', function(done){
|
|
utils.loadImage('images/fish.png', function(img){
|
|
bmp.setImage(img, [0, 0, 174, 126]);
|
|
utils.diffWithScreenshot('Bitmap-setImage', done);
|
|
});
|
|
});
|
|
|
|
it('new Bitmap and setImage', function(){
|
|
var bmp = new Hilo.Bitmap();
|
|
bmp.setImage(btnImage);
|
|
bmp.width.should.equal(256);
|
|
bmp.height.should.equal(128);
|
|
});
|
|
});
|
|
|
|
describe('BitmapText', function() {
|
|
var text;
|
|
beforeEach('init bitmapText', function(done){
|
|
utils.loadImage('images/num.png', function(textImage){
|
|
text = new Hilo.BitmapText({
|
|
glyphs:Hilo.BitmapText.createGlyphs("0123456789 ", textImage),
|
|
y:0,
|
|
x:stage.width * .5,
|
|
letterSpacing:10
|
|
});
|
|
text.setText('967542 2');
|
|
stage.addChild(text);
|
|
done();
|
|
});
|
|
});
|
|
|
|
afterEach(function(done) {
|
|
utils.screenshot(done, this);
|
|
});
|
|
|
|
it('setText', function(done){
|
|
text.setText('1234567');
|
|
utils.diffWithScreenshot('BitmapText-new', done);
|
|
});
|
|
|
|
it('textAlign center', function(done){
|
|
text.setTextAlign('center');
|
|
utils.diffWithScreenshot('BitmapText-center', done);
|
|
});
|
|
|
|
it('textAlign left', function(done){
|
|
text.setTextAlign('left');
|
|
utils.diffWithScreenshot('BitmapText-left', done);
|
|
});
|
|
|
|
it('textAlign right', function(done){
|
|
text.setTextAlign('right');
|
|
utils.diffWithScreenshot('BitmapText-right', done);
|
|
});
|
|
});
|
|
|
|
describe('Button', function() {
|
|
var button;
|
|
beforeEach('init button', function(){
|
|
button = new Hilo.Button({
|
|
image: 'images/btn.png',
|
|
width: 64,
|
|
height: 64,
|
|
upState: {rect:[0, 0, 64, 64]},
|
|
overState: {rect:[64, 0, 64, 64]},
|
|
downState: {rect:[128, 0, 64, 64]},
|
|
disabledState: {rect:[192, 0, 64, 64]},
|
|
}).addTo(stage);
|
|
});
|
|
|
|
afterEach(function(done) {
|
|
utils.screenshot(done, this);
|
|
});
|
|
|
|
it('upState', function(done){
|
|
button.fire('mouseout');
|
|
button.state.should.equal(Hilo.Button.UP);
|
|
utils.diffWithScreenshot('Button-upState', done);
|
|
});
|
|
|
|
it('overState', function(done){
|
|
button.fire('mouseover');
|
|
button.state.should.equal(Hilo.Button.OVER);
|
|
utils.diffWithScreenshot('Button-overState', done);
|
|
});
|
|
|
|
it('downState', function(done){
|
|
button.fire('mousedown');
|
|
button.state.should.equal(Hilo.Button.DOWN);
|
|
utils.diffWithScreenshot('Button-downState', done);
|
|
});
|
|
|
|
it('disabledState', function(done){
|
|
button.setEnabled(false);
|
|
button.state.should.equal(Hilo.Button.DISABLED);
|
|
button.pointerEnabled.should.be.false();
|
|
utils.diffWithScreenshot('Button-disabledState', done);
|
|
});
|
|
});
|
|
|
|
describe('Container', function() {
|
|
var container;
|
|
beforeEach('init container', function(){
|
|
container = new Hilo.Container();
|
|
});
|
|
|
|
afterEach(function(done) {
|
|
utils.screenshot(done, this);
|
|
});
|
|
|
|
it('getNumChildren', function(){
|
|
container.getNumChildren().should.equal(0);
|
|
container.addChild(new Hilo.View);
|
|
container.getNumChildren().should.equal(1);
|
|
});
|
|
|
|
it('addChildAt & removeChildAt & setChildIndex & getChildIndex', function(){
|
|
var v1 = new Hilo.View;
|
|
var v2 = new Hilo.View;
|
|
var v3 = new Hilo.View;
|
|
|
|
//container:v1
|
|
container.addChildAt(v1, 0);
|
|
container.getChildIndex(v1).should.equal(0);
|
|
|
|
//container:v1 v2
|
|
container.addChildAt(v2, 1);
|
|
container.getChildIndex(v2).should.equal(1);
|
|
|
|
//container:v1 v3 v2
|
|
container.addChildAt(v3, 1);
|
|
container.getChildIndex(v3).should.equal(1);
|
|
|
|
//container:v3 v2 v1
|
|
container.setChildIndex(v1, 2);
|
|
container.getChildIndex(v1).should.equal(2);
|
|
|
|
//container:v1 v3 v2
|
|
container.setChildIndex(v1, 0);
|
|
container.getChildIndex(v1).should.equal(0);
|
|
|
|
//container:v1 v2
|
|
container.removeChildAt(1);
|
|
(v3.parent == null).should.be.true();
|
|
|
|
//container:v2
|
|
container.removeChildAt(0);
|
|
(v1.parent == null).should.be.true();
|
|
|
|
//container
|
|
container.removeChildAt(0);
|
|
(v2.parent == null).should.be.true();
|
|
});
|
|
|
|
it('removeAllChildren', function(){
|
|
container.addChild(new Hilo.View);
|
|
container.addChild(new Hilo.View);
|
|
container.addChild(new Hilo.View);
|
|
|
|
container.getNumChildren().should.equal(3);
|
|
container.removeAllChildren();
|
|
container.getNumChildren().should.equal(0);
|
|
});
|
|
|
|
it('getChildById & removeChildById', function(){
|
|
var v = new Hilo.View({id:'view1'});
|
|
container.addChild(v);
|
|
container.getChildById('view1').should.equal(v);
|
|
container.removeChildById('view1');
|
|
(v.parent == null).should.be.true();
|
|
});
|
|
|
|
it('swapChildren & swapChildrenAt & sortChildren', function(){
|
|
container.addChild(new Hilo.View({id:'v1', x:3}));
|
|
container.addChild(new Hilo.View({id:'v2', x:2}));
|
|
container.addChild(new Hilo.View({id:'v3', x:1}));
|
|
|
|
//container:v3 v2 v1
|
|
container.swapChildren(container.getChildById('v1'), container.getChildById('v3'));
|
|
container.children[0].id.should.equal('v3');
|
|
container.children[2].id.should.equal('v1');
|
|
|
|
//container:v2 v3 v3
|
|
container.swapChildrenAt(0, 1);
|
|
container.children[0].id.should.equal('v2');
|
|
container.children[1].id.should.equal('v3');
|
|
|
|
//container:v1 v2 v3
|
|
container.sortChildren('x');
|
|
container.children[0].id.should.equal('v1');
|
|
container.children[1].id.should.equal('v2');
|
|
container.children[2].id.should.equal('v3');
|
|
|
|
});
|
|
|
|
it('contains', function(){
|
|
var v = new Hilo.View;
|
|
container.contains(v).should.be.false();
|
|
container.addChild(v);
|
|
container.contains(v).should.be.true();
|
|
});
|
|
|
|
it('getViewAtPoint', function(){
|
|
var view = new Hilo.View({
|
|
x:10,
|
|
y:20,
|
|
width:200,
|
|
height:200,
|
|
pointerEnabled:false
|
|
});
|
|
container.addChild(view);
|
|
|
|
container.getViewAtPoint(15, 20).should.equal(view);
|
|
(container.getViewAtPoint(15, 20, false, false, true) == null).should.be.true();
|
|
});
|
|
});
|
|
|
|
describe('DOMElement', function() {
|
|
|
|
afterEach(function(done) {
|
|
utils.screenshot(done, this);
|
|
});
|
|
|
|
it('new', function(done){
|
|
var yellowRect = new Hilo.DOMElement({
|
|
id: 'yellowRect',
|
|
element: Hilo.createElement('div', {
|
|
style: {
|
|
backgroundColor: '#ff0',
|
|
position: 'absolute'
|
|
}
|
|
}),
|
|
width: 100,
|
|
height: 100,
|
|
x: 80,
|
|
y: 100,
|
|
rotation:30,
|
|
scaleX:0.5
|
|
}).addTo(stage);
|
|
|
|
utils.diffWithScreenshot('DOMElement-new', function(error){
|
|
yellowRect.removeFromParent();
|
|
done(error);
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('Drawable', function() {
|
|
|
|
afterEach(function(done) {
|
|
utils.screenshot(done, this);
|
|
});
|
|
|
|
it('isDrawable', function(){
|
|
Hilo.Drawable.isDrawable(new Image).should.be.true();
|
|
Hilo.Drawable.isDrawable(document.createElement('canvas')).should.be.true();
|
|
Hilo.Drawable.isDrawable(document.createElement('video')).should.be.true();
|
|
Hilo.Drawable.isDrawable(document.createElement('div')).should.be.false();
|
|
});
|
|
|
|
var btnImg;
|
|
before('load image', function(done){
|
|
utils.loadImage('images/btn.png', function(img){
|
|
btnImg = img;
|
|
done();
|
|
});
|
|
});
|
|
it('drawable rect should equal image rect', function(){
|
|
var drawable = new Hilo.Drawable(btnImg);
|
|
drawable.rect.should.eql([0, 0, 256, 128]);
|
|
|
|
drawable = new Hilo.Drawable({
|
|
image:btnImg
|
|
});
|
|
drawable.rect.should.eql([0, 0, 256, 128]);
|
|
});
|
|
|
|
it('when image is string should load image', function(done){
|
|
var drawable = new Hilo.Drawable({
|
|
image:'images/btn.png'
|
|
});
|
|
//hack for load image callback
|
|
setTimeout(function(){
|
|
try{
|
|
drawable.rect.should.eql([0, 0, 256, 128]);
|
|
done();
|
|
}
|
|
catch(e){
|
|
done(e);
|
|
}
|
|
}, 500);
|
|
});
|
|
});
|
|
|
|
describe('Graphics', function() {
|
|
var graphics;
|
|
beforeEach('init graphics', function() {
|
|
graphics = new Hilo.Graphics({
|
|
width:stage.width,
|
|
height:stage.height
|
|
});
|
|
stage.addChild(graphics);
|
|
});
|
|
|
|
afterEach(function(done) {
|
|
utils.screenshot(done, this);
|
|
});
|
|
|
|
it('drawRect', function(done){
|
|
graphics.lineStyle(1, "#009898").beginFill("#0ff").drawRect(0.5, 0.5, 99, 99).endFill();
|
|
utils.diffWithScreenshot('Graphics-drawRect', done);
|
|
});
|
|
|
|
it('drawRoundRect', function(done){
|
|
graphics.lineStyle(10, "#009898").beginFill("#0ff").drawRoundRect(5, 5, 90, 90, 20).endFill();
|
|
utils.diffWithScreenshot('Graphics-drawRoundRect', done);
|
|
});
|
|
|
|
it('drawCircle & beginRadialGradientFill', function(done){
|
|
graphics.lineStyle(2, "#009898").beginRadialGradientFill(50, 50, 0, 50, 50, 50, ["#fff", "#4ffcfc"], [0, 1]).drawCircle(2, 2, 48).endFill();
|
|
utils.diffWithScreenshot('Graphics-circle-beginRadialGradientFill', done);
|
|
});
|
|
|
|
it('drawEllipse', function(done){
|
|
graphics.lineStyle(5, "#009898").beginFill("#0ff").drawEllipse(5, 5, 90, 50).endFill();
|
|
utils.diffWithScreenshot('Graphics-drawEllipse', done);
|
|
});
|
|
|
|
it('drawRect & beginLinearGradientFill', function(done){
|
|
graphics.lineStyle(2, "#009898").beginLinearGradientFill(0, 0, 60, 0, ["#fff", "#4ffcfc"], [0.3, 1]).drawRect(2, 2, 66, 86).endFill();
|
|
utils.diffWithScreenshot('Graphics-drawRect-beginLinearGradientFill', done);
|
|
});
|
|
|
|
it('drawSVGPath', function(done){
|
|
var svgPath = "M53 84 C53 84 51 84 51 84 C51 89 53 94 56 94 C64 94 71 89 71 84 C71 72 64 64 56 64 C42 64 31 72 31 84 C31 100 42 114 56 114 C75 114 91 100 91 84 C91 61 75 44 56 44 C31 44 11 61 11 84 C11 111 31 134 56 134 C86 134 111 111 111 84 C111 50 86 24 56 24";
|
|
graphics.lineStyle(4, "#02d1d1").drawSVGPath(svgPath).closePath().endFill();
|
|
utils.diffWithScreenshot('Graphics-drawSVGPath', done);
|
|
});
|
|
|
|
!window._IS_TRAVIS && it('drawSVGPath2', function(done){
|
|
var svgPaths = ['M357.5,249.9c-1.8 -2.4-9,-7.5-18.7,3.9c-9.7,11.3-2.6,17.2-2.6,17.2s6.2,5.4,17-2.7 C364.1,260.2,359.3,252.3,357.5,249.9z M83.2,324.8l69.8-6.9c6.8-0.6,37.5,0.5,44.2,1.6l16.2,2.8l8.9-17.6c-80.7,8.4-145.2,0-145.2,0 C79.5,309.2,82,316.2,83.2,324.8zM347.6,183.9c0,0-27.5-0.3-58.4,17.5c-7.9,4.6-14.4,11.2-19.2,18.9 c-17.5,28.8-64.6,108.4-80.5,158.4c-19.7,61.9,53.4,30,74.1,21.6c0,0-74.5,29.5-44.5-39.4s63.3-135.5,83.4-150.9 S337.4,187.3,347.6,183.9zM96.2,216c0,0,36.2,4.4,66-3.4l1.9,4.5c0,0-104.8,176.9-106.6,190.8c0,0-14.6-3.9-36.4,8.2 c0,0,63.1-81.6,104.8-170c0,0,13.1-23.9-5.7-22.8c0,0-5.3,0-21.6,0.5L96.2,216z M453.5,365.4c0,0-135.6,114.4-51.9-38.7l17.1-26.6c0,0,166.2-114.7,147.7-184.6c0,0-15.4-8.1-46.8,15.2c-14.5,10.8-26.8,24.2-36.8,39.3c-25.5,38.7-92.2,140.9-118.8,192.4c0,0-131.1,114.1-39-38.3 c0,0,5.9-25.1-16,0c-21.9,25.1-33.8,52-37.5,66.4c-3.8,14.4,8.3,60,88.5-16.2c0,0-17.1,33.4,2.7,40.3c30.2,6.7,48.8,3.4,83.8-35.3 c0,0-10,24.4-0.6,31.9s40.6,16.2,80.6-60.6S478.5,324.1,453.5,365.4z M545.3,128.5c0,0,24.4,55.6-123.1,159.4 C422.2,287.9,506,134.1,545.3,128.5z M488.5,397.2c-5.6,4.5-11.8,6.7-16.6,7.8c-4.3,0.9-8.4-2.5-8-6.9c4.7-52.2,37.7-70,51.8-75.2 c3.1-1.1,6.2,1.4,5.8,4.6C517.8,360.5,503.3,385.3,488.5,397.2z', 'M10 10 H 90 V 90 H 10 L 10 10', 'M10 10 H 90 V 90 H 10Z', 'M10 10 h 80 v 80 h -80 Z', 'M10 10 C 20 20, 40 20, 50 10', 'M70 10 C 70 20, 120 20, 120 10', 'M130 10 C 120 20, 180 20, 170 10', 'M10 60 C 20 80, 40 80, 50 60', 'M70 60 C 70 80, 110 80, 110 60', 'M130 60 C 120 80, 180 80, 170 60', 'M10 110 C 20 140, 40 140, 50 110', 'M70 110 C 70 140, 110 140, 110 110', 'M130 110 C 120 140, 180 140, 170 110', 'M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80', 'M10 80 Q 95 10 180 80', 'M10 80 Q 52.5 10, 95 80 T 180 80'];
|
|
var w = 100;
|
|
var h = 40;
|
|
svgPaths.forEach(function(svgPath, index){
|
|
var x = (index-1) % 3 * w;
|
|
var y = Math.floor((index-1) / 3) * h;
|
|
var g = new Hilo.Graphics({width:300, height:300, x:x, y:y});
|
|
if(index === 0){
|
|
g.width = 600;
|
|
g.height = 600;
|
|
g.x = g.y = 0;
|
|
g.beginFill("#eb6057", 1);
|
|
}
|
|
else{
|
|
g.lineStyle(3, "#69f");
|
|
}
|
|
g.drawSVGPath(svgPath).endFill().addTo(stage);
|
|
});
|
|
utils.diffWithScreenshot('Graphics-drawSVGPath2', done);
|
|
});
|
|
});
|
|
|
|
describe('Sprite', function() {
|
|
var atlas, sprite;
|
|
beforeEach('init atlas', function(done){
|
|
utils.loadImage('images/fish.png', function(img){
|
|
atlas = new Hilo.TextureAtlas({
|
|
image: img,
|
|
width: 174,
|
|
height: 1512,
|
|
frames: {
|
|
frameWidth: 174,
|
|
frameHeight: 126,
|
|
numFrames: 12
|
|
},
|
|
sprites: {
|
|
fish: {from:0, to:7}
|
|
}
|
|
});
|
|
sprite = new Hilo.Sprite({
|
|
frames: atlas.getSprite('fish')
|
|
});
|
|
stage.addChild(sprite);
|
|
done();
|
|
});
|
|
});
|
|
|
|
afterEach(function(done) {
|
|
utils.screenshot(done, this);
|
|
});
|
|
|
|
it('goto frame 1 should work', function(done){
|
|
sprite.goto(1, true);
|
|
utils.diffWithScreenshot('Sprite-goto-frame1', done);
|
|
});
|
|
|
|
it('goto frame 7 should work', function(done){
|
|
sprite.goto(7, true);
|
|
utils.diffWithScreenshot('Sprite-goto-frame7', done);
|
|
});
|
|
});
|
|
|
|
describe('Stage', function() {
|
|
afterEach(function(done) {
|
|
utils.screenshot(done, this);
|
|
});
|
|
|
|
it('enableDOMEvent', function(done){
|
|
stage.enableDOMEvent('click');
|
|
|
|
var timeoutId = setTimeout(function(){
|
|
done(new Error('stage.enableDOMEvent not work'));
|
|
}, 100);
|
|
|
|
stage.on('click', function(){
|
|
clearTimeout(timeoutId);
|
|
done();
|
|
});
|
|
utils.click(stage.canvas);
|
|
});
|
|
|
|
it('updateViewport', function(){
|
|
stageElem.style.left = '10px';
|
|
stageElem.style.marginTop = '20px';
|
|
stage.updateViewport().should.eql({left:10, top:20, width:600, height:480});
|
|
stageElem.style.left = '';
|
|
stageElem.style.marginTop = '';
|
|
});
|
|
|
|
it('resize', function(){
|
|
if(stageRenderType !== 'dom'){
|
|
stage.canvas.width.should.equal(600);
|
|
stage.canvas.height.should.equal(480);
|
|
stage.canvas.style.width.should.equal('600px');
|
|
stage.canvas.style.height.should.equal('480px');
|
|
stage.viewport.should.eql({left:0, top:0, width:600, height:480});
|
|
|
|
stage.resize(400, 300);
|
|
stage.canvas.width.should.equal(400);
|
|
stage.canvas.height.should.equal(300);
|
|
stage.canvas.style.width.should.equal('400px');
|
|
stage.canvas.style.height.should.equal('300px');
|
|
stage.viewport.should.eql({left:0, top:0, width:400, height:300});
|
|
|
|
stage.scaleX = 0.5;
|
|
stage.scaleY = 2;
|
|
stage.tick(0);
|
|
stage.canvas.width.should.equal(400);
|
|
stage.canvas.height.should.equal(300);
|
|
stage.canvas.style.width.should.equal('200px');
|
|
stage.canvas.style.height.should.equal('600px');
|
|
stage.viewport.should.eql({left:0, top:0, width:200, height:600});
|
|
|
|
stage.resize(300, 200);
|
|
stage.canvas.width.should.equal(300);
|
|
stage.canvas.height.should.equal(200);
|
|
stage.canvas.style.width.should.equal('150px');
|
|
stage.canvas.style.height.should.equal('400px');
|
|
stage.viewport.should.eql({left:0, top:0, width:150, height:400});
|
|
}
|
|
});
|
|
|
|
it('canvasRenderer', function(){
|
|
var stage = new Hilo.Stage({
|
|
container:document.body,
|
|
renderType:'canvas'
|
|
});
|
|
stage.renderer.should.instanceOf(Hilo.CanvasRenderer);
|
|
|
|
var stage = new Hilo.Stage({
|
|
container:document.body,
|
|
canvas:document.createElement('canvas')
|
|
});
|
|
stage.renderer.should.instanceOf(Hilo.CanvasRenderer);
|
|
});
|
|
|
|
it('domRenderer', function(){
|
|
var stage = new Hilo.Stage({
|
|
container:document.body,
|
|
renderType:'dom'
|
|
});
|
|
stage.renderer.should.instanceOf(Hilo.DOMRenderer);
|
|
|
|
var stage = new Hilo.Stage({
|
|
container:document.body,
|
|
canvas:document.createElement('div')
|
|
});
|
|
stage.renderer.should.instanceOf(Hilo.DOMRenderer);
|
|
});
|
|
|
|
it('webglRender', function(){
|
|
var stage = new Hilo.Stage({
|
|
container:document.createElement('div'),
|
|
renderType:'webgl'
|
|
});
|
|
|
|
if(Hilo.WebGLRenderer.isSupport()){
|
|
stage.renderer.should.instanceOf(Hilo.WebGLRenderer);
|
|
}
|
|
else{
|
|
stage.renderer.should.instanceOf(Hilo.CanvasRenderer);
|
|
}
|
|
|
|
var stage = new Hilo.Stage({
|
|
container:document.createElement('div'),
|
|
renderType:'webgl'
|
|
});
|
|
|
|
if(Hilo.WebGLRenderer.isSupport()){
|
|
stage.renderer.should.instanceOf(Hilo.WebGLRenderer);
|
|
}
|
|
else{
|
|
stage.renderer.should.instanceOf(Hilo.CanvasRenderer);
|
|
}
|
|
});
|
|
});
|
|
|
|
describe.skip('Text', function() {
|
|
afterEach(function(done) {
|
|
utils.screenshot(done, this);
|
|
});
|
|
|
|
it('new', function(done){
|
|
var text = new Hilo.Text({
|
|
font: '14px arial',
|
|
text: 'hello world!',
|
|
lineSpacing: 0,
|
|
width: 250,
|
|
height: 100,
|
|
x: 40,
|
|
y: 50
|
|
}).addTo(stage);
|
|
utils.diffWithScreenshot('Text-new', done);
|
|
});
|
|
});
|
|
|
|
describe('View', function() {
|
|
var view;
|
|
beforeEach(function() {
|
|
view = new Hilo.View({
|
|
width:600,
|
|
height:300,
|
|
scaleX:0.5,
|
|
scaleY:0.2
|
|
});
|
|
});
|
|
|
|
afterEach(function(done) {
|
|
utils.screenshot(done, this);
|
|
});
|
|
|
|
it('getStage', function() {
|
|
stage.addChild(view);
|
|
view.getStage().should.equal(stage);
|
|
|
|
var container = new Hilo.Container();
|
|
stage.addChild(container);
|
|
container.addChild(view);
|
|
view.getStage().should.equal(stage);
|
|
|
|
view.removeFromParent();
|
|
(view.getStage() === null).should.be.true();
|
|
});
|
|
|
|
it('getScaledWidth & getScaledHeight', function() {
|
|
view.getScaledWidth().should.equal(300);
|
|
view.getScaledHeight().should.equal(60);
|
|
});
|
|
|
|
it('addTo & removeFromParent', function(){
|
|
var container = new Hilo.Container();
|
|
for(var i = 0;i < 5;i ++){
|
|
container.addChild(new Hilo.View);
|
|
}
|
|
|
|
view.addTo(container, 3);
|
|
container.getChildIndex(view).should.equal(3);
|
|
|
|
view.removeFromParent();
|
|
container.getChildIndex(view).should.equal(-1);
|
|
|
|
view.addTo(container);
|
|
container.getChildIndex(view).should.equal(5);
|
|
});
|
|
|
|
it('getBounds', function(){
|
|
stage.addChild(view);
|
|
view.rotation = 30;
|
|
var res = [{x:0, y:0},{x:260, y:150},{x:230, y:202},{x:-29, y:52}];
|
|
res.width = 289;
|
|
res.height = 202;
|
|
res.x = -29;
|
|
res.y = 0;
|
|
view.getBounds().should.eql(res);
|
|
|
|
view.rotation = -80;
|
|
res = [{"x":0,"y":0},{"x":52,"y":-294},{"x":111,"y":-284},{"x":59,"y":10}];
|
|
res.width = 111;
|
|
res.height = 304;
|
|
res.x = 0;
|
|
res.y = -294;
|
|
view.getBounds().should.eql(res);
|
|
});
|
|
|
|
it('getConcatenatedMatrix', function(){
|
|
var container1 = new Hilo.Container({
|
|
rotation:30,
|
|
scaleX:0.5,
|
|
scaleY:0.2,
|
|
x:400,
|
|
y:-100
|
|
});
|
|
|
|
var container2 = new Hilo.Container({
|
|
rotation:60,
|
|
scaleX:2,
|
|
scaleY:-3,
|
|
x:-200,
|
|
y:300
|
|
});
|
|
|
|
view.rotation = -90;
|
|
|
|
stage.addChild(container1);
|
|
container1.addChild(container2);
|
|
container2.addChild(view);
|
|
|
|
view.getConcatenatedMatrix(container1).should.eql({"a":-1.299038105676658,"b":0.7500000000000002,"c":0.2000000000000001,"d":0.34641016151377546,"tx":-200,"ty":300});
|
|
view.getConcatenatedMatrix(container2).should.eql({"a":3.061616997868383e-17,"b":-0.5,"c":0.2,"d":1.2246467991473533e-17,"tx":0,"ty":0});
|
|
view.getConcatenatedMatrix(stage).should.eql({"a":-0.6375,"b":-0.19485571585149858,"c":0.05196152422706636,"d":0.11000000000000003,"tx":283.3974596215561,"ty":-98.03847577293367});
|
|
view.getConcatenatedMatrix(stage).should.eql(view.getConcatenatedMatrix());
|
|
});
|
|
|
|
it('hitTestPoint', function(){
|
|
|
|
});
|
|
|
|
it('hitTestObject', function(){
|
|
|
|
});
|
|
});
|
|
});
|
|
|
|
});
|