1 <!doctype html> 2 <!-- 3 @license 4 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 5 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 6 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 7 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 8 Code distributed by Google as part of the polymer project is also 9 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt 10 --> 11 <html> 12 <head> 13 14 <title>neon-animated-pages tests</title> 15 16 <meta charset="utf-8"> 17 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 18 <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes"> 19 20 <script src="../../webcomponentsjs/webcomponents-lite.js"></script> 21 22 <script src="../../web-component-tester/browser.js"></script> 23 <script src="../../test-fixture/test-fixture-mocha.js"></script> 24 25 <link rel="import" href="../../test-fixture/test-fixture.html"> 26 <link rel="import" href="../neon-animated-pages.html"> 27 <link rel="import" href="../neon-animatable.html"> 28 <link rel="import" href="../animations/slide-from-left-animation.html"> 29 <link rel="import" href="../animations/slide-right-animation.html"> 30 <link rel="import" href="test-resizable-pages.html"> 31 32 </head> 33 <body> 34 35 <test-fixture id="basic"> 36 <template> 37 <neon-animated-pages> 38 </neon-animated-pages> 39 </template> 40 </test-fixture> 41 42 <test-fixture id="notify-resize"> 43 <template> 44 <neon-animated-pages> 45 <a-resizable-page></a-resizable-page> 46 <b-resizable-page></b-resizable-page> 47 <c-resizable-page></c-resizable-page> 48 </neon-animated-pages> 49 </template> 50 </test-fixture> 51 52 <test-fixture id="animate-initial-selection"> 53 <template> 54 <neon-animated-pages entry-animation="slide-from-left-animation" exit-animation="slide-right-animation" animate-initial-selection> 55 <neon-animatable></neon-animatable> 56 <neon-animatable></neon-animatable> 57 </neon-animated-pages> 58 </template> 59 </test-fixture> 60 61 <script> 62 suite('basic', function() { 63 }); 64 suite('notify-resize', function() { 65 test('only a destination page recieves a resize event', function(done) { 66 var animatedPages = fixture('notify-resize'); 67 var resizables = Polymer.dom(animatedPages).children; 68 var recieves = {}; 69 resizables.forEach(function(page) { 70 page.addEventListener('iron-resize', function(event) { 71 var pageName = event.currentTarget.tagName; 72 recieves[pageName] = pageName in recieves ? recieves[pageName] + 1 : 1; 73 }); 74 }); 75 animatedPages.selected = 2; 76 setTimeout(function() { 77 assert.deepEqual(recieves, { 78 'C-RESIZABLE-PAGE': 1 79 }); 80 done(); 81 }, 50); 82 }); 83 }); 84 suite('animate-initial-selection', function() { 85 test('\'neon-animation-finish\' event fired after animating initial selection', function(done) { 86 var animatedPages = fixture('animate-initial-selection'); 87 assert.isUndefined(animatedPages.selected); 88 var pages = Polymer.dom(animatedPages).children; 89 animatedPages.addEventListener('neon-animation-finish', function(event) { 90 assert.strictEqual(animatedPages.selected, 0); 91 assert.isFalse(event.detail.fromPage); 92 assert.deepEqual(event.detail.toPage, pages[0]); 93 done(); 94 }); 95 animatedPages.selected = 0; 96 }); 97 }); 98 </script> 99 100 </body> 101 </html> 102
