Codebase list leaflet / 380c44f
Test(GridLayer): add 2 new tests for zoom-in/-out in graphical browsers (#6201) * test(GridLayer): add zoom-in for graph browser Add a new test for "graphical browsers" for zoom-in animation, not relying on sinon.useFakeTimers so that it lets the animation executing on its own, and is less prone to breaking when the animation process is changed internally. * test(GridLayer): add zoom-out for graph browsers Add a new test for "graphical browsers" for zoom-out animation, not relying on sinon.useFakeTimers so that it lets the animation executing on its own, and is less prone to breaking when the animation process is changed internally. ghybs authored 5 years ago GitHub committed 5 years ago
1 changed file(s) with 110 addition(s) and 0 deletion(s). Raw diff Collapse all Expand all
+110
-0
spec/suites/layer/tile/GridLayerSpec.js less more
678678 // At 1ms, first pruneTile (map fires "viewreset" event => GridLayer._resetView => GridLayer._setView => _pruneTiles).
679679 });
680680
681 // NOTE: This test has different behaviour in PhantomJS and graphical
682 // browsers due to CSS animations!
683 // Similar to previous test but without using sinon.useFakeTimers, in order to avoid having to remain too close to how
684 // the tiles animation work internally, but remain at a more external level.
685 it.skipInPhantom("Loads 32, unloads 16 tiles zooming in 10-11, not faking time", function (done) {
686
687 // Restore setTimeout normal behaviour.
688 clock.restore();
689
690 grid.once('load', function () {
691 expect(counts.tileload).to.be(16);
692 expect(counts.tileunload).to.be(0);
693
694 // Wait for the end of the fade-in animation.
695 setTimeout(function () {
696 grid.once('load', function () {
697 expect(counts.tileload).to.be(32);
698
699 // We're one frame into the zoom animation,
700 // so GridLayer._setView with noPrune === undefined is not called yet
701 // No tile should be unloaded yet.
702 expect(counts.tileunload).to.be(0);
703
704 // Wait 250msec for the fade-in animation to complete,
705 // which triggers the tile pruning.
706 // Unfortunately this is also the duration of the zoom in
707 // animation, which prevents pruning during it.
708 // Therefore we do not have any intermediate state where
709 // the 12 'outside' tiles from z10 are pruned,
710 // but we directly arrive at the end of both animations,
711 // when all 16 tiles from z11 are active and all 16 tiles
712 // from z10 can be pruned.
713 setTimeout(function () {
714 expect(counts.tileunload).to.be(16);
715 done();
716 }, 250);
717 });
718
719 map.setZoom(11, {animate: true});
720 // Animation (and new tiles loading) starts after 1 frame.
721 L.Util.requestAnimFrame(function () {
722 // 16 extra tiles from z11 being loaded. Total 16 + 16 = 32.
723 expect(counts.tileloadstart).to.be(32);
724 });
725 }, 250);
726 });
727
728 map.addLayer(grid).setView([0, 0], 10);
729 // The first setView does not animated, therefore it starts loading tiles immediately.
730 // 16 tiles from z10 being loaded.
731 expect(counts.tileloadstart).to.be(16);
732 // First pruneTile (map fires "viewreset" event => GridLayer._resetView => GridLayer._setView => _pruneTiles).
733 });
734
681735 it("Loads 32, unloads 16 tiles zooming in 10-18", function (done) {
682736 grid.on('load', function () {
683737 expect(counts.tileloadstart).to.be(16);
762816 done();
763817 });
764818 });
819 });
820 });
821
822 map.setZoom(10, {animate: true});
823 // Animation (and new tiles loading) starts after 1 frame.
824 L.Util.requestAnimFrame(function () {
825 // We're one frame into the zoom animation, there are
826 // 16 tiles for z11 plus 4 tiles for z10 covering the
827 // bounds at the *beginning* of the zoom-*out* anim
828 expect(counts.tileloadstart).to.be(20);
829 });
830 });
831
832 map.addLayer(grid).setView([0, 0], 11);
833 // The first setView does not animated, therefore it starts loading tiles immediately.
834 // 16 tiles from z10 being loaded.
835 expect(counts.tileloadstart).to.be(16);
836 });
837
838 // NOTE: This test has different behaviour in PhantomJS and graphical
839 // browsers due to CSS animations!
840 // Similar to previous test but without using sinon.useFakeTimers, in order to avoid having to remain too close to how
841 // the tiles animation work internally, but remain at a more external level.
842 it.skipInPhantom("Loads 32, unloads 16 tiles zooming out 11-10, not faking time", function (done) {
843
844 // Restore setTimeout normal behaviour.
845 clock.restore();
846
847 // In this version, since the zoom-out and the tiles fade-in
848 // animation happen concurrently, we have only a single
849 // "load" event that is fired by the end of the animation.
850 grid.once('load', function () {
851 expect(counts.tileload).to.be(16);
852 expect(counts.tileunload).to.be(0);
853
854 // At the beginning of the zoom-out animation, only 4 tiles
855 // of z10 start loading, and since in these tests they load
856 // in 1 frame, they are ready before the animation starts
857 // loading other tiles. Therefore they already fire a "load"
858 // event now.
859 grid.once('load', function () {
860 expect(counts.tileload).to.be(20);
861 expect(counts.tileloadstart).to.be(20);
862 expect(counts.tileunload).to.be(0);
863
864 // By the end of the animation, the rest of the z10 tiles
865 // are ready, hence they fire a new "load" event.
866 // When that happens, the 4 z10 central tiles have already
867 // completed their fade-in animation, hence are flagged as
868 // "active", and the 16 z11 tiles can be pruned all at once
869 // by the last _setView of the animation.
870 grid.once('load', function () {
871 expect(counts.tileloadstart).to.be(32);
872 expect(counts.tileload).to.be(32);
873 expect(counts.tileunload).to.be(16);
874 done();
765875 });
766876 });
767877