From 92c65f367b5cb63233f5d180c10fe8bbe5b57e16 Mon Sep 17 00:00:00 2001 From: Andy Joslin Date: Tue, 8 Apr 2014 10:27:37 -0600 Subject: [PATCH] refactor(ionList): make sure attributes sync with delegate --- js/ext/angular/src/directive/ionicList.js | 42 ++++-- .../angular/test/directive/ionicList.unit.js | 127 ++++++++++-------- 2 files changed, 96 insertions(+), 73 deletions(-) diff --git a/js/ext/angular/src/directive/ionicList.js b/js/ext/angular/src/directive/ionicList.js index c55fe656be..867f8fca16 100644 --- a/js/ext/angular/src/directive/ionicList.js +++ b/js/ext/angular/src/directive/ionicList.js @@ -248,25 +248,39 @@ function($animate, $timeout) { }); } - $scope.$watch('!!(' + $attr.showDelete + ')', function(value, oldValue) { - //Don't care about first false value - if (!value && !angular.isDefined(oldValue)) return; + if (angular.isDefined($attr.showDelete)) { + $scope.$watch('!!(' + $attr.showDelete + ')', function(value) { + listCtrl.showDelete(value); + }); + } + if (angular.isDefined($attr.showReorder)) { + $scope.$watch('!!(' + $attr.showReorder + ')', function(value) { + listCtrl.showReorder(value); + }); + } - if (value) listCtrl.closeOptionButtons(); - listCtrl.showDelete(value); + $scope.$watch(function() { + return listCtrl.showDelete(); + }, function(isShown, wasShown) { + //Only use isShown=false if it was already shown + if (!isShown && !wasShown) { return; } - $element.children().toggleClass('list-left-editing', value); - toggleNgHide('.item-delete.item-left-edit', value); + if (isShown) listCtrl.closeOptionButtons(); + + $element.children().toggleClass('list-left-editing', isShown); + toggleNgHide('.item-delete.item-left-edit', isShown); }); - $scope.$watch('!!(' + $attr.showReorder + ')', function(value, oldValue) { - //Don't care about first false value - if (!value && !angular.isDefined(oldValue)) return; + $scope.$watch(function() { + return listCtrl.showReorder(); + }, function(isShown, wasShown) { + //Only use isShown=false if it was already shown + if (!isShown && !wasShown) { return; } - if (value) listCtrl.closeOptionButtons(); - listCtrl.showReorder(value); + if (isShown) listCtrl.closeOptionButtons(); + listCtrl.showReorder(isShown); - $element.children().toggleClass('list-right-editing', value); - toggleNgHide('.item-reorder.item-right-edit', value); + $element.children().toggleClass('list-right-editing', isShown); + toggleNgHide('.item-reorder.item-right-edit', isShown); }); function toggleNgHide(selector, shouldShow) { diff --git a/js/ext/angular/test/directive/ionicList.unit.js b/js/ext/angular/test/directive/ionicList.unit.js index 082457adcd..54c4afce68 100644 --- a/js/ext/angular/test/directive/ionicList.unit.js +++ b/js/ext/angular/test/directive/ionicList.unit.js @@ -1,4 +1,3 @@ -'use strict'; describe('$ionicList controller', function() { beforeEach(module('ionic')); function setup(attrs) { @@ -114,92 +113,102 @@ describe('ionList directive', function() { expect(el.scope().$onReorder).toHaveBeenCalledWith(2,3); }); - it('should watch canSwipe if given', function() { + it('should watch attr.canSwipe if given', function() { var el = setup('can-swipe="shouldSwipe"'); flush(); expect(el.controller('ionList').canSwipeItems()).toBe(false); el.scope().$apply('shouldSwipe = true'); expect(el.controller('ionList').canSwipeItems()).toBe(true); + el.scope().$apply('shouldSwipe = false'); + expect(el.controller('ionList').canSwipeItems()).toBe(false); }); - it('should showDelete true', inject(function($animate) { - var el = setup('show-delete="shouldDelete"', '
'); + it('should watch attr.showDelete if given', function() { + var el = setup('show-delete="shouldDelete"'); flush(); - - spyOn(el.controller('ionList'), 'closeOptionButtons'); - spyOn(el.controller('ionList'), 'showDelete'); - spyOn($animate, 'removeClass'); - + expect(el.controller('ionList').showDelete()).toBe(false); el.scope().$apply('shouldDelete = true'); - - expect(el.controller('ionList').closeOptionButtons).toHaveBeenCalled(); - expect(el.controller('ionList').showDelete).toHaveBeenCalledWith(true); - expect(el.children().hasClass('list-left-editing')).toBe(true); - expect($animate.removeClass).toHaveBeenCalled(); - expect($animate.removeClass.mostRecentCall.args[0][0]) - .toBe(el[0].querySelector('.item-delete.item-left-edit')); - expect($animate.removeClass.mostRecentCall.args[1]).toBe('ng-hide'); - })); - - it('should showDelete false', inject(function($animate) { - var el = setup('show-delete="shouldDelete"', '
'); - flush(); - - el.scope().$apply('shouldDelete = true'); - - spyOn(el.controller('ionList'), 'closeOptionButtons'); - spyOn(el.controller('ionList'), 'showDelete'); - spyOn($animate, 'addClass'); - + expect(el.controller('ionList').showDelete()).toBe(true); el.scope().$apply('shouldDelete = false'); + expect(el.controller('ionList').showDelete()).toBe(false); + }); - expect(el.controller('ionList').closeOptionButtons).not.toHaveBeenCalled(); - expect(el.controller('ionList').showDelete).toHaveBeenCalledWith(false); - expect(el.children().hasClass('list-left-editing')).toBe(false); - expect($animate.addClass).toHaveBeenCalled(); - expect($animate.addClass.mostRecentCall.args[0][0]) - .toBe(el[0].querySelector('.item-delete.item-left-edit')); - expect($animate.addClass.mostRecentCall.args[1]).toBe('ng-hide'); - })); + it('should watch attr.showReorder if given', function() { + var el = setup('show-reorder="shouldReorder"'); + flush(); + expect(el.controller('ionList').showReorder()).toBe(false); + el.scope().$apply('shouldReorder = true'); + expect(el.controller('ionList').showReorder()).toBe(true); + el.scope().$apply('shouldReorder = false'); + expect(el.controller('ionList').showReorder()).toBe(false); + }); - it('should showReorder true', inject(function($animate) { - var el = setup('show-reorder="shouldReorder"', '
'); + it('should watch ctrl.showDelete when true', inject(function($animate) { + var el = setup('', '
'); flush(); spyOn(el.controller('ionList'), 'closeOptionButtons'); - spyOn(el.controller('ionList'), 'showReorder'); - spyOn($animate, 'removeClass'); - el.scope().$apply('shouldReorder = true'); + el.controller('ionList').showDelete(true); + el.scope().$apply(); expect(el.controller('ionList').closeOptionButtons).toHaveBeenCalled(); - expect(el.controller('ionList').showReorder).toHaveBeenCalledWith(true); - expect(el.children().hasClass('list-right-editing')).toBe(true); - expect($animate.removeClass).toHaveBeenCalled(); - expect($animate.removeClass.mostRecentCall.args[0][0]) - .toBe(el[0].querySelector('.item-reorder.item-right-edit')); - expect($animate.removeClass.mostRecentCall.args[1]).toBe('ng-hide'); + var deleteButtons = angular.element(el[0].querySelectorAll('.item-delete.item-left-edit')); + expect(deleteButtons.length).not.toBe(0); + expect(deleteButtons.hasClass('ng-hide')).toBe(false); + expect(el.children().hasClass('list-left-editing')).toBe(true); })); - it('should showReorder false', inject(function($animate) { + it('should watch ctrl.showDelete when false from true', inject(function($animate) { + var el = setup('', '
'); + flush(); + + spyOn(el.controller('ionList'), 'closeOptionButtons'); + + el.controller('ionList').showDelete(true); + el.scope().$apply(); + el.controller('ionList').showDelete(false); + el.scope().$apply(); + + expect(el.controller('ionList').closeOptionButtons.callCount).toBe(1); + var deleteButtons = angular.element(el[0].querySelectorAll('.item-delete.item-left-edit')); + expect(deleteButtons.hasClass('ng-hide')).toBe(true); + expect(deleteButtons.length).not.toBe(0); + expect(el.children().hasClass('list-left-editing')).toBe(false); + })); + + it('should watch ctrl.showReorder when true', inject(function($animate) { var el = setup('show-reorder="shouldReorder"', '
'); flush(); - el.scope().$apply('shouldReorder = true'); + spyOn(el.controller('ionList'), 'closeOptionButtons'); + + el.controller('ionList').showReorder(true); + el.scope().$apply(); + + expect(el.controller('ionList').closeOptionButtons).toHaveBeenCalled(); + var reorderButtons = angular.element(el[0].querySelectorAll('.item-reorder.item-right-edit')); + expect(reorderButtons.length).not.toBe(0); + expect(reorderButtons.hasClass('ng-hide')).toBe(false); + expect(el.children().hasClass('list-right-editing')).toBe(true); + })); + + it('should watch ctrl.showReorder when false from true', inject(function($animate) { + var el = setup('show-reorder="shouldReorder"', '
'); + flush(); spyOn(el.controller('ionList'), 'closeOptionButtons'); - spyOn(el.controller('ionList'), 'showReorder'); - spyOn($animate, 'addClass'); - el.scope().$apply('shouldReorder = false'); + el.controller('ionList').showReorder(true); + el.scope().$apply(); + el.controller('ionList').showReorder(false); + el.scope().$apply(); - expect(el.controller('ionList').closeOptionButtons).not.toHaveBeenCalled(); - expect(el.controller('ionList').showReorder).toHaveBeenCalledWith(false); + expect(el.controller('ionList').closeOptionButtons.callCount).toBe(1); + var reorderButtons = angular.element(el[0].querySelectorAll('.item-reorder.item-right-edit')); + expect(reorderButtons.length).not.toBe(0); + expect(reorderButtons.hasClass('ng-hide')).toBe(true); expect(el.children().hasClass('list-right-editing')).toBe(false); - expect($animate.addClass).toHaveBeenCalled(); - expect($animate.addClass.mostRecentCall.args[0][0]) - .toBe(el[0].querySelector('.item-reorder.item-right-edit')); - expect($animate.addClass.mostRecentCall.args[1]).toBe('ng-hide'); })); });